MIRROR

Designing a responsive e-commerce site and a new logo
Project Type | Mock
Role | UX/UI Designer
Tools | Sketch | InVision | Illustrator | Optimal Workshop

Case Study

COMPANY INFO & OBJECTIVES

Mirror is a successful multinational brick-and-mortar store that sells affordable clothing for men, women, teenagers, and children.

They are very late in the game for a digital transformation and are looking to:

  • Re-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.

SUMMARY

I was assigned with the task of designing a responsive e-commerce site by finding out through primary and secondary research what user needs and frustrations are in relation to shopping.

Based on research, I have designed a site that allows users to make informed shopping decisions and provide them with a usable and familiar interface.This UI guides users through each step of the shopping process. Since users felt they were not being provided with enough information about each item, as well as easily accessible return and refund policies, I designed the application so that information is easily accessible. I also created a logo for Mirror that is neutral, fresh, and clean to attract a broad audience.

DESIGN PROCESS

Research

Information Architecture

Interaction & User Interface Design

Testing

RESEARCH

Tools used | Research Plan, Secondary Research, Competitive Analysis, User Interviews

Over the course of four weeks, I have focused on identifying e-commerce trends and discovering existing user expectations 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 competitor’s: H&M, Zara and Old Navy.

Subsequently, I created a list of features that I believed would be useful to implement on our own product. Undoubtedly, this was something that had to be tested to see if customers see value in them. I have conducted some further market research, and later in the process, tested my hypothesis.

But based on my competitor analysis I discovered some common trends within the e-commerce market. I have noticed that many online retailers offer free shipping on orders over a certain price, provide users the option to check out as a guest or sign up for an account, and have a live chat feature to assist customers, to name a few.

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 gain insight on user habits, motivations, and needs.

I conducted a total of eight interviews with 4 females and 4 males between the ages 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 desktop 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 understanding of my participants’ thoughts, feelings, needs, etc.

Storyboard

I created a storyboard to help me visualize how our product could help users solve a common problem.

User Persona

Armed with valuable feedback, I developed a  user persona, Laura. She is a 23-year-old student majoring in web design. Laura 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.

INFORMATION ARCHITECTURE

Tools used | Card Sorting, Sitemap, Page Layout Sketches

Upon completing most of my research in Phase One, I moved into the concept of Information Architecture. This is a crucial step that  that allowed me to 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 Optimal Workshop. Participants were given 30 cards which they sorted into an average of 10 groups.

This step really helped to discover structural patterns 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. 

Sitemap

I developed a sitemap to 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 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 client’s and users’ needs.

Page Layout Sketches

Before moving into digital wireframes and designs, I allocated some time to sketch out several page layouts to 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 & USER INTERFACE DESIGN

Tools used | Task Flow, User Flow, Wireframes, Brand Logo, Responsive UI

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

It was of enormous importance to be consistent when choosing the website’s interface elements.  Since most users are already familiar with e-commerce websites and how certain interface elements behave, I wanted to incorporate familiar ones to help users complete their task in an efficient and familiar way.

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 map out 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 could wear for a party she has been invited to.

  • 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, listing, and product page. I have also included some notes on the side to explain each feature in more detail.

Brand Logo

I sketched out various logo ideas and then narrowed it down to the ones 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 in 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 envision how the website will look and how each element will help users accomplish desired tasks. This prototype was later used for testing and further improvements have been made.

TESTING

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 I used 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 in 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 users don’t get confused.

Next Steps

Doing more research, interviews, surveys, etc, and creating the remaining pages to make this a complete product. It is also important that we keep testing our product throughout the project to ensure that all pages work as desired, and we are still helping customers accomplish their tasks in an easy and efficient way, Once we have designed the remaining pages, we can handoff our project to the developers for development and deployment. Testing and iterations will take place even after the website is live to make sure we are still working towards fulfilling both customers’ and client’s goals.

MIRROR DEMO VIDEO

__ CONTACT ME

Liked what you’ve seen? Contact me if you’re interested in networking or have any questions.

7 + 15 =