Tailr Landing Page – Design Process

Tailr Landing Page – Design Process

Goal & Concept

Tailr is a mobile-first concept for a fashion service that removes traditional sizing and offers clothing tailored to each customer’s unique fit profile. The design had to communicate Tailr’s USP quickly, reassure users with clarity and trust signals, and guide them towards the key action: starting their fit profile.

Layout & Structure

The page is structured as a simple narrative flow:

1. Hero section – Bold headline (“No sizes. Just your fit.”) with supporting copy that immediately conveys the problem Tailr solves. A strong primary CTA (“Start My Fit”) and a secondary CTA (“Browse Styles”) give users a clear path.
2. Shop New Arrivals – A familiar grid of products builds instant credibility and anchors the concept as a “real” store. This section balances innovation (AI-fit technology) with the familiarity of browsing categories like trousers, jumpers, shoes, and accessories.
3. Perfect fit in 3 steps – Simplified onboarding explained in a light, human way. Emojis and short copy break down the journey into “measure - style - receive”, making the process feel accessible and non-technical.
4. Social Proof – Four persona-based reviews, each with a face, name, and star rating, bring human trust and relatability. This section highlights Tailr’s benefits for different body types and lifestyles.
5. FAQ – Anticipates doubts (“How do I take measurements?”, “How long does delivery take?”, “What if it doesn’t fit?”). This reduces hesitation and supports conversion by answering key blockers upfront.

Visual Design

• Colour palette: Neutral beige background creates a soft, premium feel, with navy for text and buttons to ensure contrast. Success green (#109A65) is used sparingly for highlights (links, emphasis, customer count) to signal trust and positivity.
• Typography: Clear hierarchy with all-caps for structural sections (e.g. SHOP NEW ARRIVALS, FAQ) and sentence case for narrative headers (e.g. Perfect fit in 3 steps). This creates balance between functional navigation and storytelling.
• Icons & emojis: Used in the 3-step explainer to make abstract tasks (uploading photos, choosing styles) feel simple and friendly.
• Imagery: Free Pexels images are used as placeholders. While not custom brand photography, they give the concept realism and demonstrate how product imagery could be integrated in a live version.

UX Considerations

• Navigation uses universally recognised icons (menu, search, wishlist, basket) to reduce friction.
• CTA hierarchy is consistent “Start My Fit” as the primary action is repeated lower on the page for scrollers.
• Content flow mirrors user psychology: What is Tailr? - How does it work? - Why should I trust it? - Common questions - Act now.

Reflection & Next Steps

This design shows how a mobile landing page for Tailr could combine storytelling, trust, and usability. If developed further, next steps would include:

• Interactive Figma prototype showing the measurement upload journey.
• A/B testing CTA colour (navy vs green) to maximise conversion.
• Custom product photography and branded illustrations to replace placeholders.