Mori E-commerce Website
Role
Product Designer
Tools
Figma
Optimal Workshop
Maze
About
E-commerce has grown exponentially over the past few years and it is anticipated that such growth will continue throughout this decade. However, people are still not completely satisfied with online shopping. Mori is a new online store that aims to make the shopping experience convenient and enjoyable.
Define
Problem
It is very difficult for people to choose their correct clothing size online. Therefore, people are not confident in their purchases.
Solution
Optimize the way people choose clothes online based on photos and product descriptions.
Market research
- Online shopping lacks a personal touch, especially in the areas of customer support and returns
- Consumers seek the perfect balance between quality and affordability
- There has been a shift toward size-inclusive fashion
Competitor analysis
I conducted a competitor analysis to identify potential opportunities in the current market. While many companies provide free shipping and returns on clothing, there is still not enough support to help people choose the right size or style. Only one in six companies have photos of the same clothing in different sizes. In addition, many clothing companies do not provide photos and reviews from other buyers. Lastly, there is still a lack of customer assistance through live chat. These varied issues present several opportunities for companies like Mori to increase sales and help people make confident purchases.
User interviews
Four participants were asked about their shopping habits.
Key findings include that three out of four people are frustrated with the complicated return process. One person even prefers to keep the item instead of dealing with a complex return process. This customer is no longer loyal to brands with a rigid return process. Most participants worry about ordering clothing in the wrong size online, particularly those with different body types.
Needs
- Free shipping is very important for customers
- People desire easy returns because they avoid shopping online due to the complicated return process
- Product photos with colors that better represent the true color of the product
- Zoomed-in images of the product material since people cannot touch the product online
- Good customer service and a consultant's opinion will offer more of an in-person shopping experience
“In general, I prefer to buy things online, but if I need to buy a dress, I will go to the store. I have an unusual body type, and sometimes it’s hard for me to find good-fitting clothes.”
— Julia
Let's get to know a user persona
The interviews helped me to understand that people's primary issue with online clothing purchases is their lack of trust in the accuracy of product sizes that are displayed online. This and other insights helped me to develop Alex's persona, which I kept in mind while designing the Mori e-commerce website.
Empathy map
The empathy map helped me categorize and differentiate customer needs. Additionally, it made it easier to generate new concepts and conduct a more thorough analysis of the findings from my interviews.
Alex's journey
Scenario
Alex has been thinking about buying jeans for a week. She wanted 90's-style jeans, which she noticed are very popular right now. Alex has been browsing different brands and finally thinks she has found the right pair of jeans!
Goals
- Find a stylish, quality, and not too pricey pair of jeans
- Order the right size so she doesn't have to deal with complicated returns
- Find a promo code to save money
Opportunities
1. Add reviews under each product, which will help the customer learn more about the product
2. Many customers have doubts about what size to order. It would be helpful if there were pictures of models wearing the jeans in each size (XS/S/M/L/XL)
3. People don't order online because of the complicated return process. The company can send the product with a return label already prepared
4. Poor lighting and lack of zoom-in images can hurt a brand. It's worth investing in
5. Free shipping is very important for customers
Project goals
In order to make the best UX/UI design decisions, I reviewed business goals, user goals from user research, and technical considerations.
Ideate
Sitemap
In order to understand more about how people classify clothing, I conducted an 'open card sorting'. The study showed that participants are mostly divided into two groups. The first group is classified by occasion, and the second is classified by type of clothing. The results of the card sorting helped me to create a sitemap.
Design
Mid-fidelity wireframes
After defining all the required pages with the sitemap, I created the mid-fidelity wireframes. In the process, I thought about user and business goals in order to create a design that offered convenience to customers but that could also generate clicks and revenue.
Branding
“A timeless classic that will never go out of style”
In color psychology, black's color meaning is symbolic of power and elegance. That's why I chose black as the primary color for the Mori website. I also wanted to create good contrast so that the products stand out on the page with a white background.
The mood board conveys a sense of closeness to nature, elegance, wildness, and purity all at once.
Style tile
The style tile was created based on the mood board, logo design, and mid-fidelity wireframes. This will be useful not only for creating high-fidelity wireframes but also for use by developers.
Prototype
Every step of the core flow (Search → Add to Bag → Checkout) is mapped out in high fidelity.
Test
Usability test objectives
- Test how the user finds a particular product (via navigation or search bar)
- Test the ease of use of navigation and the flow of the design
- Test what steps the user takes to buy the product
- Observe where the user hesitates, gets confused, or struggles to complete a task
- Test how long it takes to complete a task
Methodologies
Remote: I set up video calls on Google Meet. I asked the users to share their screens and I observed how they interacted with the Figma prototype. In addition, I took copious notes and did screen recordings.
In-person: I observed how the users interacted with the Figma prototype on my computer, took notes, and did audio recordings.
Affinity map
I conducted three in-person tests using a prototype in Figma and eight remote tests using the platform Maze. The usability test participants are all frequent online shoppers.
Iterate
Priority revisions
After analyzing and summarizing user feedback, I iterated on my original designs. To fix the problems found during usability testing, I looked into other design patterns and asked for peer feedback.
Problem
During a usability test, I asked participants to search for jeans. The first impression was that jeans may not always be directly associated with denim.
Solution
I modified the category's name to make it more clear to customers. Jeans should have their own classification.
Problem
The light color of the product blends with the background.
Solution
I created a dark gray outline to highlight the light color.
Problem
Looking for a first order discount for customers is annoying.
Solution
For the convenience of customers, the discount on the first order can be applied automatically.
Reflection
My biggest takeaway from this project was the reminder to let users determine what they want in a website that is built for them. People really struggle with the dilemma of what size to order. Unfortunately, not many online clothing stores showcase photos of clothing for different body types. Although taking photos of each piece of clothing in multiple sizes can be more expensive, it will save the company money on shipping, buyers will be more confident in their purchase, and the likelihood of ordering the wrong size will decrease. This will lead to brand loyalty and customer satisfaction.
View more work
