Legacy
Four reasons to buy a suit
Each persona came from a different buying moment: a first job, a business trip, an engagement and a gift.
Omar, 23, junior architect
First corporate job, limited budget. “I need to look like I own the room, even on an intern’s salary.”
Kareem, 45, CEO
Travels constantly, no time to browse. “If the shirt fits, I’ll buy five of them.”
Zaid, 29, groom-to-be
Wants the whole look in one place and fears colours that look different in real life.
Layla, 39, buying a gift
Buying for her husband without knowing his size, and wants easy exchanges.
What the app has to get right
- See the cut and fabric clearly, without a model’s face or body type in the way.
- Detailed material descriptions, like “100% wool” or “wrinkle-free”, to justify the price.
- An accurate, easy size guide that removes the fear of the wrong fit.
- Search to checkout in under three minutes.
- See which shirts and ties match a suit.
Structure before styling
Every path, browsing categories, opening a saved item or jumping to the cart, leads to the same product page and the same short checkout. Nothing a buyer needs is more than two levels deep. I solved every screen in grayscale first; the layouts barely changed when colour arrived; whether the structure works is what usability testing still has to show.
- Shopping cart2 screens
- Checkout
- Thank you
- Checkout
- Categories1 screen
- Product page
- Wishlist1 screen
- Product page
- Profile2 screens
- Personal info
- Shipping address
- Product page
- Start
- End
- Screen
- System action
- Decision
Shopping
- Start: Splash
- Screen: Onboarding
- Screen: Log in / sign up
- Decision: Home: how to find it?
- Browse: suits, blazers, shirts, shoes, accessories
- Saved items: wishlist
- A product on Home
- Screen: Product: info, ratings, similar
- System action: Add to cart
- Screen: Cart and order summary
- Screen: Checkout: payment and shipping
- End: Thank you, then continue shopping
Wireframe: home Wireframe: product Wireframe: checkout
A tailor’s palette
A strict 60-30-10 palette keeps the app calm and premium: warm cream (#F0EADC) for surfaces, charcoal (#2F2F2F) for text, and cognac brown (#754F23) only for prices and the one action that matters. Libre Bodoni gives headings the voice of a classic tailor; Lato keeps labels readable at small sizes. Products are shot flat on a plain background so the cut and fabric are the hero.
From Figma A few colour variables and two typefaces. Read from the Legacy Figma file: four colour variables and the fonts used on the high-fidelity screens.
The system in use
Colour
Contrast is calculated against white or the darkest ink, whichever is higher. Click a swatch to copy its hex.
A tailor’s palette
Typefaces
- Libre BodoniDisplay: the boutique voice
- LatoBody and interface
Home Product: size chosen up front Cart Checkout on one screen
Splash Profile: re-order quickly
Prototype: from splash to “Order confirmed”
The live Figma prototype: start at “Enter the Shop” and try to check out the way Kareem would.
Prefer a quick look? Below are the key screens, one at a time, with notes.
Tap through the shopping flow from the Figma prototype, built around the goal of checking out in under three minutes.
1 / 9 A boutique welcome
Tap the screen, swipe, or use ← → to move through the flow.
Reflection
Writing four very different personas changed the product more than any visual decision: fabric detail for one, speed for another, matching suggestions for the third, clear sizing for the fourth. Next I would test time from search to checkout against the three-minute goal, and add gift packaging and a “complete the look” bundle.
