A new online shopping experience
The challenge
Design a branded responsive website that will appeal to customers and boost e-commerce sales.
The result
Saint now has a responsive website that is user-friendly with its brand reflected on the design.
Client
Saint, a global chain clothing store
Background
Saint is on a mission to make any type of clothing accessible to everyone. They keep up with current fashion trends, providing clothes for any occasion. The quality is decent and their price point is low.
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 began my research around how current companies in the clothing market thrive in the e-commerce business and how it affects their customers.
Research goal
Discover the pains users have when shopping online
Identify users’ unmet needs that have
Find positive qualities users encounter shopping online
Methodology
Competitive analysis & user interviews
Competitive analysis
The clothing industry is fast-paced and growing immensely. Many are turning to prioritize on having an online store over a physical one. I turn to the biggest companies that are currently thriving and analyzed their sites. My discoveries were:
Promotion heavy near the top of the site and on 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
Understanding the users will help empathize with them. I reached out to 3 participants that had shopped for clothes online in the past 7 days and interviewed each one-on-one. This was to collect a deeper knowledge of the user’s key drives, motivations, fears, and preferences. My key findings were:
Users want fast ways to find products easily
Reviews are a big influence to purchasing
Good return policy
Flexible checkout options
Fast page load times
Security of personal information
2. Define
Identify insights and user needs
Utilizing the research findings, I synthesized and illustrated the data into more humanizing terms so I could better empathize with them. Taking this step is crucial to knowing how the product will make a positive impact on them.
Methodology
Persona & empathy map
Persona
I created Taylor West, the primary persona, to better identify with the target user in this case.
Empathy map
Taking the findings from my research, I placed them in sections 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 get an idea of how users organize information, an open card sort was conducted to find key categories for the website. I had 4 participants sort out 30 pieces of clothing in an open card sorting to see how they would categorize the pieces. My findings were:
Mostly separated into section 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
With the data collected, a sitemap will show a top-level overview of the structure and hierarchy of the pages that would form the site.
User flow
Based on the sitemap, I created a user flow to show how a user would interact with the website with the task to purchase an item.
Wireframes
Once the information architecture was set, low-fidelity wireframes of key pages from the user flow were sketched. To ensure the wireframes were created to fit the specifics of a responsive website, I also built out the tablet and mobile wireframes.
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 tell me how usable and valuable the product is to the end user. Gaining inputs and insights about how real users would actually use the product will help improve to address 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
The usability test was conducted with 3 participants to go on the prototype and make a purchase of a knit cardigan in the size medium. Participants were observed to see how they interact with the website, and to identify potential pain points. The summary of my findings were:
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 gathered all my findings from the usability testing into an affinity map. This allowed me to find patterns and pain points which lead to several insights and design recommendations.
UI kit
Based on Saint’s branding voice and the user testing findings, the UI kit was designed as a guideline for maintaining the visual elements used on the site.
Next steps
Using the insights from the usability testing, I will revise the wireframes and the prototype. Once it has been refined, I will take the prototype into testing again to gather feedback and improve the product.
