Responsive E-commerce Site & Branding
Mirror Case Study
This is my first UX project in DesignLab. The goal was to rebrand Mirror with a fresh new logo and create a responsive e-commerce website. This was an exciting project to tackle. It was nice to begin this project with a retail background and online shopping experience. This really helped with the empathy stage of the design process.
Challenge
- Build a responsive e-commerce website that is easy to use and allows customers to browse through all products, filter by size, color, style, and feature, and efficient checkout process.
- Create a logo and brand style tile that reflects Mirror.
Background
4 weeks
Figma, Illustrator, Miro, Optimal Workshop
1 UX Designer
The Process
- Empathize
- Define
- Ideate
- Design
- Test
I began this project by doing research on potential competitors. I was aiming to understand these competitors' strengths and weaknesses which helped me in creating provisional personas. I found many similarities with the placement of elements like buttons, carousels, navigation menus, etc. I also found that many e-commerce sites are loaded with pop-up ads.
After creating my provisional personas, I conducted interviews to dive deeper into understanding online shopping vs in-store shopping. I found that customers prefer in-store shopping because they’re able to feel the product before buying it, can talk to someone for help, and get better deals.
The majority of my participants agreed that online shopping saves time in their day to do other things. Especially during unprecedented times with the pandemic. Many stores have seen an increase in online sales around the beginning of the pandemic.
With the information I was able to collect from participants, I was able to create a persona. Meet Nickki, the saveable fashionista. The main goals customers look for in online shopping are deals. Customers want to save money while shopping for good quality clothes.
Customers also want to see a smart search engine that allows a faster way to find a specific item. Many customers are frustrated with shipping and return costs. One participant would not purchase online if shipping was a high price.
After conducting interviews and creating a persona, I was able to begin defining the business and user goals, pain points, and create a task and user flow. Below you will see a Venn diagram that shows the “intersection” between business goals, user needs, and technical constraints.
Once I was had a clear understanding of business and user goals, it was time to figure out the flows. I created a simple task flow for personas Nicky. Her task is to find a dress on the Mirror mobile app. Nicky would open the app, browse through dresses, read the reviews, then add the dress to her shopping bag and checkout.
I also created a user flow that helped me figure out where customers are coming from when they arrive on the landing page. Below is an example of a frequent shopper inputting the website address, the google search shopper, then the social media shopper.
Creating the task flow and user flows really helped me understand where online shopping is coming from. As an online shopper, I do most of my shopping on mobile apps because I find it faster and less overwhelming looking at a big screen of images and texts.
Next, I used Optimal Workshop to figure card sort products into categories. I had previous and new participants categorized products like denim, jackets, accessories, dresses, etc. Many participants placed products by gender and some placed product by season.
I had a lot of information to work with and it came time to design wireframes and prototype. I built a low-fidelity wireframe showing the process of searching a product on the homepage to purchasing the product. I also created a low-fidelity responsive design.
Low-fidelity Wireframe
Low-fidelity Responsive Design
After creating the first high-fidelity wireframes, I received a ton of feedback about users who want to see a review section to read and write reviews. They also wanted to see an option to connect with an online stylist. The other feedback was minor design errors about the navigation menu, promos in the product pages, colors, and images.
The final design features a slightly bigger navigation menu, a calmer color tone than the original, a section where users can read and write reviews about a product, and an option to connect with an online stylist.
Thank you!
