Date: Jan 2018
Client: Mirror, Global Clothing Chain
Role: UX/UI Designer
Deliverables: Website Prototype, Branding
The Challenge
Launch a brand-new website
for a global clothing brand
Mirror is a successful clothing store that has expanded to 32 countries with over 400 stores since 1994. The company believes that clothing should be accessible to everyone, in a variety of styles and at affordable prices. Due to a demand for online services and a need to sell remaining inventory in warehouses, Mirror has decided it’s time to launch a brand new online store and to revamp its outdated brand.
Objectives
- To design an e-commerce website for Mirror customers
- To update Mirror’s logo and brand as a company that sells clothes to everyone
- To create an intuitive and efficient shopping experience for users
User Research
To start off, I researched general information about the e-commerce clothing industry and noted the common trends and pain points of online clothing store websites. The market leaders include Zara, H&M, Uniqlo, Macy’s and IKEA, have well established themselves with a powerful brand and a great online interface which cohesive the entire shopping experiences in multi-channel context platforms. Having a great e-commerce platform doesn’t limit to offer the best shopping experiences, but instead, it should always be part of overall brand portfolios. With a massive global audience and successful global brand offline stores, Mirror could positively position in the online shopping space where their unique brand characteristic of offline shopping environment is that they could promise customers would experience new retail interfaces with highly integrated multi-channel platforms. Feel free to view a full competitive analysis.
They all offer free/return delivery service, quick/free pick-up service, major promotions, and extensive size/style availability for online shopping.
Biggest Pain Points
Define User
To empathize deeply with Mirror’s users, I created a persona “Jessica” to represent the findings synthesized from the empathy map. Jessica reflects Mirror’s target customers and is characterized by the most common traits and behaviors from the interview participants. By giving context and personality to the research data, we can better empathize with the target user throughout the design process. To synthesize the data, I constructed a whiteboard map by organizing the data points from each interview participant into groups. Then, I was able to emphasize the user needs based off of the most common patterns within the user data. Feel free to view a full empathy map.
Card sorting
Through insights and results from card sorting exercise, I was able to understand how the participants structured information in their minds, which informs how I should then design the information architecture of Mirror’s website to be intuitive for the user.
Main findings:
- There are various ways people categorize clothing terms.
- Most objective way is to categorized by seasonal function or specific usage people are interested in at the moment.
- More subjective methods, such as by personal interest, specific usage of clothing, indicate the personalized way for future reference.
- Users expects “Free Shipping” or promotion heavily for online shopping.
Based off of these findings, I hypothesized that commonly usage to organize clothing terms was by seasonal function, but the contents must be relevant to individual interests. The exclusive promotion and free shipping option are essentials for online shopping.
Sitemap
Next, I created a sitemap based on existing design patterns for e-commerce sites and the findings from the card sorting activity. By visualizing the information architecture and identifying key relationships between screens, we can better understand the flows and interactions the site.
User Flow
To further analyze the flow, I explored the possible paths that users could take while ordering products in a user flow creating the user flow allowed me to organize which pages were required and how they should relate to each other based on user decisions.
Task Flow
Since one of Mirror’s goals is for customers to be able to order products efficiently, I constructed a task flow breaking down the necessary steps for a user to get from the landing page to the order confirmation page. Creating the task flow helped identify which pages were required within the customer’s process and forced me to think through the customer experience in more details.
Sketches
I began designing the UI by sketching low-fidelity wireframes for the pages. By presenting annotated sketches to my mentor and peers, I was able to quickly gain feedback about my designs and make improvements for the next iteration.
Mid-Fidelity Wireframe
I then created mid-fidelity wireframes in Sketch, which helped me focus on the basic layout and visual hierarchy of the UI design before adding the styling. I was able to present these wireframes and gain valuable feedback. Below are the wireframes of some of the main screens.
Moodboard
To start off, I inspired by various photographies to represent Mirror’s brand aesthetic and wanted to emphasize its global scale, modern, and classic. Most of time, I’d love to conceptualize with different shapes, colors, and composition to visualize how Mirror would stand as a unique brand identity in the noise digital space.
Branding
Before moving into high-fidelity wireframes, I created a style board to make sure the branding is cohesive and targets Mirror’s main audience. First, I gathered inspiration in a mood board and brainstormed logo ideas. Since Mirror brands itself as a clothing store with styles for everyone, I wanted the branding to be welcoming, but also modern and stylish. Feel free to view a logo development.
High-Fidelity
Wireframe + Prototype
Using the branding style, I created high-fidelity wireframes in Sketch. Then I created a prototype in InVision to prepare for usability testing. Below are the designs of some of the main screens. Feel free to view the prototype.
UI Kit
While prototyping, I maintained a UI kit in order to document UI elements and patterns for future reference. Additionally, I prepared handoff deliverables in Zeplin to share the designs with developers for further development and seamless communication.
Affinity Map
After conducted usability testing with 6 participants who have similar backgrounds to our persona, Jessica and valuable usability feedback from target users, I created an affinity map to synthesize the usability findings, identifying reoccurring behaviors and feedback. Then, I draw insights from the synthesized information, which informed recommendations for the next iteration of the design. Since most of the insights involved desirable content features, I know I had to add more contents for other categories for the next iteration. Feel free to view a full affinity map.
Revised Wireframe
Afterwards, I added new contents for the most priority features based on the recommendations drawn from the affinity map. The updates are shown below.
Reflection
Building a website for Mirror was a relatively straightforward project because many features have well-established design patterns. Therefore, I gained much experience in researching best practice and determining which solutions were best based on user needs. Additionally, since many people have used e-commerce website before, user expectations are more concrete, which makes it even more important for the website to reflect common e-commerce design patterns. As I learned from this project, usability testing can be a big help in discovering areas that are inconsistent with user expectations. Overall, I gained much perspective and understanding about the e-commerce experience.
Next Step
- Prototype other features based on the persona’s user needs
- Identify areas of improvement through user feedback
- Design the UI for mobile and tablet screens
- Continue organizing design deliverables for handoff