My Role
UX Designer
UI Designer
Tools
Figma
Photoshop
Objectives
Design Responsive Site
Complete Rebrand
Process
Empathize
Market Research
Competitor Analysis
1-on-1 Interviews
Persona Building
Build
Branding
Verify
Iterate
Adjustments
Card Sorting
Task Flow
Sitemap
User Flow
Wireframe Sketches
Responsive Wireframes
Style Tile
UI Kit
Responsive UI
User Testing
The Challenge
Mirror is a fictitious clothing store that offers affordable and trendy pieces for men, women, and kids. They must stay competitive with other retailers by making a huge digital transformation.
How might I build an online experience that will expand Mirror's reach and cater towards their large global audience and inventory?
Empathize
Scoping out the Competition
Market Research and Competitor Analysis
I gathered insights from the market and competition to find consistent industry trends.
Insight #1
Clean Simple Logo
Competitors have a clean wordmark logo that is recognizable from not only the font, but also the colorway they use.
Result: I will need to create a new logo that focuses on clarity and memorability. The brand will have a limited color palette as well.
Insight #2
Social Media
COVID19 stay-at-home orders promoted online shopping at an astronomical level because of its accessibility. Brands needed to rapidly enhance their online presence.
Social Media, such as TikTok, Instagram, and Pinterest increased user engagement by promoting products through brand deals.
Result: I will make a responsive mobile version that makes it easy to browse pictures similar to social media apps.
Princess Polly
Insight #3
Product Presentation
Product shots are clear and styled in an enticing manner on a model. It makes the products easier to visualize on the user’s own body, giving a more personalized experience.
Result: I will need to find and create new, enticing imagery that displays products on a wide range of models.
The Girlfriend Collective
Learning About the Customers
Key Insights from User Research
After looking at the demographics of similar stores to Mirror, I determined the target audience to range from 18-35 years old. I interviewed 3 budget-minded shoppers in the target range.
"I love getting new clothes, but shopping can eat away at my free time."
Insight #1
Sale Sale Sale
The sale was the first thing all three participants would look for when entering an online site. I found that casual shoppers are more likely to purchase items if there are good bargains.
Result: Make the 'Sale section' large and in charge!
Insight #2
Organized Environment
Easy to use websites with filters, clear navigation, and clean presentation are the most sought after features because they make shopping faster and more efficient.
Result: Create easy to use filters and use white space for legibility.
Insight #3
Detailed Reviews
The most beneficial thing about shopping in person is being able to inspect the quality of a product and see how it fits on your body.
Result: Create a detailed review system that talks about an item’s quality and sizing.
Let's Start Shopping with Jackie
Persona Building
Jackie is a shopper that wants an organized site, great filter options, detailed reviews, and easy checkout. She's on the go and rather be socializing!
Build
Finding an Intuitive Layout
Card Sorting
After identifying Jackie's key priorities, I used an open card approach to gain insight about how participants would categorize 20 cards to help me better understand how they might form associations between products that may be found in Mirrors versatile inventory.
Participants categorized items in a variety of ways:
Next, I created the information architecture of the site by making a sitemap. Since Mirror has a large inventory and caters towards men, women, and kids, I created a general browsing homepage and personalized menus to make browsing faster and more organized.
Example of Women's Menu
Task Flow
Jackie wants a quick, effortless shopping experience with as few steps as possible.
Bringing Scribbles to Life
Wireframe Sketches
With the goals, features, and processes mapped out, I moved into the next phase of actually building the site starting with rough sketches.
This will be the first thing the user sees. It will be fun and modern to stay on brand.
Teaser
{
There will be an 'Enable Accessibility' and currency feature on the top banner for Mirror's growing global audience.
Accessibility
Building Trust
My interview participants relied heavily on customer reviews in order to justify their purchase. Curated quotes and product pictures will be displayed here.
{
Users will be able to see Mirror products tagged on Instagram shown on different body types for a more inclusive experience.
Insta Approved
{
{
Formatted for All Screens
Responsive Design
I took the sketched screens into Figma to bring them to life in mid-fidelity form. It was important to showcase the site on mobile because of the increased use of mobile devices for online browsing. The 12-grid structure of the desktop version made it easy to arrange the elements to fit mobile and tablet screens.
Desktop
Tablet
Mobile
Branding
"Mirror wants their logo to be modern and neutral enough to attract all types of people and styles."
Time for a Makeover!
Logo Design
The logo needs to be fresh, simplistic, and memorable. I came up with a number of possibilities and then asked for feedback from my mentors and peers.
I chose the third option because it stands out from the other two and I can use the unique lines as branding material.
Add Some Style
Style Tile and UI Kit
With the logo finalized, I was able to build the style guide for the website, making constant reference to the established logo. This was a great reference for creating the UI Kit on Figma.
Montserrat was chosen for the brand typeface because it is modern, clean, and approachable.
The New Brand
High Fidelity Frame Highlights
The user is able to filter by category, material, color, size, and prices for efficiency.
The filters are also collapsable so the user's page can be tidied up.
Filters
Feature #1
The product page has a 'Complete the Look' section for busy or indecisive shoppers.
The review section can be filtered by the user's size so they can compare similar measurements.
Helpful Suggestions
Feature #2
I created a multi-page checkout to make the process clear and less overwhelming.
The user is able to log in and pay with their Google account for faster checkout.
Intuitive Checkout
Feature #3
Verify
Does it Actually Work?
User Testing
Five people were tested to identify the user's first impression of the website and if it aligns with the brand’s identity and values. I asked the participants a few simple tasks in order to discover pain points and areas of improvement. I moderated the test on a remote zoom call while they used a prototype on Figma.
Wins:
• Organized homepage with enticing product pictures
• Large 'Sale' banner
• Extensive filters
• Detailed review section
• Intuitive multi-page checkout process
Pain Points:
• 2 / 5 participants experienced confusion when asked to checkout because there was no notification when an item was added to the bag
• 0 / 5 participants used the search bar when asked to located 'black dresses'. This may not be an error, but it would've been the fastest way to complete the task.
Iterate
Ironing Out the Wrinkles
Adjustments Needed
Change #1
Add-to-Bag Popup
2 / 5 participants were confused on how to checkout after adding an item to the cart because the notification was too subtle.
Result: I made the 'Add to Cart' button more interactive and added a native overlay that pops up whenever a product is added.
Change #2
Search Bar
When I asked the task of searching for 'black dresses' no one used the search bar because it was small and nothing happened when they hovered over it.
Result: I made the search bar more obvious by making it bigger, adding a hover color, and creating a search menu.
Final Thoughts
Shop 'Til I Drop
The most challenging part of this journey was creating an e-commerce experience that would be enjoyable and accessible to a wide range of people. Deciding which wants and needs to apply to the website was overwhelming at first, but user interviews and usability testing showed conclusive results.