- Determine the current trend of existing players in the online retail market
- Determine people’s motivation for shopping in online shops
- Determine people’s motivation for shopping in-store
- Define the pain points of people when buying online
I started off the project with research to understand the clothing/online fashion industry by gathering data on the market. I summarized important points from gathered collection of data and statistics related to the research goals/topic for more insights:
- Demographics - Most of the consumers are Gen Z and Millenials (Ages 16 to 39).
- Gen Z alone will account for 40 percent of global consumers by 2020.
- Younger consumers (Millenials and Gen Z) are concerned with social and environmental causes, favouring brands that are aligned with their values and avoiding those that don’t.
- Millenials are more likely to find inspiration from external sources (e.g., influencers, friends, TV).
- The time lag between discovery and purchase is a pain-point for millennials who continue to expect better experiences.
- Mobile accounts for 65.4% of traffic to online fashion retailers and 57.1% of sales.
- The most important motivations for buying clothes online are around choice and price.
- People abandon clothing purchases online mostly because of bad website functionality, slow delivery, concerns about quality, and pricing.
I compared different existing clothing brands based on their strengths and weaknesses to have an idea about how these brands affect their users.
In order to gain qualitative data about users’ goals, needs, frustrations and motivations, I conducted user interviews on users that fit the demographics from market research. I completed interviews from 5 different interview participants. Two are female, and three are male, and fall between ages 24 to 36. All interviewees are working professionals in different fields in Japan. Although most of the physical stores, that the participants mentioned, are in Japan, some participants shop from online stores that are based from different countries.
After conducting the interviews, I took the transcripts of the interview and transferred it to post-its, and organized into thinking/feeling, doing/saying, hearing, seeing, pain, and gain categories that form my empathy map.
I also looked for patterns and similar topics across the empathy map which formed 4 main insights from where I generated the users' needs.
Pattern 1: Informed Decisions
Insight: People make better decisions when they have enough accurate information.
Need: People need to be confident about their purchase decision.
Pattern 2: Pricing
Insight: People are motivated to buy clothes for a reasonable price.
Need: People need information about how they could spend their money in the best way possible.
Pattern 3: Sizing
Insight: One of the greatest concerns of people when buying online is making mistakes with sizing.
Need: People need accurate information about sizing.
Pattern 4: Value of Time
"I look through a lot of playlists - sometimes searching for a mood or a genre, then play through the playlists and pick tracks that I like."
Insight: One of the people’s biggest frustration is when they feel like their time is being wasted.
Need: People need to feel that their time is valued.
Based on gathered research, combined with insights from empathy map, I created a persona that represents Mirror's key audience segment.
Based on my user persona, I crafted a storyboard outlining a moment during which the user’s problems are solved by Mirror's product.
Combining business goals from the design brief and user goals from the research, I created a diagram that represents the project goals necessary to identify necessary features to include on the website.
I created a feature roadmap that ranked website features by priority based on development and returns on investment.
In order to create successful information architecture for our website, I conducted an open card sorting exercise to gain insights on how users naturally organize content.
Building from the product goals, feature roadmap, and card sorting results, I created a sitemap that included proposed pages to help visualize the structure of our website.
Considering the persona, I generated a complex scenario the persona could encounter in the website. This process ensures that all screen needed to complete the main task are accounted for.
Based on user flow, and site map, I created low-fidelity wireframes to serve as blueprint for the visual interface of the website. It allows us to visualize hierarchy, priority, and flow before implementing more minute details, such as font and colors.
Homepage
Products Page
Responsive design ensures a better user experience. I created responsive wireframes to account for the different devices a user may use to access the website—desktop, tablet, and mobile.
In order to have a reference of how I would like the website to look like when making decisions in UI, I gathered pins in Pinterest that I think would best suit the brand's vision using keywords: Familiar, Inviting, Accommodating, Trustworthy. This will help me maintain a consistent visual identity for the project while designing.
Starting from defining brand attributes/keywords, I have created logo sketches that would best represent the brand, and narrowed it down to 3, and chose the best one out of it.
In order to define a brand style before applying it to the web design, I referenced my mood board and chose the images, colors, and typography that best reflects Mirror's branding.
A responsive UI design was created by building from the responsive wireframes and style tile.
In order to test the overall quality and ease of navigation throughout the whole design, and to observe areas of errors/difficulties, I went out and had 5 total strangers interact with my prototype. I used Think-aloud Methodology and In-person Moderated Usability Testing. Criteria for participants were based on the demographics from research phase (ages 16 - 39) and people who have shopped clothing online within the last 3 months.
The users were given the following scenarios and tasks to complete:
Scenario 1: You want to look for a pink women’s coat that you want to buy as a gift for a friend.
- Task: Browse for a pink women’s coat
Scenario 2: After successfully looking for the coat, you decide to choose a Medium size and add it to your cart and purchase it.
- Task: Choose Medium size, add to cart, and purchase.
Summary of findings from 5 participants (3 male, 2 female):
- Completion Rate: 100%
- Error-free Rate: 90%
- Most common comments were about the number of choices when browsing for results.
- Some of the errors also occurred by trying the search or filter features which were not included in the prototype.
- Most people mentioned that the site was easy to navigate and didn’t struggle to complete the tasks.
After collecting my notes and audio/screen recordings from my testing, I transferred it to post-its, and then grouped together common statements to come up with insights on specific elements of the site.
I then grouped together common statements to come up with insights with regards to the participants experience with the prototype.
Pattern 1: Number of Results
During the test, all of people expected more number of products in the product results.
Insight: People want to have more product results.
Solution: Increase the number of results.
Pattern 2: Related Items
"I think being able to see more products, and capturing the attention of the users are more important than 'User Reviews'."
Insight: People think that the "Related Items" section is important.
Solution: Raise the "Related Items" section in the page hierarchy.
Pattern 3: Ability to Filter
All participants expected the prototype to be able to filter results when they were searching for something specific.
Insight: People want to be able to filter results.
Solution: Enable filtering feature.
After gaining insight and prioritizing recommendations, I tweaked high-fidelity mockups and prototypes.
Homepage
Search Results
Product Details
View Cart
Checkout
.png)
.png)
