Mirror Case Study
A global clothing brand is in need of a responsive website and new modern brand in order to better serve and connect with their customers.
Role: UX/UI Designer, Logo Designer
Duration: 120 Hours
Tool: Figma
Mirror had a large international network of clothing stores that needed an update with their branding and a new responsive website. They wanted to be competitive online, so I began my research looking for problems that customers needed to be solved as well as what strengths competitors currently had with their online presences.
Overview of Process
1 Research
Competitor Analysis
1-on-1 Interviews
2 Define
Empathy Map
User Persona
Card Sorting
Product Development Roadmap
Site Map
Sketches
Task Flow
User Flow
3 Design
Wireframes
Responsive Wireframes
Prototype
Mood Board
Logo
Style Tile
Responsive UI
UI Kit
4 Test
Hi-Fi Prototype
Usability Testing
Affinity Map
Gathering some data first
Competitor Analysis and 1-on-1 Interviews
What competitors are doing
I put together a chart of 5 of Mirror’s competitors, and then I listed their strengths and weaknesses after looking at each of their websites.
Overall these websites were very well done and had some great universal elements I kept in mind for my design. I did hope to improve upon the small weaknesses I found in order to make Mirror’s website as successful as possible.
What customers have to say
I interviewed 5 eCommerce customers to explore their past experiences shopping online in general, and specifically for clothing as well.
The same set of questions was used for each participant and the responses were all written down to be examined together.
Overall there were a few trends that emerged once I had a chance to talk to each of the participants.
“I want to make sure the sizing and fit is right, and I don’t want to have too deal with too much trouble if I need to do a return.” - Interview Participant
What I learned from my research
Needs
Casual Clothing
Goals
Good Quality Clothing
Low Prices
Pains
Sizing Issues
Difficult Return Process
Customers clearly wanted an easy shopping experience. To create a hassle-free shopping and buying process, I took a look at how I could prioritize the specific needs of customers with the simplest user flows possible.
Defining the User and Tasks
Empathy Map, User Persona, Card Sorting, Site Map, Sketches, Task Flow, and User Flow
Exploring the User Mindset
I wanted to take what I learned and give myself a clear direction when approaching the customer’s perspective in the rest of the project. Using the results of my research, I thought about the different defining traits of Mirror customers. I took these aspects of lifestyle, wants, needs, and pains to create my empathy map.
Doing
Looking at clothing sites on her phone
Searching for the best deals
Pain
Figuring out her size for brand
Verifying product descriptions
Gain
Great fitting clothes
Great deals/value
Thinking / Feeling
How to budget for clothes
Best outfits/match clothes
Creating a User Persona: Stacy Mitchell
Age: 25
Job: Waitress
Status: Single
Location: New York, NY
Gender: Female
Archetype: The Starving Artist
“Life in the city is hard, but I wouldn’t rather be anywhere else! I live on a budget, but I also like to treat myself now and then.”
Goals / Needs
Figuring out the correct size
Finding the best deal on prices
Buying clothes with good quality
Frustrations / Fears
Buying the wrong size
Having trouble returning clothing
Reading an inaccurate product description
Motivations
Finding the best fitting clothes for her body
Buying clothing that stays in her budget
Having clothes for all occasions
How might we best organize Mirror?
Before laying out the task/user flows and site map, I had a large group of participants card sort different clothing items to see how they would most naturally organize them. Additionally, I created a product development roadmap to prioritize the different features I should have as part of the website. I wanted to make sure I was organizing and prioritizing based on my user persona.
How might we structure the website?
Site Map
The site map was created in accordance with the card sorting results and product development roadmap. Overall, the organization is very similar to competitors in order to take advantage of industry standards that make the design very learnable and usable.
Sketches
With the Site Map completed, I began making sketches as a way of brainstorming my eventual wireframes. I went through multiple iterations in order to test different combinations of elements and sections.
Exploring a Task Flow & User Flow
I created a task flow and a user flow of the steps involved for a customer to select and purchase an item from the website. Each process was refined to be as simple and efficient as possible.
My site map and user flow combined the results of my research from customers and industry standards. I continued this trend as I started to design the website and brand. I wanted to make Mirror stand out and attract the correct customers, but to also have enough familiarity in its buying experience so that new customers would be able to quickly navigate the website.
Designing the Brand and Website
Wireframes, Responsive Wireframes, Prototype, Mood Board, Logo, Style Tile, Responsive UI, and UI Kit
Laying out Wireframes and Responsive Wireframes
My initial wireframe was designed using the elements from my sketches that I felt made for the easiest navigation. Once I was settled on a wireframe, I converted it into a responsive layout that could work universally across multiple devices and screen sizes.
Testing functionality
I next built out a prototype to test my website’s functionality before adding in the UI elements. This was a chance to double check everything I had planned out from my site map, task flow, and user flow.
How does Mirror look?
Mood Board
Brand Personality:
Affordable
Accessible
Simple
International
Clean
Modern
Neutral
Fresh
Clear
Logo Design
For the logo I put and emphasis on the requests of the company for a neutral and modern logo. Also, given their wide range of customers, I wanted a design that was very easy to read.
Brand Style Tile
Using my different brand design elements, I put together a Brand Style Tile to use as a guide for my first version of the Responsive UI.
Putting it all together
After having my Responsive UI visually put together, I was able to make several revisions to improve the overall design. This included many adjustments to the font and font sizes as well as layout adjustments to help better serve the persona using this website.
Deliverables for developers
Once I had finalized my Responsive UI, I created a UI Kit that I could then pass on to developers in order to eventually build out the website. This includes the final fonts, colors, logos, icons, buttons, form fields, etc.
The final branding was based on the stakeholder’s goals of being modern and clean. The UI design incorporated this style and matched the functionality of its competitors. It was time to test the UI by creating a Hi-Fi prototype and making sure that user needs and goals were met.
Testing the full design
Hi-Fi Prototype
A full hi-fi prototype was made for use in usability testing. This also allowed me a last chance to check the design and functionality of this website to see that it addressed all the original objectives.
Usability Testing
5 participants (similar the original interviews) were used to test the prototype to simulate them finding an item to add to their cart and then buying it.
Affinity Map
After completing the usability testing, I organized all the main points brought up by the participants into an infinity map.
Some of these notes were positive and reinforced the decisions I made in my designs, and some offered ideas for subtle changes before passing on the design to developers to built out.
Brand
P1 - 20s to 30s age-targeted
P2 - Customer age seems to stop at 40
P3 - Sharp and clean, great logo
P4 - Looks like a bargain-focused brand
P5 - 20s to 40s age targeted
P6 - Professional and clean looking
UI
P1 - Product options (size and color) could be smaller
P2 - Product description should include the size of the item used in its photo
P2 - Placement of Newsletter seems to cut off page early
P3 - Progress bar during checkout looks like buttons
P5 - Taxes and Shipping should be in price summary
P5 - Logo in the corner is not enough to identify brand
Function
P4 - Would like to have seen the sizing guide function in the prototype
P5 - Would like to have tested filters more in prototype
Revising the design based on the feedback
Once my testing was complete I swapped some photos to include a greater age-range that better reflects the Mirror Brand. I also made adjustments to the product page and checkout process to improve the UI Design. My feedback also made me think back to the original goals of my User Persona.
My research and User Persona emphasized the importance of easy returns, clear sizing, and validation of a product’s description.
Returns have a link in the top left corner of every screen so there is no hassle figuring out where to go for that information.
Sizing is assisted through a sizing guide which is linked directly below the sizing options.
Customer Reviews are the first element below the product’s name, giving the shopper access to outside feedback on the product they are considering.
Conclusion
Reflection & Next Steps
This project showed me how important industry trends can be. If I made too many design choices that were different than what customers are used to, I could end up causing more problems for the user experience. I also noticed that many competitors use social media as part of their online strategy. The website for most brands is a simple store, while their social media focuses more on storytelling that will lead the customer to the website.
The next steps in this process would be to show the design and branding to Mirror for feedback, and then, if approved, pass along the deliverables to the development team to build out the website!
Back to my UX Portfolio