Designing shopping experience for a streetwear store
Project Overview
During the project I designed a mobile shopping experience for Stitch, a fictional streetwear retailer, in a tight timeframe. The goal was to boost checkout conversions and offer a smooth, user-friendly customer experience.
My Role
I was the sole UI/UX designer on the project responsible for user research, wireframing, UI & Visual Design, prototyping, and usability testing.
Tools used
Context
Stitch is a company that sells multi-brand streetwear clothes on its mobile website. The company needs to enhance their browsing and checkout experience to improve their product's usability. The business goal is to increase revenue by boosting the conversion 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.
Bold and bright UI which will appeal to Stitch user base. All pages have a quick access to product categories, wishlist and shopping bag.
Uncover Trends.
Manage your purchases.
Editorial articles help users to navigate the latest streetwear fashion trends. Users can easily manage their orders on My Bag page.
Uncover Trends.
Manage your purchases.
Bold and bright UI which will appeal to Stitch user base. All pages have a quick access to product categories, wishlist and shopping bag.
Vibrant interface.
Seamless navigation.
Bold and bright UI which will appeal to Stitch user base. All pages have a quick access to product categories, wishlist and shopping bag.
The prototype
Here is the interactive prototype to check out the new shopping experience for Stitch in action.
Design process
Considering a tight deadline for this project, it was essential to carefully plan my design process and allocate time efficiently. Since the e-commerce domain is a well-researched area with a lot of information already available to guide my design decisions, I chose to focus on the design and user testing of my solutions.
Research and discovery
For this project, I decided to concentrate on competitor analysis and secondary research to gather insights into the target audience's preferences and potential pain points.
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: streamlining the checkout process, optimizing the mobile interface, offering a variety of payment methods, and integrating features like promo codes and alternative shipping options.
Of the following checkout features, which do you consider most important to increasing cart conversion? (Mobile Checkout)
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 that are important 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?
Yes, I took a shortcut here. Given the limited timeframe, I decided not to conduct user interviews, as they can be time-consuming and may not yield actionable insights within the project's constraints. Besides, user testing at both low-fidelity and high-fidelity stages allowed for direct user feedback.
Designing the solution
I began crafting the solution with clear understanding of the optimal shopping experience. Prior to designing the interface screens, I pinpointed red routes and illustrated user flows to guide the approach effectively.
User flows: defining red routes and mapping the shopping experience
I developed the user flow to visualize the entire shopping journey of a typical user. This allowed me to identify pain points and opportunities to ensure a seamless and intuitive experience throughout the shopping process.
Wireframes
The insights from user flows helped me to create wireframes for the mobile website which addressed the identified pain points and incorporated best practices in mobile UX design. I focused on simplifying the 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 completed tasks such as browsing products, adding items to their cart, and checking out. 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 a quick access to product categories, which they often use for item discovery.
Product description taking up too much space
Users noted that product information takes up too much space on the screen and interferes with cross-selling of other items.
“Continue as guest” option is hard to notice
Users didn't notice the "Continue as guest" option, which negatively affects the checkout conversion rate.
Defining the style
I prepared a concise style guide, covering typography, colors, and UI components, to establish a unified visual language. I aimed to create a strong brand identity that would resonate with users and enhance their overall shopping experience.
Branding: hip & bold
I focused on embodying Stitch brand attributes throughout the mobile website experience. Stitch brand has a diverse and bold personality that encourages users to seek out new elements and styles for their look.
Color Palette
Bright and vibrant color palette was chosen to incorporated the brand's attributes—playful, bold, and hip—into the visual design and user interactions.
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. The goal was to strike a balance between readability, aesthetics, and maintaining the brand's character.
UI Elements
I devoted special attention to creating UI elements that are visually appealing, functional, and in harmony with brand's personality.
High-fidelity screens 1.0
Upon completing the low-fidelity prototype and refining the design based on user feedback, I proceeded 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
Once the first version of the high-fidelity prototype was complete, I moved on to another round of user testing to validate the design choices, assess usability, and identify any potential issues or areas for improvement. This testing phase provided valuable insights into the overall user experience, highlighting the strengths of the design and uncovering 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, which hindered the overall shopping experience. Users found it too troublesome to navigate to each individual product page to select the desired size and add 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 even before users selected a delivery option, causing 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
Learnings
I discovered that skipping user interviews might occasionally produce positive results. By focusing on secondary research, competitive analysis, and the insights obtained from usability tests of my low- and high-fidelity prototypes, I was able to rapidly iterate and adjust my designs and make data-driven decisions that resulted in an engaging user experience. This finding emphasizes the importance of being adaptable and open to unconventional approaches in UX design.