Modern Attire
Overview
Modern Attire's web users were struggling with a complex purchasing process, leading to widespread cart abandonment and lost revenue. Analytics revealed that 50% of users abandoned before adding items to cart, while 70% of those who did add items left at registration. The cumbersome checkout flow and measurement uncertainty had created significant barriers during the critical conversion moments when customers were ready to buy. I designed a streamlined e-commerce experience to eliminate these friction points, focusing on simplified checkout flows and intuitive measurement tools that removed purchase anxiety. The result: a responsive web experience that transforms browsing frustration into confident purchases, achieving a 35% reduction in cart abandonment and 28% increase in completed sales.
Design Process
Research
Competitive Analysis
Survey
User Interviews
Persona
Ideate
Sketeches
User flow
Design
Wireframes
Styleguide
Components
High Fidelity Screens
Prototype
Test
Usability Test
Outcome
What you're seeing: Product discovery interface, simplified checkout flow, intuitive measurement tools, and integrated customer review system.
Click on each image to enlarge
Want the full story?
Deep dive into my full design process below
Problem
Modern Attire's mobile shopping experience was failing to convert browsers into buyers.
Analytics revealed a clear pattern of user frustration throughout the shopping journey. Approximately 50% of users explored multiple products but abandoned before adding items to cart. Even more concerning, 70% of shoppers who did add items abandoned at the registration page. The complex checkout process and measurement uncertainty created significant barriers to purchase completion, resulting in lost revenue and customer dissatisfaction with the mobile experience.
Solution
A streamlined e-commerce experience with simplified checkout and intuitive measurement tools.
My research-driven redesign targeted the critical drop-off points with strategic improvements. The solution implemented a streamlined guest checkout option to remove the registration barrier, developed intuitive measurement tools that simplified the suit-fitting process, and integrated social proof through accessible product reviews. These changes resulted in a 35% reduction in cart abandonment and a 28% increase in completed purchases.
My Role
I served as the UI/UX Designer for this project, handling both the research and design phases.
Responsibilities
- UX Design
- UX Research
Timeline
- 1 month
Tools
- Pencil and Paper
- Figma
Solution in Action
Click on the image to enlarge
Guest Checkout Flow
Eliminates the registration barrier that caused 70% of shoppers to abandon their cart, allowing customers to complete purchases without creating an account
Interactive Measurement Interface
Simplifies the complex suit-fitting process with visual guidance, reducing uncertainty and building customer confidence in their purchase decisions
Click on the image to enlarge
Click on the image to enlarge
Product Page with Social Proof
Enhances buyer confidence through accessible product reviews and customer testimonials, addressing hesitation and increasing conversion rates
Research
To address the high abandonment rates identified in our problem analysis, I developed a targeted research strategy:
- Conducted a competitive analysis of leading e-commerce suit retailers to identify successful checkout patterns that reduce the 70% abandonment rate
- Performed user interviews focused on understanding why shoppers leave before adding items to cart despite viewing multiple products
- Distributed targeted surveys to collect insights on registration page friction points and potential solutions
- Developed a detailed persona that captured the needs and frustrations of Modern Attire's target customers, directly informing our ideation process
Competitive Analysis
Building on the identified abandonment issues, I analyzed key competitors in the online suit retail space to identify checkout processes with lower drop-off rates, examine effective measurement guidance, evaluate guest checkout implementations, and discover review integration methods that build customer confidence.
Click on each image to enlarge
User Surveys
Following the competitive analysis, I surveyed 12 participants to identify key pain points and preferences in the online suit shopping experience:
- 100% of participants emphasized the importance of clear product descriptions and images
- 75% considered guest checkout essential, directly addressing our registration page abandonment issue
- 92% indicated they purchase rather than rent suits
- 42% rated customization guidance as highly important (4 out of 5)
Click on each image to enlarge
User Interviews
To gain deeper insights beyond our survey data, I conducted in-depth interviews with selected participants who matched our target user profiles. These conversations revealed:
- Shopping anxiety was common when purchasing suits online, primarily due to sizing uncertainty
- Users strongly preferred simplified registration processes when shopping online compared to in-store experiences
- Most participants maintained different suit variations for different occasions, increasing the importance of detailed product information
- The ability to see customer reviews was identified as a critical "deal-sealer" for online purchases
Persona
Synthesizing insights from the surveys and interviews, I developed a detailed persona to represent our target users and their specific pain points. This persona captured key characteristics: concerned about fit accuracy when shopping online, frustrated by mandatory registration requirements, seeking clear product information, and relying on reviews from other customers to make confident purchasing decisions.
Click on each image to enlarge
Ideate
Sketches
Guided by our persona's needs and the research insights, I began the ideation process by sketching key screens for the Modern Attire experience: the checkout process, customization interface, browsing/all suits page, and a detailed single suit page that showcases product information. These sketches explored visual solutions to address the abandonment issues identified in our research.
Click on each image to enlarge
User Flow
To visualize the complete user journey, I created detailed flows focusing on two critical paths: customization flow and guest checkout. These flows mapped how users would navigate from browsing to measurement input to purchase completion, ensuring a seamless experience that directly addressed the 70% abandonment rate at the registration page.
Click on the image to enlarge
Design
Wireframes
Transitioning from sketches to more defined solutions, I created detailed wireframes that refined the key user journeys. These wireframes focused on optimizing the customization experience, simplifying the guest checkout process, and enhancing product pages with review integration, directly addressing the pain points identified in our research.
Style Guide
With the wireframes establishing the functional foundation, I developed a comprehensive style guide for Modern Attire. I carefully selected colors that convey elegance and trustworthiness while creating consistent UI components that would enhance the premium shopping experience and support the improved checkout flow.
Click on each image to enlarge
High Fidelity Screens
Combining the wireframe structures with the style guide elements, I created polished high-fidelity screens that showcase the complete redesigned experience. These screens bring to life the guest checkout option, enhanced measurement customization tools, and integrated review system, the three key solutions addressing Modern Attire's conversion challenges.
Click on each image to enlarge
Prototype
To validate my solutions before implementation, I created an interactive prototype focusing on two critical user journeys: the guest checkout flow designed to reduce the 70% abandonment rate at registration, and the customization flow that simplifies the measurement process. These interactive experiences allowed for realistic testing of the key features developed to address Modern Attire's conversion challenges.
Test
During this phase, I conducted usability tests with various users to collect insights and gain an external perspective on how my design is perceived by others.
Click on each image to enlarge
What's Next
This Springboard project has transformed my approach to UX design, teaching me to connect research directly to solutions while addressing specific business challenges. In future iterations, my goal is to introduce new features such as personalized suit profiles, a stylist appointment feature for in-store fittings, and gamification elements to incentivize users to earn rewards. These additions will be tested to assess user reactions and ensure they further reduce abandonment rates while strengthening customer loyalty.
