RESEARCH | INFORMATION ARCHITECTURE | INTERACTION DESIGN
USER INTERFACE DESIGN | INTERATION AND IMPLEMENTATION
Background
Mirror is a clothing store competing with Old Navy and H&M on cheap clothing but good quality. The company, established in 1994, believes clothing should be accessible to everyone and changeable in a fast paste each season. Due to the demand of having an online shop that supports both warehouses and customers, they decide to have a digital transformation. Their goal is to build a responsive website that sells clothes to different people and styles. They also want well-designed a filter that allows customers to select the right size, colors, style, and others. Besides the website, Mirror would need a complete rebrand.
Challenge
Mirror has well-established brand recognition in retail but not much on the e-commerce site. To better fix their warehouse issues and to support customers in a wider range, they decided to have a website and a refresh of their identity.
My challenge was to create a responsive website, a new logo, and branding that reflects the values of good quality, affordable, fashionable, and accessible.
My goal of the website is to make it user friendly and provides an easy to navigate shopping experience.
Tools used: Sketch, Adobe Illustrator, and InVision.
Research
Research goals
• Discover industry best practices and design patterns that create the best online shopping experience for people.
• Understand what strengths and weaknesses of MIRROR competitors have.
• Uncover what are the biggest motivations for people shopping for clothes online.
• Discover user’s pain points from shopping on competitor’s websites.
Competitive Analysis
I started my market research by using the competitor analysis method that I analyzed each feature, user-flow, consistency, information architecture and UI design.
Other brands I analysised were Everlane, Oak+Fort, ASOS.
Takeaways
• Oak + Fort, Everlane and Uniqlo are all targeted to affordable and good quality which are aligning to MIRROR's value.
• American Eagle and ASOS have some smart features that can be used as inspirations.
• Target has a strong branding with a focus on customer experiences both online and in stores.
• H&M and Old Navy provide wide access worldwide with attractive prices and a variety of promotions.
1:1 interview
I have conducted responses from 13 surveys, 3 follow up interviews with online shoppers, and 5 face to face interviews with in-store shoppers. 12 females and 6 males, and all of them are between 25 to 60. All interviewees are employed and with a steady income. Half of the interviewees shop at least once every 3 months. 80% of 18 interviewees shop for themselves most of the time, and 23% also shop for their children.
Research finding
Goals: Convenient, affordable price, good quality, efficiency
Needs: variety options, fast and free shipping, promotions/sales
Frustrations: hard to find the right sizes/color/style/quality, waiting time for shipping, lack of customer services
Motivations: helpful and detailed reviews, attractive promotions/sales
Strong numbers: 80% of people prefer to use a filter for items, and 85% of people prefer to see the product in a 'quick view' before clicking into the details.
Define
Persona
Based on my market research and interviews, I created an ideal persona called Olivia who reflects the key points from my interviews and surveys for the goals, frustration, and brand affiliations. However, this creation should include more than one group of people, to better cover broader audiences with different needs and motivations. With more time, I would come up with 2 to 3 personas that enable me to cover potential customers who might have different habits of online shopping and use different features.
Information Architecture
Card Sorting and Sitemap
Before I started a sitemap, I asked 6 participants between age 20-50 to complete a close card sorting exercise on Optimal Sort. The result shows some insights that help me to understand how people would sort items into categories. For example, 83% of participants grouped sunglasses, leather belt, and ankle socks into the accessories category, but 16% of participants grouped other items such as running shoes into the same category. I also found out there is one participant categorized by weather and styles, which is different from the others (sorted by the type of clothes).
The card sorting survey helped me build not only a foundation for Information Architecture but also create an intuitive website structure. To deeply understand how users would name categories and observe their expressions, a face to face open card sorting method would be more effective.
Besides card sorting, I also researched competitors’ websites structure, while keeping my user interviews in mind, I built a simple site map. The main goal of this exercise is to communicate the hierarchy and structure of the site.
Interaction design
Task flow
Based on the interviews in the research phase, I realized a smooth and easy to find the right item is the key for online shoppers. By getting into my persona, I created a task flow of Olivia looking for a promotion/sales for a business casual dress for a work event. From this exercise, I learned that making a task flow could help designers to think from the user’s side and get an idea of what steps and actions they would take to accomplish a particular goal. Same as persona research, it requires more time and effort to target more audiences and reveals the part that needs more user testing later.
User flow
Based on the task flow, I made the user flow with the understanding that the customer would not know exactly what they wanted. I mapped out the possible ways (recommendations, filter feature, and search bar) that could help them to find the right one.
Sketching
After the task and user flows, I sketched out homepage wireframes in many options. I pulled some elements from each to build the mid-fidelity wireframes.
Responsive Wireframes
Using my sketches, I created responsive wireframes (desktop, tablet, and mobile) for the homepage. Based on my interviews and business brief, I know my top sections should be promotions and seasonal sales for people who can find deals easily. I found people respond best to the top level categories of women, men and kids on the homepage, so I made sure each section has all three links for easy navigation.
Wireframes
Besides the homepage, I created a product page and item page with a similar layout as the homepage to keep all consistent. To make the experience more complete, I added notification pop up to notify users of the item they add in cart and a drop-down menu for checkout.
From my previous interviews, all participants were frustrated about finding the right size and unable to try items. After the design pattern research, I discovered the third party Fit Finder feature which helps people find the right size by clicking a few questions such as what their size are from other big brands.
The 1:1 interview also revealed that more than 80% of users prefer to use a filter feature for efficiency. They prefer to use a filter when they are looking for a specific item or browsing by size or color, etc. Based on the feedback, I added a filter and sort feature above the thumbnails on product pages to enhance efficiency and convenience.
User Interface Design
Logo design and style tile
Taking my research and persona development into consideration, I designed a logo and style tile for MIRROR. I sketched out many ideas for the logo and narrowed down to a final one based on the adjectives I came up with for the MIRROR brand: affordable, stylish, comfortable, and simplicity, and feedback I received from people I showed the options to The slash of the letter 'I' indicates forward movement that brings fashion and people together to reflect their personality, confidence, and inspire others. I chose a color palette that is fun and elegant, and modern, minimalism and clean images.
Iteration and Implementation
High-fidelity prototype
I created a prototype on InVision for a user flow of finding a size 2, blue jumpsuit that fits a tall body type and finishing by adding it to the cart. I picked a specific item to test out filter feature efficiency and other potential ways for searching.
UI kit
Then, I created a UI kit with branding and other interaction elements that would keep the design consistent and easy to pass on to other designers. It would also help to input all the styles and components into hand off tools such as Zeplin for developers.
Usability Testing
Objective
• Note down all the frustration and concerns that users face.
• Observe insights of users' behavior and reaction when going through the testing.
• Verify users completion of the filtering task and if each step is functional and smooth.
• Identify variety of paths users take to find the item they are looking for.
Test finding
A total of 5 participants falls into the range of the persona Olivia’s age 25-40. All participants were tested from a laptop, and I used a cellphone to record their voice and the screen. I also observed their reactions and took notes. The participants were asked to go through three scenarios-searching, selecting, and adding into the cart for a blue jumpsuit for a female friend. They all liked the website as an easy to navigate and straightforward steps. All of them completed the test successfully. Some of them were confused and got stuck when some links were not clickable, but they would say it out and explain the reason why they wish it was clickable. Based on one participant, I made a filter order adjustment, so that it won't be a problem for other participants.
Key takeaways:
• All participants finished the test with zero errors.
• 40% of participants used filters to find the specific item at first. 60% of participants started from the search bar.
• All participants liked the website that is clean, simple and outstanding.
Affinity Map
I conducted the data and notes from the test findings of all 5 participants and built an affinity map. I categorized results under observations, successes, pain points and suggestions. This helps me summarize the finding in a clear way, and identify the problems and insights.
Next Steps
Revisions
I updated the high-fidelity mockups based on the user testing. I address the high-priority problems from the test finding:
• 80% of participants tried to select filter options in a different order.
• 40% of them filtered from color to start with.
• 80% of participants prefer to use a search bar to find specific items.
Next, I moved on to the medium-priority problems:
• Participants expressed a lack of filter options because it was difficult to sort.
• 40% of participants were confused with body type in filter options.
Updated High-Fidelity Wireframes
