Responsive E-Commerce

Mirror Background

Mirror started back in 1994 as a clothing store targeting budget minded individuals who are looking for low cost clothing but great quality clothing. Mirror is very successful offline. They have over 400 stores around the world in 32 countries. Mirror offers styles - casual, business, sporty, formal - all for men, women, and children.

Mirror had no online presence and requested an e-commerce website to sell their products, allowing their customers to experience a great online shopping experience. Mirror also requested a revamp of their branding, creating a new logo for the company.

Goals

I wanted to know and understand the successes and pain points from the online shopper to better design the Mirror website. The following the goals were created to achieve the overall design:

• Understand the user’s behavior and thoughts when navigating an online e-commerce 
• Determine what interactive features and layouts users desire successful offline 
• Determine what stops a user from proceeding with checkout clothing for adults and children 
• Understand why a person shops online or in-store 
• Determine what customers expect when shopping online 

Objective

Learn user behavior for shopping online and how a user navigates an online shopping e-commerce site. How to offer a great shopping experience for both returning and new customers.

• User behavior for online shopping 
• User navigation
• Offer great & seamless shopping experience

Direct Competitors

As part of the research method, I chose to do a competitive analysis with both direct and indirect competitive companies to Mirror. For the direct competitive analysis, I compared H&M, ZARA, and UNI CLO. Comparing these three direct competitors competitive analysis provided strategic insights into the features, functions, flows, and feelings evoked by the design solutions used and gave insight understanding of the facets of competitors’ products, you can strategically design your solution with the goal of making a superior product and/or experience. Strengths and weaknesses were compared.

Indirect Competitors

The Indirect competitor analysis compared Amazon Fashion and Neman Marcus. Both indirect companies were compared to see what each company offers as far as features, functions, flows, and overall design. Strength and weaknesses were compared.

A second research method I used to help me better understand what the user is expecting was to create a survey for the participant. I chose participants who shop online for apparel and who shop frequent. I asked generic questions as far as age, profession, location, gender, and how often one shops online.

Few questions that were asked on the survey are the following:

• What features are important to you when you shop online?
• What search features are important to you when searching for clothing on an online apparel website?
• What would make you abandon your shopping cart online?

Now the finding of the survey are as follow:

Important Features:

• Easy Navigation
• Quick Checkout Process
• Customer Reviews
• Photos

Important Search Features:

• Accurate Sizing (size chart)
• Product Type
• Sale
• Color

Reasons to Abandon Cart

• Expensive Shipping
• Creating Account Before Purchase
• Found Cheaper Product Elsewhere
• Checkout Error
• Checkout Process Too Long

The final research method included interviewing participants who shop for apparel online. The interviews were conducted in person and remotely using zoom. 5 interviee's participated in this research phase. Each interview lasted about an hour giving each participant equal amounts of time to answer questions and give feedback.

The interview participants shopped within 3 months / frequently - ages range from 20 - 60

Interview Participants: (sex | age | occupation | device used for shopping)

• male | 20 years old | crew member/ student | Mobile
• female | 31 years old | claim adjuster | Mobile
• female | 33 years old | shipping logistics | mobile
• female | 53 years old | accounting staff | tablet/ mobile
• male | 26 years old | business owner | phone

Few questions that were asked during the interview are as follows:

• What features are important to you when you shop online? 
• When it comes to an online presence - what do you expect the landing page to look like/do? 
• Are there any areas of frustration or confusion when you shop online? 
• How do you utilize the search filter when trying to look for a product? 
• Can you describe how you begin your online shopping process? 
• What are the things you need to do in order to pick the product, add to cart, and complete the purchase? 

Research Findings:

Needs - The participants felt the following were a need for the development of a successful website:

• Size Guides - 4/5 say size charts are off and confusing 
• Filters - 3/5 participants say filters are a top priority 
• Reviews - All participants look for reviews 
• Shipping - 3/5 look for free to low cost shipping 
• Price - 2/5 look for sales online | 3/5 participants want better discount options 
• Live Chat - 3/5 participants would like a chat feature for customer support 

Pain Points - The participants felt the following were pain points for an online e-commerce website:

• Accurate Size - 4/5 say sizing charts are confusing 
• Checkout Process - 3/5 participants say quick checkout convenient  (
• Delivery Estimation - 2/5 look for estimated delivery information 
• Ads - 3/5 participants feel ads are too distracting 
• Reviews - All participants would not select a product if no reviews are visible 

Motivation - The participants felt the following were motivation for a successful online e-commerce website:

• Live Chat Support - 3/5 participants would like a chat feature for customer support 
• Shipping - 4/5 participants look for free/ low shipping cost 
• Reviews - All participants look for reviews 
• Sales/Discount - 2/5 look for sales online | 3/5 participants use discount codes 

With the information gathered from the research methods, I was able to create a user persona based on the information.

Meet our user persona. This is Lauren Oliveira. She is 31 years old and is a yoga instructor based out of Phoenix, AZ. During her free time, she often finds herself scrolling though online sites to see what purchases she can find. She find's it easy and convenient to not be stressed when shopping from home. She doesn't need to wait in ling lines or push through crowds. The ease of finding items and checking out is one of her favorite parts of shopping online.

"Online shopping should be quick and efficient. All I need to do is select what I want, checkout, and receive my items."

With the information gathered from the research methods, I was able to create a user persona based on the information.

Meet our user persona. This is Lauren Oliveira. She is 31 years old and is a yoga instructor based out of Phoenix, AZ. During her free time, she often finds herself scrolling though online sites to see what purchases she can find. She find's it easy and convenient to not be stressed when shopping from home. She doesn't need to wait in ling lines or push through crowds. The ease of finding items and checking out is one of her favorite parts of shopping online.

Card Sorting

To gather the needed information architecture, the research method for this was to create an open card sorting using Optimal Workshop. The open card sorting consisted of 20 cards (clothing items) that the participants needed to categorize the cards. 7 participants partook of the open card sorting with an average time of 4.52 minutes. The p[participants grouped the cards into categories. Common categories included: Accessories, Bottoms, Tops, Formal, Pants, Jackets.

Similarity Matrix

100% participants grouped Ironic Band, Rainforest <3, Movie Quote, and V-neck T-shirts 

100% participants grouped Astroid & Rainbow Socks 

100% participants grouped Black Hoodie & Sleeveless Sweatshirt 

100% participants grouped Powder Blue Suit & Light Pink Suit 

85% participants grouped Shawl & Shire Cloak 

85% participants grouped Boot Cut Jeans & Mom’s Favorite Jeans 

‍

User Browses Site Flow/ User Search Site Flow

In these two flow charts, the user starts off on the home page. One shows the user browsing through the site and the other flow has the user search for a product via the search bar. Both user are looking for a product under sales and dresses. The user will then make the decision to purchase product and add to cart, which will end this user flow.

Cart to Checkout Flow

In this flow, the user will add the product to the cart with the option to continue shopping or continue to the guest checkout. User will then enter billing and shipping information, payment information, and then confirming purchase.

Checkout Page Flow

In this flow, the user has reached the checkout page with having three options to select: Guest Checkout, Sign into an Account, or Create Account. Whichever flow the user selects, it will lead to checkout process and ending with a confirmation page.

Sketching

I began my wireframing process by making sketches on paper in order to quickly explore ideas for the site layout. I then digitized the sketches and refined the information flow using my sitemap, user flow, and task flow as points of reference. Based on user interviews and market research, I prioritized the home pagesection on the landing page.

‍

Wireframes

After sketching out the layout of the home page, I created responsive low fidelity frames of the home page for desktop, tablet, and mobile devices.

Sketching & Ideation

I started my logo design process with Mirror brand keywords (trustworthy, modern & fresh and clean & clear) to round out the brand’s identity. Using those, I created a logo that would symbolize a reflection of a mirror. Below are some of the ideas I explored before landing on my final logo design.

Final Logo Design

The final design I landed on was the "M" having the reflaction and using the word "Mirror" besides it. This allowed me to create the "M" as an icon and the flexibility of using the logo in many different ways.

Style Guide

Using the mood board I put together, I went with neutral colors, and images to keep the site modern and clean. I display the logo in various sizes, buttons in their states, various font sizes, images, and the colors that will be used.

UI Kit

Building from the style guide, I added the various buttons shapes, icons, and detailed typography for the various responsive devices. I also included form fields, checklist, accordian, search bar, and added the grip specifications.

Final Design

Following the establishment of a brand identity, logo, mood board, style guide and UI kit, I refined my wireframes and created a working prototype in order to test the site’s features and checkout process.

User Testing

I tested my working prototype on a group of users who fit the user persona in order to gain feedback on the functionality of the site and inform my final revisions. Using remote testing, I conducted usability testing with five users. I recorded users’ interactions with the prototype and had them narrate their actions and thought processes as they completed a series of tasks. Users were given the following tasks: go to the menu and select sales, Women, Dresses. Filter products by size small and color pink and apply the filter. Select the Short Shirt Dress and add to cart and proceed to checkout and complete checkout process.

Affinity Mapping

Following the interviews, I mapped out participants’ feedback from the usability testing in order to prioritize final revisions to the site. Participants had a mostly positive reception to the site and felt the checkout process was straightforward and intuitive. I was able to pinpoint specific areas of improvement, including making item added to cart more prominent, and making the guest checkout relevance primary condensing the cart page.

Revisions

Using the results of my user testing and my affinity map, I made final revisions to the site design in Figma. I made the pop up/ item added to cart more prominent, used "apply filter" for the filtering process, and redesigned the checkout page to help user with guest checkout.

Challenges

Overall, the goal of the project was to create a responsive e-commerce site based on the design of research and iteration from design after design. I am happy with the outcome of the project. If I had more time I would have created more detail with the site but the time constraint would have pushed me back a few weeks and i needed to prioritize on the main goal objective.

Next Steps

• Recruit round of user testers to ensure overall site is successful
• Build remaining pages
• Work with developers
• Launch platform