Mockups for an opinionated UI/UX redesign of SDIApp. The app currently has phone/OTP auth, org onboarding, and member management — and is about to grow into product catalog, ordering, and loyalty. Goal: a design that a non-technical Moldovan shop owner can use on a 5" phone without a tutorial, while also serving distributor managers doing admin work in the same app.
The same home screen rendered in 4 different visual directions.
Done — chose C-Warm + A-Indigo hybridWarm structure + indigo palette. Felt too "admin dashboard", too generic, too dead. Kept for reference.
RejectedNo identity hero, no "coming soon" placeholder, no indigo. Setup-momentum card as hero. Bordeaux / Forest / Terracotta to compare.
Ready · review nowFull palette (light + dark), type scale, spacing, radii, elevation, buttons, inputs, indicators, icons, chrome — ready to copy into constants/Colors.ts.
4 bottom tabs that hold everything. Acasă · Catalog/Produse · Comenzi · Cont. Mocked up in Terracotta with all 4 tabs visible and a worker/owner/distributor comparison.
Ready · review nowSide-by-side mockup of all 3 navigation models. Useful background, but superseded by 3c.
ReferenceTabs adapt to each role's daily job. Superseded by v3.
ReferenceCont moves behind avatar tap (bottom sheet). 4th tab freed for the role's most important secondary surface. Includes 6 role variants and avatar-tap interaction mockup.
Ready · review nowReplaces the default Stack header on members/* (and every other nested screen) with a Terracotta-native treatment. Four variants compared in context, with a recommendation and primitive anatomy.
Sign-in, OTP, onboarding, home, members list, invite member.
After steps 2 + 3
Mockups for the React Native UI that will land on top of Phases 1-6 backends.
Two-sided commerce (distributor + retailer halves of the same transaction),
five roles, eight surfaces. Start with journey.html
to see the system end-to-end; then home-roles.html for the role-tuned
Acasă; then the eight surface deep-dives; and finally states.html
for the empty/error pattern catalogue.
Holistic anchor: 10 phones interleaved across distributor + retailer lanes, from product creation through invoice settlement. Annotations call out which Cloud Function fires at each step.
Start here · holistic anchorretailer_worker / admin / owner + distributor_agent / owner. Same chrome, different "today's attention" content. Sets the daily-flow tone per role.
Holistic anchorList + product detail with ledger + create-product sheet + adjust-stock sheet. Owner has full CRUD; agent has adjust-stock as primary action.
SurfaceLinked distributors strip, product grid with quick-add, reorder-from-last hero, favorites strip. Owner + worker variants. Empty link state included.
SurfaceSticky outlet banner (eliminates "outlet missing" error). Live totals via computeOrderTotals arithmetic. Worker locked-outlet variant + insufficient stock + paused link error states.
SurfaceDistributor incoming + retailer outgoing, grouped by status with urgency signaling. Agent variant shows permission gating (no reject CTA).
SurfaceEvents timeline center. Four (role, state) variants: dist submitted / delivered, retailer confirmed / shipped. Maps every state-machine transition to a CTA.
SurfaceOwner-only. List with default badge + map-pin sheet + archive flow with in-use warning (preserved by deliveryAddressSnapshot).
SurfaceAgent's daily flow on the Vizite tab: hero "Adaugă magazin nou", lookup
by phone/IDNO branching to existing-org (send link request) or new-org
(bootstrap full account + invitation + link in one tap), in-person QR
handoff with 6-digit code. Maps to Phase 3's inviteExistingRetailerToLink
(branch A) and inviteRetailerToOnboard → claimRetailerOnboardingInvitation
(branch B).
Distributor side: onboardings-by-your-team as hero, retailer-pulled demoted to a rare-case tab. Retailer side: "Te-a invitat un distribuitor" as signature hero, manual self-request demoted. Plus error-state sheet for the rare fallback flow.
Surface · post-onboarding inboxIssue flow with counter preview + immutable invoice doc (ink-inverted header, total in Romanian words) + partial payment with progress bar + retailer settled view.
SurfacePattern catalogue for <EmptyHero /> and <ErrorCard />: 8 empty states across surfaces + 8 error states mapped to Firebase error codes. Inline never toast.
Cross-cuttingOpen them in any browser. They're plain HTML/CSS — no build, no JS dependencies, no network.
The phone frames are stylized (not pixel-perfect device renders). Focus on the content, layout, and visual language inside each frame, not the chrome around it.
After reviewing each step, give feedback and I'll iterate before moving to the next.