MIRROR
Client: Mirror (A global renowned clothing store)
Challenge: Create responsive website for the company and rebrand the company’s logo.
Role: UI+UX Designer (Research, Visual Design & Interaction Design)
Result: Within 80 hours over 4 weeks, Mirror has an established e-commerce website and consistent UI design.
RESEARCH & DISCOVERY
Methods used: Competitor Analysis + 1-on-1 interview
After learning about the role and challenge, I began my research process by looking at both direct and indirect competitors of Mirror. In order to learn more about the market, target audience and competition. Then, I could identify the strengths and weaknesses of other brands. In addition, I created provisional personas to help understanding more of potential users’ sweet spots and pain points of online shopping.
SYNTHESIS & DEFINITION
Methods Used: Empathy Map + Persona + Storyboard
In synthesis stage & with the data collected by observing participants’ think, feel, hear, and shopping behaviors. These findings provide me lots of useful information to look for their needs and insights, I continued with creating empathy map, persona and storyboard.
Insights:
Online shoppers pay the most attention to price, return policy, shipping cost and product descriptions.
Needs:
Occasional sale promotions, easy and efficient return procedure, accurate & detailed product description and secured package to unbox so to be satisfied.
By sketching this storyboard, I have created a scenario that a typical user's pain point in his/her daily life. And this is how Mirror's responsive website should come in handy and can increase customer's reliability.
INFORMATION ARCHITECTURE
Methods Used: Project Goals + Card Sorting + Site Map
To define Mirror’s goals (business goals/user goals/ technical considerations). By doing so, I can focus on designing the site to actualize the shared goals.
Created a CARD SORT via OptimalWorkshop online and had 5 participants to run the test. Reason of doing so is that by card-sorting, I get to learn how Mirror's prospective users perceive the logical relationships among various products. Based on the data collected, I labelled groups in a more effective way so to allow users a quick and easy way to locate the desired products.
Based on the results of the card sort, I created a SITE MAP for Mirror as to provide the foundation of the site for a smooth and easy navigation flow.
INTERACTION DESIGN & VISUAL DESIGN
Methods Used: User flow + Task flow + Sketching/Wireframing
User flow is to think through a user path to take through different scenarios and tasks. By mapping user’s journey and possible decisions, I can design the key pages and necessary steps to follow in order to complete the task with zero error.
Wireframing : Before designing my mid-fidelity wireframe, I have sketched the key pages and established the UI requirements.
You can see my UI requirement list here
Next, I started to create key pages wireframe to showcase the necessary steps for user’s to complete transaction. My previous interview results and research findings help to provide me the mindset to design necessary steps for a smooth user flow.
Responsive Wireframes : Created responsive wireframes for Mirror’s homepage in desktop, tablet and mobile version.
BRAND IDENDTITY
Before moving forward with a high fidelity responsive wireframes, I have sketched out some ideas of Mirror based on the insights that I got from previous research and brainstorm about the brand image.
Mirror as its original meaning, it is often used to see the reflection of a user’s appearance. I wanted to imply this meaning to Mirror’s brand logo and show how well Mirror’s products would impact its buyer. In order to show the aesthetic side of “mirror”, I added the three lines to show the meaning of reflection. In addition, I want to keep it simple and clean, so I chose to use medium grey & the loyal dark blue for the logo. The dark blue represents loyalty, trustworthy while medium grey offer a sense of classic and modern.
These are the main character that I want to emphasize to Mirror's users : CLASSIC / MINIMAL / STYLISH / MODERN / TRUSTED
PROTOTYPING & TESTING
Methods Used: Usability testing
High-fidelity wireframes : Based upon feedback gathered from the first mid-fidelity prototype, I created an updated, high-fidelity prototype and tested again with participants.
I created a limited function prototype in Sketch and merge into InVision for users to test out my prototype.
CLICK HERE TO TRY MY PROTOTYPE
Usability testing : This result is based on five participants with two male and three female age ranged from 26-35 years old. Two tests are done remotely by sharing the InVision prototype link and three are done in person while I watched closely on how they complete the tasks.
Tasks to be completed:
Complete transactions with using search bar and navigate to type in promotional code.
Locate wishlist and shopping bag then eventually complete transaction.
You can see my usability test plan here.
Affinity Map: Created this tool to list out the strengths, pains, suggestions and UI design recommendations that I retrieved from the usability testing. I have put these insights and observations in order from highest to lowest priority. This gives me a broad and detailed idea of what I should be focusing on while iteration phase.
Style Guide + UI Kit + Moodboard
Style Guide and UI kit serves as guideline for collecting all visual elements for the site.
Moodboard is used as a collection of inspirational color/images/design foundation for Mirror's UI design.
HANDOFF & IMPLEMENTATION
Method Used: Zeplin documentation
Create documentation and handoff for consistency for other designers and engineers in using Zeplin.
PROJECT TAKEAWAYS
In order to help Mirror to rebrand the company's image and promote their online retail website, I started with researching about the competitors, interviewing potential online shoppers for their habits and obtain insights from the findings. Throughout the ideation and iteration process, I kept on thinking about what the users' needs are. To offer the sense of modern, classic and loyalty of Mirror, the consistency of UI design and color palette would help to deliver uniformity and trustworthy feeling to users. The ultimate goal is to enable users to find the clothing he/she is looking for and complete the transaction seamlessly. Therefore, the structure of the site plays an important role in either user enjoy the flow and can successfully navigate within the site or not.
NEXT STEP
TEST: Another round of usability testing on the revised prototype.
ITERATE: Based on the second round of testing and observations, more iteration of the prototype is needed. improving usability and keep on researching on users would be helpful to get insights.
If time allows, I would add more features on Mirror’s site:
1. Add short video to each product detail page to better show details, so users would have better understanding of the product itself.
2. Add feature like “Discover your size” guide to help users find accurate size that fits better.