The product
Midori’s mission is to make any type of clothing accessible to everyone. They believe clothing should allow people to change styles as they need and please.
The challenge
Although Midori is very successful offline, they lack an online presence which causes a huge missed opportunity for online sales and the loss of customers to competitors.
Role
Designer, Researcher
Duration
10 weeks
Category
E-commerce, Fashion, Retail, Apparel
Why I made this project
As someone who enjoys leisurely shopping online, a common reason to do so is the efficiency factor. However, sometimes there are stores with so many options that it’s hard to navigate–especially for chain stores with lots of clothes.
Clothing can be thought of in terms of style or how to dress for a specific occasion–such as formal for a banquet. These are some ways we naturally categorize clothes which helps increase efficiency. With this in mind, it could also be applied to finding and choosing clothing items online.
The claim
Retail e-commerce sales have been on a steady rise in the last 10 years. The market is now approximated to be $5T worldwide.
The problem
Due to the recent global pandemic, brick-and-mortar stores that lacked an online store suffered a greater loss in sales compared to stores that had an online store.
Market research
I identified the 4 highest-performing apparel retailers by sales revenue in the last year and analyzed their online stores to better understand what competitors are doing to attract consumers.
Competitive Analysis
Inditex (ZARA)
Sales revenue: $28.89B
Fast Retailing (UNIQLO)
Sales Revenue: $21.51B
Hennes & Mauritz (H&M)
Sales revenue: $21.5B
Gap Inc. (GAP)
Sales revenue: $16.58B
The good
All websites allow consumers to quickly browse through lots of products and have the option to ship or pick up in-store.
The bad
Extensive navigation and filters hinder the shopping experience (H&M, Gap) and unconventional patterns make interactive elements unclear (ZARA, UNIQLO).
I used insights gathered from the competitive analysis to inform the behavioral and motivational questions asked to potential users.
4/4 users needed:
clear options and policies to return/exchange items
good deals and low price points
easy and quick navigation around the site
4/4 users motivated by:
convenience to shop and return from home
efficiency of browsing
online exclusive sales and the ability to apply coupon codes
Goal
I wanted to better understand how people shop online and identify motivations for shopping online vs. in-person.
Process
I interviewed 2 users in-person and 2 users over the phone about their shopping experiences and habits.
User research
From user research, it was clear that users needed to be able to easily navigate the website so I used a card-sorting task.
Card sorting
Findings
I found that most people generally grouped by utility or style which is consistent with other similar websites. Also when a category is broad or vague, it is easier to understand with further subcategories.
After understanding what groups and patterns made the most sense to users, I laid out a sitemap of the website.
Flow diagrams
Main user flow
The sitemap allowed me to identify the key pages and steps a user would go through to successfully make a purchase. This helped set up my priorities going into the design phase.
Once I figured out the essential pages from the main user flow, it was time to sketch out the initial low-fidelity wireframes.
Wireframes
High-fidelity UI
After getting down the main flow, I started defining the UI.
Mobile
High-fidelity designs were also created for mobile, with focus on the essential pages from the main user flow.
Prototype
I created a clickable prototype with my high-fidelity designs for the first round of usability testing.
Users tested out the prototype by completing 3 tasks that tested the function of different features on the website.
Objective
I wanted to be sure that users were able to complete the main flow and test out “Shop by Style.”
Method
I validated my prototype with 4 users. Each were given 3 tasks dedicated to “Shop by Style,” sale, and checkout.
Results
4/4 users
3/4 users
confidently used the navigation menu and successfully completed the main flow (finding and purchasing an item)
overlooked the details of the homepage and stayed near the top, exclusively interacting with the main navigation
were able to successfully complete the task involving the “Shop by Style” concept
2/4 users
1/4 users
had trouble with the task involving the sale section
Usability testing
Due to time constraints, I was not able to run a second usability test with the updated prototype. However, I made revisions based on the results of the first test.
Revisions
High priority revisions
Because there was confusion about “Shop by Style” which led to only half of the users to complete the task, I decided to add in a short blurb before the section.
Since users mainly stayed near the top of the page and would miss the explanation blurb further down the homepage, I also included a tooltip in the primary navigation menu.
Lastly, I added in a short explanation section for each type of style to further clarify what users can expect when browsing through a particular style.
Low priority revisions
Although users were able to complete the main flow, all of them got stuck when presented with “view cart” vs “continue to checkout.” Therefore, I added the item number currently in the cart to the “view cart” option to signify the action of reviewing the items.
The testing also revealed that users heavily rely on images to make decisions so I added a scroll bar as well as an additional image count on each individual listing to create more confidence when making their purchase.
Next steps
After making revisions, additional testing would be beneficial to see if there is an increase in engagement and confidence with the Shop by Style feature.
Additional usability testing
Tablet & mobile
The users I interviewed use a desktop to online shop so my primary focus was to first design for the desktop. However, I would also like to flush out the mobile and tablet prototypes to see how users are responding to the shopping experience on mobile and tablet compared to desktop.
View other selected works
Puffin Maps
All-in-one live trip planner
Gains
Personal online fitness training
Oral Health Center
Seamless appointment making