Redesign: Poppins, a two-step destination, and a splash that says what the app does
The effort pass, end to end. Every screen was run through one test — if I remove this sentence, does the customer make a worse decision? — and the parts that failed it are gone. The flow Home ▸ BOOK ▸ Where is it going? ▸ When shall we collect? ▸ details ▸ booked BOOK opens a sheet, not a form. The destination is browsed state-then-district because a flat list of every serviceable district survives twelve and not sixty, and search cuts across states because somebody who knows they are sending to Chennai should not have to know which state it is in. Districts multi-select, but only where the server allows it: BookingLimits advertises maxDestinations: 1 until the Miler build keys on consignmentid, and a sheet that ignored that would sell a booking the network cannot complete. The pickup window is now a step the customer answers rather than a slot chosen for them. A pickup window is a promise about somebody's afternoon. What the screens stopped saying Home lost the orb caption for returning customers and a four-cell live card. Send lost the city strip, both address fields, the optional disclosure and three sentences about charging — the route, the packages and the button are what is left. Tracking lost a radar with a bike in it, a Milers-in-your-zone count, a "Step 2 of 7" and a sentence describing the screen you were looking at. The window sheet lost "Fastest pickup", "4 Milers nearby" and "Relaxed evening handover". Type Poppins, which has no variable release — four static cuts, and the sans styles set fontWeight alone because fontVariations on a static font is ignored in silence. Every weight dropped a step and the tracking went deeper: Poppins is built on near-circles and carries more ink than the humanist faces before it. Objects One lit sphere on Home, and the primary button now takes its gradient and rim because a committing action that is not lit like the hero reads as a different material. The tracking rail's connector is crimson as far as the parcel has come, so the line is the progress bar. Confirmation is a white tick on green: crimson is this app's action colour and that screen has nothing left to do. Bugs found on the way The OTP screen dropped digits. Four fields passing focus along lose a keystroke that arrives mid-transition, so "1234" became "124" and the screen answered "That code did not match" — blaming the customer for its own race. One field now, four boxes that only draw. Nothing ever asked for the customer's location: detectPickupLocation was the OTP screen's job, so a restored session or an auto-login never triggered the permission prompt and the pickup map had nothing to centre on. The launcher icon and both splash screens pointed at a house drawn as two vector paths — a placeholder that shipped. The splash clock started when the widget was built rather than when it was visible, so the truck got 0.45s of a 1.8s beat behind Android's own splash. It waits on waitUntilFirstFrameRasterized now, raced against a timeout so a binding that never reports one cannot strand the app. Also: design/screens/ holds all 19 screens under readable names, tool/ has the scripts that refresh them and rebrand the Lottie, and DESIGN.md is current. flutter analyze clean. 88 tests, 1 skipped. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01EqVJPB9B4QuieZnBAAKgYQ
@@ -1,11 +1,11 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Shown from process start until the first Flutter frame. Matches the white
|
||||
Login screen so the handover is invisible. -->
|
||||
<!-- Shown from process start until the first Flutter frame.
|
||||
|
||||
Deliberately empty. It used to centre a mark on it, which meant the
|
||||
customer saw a logo, then Flutter's own splash animation, then the logo
|
||||
again — the same image twice with a jump between them. The window
|
||||
background is now the surface the Flutter splash opens on, so the handover
|
||||
is a single continuous screen. -->
|
||||
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
|
||||
<item android:drawable="@color/dm_surface" />
|
||||
<item
|
||||
android:gravity="center"
|
||||
android:width="120dp"
|
||||
android:height="120dp"
|
||||
android:drawable="@drawable/dm_mark_brand" />
|
||||
</layer-list>
|
||||
|
||||
@@ -1,24 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Doormile mark in brand maroon, for the launch screen.
|
||||
Art is authored on a 24x24 grid and scaled into the 66dp safe zone. -->
|
||||
<vector xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:width="108dp"
|
||||
android:height="108dp"
|
||||
android:viewportWidth="108"
|
||||
android:viewportHeight="108">
|
||||
<group android:scaleX="2.2" android:scaleY="2.2"
|
||||
android:translateX="27.6" android:translateY="27.6">
|
||||
<path
|
||||
android:pathData="M3.6,9.2 L12,4 L20.4,9.2 L20.4,20 L3.6,20 Z"
|
||||
android:strokeColor="#960019"
|
||||
android:strokeWidth="1.8"
|
||||
android:strokeLineJoin="round"
|
||||
android:strokeLineCap="round" />
|
||||
<path
|
||||
android:pathData="M9.6,20 L9.6,13.4 L14.4,13.4 L14.4,20"
|
||||
android:strokeColor="#960019"
|
||||
android:strokeWidth="1.8"
|
||||
android:strokeLineJoin="round"
|
||||
android:strokeLineCap="round" />
|
||||
</group>
|
||||
</vector>
|
||||
BIN
android/app/src/main/res/drawable/dm_mark_fg.png
Normal file
|
After Width: | Height: | Size: 38 KiB |
@@ -1,24 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Doormile mark in white, for the adaptive-icon foreground.
|
||||
Art is authored on a 24x24 grid and scaled into the 66dp safe zone. -->
|
||||
<vector xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:width="108dp"
|
||||
android:height="108dp"
|
||||
android:viewportWidth="108"
|
||||
android:viewportHeight="108">
|
||||
<group android:scaleX="2.2" android:scaleY="2.2"
|
||||
android:translateX="27.6" android:translateY="27.6">
|
||||
<path
|
||||
android:pathData="M3.6,9.2 L12,4 L20.4,9.2 L20.4,20 L3.6,20 Z"
|
||||
android:strokeColor="#FFFFFF"
|
||||
android:strokeWidth="1.8"
|
||||
android:strokeLineJoin="round"
|
||||
android:strokeLineCap="round" />
|
||||
<path
|
||||
android:pathData="M9.6,20 L9.6,13.4 L14.4,13.4 L14.4,20"
|
||||
android:strokeColor="#FFFFFF"
|
||||
android:strokeWidth="1.8"
|
||||
android:strokeLineJoin="round"
|
||||
android:strokeLineCap="round" />
|
||||
</group>
|
||||
</vector>
|
||||
BIN
android/app/src/main/res/drawable/dm_splash_blank.png
Normal file
|
After Width: | Height: | Size: 803 B |
@@ -1,11 +1,11 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Shown from process start until the first Flutter frame. Matches the white
|
||||
Login screen so the handover is invisible. -->
|
||||
<!-- Shown from process start until the first Flutter frame.
|
||||
|
||||
Deliberately empty. It used to centre a mark on it, which meant the
|
||||
customer saw a logo, then Flutter's own splash animation, then the logo
|
||||
again — the same image twice with a jump between them. The window
|
||||
background is now the surface the Flutter splash opens on, so the handover
|
||||
is a single continuous screen. -->
|
||||
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
|
||||
<item android:drawable="@color/dm_surface" />
|
||||
<item
|
||||
android:gravity="center"
|
||||
android:width="120dp"
|
||||
android:height="120dp"
|
||||
android:drawable="@drawable/dm_mark_brand" />
|
||||
</layer-list>
|
||||
|
||||
@@ -1,6 +1,15 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- The Doormile mark on white.
|
||||
|
||||
The foreground was a house drawn as two vector paths — a placeholder that
|
||||
shipped, and the reason the launcher showed a generic home icon next to
|
||||
the name Doormile. It is the real mark now, rendered from
|
||||
`assets/images/doormile-icon.png` into the 66dp safe zone.
|
||||
|
||||
White background rather than brand: the mark carries its own crimson ring,
|
||||
and on a maroon field that ring disappears into it. -->
|
||||
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
|
||||
<background android:drawable="@color/dm_brand" />
|
||||
<foreground android:drawable="@drawable/dm_mark_white" />
|
||||
<monochrome android:drawable="@drawable/dm_mark_white" />
|
||||
<background android:drawable="@color/dm_surface" />
|
||||
<foreground android:drawable="@drawable/dm_mark_fg" />
|
||||
<monochrome android:drawable="@drawable/dm_mark_fg" />
|
||||
</adaptive-icon>
|
||||
|
||||
@@ -1,6 +1,15 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- The Doormile mark on white.
|
||||
|
||||
The foreground was a house drawn as two vector paths — a placeholder that
|
||||
shipped, and the reason the launcher showed a generic home icon next to
|
||||
the name Doormile. It is the real mark now, rendered from
|
||||
`assets/images/doormile-icon.png` into the 66dp safe zone.
|
||||
|
||||
White background rather than brand: the mark carries its own crimson ring,
|
||||
and on a maroon field that ring disappears into it. -->
|
||||
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
|
||||
<background android:drawable="@color/dm_brand" />
|
||||
<foreground android:drawable="@drawable/dm_mark_white" />
|
||||
<monochrome android:drawable="@drawable/dm_mark_white" />
|
||||
<background android:drawable="@color/dm_surface" />
|
||||
<foreground android:drawable="@drawable/dm_mark_fg" />
|
||||
<monochrome android:drawable="@drawable/dm_mark_fg" />
|
||||
</adaptive-icon>
|
||||
|
||||
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 4.4 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 6.9 KiB |
|
Before Width: | Height: | Size: 5.1 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 6.9 KiB After Width: | Height: | Size: 17 KiB |
@@ -1,11 +1,16 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<resources>
|
||||
<!-- Android 12+ uses the platform splash screen API. -->
|
||||
<!-- Android 12+ uses the platform splash screen API, and it cannot be
|
||||
switched off: leave the icon unset and the platform draws the launcher
|
||||
icon instead. So it is set to a fully transparent one, over the same
|
||||
white the Flutter splash opens on, which makes the system beat a blank
|
||||
white screen indistinguishable from the frame after it.
|
||||
|
||||
The customer sees two screens, not three: the truck, then the mark. -->
|
||||
<style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
|
||||
<item name="android:windowBackground">@drawable/launch_background</item>
|
||||
<item name="android:windowSplashScreenBackground">@color/dm_surface</item>
|
||||
<item name="android:windowSplashScreenAnimatedIcon">@drawable/dm_mark_brand</item>
|
||||
<item name="android:windowSplashScreenIconBackgroundColor">@color/dm_surface</item>
|
||||
<item name="android:windowSplashScreenAnimatedIcon">@drawable/dm_splash_blank</item>
|
||||
</style>
|
||||
<style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar">
|
||||
<item name="android:windowBackground">@color/dm_surface</item>
|
||||
|
||||
@@ -1,11 +1,16 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<resources>
|
||||
<!-- Android 12+ uses the platform splash screen API. -->
|
||||
<!-- Android 12+ uses the platform splash screen API, and it cannot be
|
||||
switched off: leave the icon unset and the platform draws the launcher
|
||||
icon instead. So it is set to a fully transparent one, over the same
|
||||
white the Flutter splash opens on, which makes the system beat a blank
|
||||
white screen indistinguishable from the frame after it.
|
||||
|
||||
The customer sees two screens, not three: the truck, then the mark. -->
|
||||
<style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
|
||||
<item name="android:windowBackground">@drawable/launch_background</item>
|
||||
<item name="android:windowSplashScreenBackground">@color/dm_surface</item>
|
||||
<item name="android:windowSplashScreenAnimatedIcon">@drawable/dm_mark_brand</item>
|
||||
<item name="android:windowSplashScreenIconBackgroundColor">@color/dm_surface</item>
|
||||
<item name="android:windowSplashScreenAnimatedIcon">@drawable/dm_splash_blank</item>
|
||||
</style>
|
||||
<style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar">
|
||||
<item name="android:windowBackground">@color/dm_surface</item>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<resources>
|
||||
<!-- Doormile brand tokens, mirrored from lib/ui/tokens.dart -->
|
||||
<color name="dm_brand">#960019</color>
|
||||
<color name="dm_brand">#8F0F06</color>
|
||||
<color name="dm_surface">#FFFFFF</color>
|
||||
</resources>
|
||||
|
||||