Firstcraft - website design
Making Custom Handcrafted Shoes Accessible Through E-commerce
I designed Firstcraft’s custom footwear e-commerce experience, simplifying shoe personalisation, sizing, and checkout through intuitive UX and interaction design.
5 mins read
Product
Custom Product E-commerce (B2C)
Role
Responsible for UX Flow · IA · Wireframes · Responsive UI design
Method
UX Strategy · Product Configuration · Interaction Design · UI Design
FirstCraft bridges the gap between mass-produced footwear and expensive bespoke shoes with affordable, handcrafted customisation. I designed FirstCraft’s e-commerce experience using interaction design to simplify shoe selection, personalisation, sizing, and checkout, helping customers create shoes that reflect their fit and style.
THE PROBLEM & OPPORTUNITY
The Gap Between Fit and Affordability
Through problem framing, I identified the gap between limited retail choice and expensive bespoke footwear, shaping a design strategy around accessible, personalised shopping.
FirstCraft had an opportunity to bridge this gap by combining handcrafted quality with accessible pricing and an intuitive e-commerce experience, enabling customers to personalize their shoes online without the cost and complexity of traditional bespoke shopping.
THE SOLUTION
A 5-Step Journey to Personalized Footwear
FirstCraft simplifies custom shoe buying by guiding customers through model selection, material customization, personal details, and individual foot measurements, with real-time visual feedback that makes every choice easier and more confident.
Model → Design → Materials → Decorations → Size
User PERSONA
Understanding FirstCraft's Prospective Customers
I created three prospective customer personas to represent different needs around fit, personal style, and affordability, helping define who FirstCraft's e-commerce experience should serve and what matters most to them.
Rahul Mehta
32 · Male · Working professional
Need: Comfortable shoes that fit both feet properly.
Pain point: Standard shoe sizes don't accommodate his uneven foot sizes.
Goal: Find well-fitting, handcrafted shoes without bespoke pricing.
Arjun Kapoor
29 · Male · Creative professional
Need: Shoes that reflect his personal style.
Pain point: Ready-made footwear offers limited personalization.
Goal: Customize shoe styles, leather, colors, and monograms online.
Priya Sharma
28 · Female · Urban professional
Need: Premium-looking footwear at an accessible price.
Pain point: Personalized footwear can feel expensive and complicated to order.
Goal: Create distinctive shoes through a simple online buying experience.
IDEATION - IA - WIREFRAMES
From Customer Challenges to Design Opportunities
I used problem framing and How Might We questions to explore customisation concepts and shape a design strategy for a clearer shopping journeys to shape a more intuitive experience.
I organised the website around Shop, Discover, Support, and My Account, creating a clear information hierarchy to reduce cognitive load and help customers navigate customisation, support, and orders.
wireframes
Turning the Journey into a Tangible Experience
I translated the information architecture into web and mobile wireframes, defining layouts, customisation controls, and product previews through interaction design to support a consistent cross-screen experience.
VISUAL ASTHETIC
A visual language rooted in craft, not luxury.
Guided by design principles of craftsmanship and clarity, FirstCraft’s visual system paired warm, earthy colours with editorial serif headlines and clean sans-serif body text.
Brand Voice: Grounded, honest, and personal—summarized by the core principle: "You design, we make, we ship."
TESTING + ITERATION
From Hidden Actions to Confident Choices
Through iterative design, I replaced the hidden pencil action with visible EDIT and ADD TO CART buttons on saved design cards, clarifying available interaction states and making the next step easier to recognise.
Explore all pages
Designed across every screen — without losing the experience.
Landing Page: I designed the landing page to communicate FirstCraft’s value from the first interaction, helping customers explore handcrafted footwear, understand the customisation experience, and move confidently from discovery to design across desktop and mobile.
Shopping Journey Pages:I designed the core shopping journey—from shoe customisation and product details to size guidance, measurement calculations, cart, and checkout—to address the complexity of personalisation and fit-related decisions and help customers move from creating their ideal shoes to placing an order.
Other Pages: I designed supporting pages and email communications to answer customers’ questions about pricing, craftsmanship, and how the process works. Together, these touchpoints make the bespoke experience easier to understand, set clear expectations, and reinforce confidence in the brand.
FINAL EXPERIENCE
The complete bespoke experience — from first click to order confirmed.
The complete FirstCraft experience covered three primary flows: discovery, customisation, and post-purchase. Each flow was designed as a coherent journey — not a collection of screens. 01-Discovery & Home: Landing page, model selection 02-Shoe Configurator: The five-step customisation experience — model, design variant, per-zone leather colours, decorations, and individual foot sizing. 03-Order & Purchase: Order confirmation, success states
Solution & Outcomes
Using product thinking, I connected discovery, customisation, sizing, and checkout into one coherent journey, applying a clear design rationale to reduce uncertainty and support more confident purchase decisions. The outcome was a cohesive digital experience that connected craftsmanship with usability, helping customers understand their options, make informed decisions, and create shoes that reflect their individual fit and style preferences.
What i learned
This project taught me that personalisation is only valuable when customers can navigate it with confidence. Every additional choice needs clear guidance, every measurement needs understandable instructions, and every saved design needs an obvious next step. I learned to apply systems thinking by looking beyond individual screens and connecting discovery, customisation, sizing, and checkout into one coherent experience.
Explore my other case studies
web application
Building a Centralized Control Platform for Identity Verification
Structuring complex identity verification operations into a scalable control platform that balances administrative efficiency, governance, and system-wide visibility while enabling enterprises to manage tenants, users, licenses, and platform health.
Read Case Study
website re-design
Helping Visitors Find the Right Security Solution
Securegrid's broad cybersecurity portfolio made clear product discovery essential. I reorganised the website journey so visitors could understand the offering, explore relevant capabilities, connect solutions to industry needs, and enquire.
Read Case Study