Kaloyan Kaloyanov
Mirror Banner Img New.png

Mirror

 
smartmockups-screen_device_17.png

Introduction

Mirror is an international clothing company that is very successful offline, however until recently they had almost no online presence. The company's executive team believed that they could increase their customer base and market share significantly by offering their products online via a responsive website. This belief is reinforced by market research and numerous customer requests for the ability to purchase clothing online. 

Platform: Desktop, tablet & mobile responsive

Project duration: 1 month, June 2017

Roles: User Research, UX Strategy, Information Architecture, Interaction Design, Prototyping, Usability Testing, UI Design, Branding

Tools used: Sketch, Adobe Illustrator, InVision, Survey Monkey, and Optimal Workshop.

 

 
 

Challenge

The problem space was multifaceted due to the scope of the project. It included the need to rapidly gain an understanding of the apparel industry, modern consumer shopping habits, and Mirror's customer base in order to ensure that the end product would be both easy to use and intuitive.

 
 

Research

The research phase of the project was kicked off with the creation of a research plan. The focus was on understanding the online apparel market. This was done by conducting research into customer shopping habits in order to understand what motivates customers to shop online or in-store. Research methodologies used included a literature review, a competitive analysis, in-person user interviews, and an online survey. 

 

Persona created using research data

Research Insights

Once the research was conducted the data was synthesized in order to extract key user needs that I could design for. This was done by creating several UX deliverables including an Empathy Map, a User Persona, and a Storyboard. 

Some of the key user needs identified from the research phase were: 

  • Customers need detailed product information when shopping for clothing. 
  • They also need to know that returning clothes will be as simple and painless as possible via mail and in-store.
  • Customers also need the option to read product reviews by other customers before purchasing clothes online.
  • Lastly, customers strongly prefer seeing clothing in person. In turn, a feature allowing customers to find an item they see online at a local store is a high priority for the website. 
 

Site Map

Information Architecture

The next step for this project was the interaction design. In order to understand the user base and empathize with customers further I conducted an open card sorting exercise. This helped me understand how customers would navigate the website and what sort of organizational structure made the most sense. 

Next, a Site Map was created using the insights gained from the card sorting exercise. The Site Map acted as a guide on how to organize content for the rest of the project.

 

 

User Flow

Once the Site Map was created a User Flow was also crafted. The User Flow diagram was based on the persona created for Mirror and helped me to further understand how a customer would navigate the website from beginning to end. The focus was on building empathy by mapping out a user's journey from the homepage, through the product selection process, and finally to the checkout. 

 
 

Interaction Design

The next step in the process was designing wireframes. First, the main screens for the website were sketched. As the website needed to be responsive I created wireframes for the desktop, tablet, and mobile devices while keeping in mind user needs and usability and accessibility best practices. Once the paper sketches were done, I created digital versions by using Sketch. 

 
 

DESKtop Homepage

Small devices homepage

mobile homepage

 

Desktop Product Page

Small devices product page

Mobile product page

 

Affinity Map

Prototyping and Usability Testing

With the wireframes completed it was time to test them with real users to better understand what worked and what did not. First, an InVision prototype was created that allowed users to navigate the wireframes and go through the flow of purchasing an item.

Once the prototype was completed I conducted usability testing with five users who attempted to complete a series of tasks with the prototype. The usability tests were very beneficial as they highlighted several areas of the UI that could be improved and also confirmed that more than 70% of the UI elements tested were easy to use by testers and worked well. 

The findings were documented in a User Test Report and the necessary changes to the UI were made to improve usability.

 
 

UI Design and Branding

After the usability testing, I began working on the User Interface design. First, I designed the branding for Mirror by creating a logo and style tile based on the business' desired brand message. The focus was on conveying the brand as neutral, modern, fresh, and clean. 

 
 

Logo

typography

buttons and color palette

icons

 
 

Responsive High Fidelity Wireframes

With the branding complete I began working on the final step of the project by creating high fidelity wireframes.

 
 

Desktop Homepage

Desktop Product Page

 

Small Devices Homepage

Small Devices Product Page

 

Mobile Homepage

Mobile Product Page

 
 

Next Steps

The next phase of this project would be working with developers to launch the product. Once launched, analytics and further usability testing would allow for the continued refinement and improvement of the product's usability. After that, lower priority features would be implemented if the resources are available and tested as needed to ensure optimal usability.