Mirror

Case Study of Responsive Ecommerce Website

PROJECT BACKGROUND: Mirror is successful brick and mortar clothing retailer with over 400 stores in 32 countries. They offer wide variety of affordable and good quality clothing for men, women and kids of all ages. The company has acknowledged the fact that they need to have online presence in order to compete with existing market and to increase their sales.

THE CHALLENGE: Design a competitive responsive website for an established clothing store to increase its sales, attract new customers and to clear out remainder inventory. Give company a new look and feel by rebranding existing logo and visual system.

ROLE: UX+UI Designer (Research, Interaction design, Visual design)

CLIENT: Mirror

Research

Tools Used: Secondary research: MARKET ANALYSIS, competitor analysis, PRIMARY RESEARCH: user interviews.

SECONDARY RESEARCH

I started my research with market analysis to familiarize myself with retail and e-commerce system. I gathered information from articles, research based on in-store and online shopping to determine industry standards and user’s expectations. After that I conducted competitive analysis to understand and identify success and weaknesses of mirror’s direct competitors (Macy’s, Nordstrom and H&M) and indirect competitors (Amazon and Target). I also created provisional personas to began thinking about who might make up mirror's customer base.

PRIMARY RESEARCH

To better understand user’s needs, goals and pain points and to test my assumptions, I conducted user interviews with 4 participants who had experience with online shopping, 3 female and 1 male all ages between 25-45 years old. I asked them questions about their shopping experience, opinions and preferences.

Assumptions that I hoped to prove or disapprove were:

• People like to shop online because it has more variety.
• Online shopping takes less time as compared to in-store shopping.

Synthesis

Tools Used: empathy map, USER PERSONA, STORYBOARD

EMPATHY MAP

After completing interviews I gathered and organised all information to look for insights. I wrote down responses on sticky notes and mapped them out in doing, hearing, seeing, thinking, feeling and pains. This method allowed me to discover trends and patterns from which I constructed insights.

From the insights I identified following user needs:

1. Users need to browse on different devices. Research shows that users use both mobile phones and laptops for online shopping.

2. Detailed and accurate description of product is important for users because when they buy a product without looking and feeling it, there is high risk that they don’t get the desired quality of the product.

3. Reviews help users to get more information about the product and what experience other customers had with that product.

4. Users are reluctant to buy online, they think what if they don’t receive their package in time. So, users need fast shipping.

5. Users need discounts and promotions to be encouraged to shop online.

PERSONA

I created my user persona Emma using all the qualitative data that I gathered during my research process. Emma represent one ideal archetypical user of mirror. Emma is mother of 2 kids working full time. She love conveniency of online shopping but she don’t want to compromise on quality of product.

Defining + Stategy

Tools Used: Project road map, Feature matrix, online card sort, Site map

PROJECT GOALS

After empathizing with target users and identifying their needs, goals and pains, I moved on to next step which was defining. I mapped a Venn diagram with user and business goals and technical considerations. From this, I identified shared goals of the project which were beneficial for both user and business.

FEATURE MATRIX:

With the project goals established, I created high level list of features presented in order of priority in terms of development, business and user goals and are supported by research.

To view Product Feature Matrix, Click here

CARD SORT:

Next, I conducted online card sort exercise. I created 30 card and chose the method hybrid in which participants can choose categories provided or make their own category. This exercise give me valuable information about users expectations and preferences and it also helped me in making decisions on how to categorize and subcategorize items in mirror’s website.

SITE MAP

Based on the results of the card sort and keeping in mind user needs and goals, I created site map that outline the relationship of content on mirror’s website.

Interaction Design

Tools Used: TASK FLOW, uSER FLOW, SKETCHING, WIREFRAMES, PROTOTYPES

Task Flow & User Flow:

Once the site structure was established, I moved into ideation phase. I created userflow to think through different path user might take to complete their task.

WIREFRAMING

Before moving into digitally sketching wireframes, I began with hand sketching of mirror’s home page. This helped me in creating different options and deciding which option would best meet business and user goals.
After establishing UI requirements of key pages, I created mid-fidelity wireframes to show more refined structure of the site.

RESPONSIVE WIREFRAMES

After that I created responsive wireframes to ensure that users get consistent shopping experience through any device.

UI Design

Tools Used: MOODBOARD, STYLEGUIDE, HI-FIDELITY WIREFRAMES, PROTOTYPE, UI KITS

MOODBOARD

Because mirror was looking for rebranding its logo and visual system, so I began by defining brand attributes.

Modern / fresh / Relaxing / Inviting

With these adjectives in mind, I began collecting inspirations and created a mood board on pinterest.


LOGO

After making moodboard I began sketching logo. I played with idea of reflection and symmetry and also with different typefaces. I settled on modern and uncomplicated “mirror” name in front with the impression of rectangular mirror behind it.

STYLEGUIDE AND UI KIT

After establishing design direction, I created style guide which helps in visualizing the idea and to communicate the design concept.

UI kit was created to document the design patterns and components and to ensure consistent application of elements across the product. Both style guide and UI kits are constantly changing as the product evolves.

HIGH-FIDELITY WIREFRAMES

After several iterations on low-fidelity wireframes, I put details on each page (images, typography, buttons, icons etc) and then make a prototype on invision for usability testing.

Testing & Iteration

Tools Used: USABILITY TESTING, AFFINITY MAP, HI-FIDELITY WIREFRAMES ITERATION

USABILITY TEST
I conductive usability test with five participants. 4 female and 1 male. All tests were done in person while I observed the users closely. I read them the script and gave them scenarios 1 by 1.

Tasks:
1.
Shop for women tops and add them to your cart.
2. After adding the top to your cart, go to women’s new arrival collection.
3. Save the product you are viewing in product page and navigate to category page to find more products.

At the end I asked them few questions about overall look and feel of website and about their experience with the website. All the participants completed their task successfully.

AFFINITY MAP

After testing my prototype I created affinity map to organize responses and observations. This helped me in checking for patterns and driving insights, from which I constructed design recommendations. I listed out design recommendation in the order of high priority to low priority.

Overall users were able to navigate through the site efficiently. Some confusions occurred but that was because of limited functionality of the prototype. Based on usability test I made following revisions in design.

1. In product page increase contrast between selected and unselected color and size option.

2. In product page make star ratings more prominent (below product name) to let them know that ratings and reviews are available.

3. Add more options to view product images like video or 360 view and zoom in option when click on it.

4. Make some design changes in review section to show that bar chart for quality, size, comfort and styling is not based on overall reviews but is based on individual customer review.

HIGH-FIDELITY WIREFRAMES AFTER ITERATIONS

PROJECT TAKEAWAYS

In this project I faced the challenge to give mirror strong look and feel that leave permanent impression on users mind but also I had to follow the convention to make shopping experience smooth and natural.

NEXT STEPS

Next steps for this project is to conduct usability test with updated prototype and determine if usability issues have been resolved.