Fashion E-Commerce Design
Found in 1994, Mirror has been successful in clothing retail business by offering a variety of good quality clothing at affordable prices. With neutral, modern, fresh, and clean tones, Mirror has been successfully growing its business internationally and now operates 400 stores across 32 countries. However, the brand did not make a digital transformation yet, something its customers have been asking for a long time. Rather late in the game, Mirror strives to expand its current success to the online platforms and provide better services to the customers.
Key Features
1. Update brand's logo
2. Build responsive website
3. Pickup in-store
2. Build responsive website
3. Pickup in-store
Tools
Figma
Adobe Illustrator
Invision
Zeplin
Optimal Workshop
Adobe Illustrator
Invision
Zeplin
Optimal Workshop
Research and Empathize
Fashion industry is enormous. From brand categories to target customers, price range, and business types, variety of options are available. Mirror has been around for awhile and has loyal customers; yet it is still important to understand the market and the customers to set a growth goal for the business.
Through the researches, I tried to dissect and
01 Identify strengths and weaknesses of its competitors
02 Gain insights on pain and gains of online shopping experiences
03 Find a solution on how to transfer and continue positive user experiences from the offline stores
02 Gain insights on pain and gains of online shopping experiences
03 Find a solution on how to transfer and continue positive user experiences from the offline stores
I used user interviews, competitive analysis, and market research to achieve above goals.
User Interview
I believe the users have the answer. If not, they have the key to the answer. Therefore, my first research method was by talking one-on-one with the users. I stopped and spoke to random shoppers about their shopping habits and experiences. The participants were from age 20-40 group and had experience with online shopping (including but not limited to cloth shopping).
This interview consisted of 14 questions with some additional follow-up questions according to the answer. The questions were designed to define different perceptions the users may have for shopping online, what makes them visit/ revisit the particular e-commerce site, and what benefits the users expect to have while shopping online. Some example questions were
∙ What percentage of your purchases were made online vs. offline?
∙ When shopping online, what are some key factors that determine your purchase decision?
∙ When was the last time you went online specifically for clothing, and which brand did you visit?
∙ Can you remember any features that you really liked from that shop?
∙ Could you name three main factors that encourage you to purchase clothing online?
∙ When shopping online, what are some key factors that determine your purchase decision?
∙ When was the last time you went online specifically for clothing, and which brand did you visit?
∙ Can you remember any features that you really liked from that shop?
∙ Could you name three main factors that encourage you to purchase clothing online?
The interviews revealed some important factors that determine the customers' purchase behaviors on both online and offline:
∙ Users were more likely to purchase an item within the first 30 minutes of online shopping
∙ 75% of the participants chose to shop online due to lack of store proximity
∙ All participants chose price as their top priority when shopping in general
∙ Users were less likely to revisit the e-commerce site if there is a fee for shopping
∙ All participants reported that personalized promotions encourage purchase
∙ 75% of the participants chose to shop online due to lack of store proximity
∙ All participants chose price as their top priority when shopping in general
∙ Users were less likely to revisit the e-commerce site if there is a fee for shopping
∙ All participants reported that personalized promotions encourage purchase
Competitive Analysis
Clothing retail business is very competitive. There are a lot of options for the users to choose from both on and offline.
I compared the strengths and weaknesses of Mirror's competitors (Note: some brands only operates online / Missguided offer female clothing only). All of the competitors offer affordable pricing. It was important to note that 63% of shopping begins online, but also almost 70% of the customers abandon their shopping carts before the checkout process.
In order to acquire new customers and maintain loyal customers, Mirror should make online shopping costless, sociable yet personal, and hassle free across multiple devices.
Click to enlarge
Define
Persona
Mirror wants invite more shoppers to become a brand's loyal customers. Expanding to online means more business opportunities, as well as more demands to satisfy. So I looked at Mirror's competitors and explored the characteristics, needs, and pains of their users. Then, I gathered the information to create this persona, Kristin. Even the brand loyalists shop at other favorite brands. So I included the characteristics of the competitor brands and crafted a story of Kristin, who shops at Mirror, H&M, Zara.
Click to enlarge
Along with the main persona Kristin, I created five other provisional personas that represent Mirror customers. Although they have different backgrounds and characteristics, they share similar goals and pains. Their priority is to purchase clothes and the stumbling blocks include price and physical constraints.
Click to enlarge
Empathy Map
Based on the persona, I created an empathy map to understand her surroundings better. This allowed me to be in the user's shoes. Does she care what she hears? How can she talk the talk and walk the walk? Empathy mapping allowed me to brainstorm how to approach the users like Kristin and make their shopping experiences better.
Click to enlarge
Storyboard
I wanted Mirror to be Kristin's go-to brand. I wanted the brand to fit into her life, as if it is her hobby or routine to check Mirror's online shop. I focused on capturing her daily activities through this storyboard. This reminded me of the frustrations she faces and how she tries to resolve them, especially how she uses Mirror website to resolve. Kristin shops for new clothes in her bed, has more control over available options using a filter, and does not have to worry about store closing due to various reasons.
Click to enlarge
Card Sorting
The market research suggested that a strong and clear structure of the website determines the user's activities on the interface. Mirror offers a variety of clothing for both men and women. So the information architecture must be applicable and considerate for both genders. To best organize and categorize different types of clothings, I conducted a card sorting activity to explore how the users would group eah type.
I used Optimal Workshop online and also conducted in-person card sorting exercise. Both were open-sort, with 35 cloth type cards. The male participants took longer time compared to female participants, because they had little exposure to some of the words (like skort, jeggings, and jumpsuits).
Cards given to the participants
The participant A is sorting cards
Category created by the participant A
Participants : 3 Male, 3 Female of age 27 - 45
Average Time Taken : 3 Minutes 34 Seconds
Median Categories Created : 8
Key Findings
The participants who created more categories were focusing on T.P.O. of which they would wear particular clothes to. Also, male participants created twice as much time to finish the exercise and created 3 or 4 more categories than the female participants, due to their unfamiliarity with female clothing (i.e. bodysuit, romper, skort). From this activity, I realized that the users keep in mind of T.P.O. when shopping for clothing and thus may benefit from theme-based organization in addition to more standard categories. In addition, I noticed that the participants started to re-organize and reduce the number of categories when they were asked to create a label for the category. Thus, I decided to minimize the number of standard categories and make a task flow shorter when trying to locate an item.
Site Map
Next, I organized the content of the website with a sitemap.
Click to enlarge
Sketches
Based on the sitemap, I created rough sketches of responsive homepage for Mirror. The main purpose was to compare and confirm the three things :
▪︎ Search bar location
▪︎ Easy access to other gender page
▪︎ Featured content that would make solid first impression
These became good resources to come back when I began creating low-fidelity wireframes.
Click to enlarge
Ideate
Flows
The main goal of a user on Mirror's site is to purchase clothes. Thus, making the journey as efficient, simple, and pleasant as possible is important. Keeping our persona, Kristin, in mind, I created a task flow and user flow charts to visualize to the steps she needs to take and the choices she can make. It allowed me to see where a frustration or a pain may arise and possibly lead Kristin to exit out without purchasing.
Click to enlarge
Click to enlarge
Prototype
Low Fidelity Wireframes
I gathered all the information and created the first low-fidelity wireframes for Mirror's responsive homepage using Figma. For desktop, I created more sample pages necessary to complete the user flow. I tried to focus on the followings:
∙ Easy navigation between the genders
∙ Introduction to featured / themed items
∙ Clean, modern, and fresh vibe the brand seeks
∙ Consistency across the devices
∙ Sense of community via social links, reviews, newsletters, and loyalist programs
∙ Introduction to featured / themed items
∙ Clean, modern, and fresh vibe the brand seeks
∙ Consistency across the devices
∙ Sense of community via social links, reviews, newsletters, and loyalist programs
Desktop Version
Tablet Version
Mobile Version
Click to enlarge
Logo Design
The client asked for a new logo that would imply brand message : neutral, modern, fresh, clean, and clear. I went back to Kristin and provisional personas and thought about a way to represent them in a new logo. I decided to switch up a letter 'r' in the center as a cursive. It implies that Mirror clothes make a user stand out in the crowd. In addition, I wanted it to look like a clothing hook on a wall to indicate the service Mirror provides to its customers.
Click to enlarge
Mood Board
Click to enlarge
When deciding the visual branding for this brand, I got inspirations from the city, Manhattan. The persona, Kristin, is all this city is about; vibrant, modern, and fresh. Manhattan has a lot of color, but I especially picked a teal color from the Statue of Liberty, the MTA subway entrance, and the Manhattan Bridge. It is the color that gives you a relief and a sense of freshness when you look up or around the concrete jungle.
Click to enlarge
UI Kit
Before moving onto the high fidelity wireframes, I created a UI kit following the guidelines laid out on a style tile. Again, I got visual inspiration from Manhattan and wanted the buttons and icons to be edgy rather than rounded. By using the teal color as a brand color, I attempted to consistently implement Mirror's fresh, clean, and healthy brand message throughout the site.
Click to enlarge
Test
Usability Test
Participants
∙ 4 Male and 3 female participants of age 20-35
∙ Previous online shopping experience is required
∙ 4 Male and 3 female participants of age 20-35
∙ Previous online shopping experience is required
Duration
∙ 10 Minutes each
∙ 10 Minutes each
Goals
∙ Identify the strengths and weaknesses of this website
∙ Evaluate the successes and failures of the navigation flow and information architectures.
∙ Identify and provide any missing contents based on the user feedbacks
∙ Identify the strengths and weaknesses of this website
∙ Evaluate the successes and failures of the navigation flow and information architectures.
∙ Identify and provide any missing contents based on the user feedbacks
Methods
The participants were asked to complete a set of tasks, such as find an activewear, find information on free shipping, and make a purchase, on Mirror's desktop mockup via InVision. I provided a desktop for the testing and sat behind the participant to observe his/her actions and feedbacks. I followed up with a series of question relating to overall reaction to the site to identify any obstacles or areas to improve.
Click to enlarge
Key Findings
∙The participants did not experience any difficulty finishing the task
∙ The participants described Mirror website as fresh, clean, friendly, active, comfortable, approachable, and young. This successfully matched the brand’s adjectives.
∙ Benefits of joining the loyalist programs should be clearer
∙ The participants prefer to use photo as their main navigation point
∙ Most of the participants skips reading labels - need more graphical aids
∙ Information on free shipping and returns need to be presented on all screens
∙ The participants described Mirror website as fresh, clean, friendly, active, comfortable, approachable, and young. This successfully matched the brand’s adjectives.
∙ Benefits of joining the loyalist programs should be clearer
∙ The participants prefer to use photo as their main navigation point
∙ Most of the participants skips reading labels - need more graphical aids
∙ Information on free shipping and returns need to be presented on all screens
High Fidelity Wireframes
The usability testing opened up a great opportunity to see the strengths and weaknesses of the Mirror website before the launch. After organizing feedbacks into an affinity map, I made some adjustment such as highlighting loyalist program and adding more graphical elements to help the user understand the content easier and faster. You can access all the wireframes for the desktop via a link below.
Homepage Tablet Ver.
Homepage Mobile Ver.
Homepage for Desktop
Category Page for Desktop
Product Page for Desktop
Sign Up/ Log In Page for Desktop
Order Confirmation Page for Desktop
Conclusion
Although I do majority of my shopping online, I was not so aware of the amount of research and analysis that goes into every element on the screen. From defining the project to testing a prototype, I learned to refer back to the user's end goal when it was hard to make a decision, and to design a digital product with a clear visual branding. Along the way, I faced a challenge of wanting to satisfy everyone and trying to launch the perfect product at first try. However, talking to the users through each phase let me understand that users thoughts and behaviors change all the time and even the greatest product may not be perfect to someone. As a product designer, it is my job to produce a high quality product to the users and continuously make improvements based on their behaviors and reactions, for better user experience.
