Mirror

Overview

Challenge

The switch from in-person shopping to online shopping is trending and can possibly bring in more clientele. The company does not want to lose its established clients. How can we transition from an in-person retail store to online while giving the brand a refreshing look to keep clientele engaged?

Solution

 I created a refreshed e-commerce site that explores bold, fun, and creative wardrobe. It provides sustainable clothing that will last longer and is reasonably priced. As a brand, Mirror is a reflection of your best self, representing the radiance your best self provides, confidence in clothing. Keeping the target audience in mind, I created a new logo, website, and user friendly navigation throughout the site. 

Role: UX/UI Designer

Tools: Figma, Photoshop, Whimsical, Miro

Process

‍

‍

Research

Initial Research Goals

Discover people's online shopping habits

Determine how much time is spent online shopping

The overall purpose of online shopping

Comparative Analysis

‍I began my research phase by creating a comparative analysis with other e-commerce retail sites. I focused on sites that provide retail shopping both in person and online versus e-commerce sites that solely retail online. I looked at their target audience to determine what their goals and pains are.

‍

‍

User Persona

Based on the interviews, the key demographic we are targeting are women in their 20's to 30's. They are most likely students or young adults looking to begin a career. They are familiar with online usage and know what they like. The audience prefers convenient online shopping that can be compared to other stores online. Free shipping and fast check-out is a nice perk and determines if they make a purchase. This persona was created based off interviews with participants. She gravitates towards the ideal demographic Mirror is marketing to.

‍

‍

Empathy Map

‍The main focus of this empathy map was to articulate what the needs are for our target user. Since our target audience are women in their 20's to 30's, I made points of what events might be happening in their lives and what their environment would be like.

‍

‍

Product Development Roadmap

There are many features and pages that go into an e-commerce website. Trying to determine which features are needed versus wanted took some time. I want to provide a clean and user friendly navigation on the site. In doing so, I created a product development roadmap of what I needed. Below is a shortened list of the features I chose to design:

‍

‍

Design

Sketches

Using multiple e-commerce sites as reference, I began sketching the page layouts for my site. Since I was designing for an e-commerce site, I wanted to focus on the clothing. Providing large clear images for the clothing helps users have an overall look at what type of clothing Mirror supplies.

‍

‍

Task Flow

While creating the task flow, I wanted to follow the process of purchasing jeans. The user will look for jeans using categories. First they will select the gender of clothing their looking for, categories, bottoms, and finally jeans. Then the user will select what type of check-out they'd like.

‍

‍

User Flow

The user flow follows the same concept as the task flow, however the user now has a choice. They can either use the search bar for purchasing jeans, or use the categories like the example above. The chart shows the choice a user would encounter when using the search bar. Find the right pair? If yes, the user will move on, if no the user is taken back to the search results. Below is a cropped image of the user flow:

‍

‍

Sitemap

After gathering all the information needed, I had a good visual of how I want the website navigation to be designed. I created the sitemap below to organize my thoughts. The use of card sorting helped determine the organization of content in the sitemap.

‍

‍

With all the information acquired from creating a persona, constructing the task flow, having participants participate in card sorting, and creating elements of the information architecture, I was able to begin creating wireframes. With all the gathered information, I knew some key elements I needed to include in the design were organized categories, express check-out, and an easy user flow.

‍

Wireframes

While creating both mobile and desktop wireframes, I kept in mind that I wanted images to be large for users to see. If shoppers are browsing from the mobile site, viewing large images on a smaller screen wold be helpful in making purchases.

‍

‍

Brand Mood Board, Logo & Style Tile

While creating the mood board, I wanted to keep a creative theme in mind. I wanted to incorporate bold colors without overwhelming eyes with too many colors. Including bold, 'out of the norm' clothing helped me visualize what I wanted the site to look like. The goal for the brand identity were bold colors and a fun aesthetic.

‍

‍

When creating the logo, I incorporated the color palette within it. Being inspired by bold colors and a fun aesthetic, I decided to use a sun to represent the radiance your best self provides. Mirror- a reflection of your best self.

‍

The style tile contain the final logo design as well as inspiration photos for the site. It also includes the color palette and buttons used.

‍

‍

This UI kit contains the color palette, typography, forms, cards (for desktop and mobile), icons, buttons, radio buttons, and drop-down menus. The buttons are colored based on the color palette while the typography is based on different headings and bodies on the site. The radio buttons are used to choose which payment and shipping method is used. Drop-down menus are used for size, quantity, and choosing your location for the Estimated shipping section.

‍

‍

Responsive UI Design

While conducting the prototype testing, I began with some objectives. I wanted to determine easy user flow and navigation, locate problem areas, and locate any issues as well as finding solutions. The tasks users given to participants were fairly straight forward. Participants had to navigate the search icon, search for pants, view and interact with the product page, add the item to cart, and complete the check-out process. The results varied but there were many similar comments and suggestions.

‍

Test

Usability Testing Interviews

These quotes taken from the usability testing interviews helped make important changes to the site. Participants were given a task of purchasing a pair of pants using the search bar. Many of the participants were able to navigate the cart easily. Some participants provided great suggestions to add to the site.

‍

Affinity Map

After gathering information from the prototype testing, I created an affinity map to help organize the notes. For each participant, I created a section of sticky notes of their comments. I color coordinated each sticky note to determine which were things that needs to change, have time to improve, don't need to change, and advice. Below is the information I gathered:

‍

‍

Final Outcome

Final Design

After taking feedback from the participants and mentor, I made changes to the site and created the final prototype. Per my research findings, most users shop on desktop versions of e-commerce sites. I focused my prototype on the desktop version of Mirror.

Some changes that were made to the final version were:

Decreasing text size

Making product images smaller to allow more images to fit on a row

Adding a notification whenever an item is added to the cart

Below are the before and after versions of some pages:

‍

‍

Prototype

Click the image below to try out the prototype.

‍

‍

‍

Final Thoughts

The transition from a physical retail store into an e-commerce site is huge. With research and interviews, the final design is ideal for common shoppers. It consists features like an estimate shipping section, express check-out, and filterable products. Designing a site that provides easy navigation, ideal selection of products, and fast check-out targets a larger audience and potential consumers.