Mirror is a fast-fashion clothing company that would like to focus on expanding their online presence with a dynamic e-commerce site. The website should include easy to navigate layout, a clean and modern theme, and a new logo.
Today, online shopping is about choice, and for most users, there are more choices than ever before. Since Mirror is going online for the first time, they need to identify the factors that makes a successful e-commerce website intriguing for users in order to increase their online sales. Additionally, to alleviate the pain points that users experience.
"Poor site legibility and inaccurate product descriptions topped the list of pain points for these users."
My research revealed a main approach to online shopping. Without diving too deep into the psychology, I personified this approach to depict the user's goals and frustrations.
For Mirror, assembling relevant imagery was a large part of the branding and content imperative. This process began early on and influenced many other brand and layout decisions.
I first sketched out some ideas for Mirror's logo, did iterations and then finalized my design. I considered how the company could brand themselves in the future and ensured the logo was scalable without losing the visual elements.
.png)
Mirror's theme is neutral, modern, and fresh. I wanted to find a medium between trendy and classic visuals. I first created a style tile and then once I explored the UI elements in depth, I finished with a UI kit.
.jpg)
User testing via Optimal Workshop was utilized in categorizing items and for site index.
I also researched existing navigation and architecture patterns in conceiving the responsive site behavior.
Based upon data from research and in-person interviews, I organized my observations and categorized them using a customer journey map. This helped me expose pain points and areas for improvement in the app along the entire user journey.
Through my user flow, I uncovered any usability issues and established these tasks could be completed with the framework I had constructed.
Thinking back to my persona, I mapped out 3 tasks Caroline would need to perform on the site:
Usability of my site was the most essential element to consider. After detailing each step I could focus my attention on branding and product design without worrying about usability issues.
.png)
.png)
In this card sorting session, participants organized topics into categories that made sense to them and helped me label these groups for my navigation.
.png)
.png)
After preliminary sketches, mid-fi wireframes were created to see how the imagery and interaction would work together.
Before diving into the UI design, I created responsive wireframes for the main pages of the website to get a sense of how the information should be structured. I explored a lot of different layouts within my preliminary sketches and ended up using different elements to create my wireframes.
Since I dedicated so much time to the wireframes, the structure of the final site ended up being almost identical.
.png)
As most users are directed to a site via search or socials, the landing page becomes an important first impression and brand touchpoint. It's equally important to follow up the promise of the landing page by providing a seamless browsing and checkout experience that retains a consistent feel between devices.
Once the desktop version of the UI design was completed I created a functioning prototype website to test on users. Users were presented a scenario and a series of tasks and were observed and questioned during and after performing the tasks. Once a sample of 5 users was completed, I analyzed the results and made iterations to the site for phase 1 and began to design screens for phase 2.
Phase 02
In the next iteration of this project, I would like to work on implementing more features including:
After reviewing the affinity map & the usability testing findings, I found that users all agreed that the prototype was intuitive, easy to navigate and visually pleasing – all things that I aimed to accomplish in the design.
I was able to verify that users could complete the given task of purchasing an item and the usability test gave me the opportunity to observe how users went about completing that task.
Overall, the design of Mirror had a usability test completion rate of 100% (7 out of 7 participants) when navigating the prototype, and all participants would return back to the site if it wasn’t a fictional project.
.png)
.png)
