A new online shopping experience designed for user satisfaction and engagement
The challenge
Create a branded, responsive website that attracts customers and increases e-commerce sales.
The result
Saint now has a responsive, user-friendly website that reflects its brand in its design.
Client
Saint, a global chain store that sells clothes
Background
Saint aims to make all types of clothing accessible to everyone. They stay up to date with current fashion trends, offering clothes for any occasion. The quality is decent, and their price point is affordable.
The scope
Responsive web design
Role
UX Designer (Research, Visual Design, Interaction Design)
Project duration: 80 hours
This is a speculative project I’ve done for UX Academy at DesignLab.
Research
User interviews
Competitive analysis
Define
Persona
Empathy map
Ideate
Card sorting
Site map
User flow
Wireframes
Brand identity
Prototype
High-fidelity prototype
Usability testing
Affinity map
UI kit
1. Research
Understand the landscape
To better understand the situation, I researched how current companies in the clothing market succeed in e-commerce and their effects on customers.
Research goal
Discover the pains users have when shopping online
Identify users’ unmet needs that have
Find positive qualities that users encounter when shopping online
Methodology
Competitive analysis & user interviews
Competitive analysis
The clothing industry is fast-paced and growing rapidly. Many are prioritizing online stores over physical ones. I looked at the biggest companies currently thriving and analyzed their websites. My discoveries were:
Promotion heavy near the top of the site and on the homepage
Hover animations to view different images
Color option preview
Heart logo to indicate to save to your “likes” page
Optional guest checkout
Sticky bars for easier navigation
Easy vocabulary to communicate its function
Filtering of clothes
User interviews
Gaining insight into users will help us empathize with them. I reached out to three participants who had shopped for clothes online in the past seven days and conducted one-on-one interviews with each. This was aimed at gathering a deeper understanding of their key drives, motivations, fears, and preferences. My key findings were:
Users want fast ways to find products easily
Reviews are a big influence on purchasing
Good return policy
Flexible checkout options
Fast page load times
Security of personal information
2. Define
Identify insights and user needs
Using the research findings, I gathered and presented the data in more relatable terms to enhance my understanding and empathy towards them. This step is essential for recognizing how the product can positively impact their lives.
Methodology
Persona & empathy map
Persona
I created Taylor West, the primary persona, to better identify with the target user.
Empathy map
Using the findings from my research, I organized them into sections on what the persona thinks, hears, says, and does. This was used to gain insights and identify user needs.
3. Ideate
Forming the product
Building the bridge between users and the business with a fresh new look to the brand.
Methodology
Card sorting, site map, user flow, wireframes, logo, & style tile
Card sorting
To understand how users organize information, I conducted an open card sorting exercise to identify key categories for the website. Four participants sorted 30 pieces of clothing to determine how they would categorize them. Here are my findings:
Mostly separated into sections, you would place the item on your body.
Potential category names for the grouping.
Detail characteristics to further describe the grouping of the cards.
Site map
Based on the collected data, a sitemap will provide a top-level overview of the site's structure and page hierarchy.
User flow
Using the sitemap as a guide, I developed a user flow to illustrate how a user would navigate the website to complete a purchase.
Wireframes
After establishing the information architecture, I sketched low-fidelity wireframes for the key pages in the user flow. To ensure that the wireframes were suitable for a responsive website, I also created tablet and mobile versions.
Brand identity
To reflect Saint’s voice and personality, I designed a new, refreshed look to their brand.
3. Prototype
Putting the product to the test
User testing will reveal how usable and valuable the product is for end users. Gathering input and insights from real users about their actual usage will help improve the product by addressing their pain points.
Methodology
High-fidelity prototype , usability testing, affinity map, UI kit
High-fidelity prototype
A high-fidelity version of the wireframes was created using the new brand identity.
Usability testing
A usability test was conducted with three participants who navigated the prototype to purchase a medium-sized knit cardigan. Participants were observed to understand how they interacted with the website and to identify potential pain points. Here is a summary of my findings:
All participants had completed the task easily and quickly. They didn’t have issues with getting the task done.
The participants were focused on the task, so they didn’t apply their usual shopping behavior.
Participants identified the knit cardigan by image first, then the description name, to make sure before clicking on it.
The overall site design was simple, clean, and familiar.
Affinity map
I compiled all my findings from the usability testing into an affinity map. This helped me discover patterns and pain points, which led to several insights and design recommendations.
UI kit
In line with Saint’s brand voice and user testing insights, the UI kit was developed as a guideline for maintaining the site's visual elements.
Next steps
Based on the insights from usability testing, I will revise the wireframes and prototype. After refining it, I will conduct another round of testing to gather feedback and enhance the product.
