Mirror Apparel

A responsive e-commerce website for a global fashion retail store.

UX RESEARCH

UX DESIGN

ui design

Branding

usability testing

BACKGROUND AND BRIEF

Taking the brick-and-mortar experience online

A successful (fictional) 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.

Mirror has been very successful offline, however, they realised that the opportunity for sales online is huge, as the behaviour is rapidly mainstreaming.

Going online also presented a prime opportunity to address the remainder inventory in their warehouses, which can be very difficult to move when there are only a few pieces left.

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.


Disclaimer: I completed this project as part of my Designlab UX Academy coursework. Mirror is a fictitious company - any relation to an already existing company is purely coincidental.

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

TEST OBJECTIVES AND METHODOLOGY

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?

I put together a usability test plan in order to evaluate the designs I had so far. The objectives were to evaluate how users navigate the site to search for and find specific products, how users assess size and fit of the products, and also to test out the check out process.

I recruited participants from a pool of people that fit into the target market for this product and ran a series of moderated remote & in-person tests, using a prototype created using InVision.

Participants were invited to complete four key tasks, while sharing their comments and observations out loud throughout the test.

KEY FINDINGS AND RESULTS

After conducting the usability tests, I watched and listened to each recording and took notes about the participants' actions and comments.

I arranged my findings in an affinity map, noting Wins (things that went well) and Weaknesses (things that didn't go so well) in order to spot any patterns in the participant feedback.

Priority Revisions

ITERATING ON THE DESIGNS

Based on the feedback from users during usability testing, I came up with a list of priority revisions to implement in the designs.

Participants were invited to complete four key tasks, while sharing their comments and observations out loud throughout the test.

WHAT'S NEXT?

Re-testing and Redlining

With the priority revisions complete, my next steps will be to re-test the revised designs and gather more feedback.

After re-testing it will be possible to do a few more necessary design changes before redlining and handing off the design with specs to the development team.

As Google's Nicholas Jitkoff once said, "Design is never done", and this is the first iteration of many.

As shoppers use the website in a real-world context, we will be able to gather more data and continue to iterate and improve on the design.