Designing a responsive
E-commerce fashion website
Mirror started back in 1994 as a clothing store targeting an audience looking for value clothing for any occasion. Their website was outdated and we were tasked with a complete redesign. For now, they wanted to start with a new logo and an ecommerce responsive website where they can sell their products online.
The task involved understanding the e-commerce market, empathizing with customers and uncovering their core pain points when shopping for clothing online. As result I was able to understand and define our target audience and creatively build a product that would ultimately satisfy their needs.
To inform my approach I adopted Stanford D School Design thinking methodology as outlined below. I designed a website that is easy to use and that allows customers to browse through all products and filter by size, color, style and others. Following research and ideation, the design system for Mirror was established with brand guidelines and a new logo to represent our target user group. Users commented that the site is modern, clean, fresh and that they enjoyed using the site. According to our usability tests, they were able to complete tasks with 100% accuracy.
Further improvements will be discussed at the end of the case study.
To be able to give our users what they need, we knew that we must first empathize with them. By exhibiting compassion for their feelings, thoughts, behaviors, and needs, we were effectively able to identify our users pain points and solve design problems that came up. First was planning and research ramp up.
We conducted user interviews, through qualitative and quantitative methods to determine patterns, gain statistics and understand the users problems. This allowed us to be able to empathize with their needs and expectations. Interviews went in depth to address pain points and resulted in quantitative data, but were mostly focused on gaining qualitative data. We successfully completed interviews with 4 participants, aged 30 - 37 living in New York. All participants are busy professionals and shop for clothes frequently online. In interviewing the participants we focused on building empathy by making the interview conversational and relaxed. This allowed users to get comfortable with us to tell their story.
A contextual Inquiry helped us see how our customers use the product. We took away learnings from these usage patterns, which is mostly unconscious behavior.
Key Findings
• Users need to have free shipping and free returns.
• Users need to save time by shopping online
• Users need to get satisfaction from using the Mirror website
• Users need to make sure items are affordable and stylish
• Users need to make sure website is secure before purchasing online
• Wants:Users want timeless pieces that they don’t have to throw out
• Users want brand membership and loyalty programs
• Users want clothes that fit well and look good
• Users want the best price possible and want coupons
• Users want email subscriptions to get deals to their inbox
• Users want many payment options
• Users like reading reviews on products to inform their purchase
Competitive analysis can also be referred to as benchmarking. It helps companies set a line of minimum features, products and services to offer in order to serve customers.
Empathy maps are a great tool for understanding your users, organizing our research, and driving a human rather than technical view of a product or project. We create them to provide a proxy for the user during design and to ensure that the project team is in a human-centered mindset. It allows us to understand the broader influencers in user's lives. And by organizing our research into a coherent vision, this tool allows us to gain empathy with our users and to create a cohesive, empathetic view of them. Knowing how the user feels, how would they feel about this design decision?
To be able to give our users what they need, we knew that we must first empathize with them. By exhibiting compassion for—their feelings, thoughts, behaviors, and needs, we were effectively able to identify our users pain points and solve design problems. Personas are a tool for us to understand our users better. We create them by looking for behavioral patterns in the data that we collect through research.
For any given problem space, there tend to be distinct behavior types, views or attitudes of people, therefore it is essential that we can get a accurate picture of ourmain user through the creation of these personas.
I took the features gathered from research and mapped them on the feature matrix based on examining the values both for the user and the business.
Illustrated storyboards help us narrate our users experience in context of their daily lives. They add a human element to our research through storytelling, and we are able to uncover key aspects of their behavior by utilizing this method. To quickly synthesize on our findings I sketched a storyboard of our user, further helping us understand our user and her needs.
During the define phase, the main goal was to synthesize our research findings and clarify the details of what will be created, for whom, and how. Based on the research we gathered from our 1-on-1 interviews and analysis, a persona was created, which identified the branding language and style.
According to Information Architecture for the World Wide Web, card sorting “can provide insight into users’ mental models, illuminating the way that they often tacitly group, sort and label tasks and content within their own heads.”Card sorting is a great, reliable, inexpensive method for finding patterns in how users would expect to find content or functionality. Those patterns are often referred to as the users’ mental model. By understanding the users’ mental model, we can increase findability, which in turn makes the product easier to use.
We performed Open Card Sorting, where Participants were given cards showing site content with no pre-established groupings. They were asked to sort cards into groups that they feel are appropriate and then describe each group.
Based on the card sorting exercise I was able to categorize my groupings effectively into a sitemap.
Applying what I learned so far, I created a list of features—key elements that should be included in the product’s design. To generate our requirements effectively, I first created a list of features based on our user research conclusions, the business’ needs, the persona, and the market analyzed. Then I prioritized the features on the list based on their importance to the business and our users.
Then I created the Product Requirements to highlight the features that I believed to be most important so that I would know what features to include in the first roll out of the product.
Up to this point we took a set of business requirements and user goals, and turned that into a set of core user flows, sitemaps, and initial sketches. During the ideation phase, we take our findings and create flows to understand the journey of our users.
A simple task flow was created to understand the journey a user will go through to purchase an item. Creating this flow helped us find any potential pain points and gaps that could present itself in the users experience.
A user flow was then created to understand how a user would navigate through the structure of the site. We focused on the checkout experience and how the user would ultimately get to purchase an item.
To quickly synthesize our findings and start thinking about the look and feel of the site, I created several drafts of hand drawn wireframes to gather ideas and inform the design language of the site without pushing pixels.
Once we agreed upon a design language that resonated with us and aligned with users expectations, I created hi fidelity wireframes in Sketch.
A style guide was created to match the brands new look and aesthetic and inform the design of the website. The new Mirror logo was inspired by the clean and modern lines of the style guide created.
Following the Style Guide I crafted a UI Kit that would inform the Design System for Mirror.
After building out my wireframes and my UI kit, I made the UI Designs of the project.
My next step was to create a clickable prototype using inVision. Prototypes allow us and our users to get a quick idea of the project without actually hard coding the design. You can view the prototype in Invision by clicking the button below.
VIEW PROTOTYPETo validate design decisions I gathered participants who would perform usability tests on the Mirror prototype, using Invision. The error free rate was 100% for all users tested. Tests with our users revealed additional insight, which guided the creation of our Affinity Map.
I conducted usability tests for the Mirror website with several participants. I interviewed a total of 4 participants. Each participant liked the layout of the pages, font sizes, pictures and cleanliness of the page. There were specific comments about some design choices. As result, I gathered valuable qualitative insight on how users completed tasks on the Mirror website.
100% of participants liked the layout, font sizing, pictures and aesthetic of the site.
50% said they would prefer for the sale banner to be full width
50% needs easier access to the toolbar, 25% suggested a floating toolbar
75% wanted to get a promotional discount at first glance, preferably as a pop up overlay.
As I synthesized findings from our usability testing, I was able to find out where the pain points of the users were stemming from and what could be further improved. The affinity map visualizes these results.
After wrapping up our usability tests we found some areas of improvement that would be implemented with allocated time and budget. In hindsight, more usability testing and research would uncover additional pain points and would lead us to making better design decisions. One takeaway from working on this project was understanding the value of user research and planning to synthesize findings in the most helpful way to our users within our constraints.
