Preview of Features

1. RESEARCH

It was an essential step to understand the trend and market for Mirror. Here are some of my key insights from my secondary research: 

“Competitive analysis was conducted to understand the market and know how to compete in online fashion sphere. These brands were chosen based on similarities of target market and they have strong online presence.”

Domain Research Findings.

• Fashion e-commerce industry is very competitive & aggressive.

• It is challenging  to customise Mirror  website design because target market is broad.

• Brands are very innovative and creative with their marketing.

• Filtering and sorting products are also essential part.

• Various important aspects to offer digitally, eg.clean picture, material information, easy delivery and returns.

• Important to build trust and make customer loyal to the brand.

1. EMPATHIZE

It was an essential step which includes research and immerse experience on users' perspective. I chose User Interviews for this project because I wanted to develop a deep understanding of the  users such as their goals and pain points in online shopping experience. It was an important part to compete in the market. Together with knowing what competitors do for their customers, I can properly plan the best strategy for Mirror. 

User Research Plan

I prepared few important points for my main goals, objectives, methodologies, questions, participants, assumptions/risks, and timeline. I planned this user research plan with an open mind and the enthusiasm to understand the answers of the questions and how to find the best solution for both stakeholder and users.

User Interview

I conducted Interview to understand more in depth of how people feel and think when they are doing clothing online shopping. I was able to conduct a successful interview with this interview guide involving 4 participants from 25-35 years old, with 1 male and 3 females. I get useful insights of uncovering their motivations, wants and needs for clothing online shopping. I wrote down the outlines in my Empathy Research Findings of all important details.

Research Debrief

I summarised the whole information of findings from participants to prioritise the problems and possible solutions of the research.

Key Takeaways

Top Need

To create a successful responsive clothing website which provides smooth user experience anytime and anywhere.

Pain Points.

1. Sizes are not consistent and difficult to imagine the fitting on their body

2. Participants were frustrated with slow and paid shipping and returns

3. Too cluttered layout with so many things on a page is overwhelming 

4. The pictures provided usually look different than the products delivered 

5. Difficult to know the quality just solely based on pictures

6. Sometimes they don’t know how to style the clothing

7. It is difficult to decide to purchase if there is no review on product

8. Difficult to envision the clothing on themselves

Motivations.

1. Easy shopping online anytime anywhere

2. Effective filter that eliminates the hassle and time waste for user

3. Available promotions anytime to boost their shopping motivation

4. Wide range of product groups and sizes to reach bigger market

5. Fast and easy payment 

6. Express delivery option 

7. Hassle free returns 

8. Helpful sizing feature

2. DEFINE

I defined MIRROR’s potential user market as those who are already familiar with the brand and shop offline and new user who like to shop online but not familiar with Mirror. How might I help shoppers shop online on Mirror's website at ease?

Persona.

Chloe is one of the created personas who represents the market. She is a professional who works in a big city, interested in fashion but doesn’t want to spend so much on clothing. She enjoys the convenience in buying clothing online.

3. IDEATE

How do I solve the problem? What’s the right thing to build? I started IDEATE step with gathering all research findings and making a hypothesis.

Persona Storyboard.

As a working professional in a big city, Chloe uses her phone often for various reasons including shopping online, social media and paying the bills. Due to the busy traffics, she doesn’t like the hassle to buy clothes in-store because she finds it troublesome. While buying clothes online has another disadvantages, especially about the sizing, how it fits and also paid shipping and returns. She finds it frustrating because she likes to look trendy but she doesn’t like to exhaust herself browsing for hours. She is also not a big fan complicated filtering. She is conscious of her spending so pay later option is a huge priority. Given these points, the smooth and affordable shopping experience is something she is craving for.

User Flow.

This user flow is based on Chloe experience in finding a dress:

Chloe needs a dress for the important date. She wants semi casual dress to impress the guy. She gets some inspiration from Pinterest and refers her to Mirror website. 

Rebranding The Logo.

01. Sketches

I made some sketches based on the research I did. It is family friendly yet modern but simple and fun at the same time. It has dynamic and represents the brand in competitive market. I did survey to have clarity which one is the most attractive design.

02. Logo & Style Tile

Based on the brand value and direction, orange colour was chosen as the core colour. It has been strengthen by feedbacks I received. It guided mr in the right direction to receive best possible result.

Sketches & Wireframes

Firstly I created hand-sketches then created mid-fidelity wireframes for the Homepage, Category Page, Product Details Page, Virtual Page and Checkout Pages. Mid fidelity wireframes were created with focusing on the best flow and most ideal user experience based on the research, demand and feedback from users. I also get some insight by examining several fashion websites.

Homepage

I created homepage wireframe while remembering what is the goal and what are important points based on the research previously. So I want to keep it simple with all important features but also easy to navigate. The hero page will change between sale to clean the old stock but still trendy with current event of the brand. 

Homepage Content

While for homepage content, I want user to have easy access to what is trending, category with icons to make it clear yet give diversity on the page. The idea for joining Mirror member is to build relationship with customers and give some perks as part of Mirror family. The bottom part mentioned the latest feature of Virtual Fitting which gives extra comfort when people purchasing clothing online. 

Category Page

For this page, I placed the filter on the left side with list of product groups, radio button for colour and checkbox for the length, the reason is because it has less click an user can check products with all filtering in one page instead of filter with drop down on top. The total product on top right is to inform how many products are in this category and I keep one page with total of 4 rows for fast load. The colour option under thumbnail is also to make easy decision before clicking more for product page.

Product  Page

For product page, keeping it simple but informative with providing pictures from different angles and close up, also with video for movement. I understand that the reviews are important so I placed it on top that clickable to review page but I placed summary of reviews below pictures for quick look. Product description with size and fit are available next to picture. I made the sizing option visible together with availability to reduce cognitive load. I also placed similar item option and complete the look section at the bottom to help customer with alternative and easy styling.

Virtual Fitting  Page

This page is essential in improving the comfort of shopping online. The idea is new but I want to show that, it is not that complicated to fill the form and show user how it works.

Shopping Bag Page

This page is important for the brand because it should be as simple as possible to guide user to the payment page. I created information box on top for eligible shipping, summary of chosen products with pictures for convenience purpose and stated there are available payment options. I give flexibility to delete or add them to wishlist. Next, to remind user if they want to be a member for free shipping, otherwise they can also add items from wishlist.

Payment Page

This last page before making a purchase, I made it very simple and straightforward so no other page to open. The idea is with drop down option and user can see how many step they need to do clearly. The grey box shown as inactive and will be active once the previous step is filled in properly. Place order button will be activated and turns black once everything is nicely filled in. 

UI Screens. 

4. PROTOTYPE & TEST

How should I build it? Prototype was prepared for usability test. I wanted to see what goes well and which part needs to be improved.

Test Objectives.

• Define whether users think it is easy to navigate the menu and find products. Is the navigation easy to use and understand?

• Define about what users think of the overall design of the website. Is that attractive and engaging them to shop?

• To identify any potential pain points for users and why.

• Define whether the check out and payment process are smooth and clear.

• To determine the Virtual Try On is helpful, easy to use and boost users’ confidence to purchase products online.

• Define potential aspects for users to purchase more and loyal to MIRROR

User Testing. 

I tried to recruit wide range of participants within Mirror's market to bring various insights into my design iterations. I have recruited 6 participants, whom align with my provisional persona form both genders. They were different participants than my research phase because I want to gain more insights from different perspectives. I also received extra feedback from group crits at Designlab. I chose combination of in-person moderated test and remote moderated testing for Usability Tasting.

Affinity Map.

As a result, based on quotes from the users, I have collected the following User Testing Findings and broke it down as an Affinity Map:

Iterations.

01. Homepage

02. Product Page

03. Virtual Fitting Page

04. Shopping Bag Page

05. Sign Up Page

5. KEY TAKEAWAYS

MIRROR has taught me various valuable insights in understanding what is important for users based on their needs. Design Thinking method helped me greatly to break down and follow the process of research and building the most effective UX e-commerce website for MIRROR.

• Ask “WHY” before sketching and designing

• Practicing design thinking is essential in building a website

• Design systematically - Learning how to design systematically was also part of my growing path in this project.

• Performing usability test is essential for a successful website to be not biassed with our own subjective assumption

• Different voices matter - Empathise people based on their experiences and feedback is a huge part in understanding what works and what are pain points of online shopping process.