Project Duration
14 Weeks
Designing a responsive website for a clothing company
Project Background
Mirror is a popular retail store that has been operating through several brick-and-mortar locations globally since 1999. They offer clothing made from high-quality materials at reasonable prices.
Though their fanbase is large, they have seen an opportunity to increase sales through the rise of post-pandemic online e-commerce.
The Problem
Mirror has seen an opportunity for expansion and would like to shift its focus on online sales in the United States. Customers have often requested an update to their online store, citing the need for more convenience, search help, and efficiency.
Solution
Mirror will be updating and expanding its online presence through a newly rebranded website. By organizing the checkout process, transactions will be more efficient than ever. By implementing robust search tools, customers will be able to locate each product they need. By adding the option to favorite an item, customers will be able to decide on items before purchase. Mirror will also clean up its current website with a modern and neutral aesthetic, hoping to broaden its customer base and attract a wider net of clients.
Tools
Figma, OptimalSort, Whimsical, Canva, Maze
My Role
UX Designer, UI Designer, UX Researcher, Branding
Mirror
RESEARCH
Competitive Analysis
Taking a look at the competition
User Interviews
Getting to know the user
User Persona
Who is the main user of Mirror?
By examining the strengths and weaknesses of several different e-commerce competitors, I saw that competitive price, quality, and brand identity are among the most significant factors of a successful clothing company. This research also allowed me to create preliminary personas.
Competitive Analysis
Taking a look at the competition
User Interviews
Getting to know the user.
Participants desire a fast checkout and payment process
Participants get frustrated if they are unable to easily navigate the product database
Participants are motivated to make purchases when there is an option to save or bookmark their favorite items
I sat down with five frequent users of e-commerce websites in order to learn more about the user's needs. The aim of these interviews is to learn more about their general shopping habits, needs, frustrations, and motivations.
User Persona
To further understand the frustrations and desires of the average Mirror customer, I created a User Persona based on an accumulation of all my research.
I found that Lina’s main goal is to purchase items that showcase her personal style at ease and when it is most convenient for her.
Key Takeaways:
A majority of the competitors possess a strong visual identity in their photography, colors, text, and overall theme.
Brands with larger inventories were more difficult to navigate and wouldn’t let users save items without an account.
Brands with smaller inventories often had well-sorted categories and subcategories.
Home pages and hero sections were often confusing and offered no leads into browsing sessions.
Key Takeaways:
Who is the main user of Mirror?
DEFINE
Project Goals
Prioritizing features when considering business vs. user goals
User Flow
Defining key webpages for user tasks
Site map
Designing the site plan for Mirror
Prioritizing features when considering business vs. user goals
In order to decide which features to focus on, I created a diagram to identify user goals (desirability), business goals (viability), and technical/product goals (feasibility).
This diagram illustrates the need for the following features:
Fast and simple checkout
Logical and efficient navigation
Ability to bookmark or save items
Project Goals
Designing the site plan for Mirror
Site Map
Prior to creating low-fidelity wireframes, I mapped out the webpages of Mirror and their relationships to one another. With help from a card-sort study and competitive research, I was able to create a categorization method that proves to be efficient and logical.
User Flow
Defining key webpages for user tasks
I was able to see that the home, log-in, browsing, item, cart, and checkout pages were key to a successful user experience by creating this user flow chart.
DESIGN
Low Fidelity Wireframes
Creating the blueprint for a responsive e-commerce site
Brand Identity
Establishing Mirror’s visual identity
UI Kit
Assuring brand consistency
Prototype
Putting together a high-fidelity wireframe
Creating the blueprint for a responsive e-commerce site
With the help of the User Flow Chart, I was able to narrow in on a low fidelity wireframe. I began with a Home, Browsing, Product, Cart, and Checkout page and created a responsive version for mobile sizes that would allow for optimization within smaller screens.
Low Fidelity & Mid Fidelity Wireframes
Assuring brand consistency
UI Kit
This UI Kit was created to ensure that all elements were consistent throughout Mirror’s web pages.
This kit is intended to be a living document in order to continuously keep the elements up to date and to speed up future redesigns.
Brand Identity
Establishing Mirror’s visual identity
Timeless, Independent, and Quality were the three words kept in mind during the branding process.
In an era where trends are short-lived, it is important to make a lasting impression with a brand’s visual identity. Due to the broad range of users I studied during my research, I decided to keep the design open-ended and neutral. To contrast this, I designed a bold logo to create a memorable association with the word Mirror.
Prototype
Putting together a high-fidelity wireframe
This high-fidelity wireframe was created by combining the UI Kit with my mid-fidelity wireframes. This wireframe will allow me to test my user flows with real participants.
TEST
Usability Testing
Putting the UI design to the test
Affinity Map
Analyzing data from User Testing
Iterations
Improving UI through iterations
Next Steps
Moving forward with improvements
Usability Testing
I asked six participants from the ages of 22-36 complete a series of tasks using the Mirror prototype.
Putting the UI design to the test
Finding an Organic Cotton Top
Favoriting an item
Checking out an item
Affinity Map
Analyzing data from User Testing
The affinity map allowed me to identify achievements and improvements within these three categories
Navigation (Filter, Sort, & Search)
Favorites
Checkout
Iteration
Improving UI through iterations
With these results from User Testing, I knew what changes were necessary in order for the Brand to succeed. By implementing these changes, I believe that our users will feel more inclined to go through with purchases, thus increasing conversion rates.
Next Steps
Adding a sliding filter + sort bar gives users a way to easily navigate through the item database without losing their place on the browsing page
Creating a seamless checkout system that allows for users to checkout as Guests and as Returning Customers will increase conversion rates.
Moving forward with more improvements
Implementing the quick favorite tool will allow users to feel more confident in their purchasing decisions.
Iteration equals improvement
Iteration allowed me to realign with the main priority of this product: the user.
1v1 User Testing offers insightful data
Sitting down with my research participants for an interview/usability test was the key to understanding which direction this product was heading. This portion of the research phase made it clear what users desired and what they were struggling with.
Key Takeaways
Final Thoughts
Implementing more features that will enable users to add more products to their cart would be advantageous for the conversion rate of the site. Adding more links to browse on each page would increase conversion rates as well. Adding a review feature once the rebranded site takes off would also encourage users to make a purchase.