Mirror hero image

OVERVIEW

ROLE

  • Sole UX researcher & UX/UI desinger
  • Design logo and e-commerce website
  • Maintain brands identity by keeping it modern, fresh, clean and clear.
  • Usable from all devices
  • Met weekly with a mentor to go over work
  • Duration 8 weeks

WHAT IS MIRROR?

Mirror started in 1994 as a clothing store targeting a budget-minded audience who were looking for low-cost clothing for any occasion. Their main goal is to make any type of clothing accessible to everyone. They believe clothing doesn’t have to be expensive and last forever--that we should be able to change styles as we need and please.

PROBLEM

Mirror has not kept up with the growing e-commerce market and have never had a web store.

SOLUTION

A modern and full featured e-commerce website must be created with a great user experience that can compete with the major players in this already crowded space.

PROCESS

RESEARCH

The goal of the research phase was to discover trends and patterns across various e-commerce sites, as well as to discover pros and cons of in-store vs online shopping to discover new ways to improve the online shopping experience.

COMPETITIVE ANALYSIS

The first step of the research phase was to determine which big players in the space were similar to Mirror in feeling or functionality. I explored the strengths and weaknesses to find ways to make the Mirror website encapsulate the best of what’s already utilized in the marketplace.

old navy

Strengths

  • Big variety of clothing for men, women and children
  • Affordable
  • Size inclusive
  • Show savings in checkout

Weaknesses

  • Homepage overwhelming
  • Quality can be hit or miss
  • Shipping only free $50 and up
zara

Strengths

  • Trendy
  • Good selection of clothing for all genders
  • Typeface clean and sleek

Weaknesses

  • Homepage hard to navigate
  • Photos of products all over and different sizes
american eagle

Strengths

  • Easy Navigation
  • Very good use of whitespace
  • Gives user recommendations when adding to bag

Weaknesses

  • Homepage images too big
  • Have to scroll all the way back to change filters
american eagle

Strengths

  • Easy Navigation
  • Very good use of whitespace
  • Gives user recommendations when adding to bag

Weaknesses

  • Homepage images too big
  • Have to scroll all the way back to change filters

GOALS

After the competitive analysis was completed, I compared and contrasted the goals for the user, business, as well as technical considerations in order to determine the optimal solution for each.

mirror project goals

USER PERSONA

After completeing the research of the category space, I used this information to create a persona for a fictional potential user of the Mirror site.

mirror persona

information architect

Content was collected by using a method called card sorting to see how prospective users categorize information. Once this information was gathered I then created a site map and sketched some rough drafts for the homepage.

Cards used

Card sorting was conducted through the Optimal Workshop online. Participants were asksed to categorize 20 different cards into categories of their liking. Total of 10 participants.

mirror card sorting cards

takeaways

I was really surprised by the results. I had initially anticipated organizing the items by type. Specifically by tops, bottoms, outerwear, etc. But after analyzing the results of the study I realized that it may be better to organize the results more by style -- formal, casual, athletic.

SITE MAP

mirror sitemap

SKETCHES

mirror sketches

interaction design

The goal of the interaction phase was to get into the heads of potential users and create a framework for the best user flow and needed pages.

TASK FLOW

mirror task flow

USER FLOW

mirror user flow

WIREFRAMES

mirror wireframes

Visual Design

The research was all brought together in this phase to create the brand identity. From logo to the UI kit, each of these pieces are ultimately brought together for the final design.

LOGO

mirror logos

MIRROR UI KIT

mirror logos

USABILITY TESTING

TEST OBJECTIVES

  • Test overall functionality of prototype
  • Test efficiency of CTA’s
  • Test to see if user can complete a shopping task

TEST SUBJECT

  • High fidelity prototype of Mirror

Methodology

  • In person testing with audio recording

Participants

  • 3-6 participants
  • Male & Female
  • Ages 22-50

Recruiting Plan

  • All participants are family, friends and co-workers.
  • A few like to shop often and others every once and awhile.

OVERALL IMPRESSION

  • All participants found Mirror to be clean and clear.
  • All participants liked the website as a whole.
  • 4 out of 5 participants liked the color scheme.
  • All participants were able to find and identify things quickly.

FINAL THOUGHTS

OUTCOME

The goal of the project, to create a modern and sleek e-commerce website for Mirror, was achieved. The final usability testing shows that 100% of the users tested were able to navigate the website seamlessly in a variety of ways to land on the same product. This shows that the research conducted was utilized to create a welcoming and user-friendly site. The final result is clean and consistent. It reflects the brands goals and brings this company into the modern e-commerce age.

next steps

There are a few things that could be added that could take this site to the next level. A hover feature to zoom in on clothing on the product page would be a great next feature. While the current design achieves its goal of being gender-neutral, a more masculine design for the mens side of the site could also be added. Finally, some users interviewed expressed a desire for a ‘virtual try-on’ similar to what many e-commerce glasses stores offer. This could be a great goal for the company to implement and set themselves apart from the e-commerce giants.

key takeaways

The key takeaway from this project was the importance of the research phase. As I initially approached this project I felt that it was straightforward and that the research would provide little insight beyond competitor analysis. I found however that card sorting and profile creation had major impacts on the overall architecture of the site.