CONNOR RAY COX
UX/UI DESIGNER
Fictional global retailer, Mirror, was looking to update their brand experience & create a responsive e-commerce website.
Establish an online platform with an intuitive, well-built responsive website in order to drive traffic & increase sales.
Understand the current market, analyze competitors and design a responsive site that promotes user learnability and efficiency.
I wasn't privy to the current clothing retail market or Mirror's direct competitors, so I focused my research to discover what users found enjoyable as well as challenging.
Analyzing direct and indirect competitors’ strengths and weaknesses helped uncover site elements that proved successful as well as problematic for users.
I interviewed five shoppers to understand why they shopped online instead of in-person to uncover what elements influenced their decision. I was able to uncover multiple provisional personas to help identify specific elements that users found most valuable. I also discovered what pain points users encountered most often.
I then prioritized them into a product roadmap and began to plan how to best organize the site.
After discovering user insights and needs from the empathy exercises, I broke down the goals for the business and the user while also noting technical considerations in the diagram below.
.png)
After gaining insights from user interviews and better understanding user needs from the empathy tools, I conducted two card sorting exercises while issuing the same parameters for both sorts.
In-Person (3 participants)
Below is an example of one user's card sort. This helps us know how & why users sort the pre-determined cards the way that they did.
Online (10 participants)
Using OptimalSort, participants self-categorized 30 different clothing item cards into any categories they felt appropriate.
After compiling the results from both sorts into a similarity matrix and observing the best-merge dendogram, I found repeating patterns as well as some surprising new patterns to implement. Both helped to understand what categories shoppers expected to see and understand the best model to use moving forward.
I created the Jennifer persona to address wants, needs and frustrations as a foundation to understand who exactly we were designing the product for. This method would’ve proven more useful with a larger team so that everyone was designing with the same single archetype in mind.
%201.png)
I built a user flow to articulate how a user would complete a purchase.
Because the online clothing retail industry is so vast, a lot of different approaches were considered.
Initially, I considered an ‘innovative, out-of-the-box’ approach; as seen in the sketches below.
After conducting an abundance of research I found that most people wanted familiarity and consistency when visiting e-commerce sites. I decided on a more conventional design pattern for navigation and the overall layout. This improved familiarity, learnability and usability.
Mirror’s products would help to establish the brand, but additional comforting and relaxing imagery, soft-edged shapes and lines, and providing ample white space helped the overall brand design come together.
I started by sketching ideas. Clothing items are referred to as “pieces”, so I decided to build a custom serif ‘M’, and removed the thin strokes (or “pieces”) of the letter to create a unique design that reflected the brand objective.
The Gestalt principle of closure allows one to still see a letter ‘M’ despite it’s missing pieces. After multiple iterations and fine-tuning I landed on the final logo seen below.
Coupled with a peaceful color palette and calming typography the brand feels trendy and stylish yet comfortable and familiar.
I created a secondary logo using Chonburi typeface and placed the name on the bottom half of a circle to convey a neat and familiar feeling.
This would be used as a reference guide for developers in order to avoid communication issues and limit questions regarding the styling of a particular design element.
One of the things that usability testing revealed was that users wanted more prominent hover states for clickable options. I resolved this by increasing the text size and weight when hovered over. All users did eventually accomplish the task.
After conducting usability testing I documented the pain points and successes of each participant at each page of the task flow. These insights were then grouped with similar insights from other participants to determine areas for improvement and expansion.
.png)
Mirror has a lot of competition in the clothing retail world. Because they're new to e-commerce it was especially critical to make sure that all aspects of the project were geared around learnability, efficiency and user satisfaction. The competitive analysis and user interviews were the foundation for the project.
Having a larger sample size of participants during the research and testing phase while spending a longer time on the analysis of said research would result in a stronger output.
The sheer scope of the design is large enough to warrant additional team members, however learning to design around the data collected, even at a small scale, is an essential skill I'm glad I sharpened.
