Client: Mirror
Timeline: 160+ hours
Deliverable(s): Website prototype, Re-branding
Team: Self-directed, with feedback from mentor and peers
Role: UX/UI Designer
Tools: Adobe XD & Illustrator, InVision, Zeplin
THE CHALLENGE.
Since 1994, Mirror has been providing cheap clothing options for any occasion. With over 400 stores around the world in 32 countries, Mirror’s accessible clothing for everyone is of both good quality and affordable prices. Due to the high demands for online services and a need to sell the remaining inventory in warehouses, Mirror decided it was time to join the online market and to re-establish its presence with new branding.
This is a speculative project, and Mirror is a fictional clothing brand.
OBJECTIVES.
• To design an e-commerce website from Mirror customers
• To re-design Mirror's logo and brand as a company that sells clothes to everyone
• To create an online shopping experience that continues to be accessible to everyone
PROCESS.
________
01. RESEARCH
Goal: To research the target audience and their online shopping needs
Process: Market Research / Competitive Analysis / Contextual Inquiry Interviews / User Surveys
MARKET RESEARCH & COMPETITIVE ANALYSIS.
To start off, I began my research by looking at general information about the e-commerce industry. I took note of common trends of online clothing store websites. This secondary data provided perspective on the subject matter and the potential needs of current online shoppers. Since there are many clothing stores, I paired the general research with a competitive analysis to understand how Mirror compares against other brands. I evaluated the strengths and weaknesses of various websites that belonged to direct and indirect competitors. The comparative model allowed me to better understand customer expectations and how Mirror can position itself to stand out among other competing companies.
INQUIRY INTERVIEWS & USER SURVEYS.
To gain primary research from shoppers, I conducted contextual inquiry interviews with 3 participants about their shopping methods and collected data from 26 survey responses. The interviews consisted of open-ended questions regarding in-store and online shopping experiences while the survey consisted of various multiple choice questions, short answers, and scaled response questions. In the end, I was able to learn more about how shoppers behave and see patterns in shopping needs.
• Number of Participants: 3 interviewed / 26 surveyed
• Gender: 20 male / 9 female
• Age: 18-30 years old
________
02. DEFINE
Goal: To define the target user and understand their needs, goals, and pain points
Process: Persona / Empathy Map / Storyboard
PERSONA.
I created a persona "Calvin" to represent my research findings. Calvin reflects Mirror's target customers and is characterized by the most common traits and behaviors from the interview participants and survey responses. By giving context and personality to the research data, we can better address the major needs of the most important user groups.
EMPATHY MAP.
I constructed an empathy map by organizing the data points from a general consensus from the interview participants and survey responses. I added this to my persona to add a realistic character. With this information, I was able to gather the needs of the user and set priorities for product needs.
STORYBOARD.
To further understand the user and pain points, I drafted a short storyboard illustrating the persona's online shopping experience and needs. This visually represents a perceived user problem and how Mirror's website can offer a solution to the problem.
________
03. IDEATE
Goal: To ideate information architecture and flows
Process: Card Sorting / Sitemap / Task Flow / User Flow
CARD SORTING.
An open card sorting activity was conducted with 6 participants and consisted of 30 cards with commonly known articles of clothing (the program used, OptimalSort, has a 30 card maximum when not on their premium plan). Through observation and feedback, I gathered how participants structured information in their minds. With this information, I am able to take into consideration the information architecture of Mirror's website to be intuitive for the users.
Main findings:
• Participants choose between 2 to 7 categories
• ‘Accessories’ was the most common category
• ‘Sunglasses’ was sorted most consistently in ‘Accessories’
• It was sorted in ‘Misc.’ by 1 out of 6 participants
• 1 participant created a ‘Women’s’ category (This category included ‘maxi skirt’, ‘silk blouse’, ‘bodycon dress’, and ‘leggings’)
• 1 participant created a ‘Clothes’ category and placed 22 cards in it (Their other categories were ‘Misc.’ [gloves, hang bag, earrings] and ‘Extras’ [leather belt, hat, skinny black necktie, scarf])
Based off of these findings, I hypothesized that most universally understood way to organize clothing terms was where the clothes are worn on the body and by gender.
Similarity Matrix
SITEMAP.
With the results of the card sort and inspiration from other competitor websites, I created a site map to define the overall structure of the website. This ensured that products were going to be placed where users would expect to find them when visiting the site; making the experience more intuitive.
TASK FLOW.
One of Mirror's goals is for customers to be able to order products efficiently. This is a task flow that I constructed to break down the steps needed for a used to navigate the site. Creating the task flow helped identify which pages were required within a customer's process and emphasized the importance of customer experience.
USER FLOW.
Next, I explored the possible paths that users could take while order products in a user flow diagram. In this user flow diagram I organized required pages and showed how they should relate to each other based on the user decisions.
________
04. DESIGN
Goal: To design the UI and branding of Mirror's website
Process: Sketches / Mid-Fidelity Wireframes / Branding
SKETCHES.
I started designing the UI by sketching low-fidelity wireframes for the homepage. By presenting annotated sketches of the homepage to my mentor and peers, I received feedback on my designs and ways to improve my designs in future iterations.
MID-FIDELITY WIREFRAMES.
Using Adobe XD, I created mid-fidelity wireframes. While they contain a little more detail than required, these wireframes helped me develop the basic layout and visual hierarchy of the UI design before adding colors and images. I once again presented these wireframes to my mentor and peers to receive constructive feedback. Below are the wireframes of some of the main screens.
To practive prototyping, I made a mid-fidelity prototype in InVision.
BRANDING.
Before moving into high-fidelity wireframes, I created a style tile that represents Mirror's cohesive attributes and targets their main audience. First, I gathered inspiration on a mood board and brainstormed logo ideas. I saw Mirror to be affordable, minimal, reliable, convenient so I sought to design a logo that would reflect those adjectives.
________
05. PROTOTYPE
Goal: To prototype Mirror's website and test for usability feedback
Process: High-Fidelity Wireframes & Prototype / Usability Testing
HIGH-FIDELITY WIREFRAMES & PROTOTYPE.
Using the branding style that I created, I developed high-fidelity wireframes in Adobe XD. After I placed my images and update the fonts and colors, I created a prototype. Below are the designs of some of the main screens.
USABILITY TESTING.
Objectives:
• To observe initial impress of website - is it aesthetically pleasing?
• To test the overall quality and ease of use while navigating the design - does it flow?
• To observe how users interact with design to complete task - is it confusing?
• To test the search process for pain points - what is a barrier to a good experience?
• To note unmet needs to implement in future iterations - what can be done better?
Tasks, Errands:
• Homepage - starting from the top, talk through each element: what is it, what does it do, and what happens if it is clicked on.
• Using 'Search' browse for a product and view information about it
• Without using 'Search' browse for a product and view information about it
Results:
I conducted usability testing with 5 participants - 2 in-person and 3 remote tests. They were of similar backgrounds to our persona, Calvin. From direct observations and audio/video recordings, I was able to collect valuable usability feedback from target users. Generally, all participants were able to complete tasks and participants commented on the branding and layout - very clean and easy to navigate.
________
06. ITERATE
Goal: To iterate upon the design and identify key improvements
Process: Affinity Map / Revised Wireframes + Prototype / UI Kit
AFFINITY MAP.
I created an affinity map to synthesize the usability findings. This helped me identify reoccurring behaviors and feedback. I drew insights from the information - specifically repetitive details which indicated high-priority iterations in the next design.
REVISED WIREFRAMES & PROTOYPE.
With the information I gathered in the affinity map, I revised the wireframes and prototype. Feel free to interact with the revised prototype using the button below!
UI KIT.
As I was finishing up the prototype, I gathered materials for a UI kit in order to document UI elements and images required for the web design.
REFLECTION.
Building a website for Mirror was a relatively straightforward project because many of the components have been well-established in today's digital age. In this project, I was able to apply my research background to gather data from users to develop my design. Many of the interview participants and survey responses were very familiar with e-commerce websites before so user expectations were more concrete and congruent to similar ideals. As a designer, I learned that biases can predict certain design elements to incorporate but with an open-mind, I am able to really develop a product that solves usability problems. I now understand the importance of research and perspectives for a project such as e-commerce experience.
NEXT STEPS.
• Prototype other features based on the persona's user needs (such as shopping cart, checkout process, filtering products, etc.)
• Identify areas of improvement through user feedback
• Design the UI for mobile and tablet screens
• Continue organizing design deliverable(s) and resources for hand-off
