Mirror
Creating a responsive ecommerce website for a popular clothing store chain transitioning from offline to online sales.
Project Date: May 2022
Company: Mirror LLC
My Role: Research, Personas, Sketching, Prototype, User Testing
This is a fictional case study.
Overview
Project Background
Mirror is a large and well known clothing store chain with over 400 stores around the world.
They provide good quality clothes at an affordable price.
They sell a variety of clothes from kids styles to adult casuals and business formals.
Their business motto is that styles should be changed as time passes– as a result, clothing don’t need to be expensive and last a lifetime.
Although their stores do well world wide, they are looking to expand online with greater opportunities for sales and convenience.
The Challenge
Mirror lacks an online presence in the digital transformation game. The website is outdated and only informational rather than transactional. Customers want a convenient way to shop from the comfort of their homes.
The Objectives
Examine users experience with ecommerce such as aspects that enhances experience, understanding customers expectations and determine which applications are important to design an ecommerce website that would benefit users and explore their pain points to increase user usability.
Research
Methodology
Competitive Analysis:
Research goal to learn for competitors that are most similar to Mirror and grasp an understanding of how they run their online businesses and what makes them successful in the long run.
User Interview:
Initial research goal is to learn about how customers shop, their preferences, specific pain points when shopping online and in stores.
3 Users were recruited for initial research to create a user persona.
User interviews were conducted virtually.
Competitive Analysis Finding
Impact of Ecommerce
With the emergence of ecommerce and the increase of transition from in store to online, the impact is big for both small and big companies. Ecommerce creates competion between big companies as the retailers who did not transition fast enough was impacted the most.
Traditional jobs are reduced, but new jobs emerge. Most new jobs are in medium to large metropolitan areas [most] with four or less employees.
Ecommerce has revolutionized the way modern consumers shop. Millennials are the largest demographic of online shoppers. Social media plays a big role influencing buyers.
Competition
Huge increase in online sales led to the compeition we see today, especially with lock downs and social distancing. Because everyone wants to be the best, there’s an increase in ad costs.
Staying ahead of the competition
Creating a positive experience for customers is important for ecommerce businesses. UI can make or break a customer’s decision whether to shop at one brand or another. (Responsive website, aesthetics, mobile optimized, etc)
Number of Participants: 3
Age: 23-30
Casual Shoppers
All found their way of shopping is the most convenient way (different opinions)
All usually shop and purchase when looking for something in particular
All are motivated to shop with sales and free shipping options
All found it hard to make a return online
All participants prefer having an accurate sizing chart
All participants prefer looking at the sale section first upon arrival on the website
All participants prefer free shipping
All prefer fast shipping option
Research Ramp Up
Provisional Personas
User Interview Finding
Define
User Personas
Ideate
After creating the extended persona, I was able to visualize how the ecommerce website functions can be created both visually and logically through wireframe sketches and a sitemap.
Wireframe Sketch
Sitemap
Interaction Design
Linear Task Flow
Linear task flow for purchasing an item on Mirror. The Key indicates what each shape represents in the flow process.
User Flow
This process shows the user purchasing an outer wear. The consumer is based on the persona that was created and looking for something specific to purchase.
UI Wireframe
Wireframe for making a purchase on Mirror. Checkout steps excluded.
Responsive Design
UI responsive design for Mirror homepage— Desktop, Tablet, and Mobile.
UI Wireframe for Mirror that reflects on the Linear Task Flow from landing page to confirmation page.
Prototype
Style Tile
Initial UI Design and color palette.
UI Kit & Branding
I had made iterations on the initial logo that I chose along with the color palette and forms. I was not satisfied with the initial logo I created as I thought it did not fit the more minimal, natural and fresh style that I had anticipated for the website. This is the final UI kit I had modified for Mirror.
UI Design
Utilizing my wireframes and UI kit, this was the prototype UI design I had come up with to complete the task of checking out a product on Mirror.
User starts at the landing page to browse the options available. User clicks on the item they would like to quick view.
The quick view option allows the user to say on the same page without having to go back. They can choose between the style, size, quantity and whether they would like to add to cart or leave the quick view.
If the user decides to add the item to cart, it will show on top of the page that the item was added to cart. There is also a sticky element with the shopping cart so the user can keep track of what’s in their cart without having to scroll back up.
User can view what items they have in the shopping cart and edit or remove any items they may have second thoughts on. The edit page is similar to the quick view which allows user to quickly make adjustments instead of bringing them to another page.
Confirmation page after the user has checked out to confirm that the order was made. Sign-up option is available for customers to make their shopping experience faster and easier!
UI prototype for the responsive design— Mobile
Usability Testing
Mid Fidelity Prototype
Complete a quick shopping experience with Mirror within a few minutes.
Test Mirror’s website navigation– from landing to check out.
Test the efficiency of quick view and quick view cart.
Identify any pain points that users may encounter
Participant shared their screen while accessing the prototype. They were given the task to navigate successfully though the shopping experience and complete a purchase.
Affinity Map
Participants: 4
Ages: 23-30
Casual Shoppers
Research Summary
Pain Points
Success
Unfinished designs were more desirable
Wanted to access navigation bar, search bar, and know what the page would look like outside of quick view.
Hard to find where to access when testing on home page.
How to access full view page from homepage
Hard to see “successfully added to cart” pop up
Hoped the prototype to be more interactive
How does cart preview look with more products in it
Participant shared that the UI looks minimalistic and calming. It’s simple and straight forward to use and the CTA buttons were straightforward and easily understood. Quick-view was easy to access. The idea of the cart and pop up was a good idea for users to know that they item was successfully added.
Future Improvements
Create more variety in the home page to allow user to test
More quick view options, and usable navigation bar
Make the quick view cart more noticeable
Create more depth for the web page
Add more effects to make the page look less flat/ unfinished
Choose better colors
Create a full page outside of quick view and how to access it
Allow access to full page in prototype
Conclusion
Users thought the prototype was straightforward and quick to use. There was not a significant obstacle that was too confusing for the user. Most of the problems that were mentioned were more related to the limitations in the prototype or minor problems that could be adjusted.
Next step:
Make iteration of the present prototype
Create a new UI to bring more depth into the page but still keep it very minimal