Project Details

 

Aug 2016 | 5 weeks
Client | Mirror / Designlab
Role | Researcher, Interaction Designer, User Interface Designer
Task | Design a new logo and a responsive e-commerce site
Tools used | Adobe Illustrator, InVision, Marvel, Optimal Workshop

Goals & Objectives

 

Design a logo for the company that is modern and neutral enough to attract all types of people and styles.

Design a responsive e-commerce website that is easy to use and that allows customers to browse through all products and filter by size, color, style, and others.

WORK PROCESS

Research

Define

Design

Test

WORK PROCESS

RESEARCH


Tools used | Competitive Analysis, User Interviews, Empathy Map, User Persona, Storyboard

 

Over the course of five weeks, I have focused on identifying e-commerce trends and discovering existing user expectation and needs within the shopping space. It was important to not only target online shoppers but also brick and mortar customers, to understand the reasons behind each shopping choice and preference.

Competitor Analysis

 

After doing some secondary/market research I have found several retailers that share similar characteristics with Mirror. I was able to create a feature matrix (on the right) with three of Mirror direct competitors: H&M, Zara and Old Navy.

This was a vital step to evaluate competitors strategies and determine their strengths and weaknesses relative to those of our own product.

User Interviews

 

After gathering some initial information and resources I was able to approach my next steps. I developed an interview script with questions I intended on asking my interview participants to get an insight on my target users habits, motivations, needs, etc.

I conducted a total of eight interviews with 4 females and 4 males between the age of 21 and 55.

Interesting Findings:

  • 6 participants shop for new clothing at least once a month (online and offline)
  • All  participants look for reasonably priced items and shop at stores similar to Mirror (Asos, Zara, H&M)
  • Participants shop online for convenience and better deals
  • Like to shop at brick and mortar stores because they can feel, touch and try clothes on before purchasing
  • Browse online through a smartphone but make the final purchase through a computer

Common Needs:

  • Good quality products at an affordable price
  • Good refund and return policies
  • Plenty of items to choose from
  • Good item description

Empathy Map

 

After gathering valuable information from my interviewees, I created an empathy map which helped me gain a deeper insight of my interviewees. I was able to identify participants thoughts, feeling, needs, insights etc.

User Persona

 

Armed with valuable insights, I developed a  user persona, Laura - a 23-year-old student majoring in web design. She has a passion for fashion and likes to stay up-to-date with new and upcoming fashion trends. Laura does not have a large budget to allocate towards fashion but she still likes to dress trendy and fashion forward.

Storyboard

 

Keeping my user persona Laura in mind, I created a storyboard to help me visuality how our product could help her solve a common problem.

INFORMATION ARCHITECTURE


Tools used | Card Sorting, Sitemap, Page Layout Sketches

 

Upon completing most of my research in phase one I moved into Information Architecture. Which was a crucial step, that helped me better understand, how to architect the website so that information is easily accessible to our users.

Card Sorting

 

I completed an open card sort with a total of 8 participants using Optimalworkshop. Participants were given 30 cards which they sorted into an average of 10 groups.

This step really helped to discover structural patters which are of enormous value when composing the sitemap for Mirror's website.

The image on the right is a short summary of my findings. The number in each cell represents the number of occurrences where a particular item was placed within a specific category.  View Optimalworkshop summary.

Sitemap

 

I developed a sitemap to better understand the architecture of the site. The results of the open card sorting highly influenced my decision for the site architecture as well as existing e-commerce site patterns such as on Asos, H&M and Old Navy.

It was important to me to keep the site's architecture as simple and clean as possible while still providing all necessary features to make this a successful site that satisfies our clients and users needs.

Page Layout Sketches

 

Before moving into digital wireframes and designs, I allocated some time to sketch out serval page layouts to help me better visualize how each element fits within the page. While this was not the final design it helped me to start thinking about the hierarchy and the organization of the information/elements on the site.

INTERACTION DESIGN


Tools used | Task Flow, User Flow, Wireframes

 

Before diving into designing the final product it was important to create a list of requirements that I needed to incorporate to develop a product that enables users to achieve their objectives the best way possible.

Task and User Flow

 

Based on the sitemap and my user persona Laura I have composed a task flow (left) and a user flow (right) to help me visualize which steps Laura took to complete a given task.

The scenarios for both flows were the same. Laura was searching for a black dress that she can wear for a party she has been invited too.

  • The task flow (left) illustrates which steps Laura took to accomplish the given task.
  • The user flow (right) illustrated multiple ways Laura can take to accomplish the same task.

 

 

Wireframes

 

After sketching out some website layouts I created digital wireframes especially focusing on the home and product page. I have also included some notes on the side to explain each feature in more detail.

USER INTERFACE DESIGN


Tools used | Brand Logo, Responsive UI Design

 

It was of enormous importance to be consistent and predictable with the choice of interface elements I choose to have on the website. Since most users are already familiar with e-commerce websites and how certain interface elements behave I wanted to incorporate familiar elements to help users complete their task in an efficient and accustomed way.

Brand Logo

 

I sketched out various logo ideas and then narrowed it done to the once I felt suited Mirror's brand. Mirror was looking for a logo that is neutral, modern, fresh, clean and clear, so we decided that the fourth logo on the left column represented the company the most.

Responsive UI Design

 

Using InVision I was able to create a high-fidelity prototype which helped me visualizes how the website will look and how each element will help users accomplish desireed tasks. This prototype was later used for testing and further improvments have been made.

USER INTERFACE DESIGN


Tools used | Usability Test Plan, Key Findings, Affinity Map, Final Product

 

After creating the prototype it was time to validate our product. I performed usability tests and gathered some valuable feedback which helped to refine my product and create a website ready for deployment.

Usability Test Plan

 

Test Objective

  • Test how easy it is for users to navigate the site and perform given tasks.
  • Identity any pain-points and issues.
  • Solicit valuable feedback from the users pertaining to usability, design, and ways to improve our platform if any.

 

Tasks

  • Participants were asked to find a small women's trench coat that is machine washable, beige and costs less than $40.
  • Participants were asked to locate the newsletter and subscribe (Did not have to enter their actual email).

Key Findings

 

Participants

  • Number of participants: 4
  • Gender: 3 male, 1 female
  • Age: 21 - 50 years old
  • Platforms used: Skype and Google Hangouts

 

Summary

  • All participants were able to complete the first task without major issues and assistance.
  • 3 out of 4 participants pointed out the font size and weight is somewhat small on certain sections.
  • All participants were able to subscribe to the newsletter but only one noticed the newsletter form located on the body of the page.
  • All participants expected the newsletter to be located towards the bottom of the page and not the center.
  • All participants felt the site was easy to navigate, looked clean and every element was nicely laid out.

Affinity Map

 

I created an affinity map to help me sort, prioritize and rank participants testing feedback. I was able to discover successes and pain-points each user had while trying to accomplish given tasks and gathered valuable feedback.

 

 

Final Product

 

Based on my usability tests and the feedback received I was able to improve the overall experience and design of the website.

  • I have increased the size of the text on certain sections.
  • Changed the location of the newsletter sign up form (removed it from the center and added an actual form on the footer).
  • I have done some minor changes to the UI to make each element stand out more and look polished.
  • I have also added a Join link next to Login so that user don't get confused.

View InVision prototype