Mirror
Mirror is a global clothing chain that runs under the philosophy of clothing for everyone. They are looking to expand their business with an online shop. They want their website to represent the feel of their store, not fancy, but clean and well taken care of.
Objectives
Design a logo and create a responsive ecommerce website that reflects the existing brand.
Research
Clothing e-commerce websites are very common so I had to research about the current space and what the competitors were doing as well as learning more about how the customers feel about the experience. To learn more I conducted a competitive analysis, interviews, and contextual inquiries with a few goals in mind.
My main research goals were:
Understand what customers like most about the online shopping experience
Learn about what customers dislike about the online shopping experience
Find out who their competitors are and what aspects of their websites are successful or unsuccessful
Learn about filter functions of a website, what they do well, and what can be improved
Research Findings
Through the research I found that existing websites cater to different types of shoppers but there are a lot of common features that the websites share. I also found that when looking for specific items users preferred searching for them in the search bar rather than narrowing items down by filters. Through interviews I discovered some common wants and needs of customers.
Common Needs
Shipping and return policies communicated accurately
Accommodating customer service
Ability to browse wherever
Common Wants
Detailed product descriptions
Well advertised promotions
Brands that carry the style desired
Based on my research I created a persona and an empathy map to better understand a target group of users and the goals and frustrations they face.
Sarah is a hesitant online shopper, she enjoys browsing online but doesn't make purchases too often because of the hassle involved in making returns and dealing with customer service. She is attracted to promotions at brands with quality, versatile clothing.
Empathy map created to further understand Sarah's motivations and likes and dislikes of the online shopping experience.
Interaction Design
Sitemap
I conducted a card sort using items that may be found at an apparel shop. Based on this data I was able to outline the navigation.
A sitemap is created as an outline of the navigation of the website.
User Flow
I also outlined the main user flow as a representation and guide for the wireframes and prototypes.
The main user flow shows outlines what pages are necessary for the prototype. In this case the example was finding a women's jacket, from homepage to checkout.
Sketches and Wireframes
Initial design sketches were made and compiled into wireframes. Since online shopping is done on a variety of devices responsive design was an important aspect to consider and develop.
Wireframes showing the home page and product page for desktop, tablet and mobile screens.
Branding
The branding was created based on the message and feeling the company wants to convey to its customers. I found inspiration from geometric illustrative websites and designs that utilize thick lines and block letters.
Increasing Fidelity
Based on the branding I increased the fidelity of the wireframes and created a prototype that can be used for user testing.
Usability Testing
The prototype was created for the desktop version of the website to test the main user flow of searching for and purchasing an item on the website.
The main goals of the usability test were
Evaluate the navigation and flow of the website
Get the users impressions of the website
Observe possible problems or hesitations with the experience of the website
Test Findings
The main thing that slowed down usability was the desire to sort and filter items which differed from my initial research. While during research users preferred searching over filtering, during the usability test users wanted to sort and filter items because they were not exactly sure of the item they wanted. Other smaller things that slowed down usability were clicking the product name to access the product page, and having the color of items pre-selected when going to the product page.
Affinity Map
Potential Solutions
To solve these problems I came up with some potential solutions.
Created a hover state on the lookbook to show more information about the items featured
Added the ability to sort and filter items
Allowed clicking the product name to go to the product page
Made one of the item colors a default selection
Changed the wording of the "go to shopping bag" button