Mirror: a global fashion retail store on a mission to make clothing accessible to all.

“Let’s take that online.”

Taking the brick-and-mortar shopping experience online.

PROJECT BACKGROUND

A successful fashion retail store with over 400 brick-and-mortar stores around the world in 32 countries, Mirror set its sights on entering the online e-commerce space.

Late to the digital game, Mirror wanted to make a strong impression with a refreshed visual identity and a responsive website offering a user experience a cut above the rest.

Discovery and Research

Understanding and building empathy with online shoppers

IDENTIFYING USERS, TRENDS AND OPPORTUNITIES

In order to design the right solution, I needed to understand who I was designing for. I conducted a competitive analysis to understand the current market trends and evaluate opportunities in the e-commerce industry. I also did a literature review and conducted 1-on-1 interviews with regular online shoppers to understand their pains and gains when shopping online.

Using the data I gathered, I developed a persona, empathy map and story board that would be my touchstones throughout the design process.

Information Architecture

Understanding and designing for current mental models

BUILDING THE SITEMAP & WIREFRAME SKETCHES

It was important to get the structure of the website right before digging into the wireframe sketches.

I conducted open card sorts with potential users and used that data to build a sitemap with clear pages and categories. With this ready go, I could get started on defining the visual hierarchy of each page in a series of exploratory sketches.

Interaction Design

Understanding how people interact with the site to accomplish goals

CREATING TASK & USER FLOWS

Based on the site map and data from my research, I explored how the people using Mirror's site would achieve their goals. What steps would they need to take to say, buy a sweater? Or add a shirt to their Favorites?

Responsive Wireframes

Creating a consistent, seamless experience across devices

LOW-FIDELITY WIREFRAMES & PROTOTYPE

Although most online shoppers prefer to complete their purchases on desktop devices, many engage in "window shopping" on mobile devices. Because of this, designing a responsive site that would work on any device was key. I produced low-fidelity wireframes showcasing how different pages and elements would behave at different breakpoints.

I put together lo-fi prototypes in Marvel Pop and InVision for quick-and-dirty testing to validate the designs and adjust as needed.

Branding and UI Design

Designing a cohesive and robust visual identity

BRAND STYLE GUIDE & UI KIT

Mirror was looking to get a fresh face, so I created a new visual identity for them that could translate well on any medium. I gathered feedback from users after the first version and found that what they were perceiving didn't match up to the brand experience Mirror was trying to offer. So I went back to the drawing board and was able to produce a visual identity and UI kit that reflected Mirror's goals and values.

Prototyping & Testing

TAKING THE DESIGNS FOR A SPIN

With the UI Kit ready to go, it was time to take the interface out for a spin - did it meet the users' needs? Where did the design fail to support users in achieving their goals?