UX Design
E-commerce
Mobile web
Stitch
Project overview
In a tight timeframe, I designed a mobile shopping experience for Stitch, a fictional streetwear retailer. The project aimed to significantly boost checkout conversions and provide a seamless, user-friendly experience for users.
My role
I was the sole UI/UX designer on the project responsible for user research, wireframing, UI & Visual Design, prototyping, and usability testing.
Context
Stitch is a retailer specializing in multi-brand streetwear, operating primarily through its mobile website. The company aims to enhance its browsing and checkout experiences to improve overall product usability. The ultimate business goal is to increase revenue by elevating the conversion rate from browsing to checkout completion on the website.
50% of users open no more than 7 item pages and then abandon the site
70% of users who place an item in the cart do not complete the purchase
The solution
I designed a new shopping experience for Stitch by implementing a clean and bold UI that resonated with the streetwear vibe. The new design featured a smooth checkout, functional shopping bag, and diverse payment options for hassle-free transactions.
Vibrant interface.
Seamless navigation.
The new shopping experience utilizes a bold and bright UI that will appeal to Stitch's user base. All pages offer quick access to product categories, wishlist, and shopping bag.
Uncover trends.
Manage your purchases.
Editorial articles guide users through the latest streetwear fashion trends, while the My Bag page allows for easy management of their orders.
Immersive product page
The product page features several detailed images of the item. Additionally, all product pages include both a short and detailed description of the item, as well as a cross-selling section.
Blazing fast check-out
The UI provides easy navigation throughout the entire checkout flow. Multiple payment options ensure a quick and seamless shopping experience.
Design process
Given the tight deadline for this project, it was crucial to carefully plan my design process and allocate time efficiently. The e-commerce domain, being a well-researched area with a lot of information available to inform my design decisions, allowed me to concentrate on designing and user testing my solutions.
Research and discovery
For this project, I focused on competitor analysis and secondary research to gather insights into the preferences and potential pain points of the target audience.
Statistics: Clear UI, easy payments and guest checkout are the must
To make informed decisions I reviewed available reports and studies of mobile shopping trends and customer preferences in the apparel retail industry. The statistical data revealed that the checkout conversion rate could be improved through the following four approaches: (1) streamlining the checkout process, (2) optimizing the mobile interface, (3) offering a variety of payment methods, and (4) integrating features like promo codes and alternative shipping options.
Competitor analysis: nobody has a perfect shopping experience
I examined the mobile websites of other popular retailers to identify common design patterns, features, and UI elements crucial for a smooth shopping experience.
TL;DR: Research Results
Despite not conducting user interviews, I was able to draw valuable insights from my research and make informed design decisions. Research helped me to identify key factors for increasing checkout conversion rates:
Clear and engaging product page design
Fast and easy login and checkout
Variety of payment and shipping options
Oh, wait...
No user interviews?
Indeed, I took a shortcut by deciding not to conduct user interviews, given the limited timeframe. User interviews, while valuable, can be time-consuming and might not yield actionable insights within the project’s constraints. Instead, conducting user testing at both low-fidelity and high-fidelity stages allowed for direct user feedback.
Designing the solution
I began crafting the solution with a clear understanding of the optimal shopping experience. Before designing the interface screens, I identified key tasks (red routes) and mapped out user flows to effectively guide my approach. Insights gained from these user flows informed the creation of wireframes for the mobile website, addressing identified pain points and incorporating best practices in mobile UX design. My focus was on simplifying navigation, optimizing product displays, and streamlining the checkout process.
User testing: low-fidelity prototype
To gather feedback on the low-fidelity prototype, I conducted user testing with a diverse group of participants. Testers were asked to complete tasks such as browsing products, adding items to their cart, and proceeding through checkout. The insights gained from this user testing phase allowed me to pinpoint areas where refinements were needed.
Difficulty in finding a list of product categories
Users prefer to have quick access to product categories, which they frequently use for item discovery.
Product description taking up too much space
Users noted that product information occupies too much screen space, interfering with the cross-selling of other items.
“Continue as guest” option is hard to notice
Users often overlooked the 'Continue as guest' option, negatively impacting the checkout conversion rate.
Defining the style
I prepared a compact style guide, covering typography, colors, and UI components, to establish a unified visual language. My goal was to create a strong brand identity that resonates with users and enhances their overall shopping experience.
Branding: hip & bold
I concentrated on embodying Stitch's brand attributes throughout the mobile website experience. The Stitch brand, known for its diverse and bold personality, encourages users to explore new elements and styles for their look.
Color Palette
Fonts
When selecting fonts for Stitch's mobile website, I carefully considered the brand's personality and features to ensure the typography complemented the overall design. My goal was to achieve a balance between readability, aesthetics, and preserving the brand's character.
UI Elements
I devoted special attention to creating UI elements that are not only visually appealing and functional but also in harmony with the brand’s personality.
High-fidelity screens 1.0
Upon completing the low-fidelity prototype and refining the design based on user feedback, I moved on to develop the first version of the high-fidelity screens for Stitch's mobile website. These screens brought together the visual design, typography, UI elements, and branding elements.
User testing: high-fidelity prototype
After completing the first version of the high-fidelity prototype, I initiated another round of user testing. This step was crucial to validate the design choices, assess usability, and pinpoint any potential issues or areas needing improvement. The insights gained from this testing phase were invaluable, illuminating the overall user experience, showcasing the design's strengths, and identifying areas that required further refinement.
Delivery Method Confusion
I discovered that the process of choosing a delivery method was confusing for users. Many struggled to locate the selection during checkout as it was placed on the final review page.
What’s wrong:
Users expect to see delivery selection on the Shipping screen.
How I fixed it:
I moved the delivery method selection to the Shipping section.
No quick actions for cross-selling items
I noticed that the cross-selling section lacked quick actions such as "Add to Bag" and size selection, impairing the overall shopping experience. Users reported it cumbersome to navigate to individual product pages for selecting sizes and adding items to their bag.
What’s wrong:
Users need to open individual product pages to add cross-selling items to their bag.
How I fixed it:
I added quick size selector and “Add to Bag” buttons to the cross-selling section.
Delivery Cost Display Issues
I observed that the Shopping Cart page displayed the delivery cost before users had selected a delivery option, leading to confusion about the total price and whether the cost was fixed.
What’s wrong:
The Summary section displays a fixed delivery cost, leading to user confusion.
How I fixed it:
I provided clear messaging to inform users that delivery costs may vary depending on chosen delivery method.
Next steps
Taking into account the valuable insights gathered through the second round of user testing, I developed the final screens for the Stitch mobile website. Had this been a real-life project, I would have collected post-launch quantitative data on the website's performance to assess the effectiveness of the design approach and identify any correlations between design changes and conversion rates.
Learnings
I discovered that skipping user interviews might occasionally produce positive results. By concentrating on secondary research, competitive analysis, and insights from usability tests of my low- and high-fidelity prototypes, I was able to quickly iterate and refine my designs. This approach enabled me to make data-driven decisions that culminated in an engaging user experience. This experience underscores the value of adaptability and openness to unconventional methods in UX design.