Skip links

mirror logo 3
OVERVIEW

This project is the first focus of Designlab’s UX Academy course. Mirror is a fictional clothing retailer and I was challenged to research, strategize, and design an e-commerce for their business.

PROJECT BACKGROUND

Mirror has been a successful clothing store since 1994, with over 400 stores in 32 countries. They sell affordable clothing for everyone in any style and for any occasion. With their massive success, Mirror has finally decided to include an online shopping experience for their customers. They’ve recognized the benefits of e-commerce for both the business and their customers.Customers would save a lot of time with the ability to shop conveniently and efficiently while Mirror can save warehouse space and gain higher profits by selling the rest of their inventory easily. Mirror realizes that this trend is rapidly becoming more favorable as many other businesses provide an e-commerce option.

TOOLS USED
Paper and Pen
Adobe Illustrator
Adobe Photoshop
Sketch
InvisionApp
Marvel Pop
Zeplin
Principle
MY ROLE
Product Designer
OUT WITH THE OLD, IN WITH THE NEW
OBJECTIVE

Mirror wanted to update their current brand style with some new and refreshing ideas. A modern and neutral style that appeals to everyone. Along with a new updated brand look, their utmost goal is to provide a responsive online store with outstanding user experience that will help customers shop online with ease on all devices, anytime and anywhere.

MISSION

As the product designer, I am to provide strategies based on the analysis of tangible data I collect from my research. With these strategies, it will help with the development of creative pieces built with utmost attention to details to develop a captivating brand, a stimulating and practical visual presence, and a meaningful user experience.

THE PROCESS

RESEARCH

Secondary Research
Market Research
User Interview
Competitive Analysis

STRATEGY

Persona
Empathy Map
Storyboard
Competitive Analysis
Card Sorting
Sitemap

INTERACTION DESIGN

User Flow
Task Flow
Wireframe Sketches
Responsive Wireframes

UI DESIGN

Moodboard
Logo Branding
Icon Set
Style Guide
Responsive UI Design
UI Kit

ITERATION AND IMPLEMENTATION

Prototyping
Usability Testing
Affinity Map
Revisions
Redlining

01

RESEARCH

The first agenda in my research plan was to gather existing data online about e-commerce. I looked through the recent market and design trends and took note of the assumptions as well as new information. The data I gathered includes percentages of online shoppers, their demographics, habits, and frustrations. Understanding the underlying assumptions from experienced online shoppers was significant in identifying the customer’s goals, successes, and struggles in online shopping. Having a fundamental understanding of our users helped construct valuable and focused interview questions that helped me uncover imperceptible data, which was my ultimate research goal.

I interviewed four participants who had plenty of online shopping experiences. The goals were to learn their motivations in online shopping, their detailed purchasing process, features they find necessary, and to learn about their successes and frustrations with online shopping. The results from the interview were a combination of existing assumptions gathered from the secondary research and some new and unexpected information. I found that the participants browse online stores on their phones then complete their online shopping on their desktop. They found browsing on their mobiles beneficial because of how flexible the device can be in many situations. I also learned that the participants were heavily influenced by social media and trends, and shop with inspired styles in mind. Lastly, I conducted market research. Digging more into the vast existing data online, I gathered and organized information regarding competitors, existing and potential customers, and the industry as a whole.

All of the information collected from the various research formed a strong foundation in the project. I then analyzed, organized, and synthesized the data to recognize patterns and clearly define our customers and their deeper needs then constructed viable solutions.

02

STRATEGY

The initial defining process I did was to create a provisional persona. The goal was to realistically represent our key audience for Mirror based on the interviews and collected research data. Not all of the target users were represented by the provisional persona. Instead, I decided to address the needs of the most important user groups, such as mobile users and users prone to social media influence.

.

Provisional Persona

Identifying our users helped create an empathy map. The goal here was to get to know the users and understand their drives and behaviors.

The storyboard allowed us to place our persona in context on how Mirror might solve their problem. The story focused on the persona facing a problem and how Mirror moved her and motivated a change in her routine.

I conducted a card sorting workshop to help me organize Mirror’s web content in a way logical to our users. The results helped create the most effective sitemap for Mirror.

03

INTERACTION DESIGN

Before tackling the user interface design, I organized the task flow the user will follow from the landing page to check out. Additionally, I identified the various different paths that a user would take within the website.

With the contents organized and structured in the most optimal positions, the responsive wireframes were designed then prototyped in InvisionApp.

04

UI DESIGN

Redesigning Mirror’s logo brand was a challenge of creativity and proved to be a fun assignment. I sketched my ideas then selected the most favorable design that met Mirror’s goals: modern and neutral.

mrrrgif

The user interface design processes included collecting inspiration in a Pinterest moodboard, designing icons set to supplement communication between the webpages and users, redesigning Mirror’s brand logo, and a brand style tile to showcase Mirror’s new design elements.

From what I gathered in the research, it’s important for Mirror to be accessible across all devices. The users shop online due to its convenience in the comfort of their home. My design decisions made sure Mirror offers this ease in design for optimal user experience.

The layout is mostly dominated by clean white space and a vibrant range of colors for clarity, friendliness, and practicality.

05

ITERATION AND IMPLEMENTATION

I conducted higher fidelity prototype in Invisionapp with the newly designed webpages. To ensure the mission was being fulfilled, I did usability testing on the prototype by observing how users interact with the designed product. This was an opportunity to learn and improve the product to perfection.

THE RESULTS

Participants expressed overall satisfaction with the user experience. They concluded that the product has a straightforward flow which both experienced online shoppers and first-timers can easily follow effortlessly. Although there were no issues during the shopping process, the product was not perfect and the participants had given some suggestions for improvements. I’ve mapped their responses in an affinity map focusing on the successes, struggles, discoveries, confusing, and refinement categories. After adjustments were made, I did further usability iteration and changes until the project reached its goals.