Mirror
A responsive e-commerce website for a clothing brand.
Role
UX/UI Designer, Researcher
Duration
5 weeks
Team
Self
Mirror is a clothing store that offers affordable, quality clothing for any occasion for everyone. Mirror started back in 1994 as a clothing brand that was very popular in several countries around the world.
With the success of the brand, Mirror is looking to make the shift to an online presence.
The Challenge
Shoppers are looking for a quick and easy way to shop. They also want good quality clothing at affordable prices.
The Solution
My goal was to create a responsive e-commerce website that allows shoppers to easily filter through results and navigate the website to browse for products. I also wanted to redesign a logo that is modern and neutral which resonates with different types of people and styles.
Phase One: Empathize
Secondary Research
Market research was conducted to familiarize myself with the current industry trends, demographics of online shoppers, and shopping behaviors in the ecommerce space.
Moving onto the competitive analysis, I wanted to assess how the top competitors (H&M, Old Navy, Asos) were performing by analyzing their strengths and weaknesses and to observe their approach to solving a similar problem and find opportunities for a competitive advantage. Some of the best practices identified include true to size feature in reviews, well organized navigation menu, and good filtering system. Areas for improvement include messy navigation pull down, endless page for product results, and no customer reviews.
User Research
I wanted to get a better understanding of how users are currently shopping for clothes and their overall experiences with shopping in person and online so I created a list of questions and conducted one on one interviews. I interviewed 4 participants, both female and male between the ages of 22-55, in which two who shopped often, and two who shopped occasionally.
After conducting the interviews, I found that participants looked for a quick way to shop and a wide selection of clothing. Participants also mentioned problems with finding the right sizing and bad customer service.
Here are two quotes that defined the users’ pain points:
“I bought a few things online, but when they arrived they didn’t fit right and I was disappointed because I was looking forward to wearing my new item.”
“Having bad customer service could prevent me from going back to the store in the future.”
Phase Two: Define
Empathy Map
Based on the interview findings, I created an empathy map to categorize all of my users' problems and their mindsets in one place in order to further empathize and focus on my user’s goals, motivations, frustrations, and needs. I noted down all of my observations for each user on post it notes, and then put them into different categories. Then I further grouped them into themes and uncovered similar patterns.
**add image
From my observations, I was able to uncover the following insights which translated into these needs:
Insights
Shoppers prefer to shop online because it it convenient
Shoppers worry that products won’t fit them if ordered online
Shoppers are motivated by good deals when shopping
Shoppers are influenced by product information before purchasing an item
Needs
Shoppers need an efficient way to shop for clothes
Shoppers need to have accurate sizing
Shoppers need to know that they’re saving money
Shoppers need to have access to product information to validate their purchases
Persona
After determining the needs of my user, I created the persona to represent the target audience segment including the goals, needs, frustrations, and motivations.
**add image
Phase Three: Ideate
Sitemap
I created a sitemap in order to determine the information architecture of Mirror's website using the card sorting results to frame my work. This helped me organize the content to ensure it is user centered and easy to navigate through.
Task Flow
Once we have determined the skeletal structure of the site, I was now ready to determine the key screens necessary by creating a task flow. In the task flow, I represented the path a user takes from searching for a product to making a purchase.
User Flow
I wanted to look at all possible ways users can complete the tasks, so I created a user flow with different scenarios. This enabled me to account for the potential errors and mistakes made by users and create all the screens needed to accomplish these tasks.
**add image
Wireframes
Low Fidelity to Mid Fidelity
I started to brainstorm ideas for the website’s layout before moving onto digitizing the wireframes. The reason I created a low fidelity version first is because I wanted to visualize the hierarchy, priority, and flow of the elements before adding in any details like colors and typography.
**add image
Style Tile
After designing the site’s layout, I proceeded by defining Mirror’s brand identity using the following brand attributes: minimal, modern, sleek, neutral, trendy, feminine, and effortless. Taking these brand attributes, I gathered inspiration to create the logo, colors, typography, and imagery for my brand. All elements were put together in the style tile which served as the foundation for the interface design.
**add image
Responsive UI Design
With the popularity of different devices used today, I wanted to design responsively in order to account for all types of devices and ensure a seamless user experience. The process I took to design responsively is I started out with mobile and looked at competitor websites on my phone. While designing, I kept in mind to only change the layout or remove content not required and most importantly being consistent across all devices. Some of the things I optimized were the drop down navigation menu which became a hamburger menu and sliding from right to left for a few of the sections.
From my research, users prioritized the need for saving money, an efficient shopping experience, to find accurate sizing, and access to customer reviews. These needs were translated in my design and prioritized according to their urgency.
**add image
Phase Four: Prototype
High Fidelity Prototype
Moving onto the prototype stage, I created a high fidelity prototype which featured several different screens needed to complete the tasks that allowed users to interact with during the usability testing.
Phase Five: Test
Usability Testing
With a functioning prototype completed, I observed how users interacted with the prototype by conducting usability testing.
The following tasks were asked to be completed by the participants:
Scenario 1: On instagram, you saw a black jumpsuit worn by an influencer that you liked and decided to search for it on Mirror’s website.
Task 1: Find a women’s black jumpsuit that is the least expensive
Scenario 2: You find a black jumpsuit that you like and want to learn more information about it to find the right sizing.
Task 2: Determine the right sizing for you
Scenario 3: You are satisfied with this jumpsuit and would like to purchase it.
Task 3: Purchase the black jumpsuit
This testing revealed the problems with the design of the prototype and helped provide me with feedback that can be used to revise the final product.
Affinity Map
After conducting usability testing, I synthesized my findings through an affinity map which organized all my observations into different categories.
**add image'
Once the observations were sorted into groups, the following pain points and insights were revealed which then gave me recommendations for next steps:
Pain Points
Wasn’t sure what the size assistant feature was but clicked it
Mentions that the breadcrumb should be bigger to be easier to read
Recommendations
Include a description or phrase for the size assistant feature
Make the breadcrumb font bigger
**add image
Refining the Design
Using the insights and recommendations that I prioritized, I revised my prototype and created the final prototype.
I wanted to create a cohesive final product that aligned with Mirror’s brand identity and met the needs and goals of my users and business as well by focusing on consistency throughout all pages and making sure to be accessible to all users.
**add image
Reflection
Working on this project helped further my understanding of the design thinking process and the importance of building empathy. As my first UX design project, I was able to gain experience in the different roles as a UX designer from user research to prototyping. Through the user interviews, I learned the importance of stepping into the shoes of my users and really capturing their pain points in order to provide a lasting solution.
Next Steps
I would like to continue to iterate on my designs and conduct further usability testing. I would also like to create prototypes for the mobile and tablet versions as well for further testing.