Mirror Website Design
A website design for a brick-and-mortar clothing department store moving into e-commerce.
The objective of this project was to conduct a comprehensive research-driven approach to create an online shopping experience Mirror customers will love.
A responsive website with ecommerce store that is fun and easy to navigate.
In this research phase, I learned about what users did and did not like about online shopping, and the importance of simple ecommerce layouts to emphasize products.
Competitive Analysis Findings
I analyzed three of the largest online retailers: Nordstrom, H&M and Uniqlo.
These major retailers have clean layouts with few colors that put the emphasis on the clothing.
Landing pages for these retailers feature engaging fashion photography and bright colors.
The main shortcoming with larger retailers are overly complicated information architectures with many categories making it harder to find product sections.
User Research Findings
Four user research interviews were conducted to understand what Mirror’s audience did and did not like about online shopping experiences.
People’s favorite online clothing stores were easy and felt standard and streamlined.
So shoppers can sort through large selections of garments, good filtering and sorting appear to be a critical feature.
The clothing itself was the focal point of the online shopping experience.
Meet Mary Mae also known as the Bargain Hunter, the persona for this project.
Modeled after user research, Mary loves looking throught large selections of clothes and hates returns.
What was most notable from research was the lasting preference of seeing clothing in person.
In my design for Mirror, I broke user's experience into three main phases based on how users described their thought process when shopping: first finding a garment they want visually, then assessing a garment and its quality and finally deciding to buy the garment. In the end, I got to design an end-to-end shopping experience from scratch.
This storyboard chronicles Mary's behavior finding a dress for an upcoming barbeque and how she chooses a garment.
The main takeaway from this storyboard was that when online shopping, users may have a vague idea of what garment they are looking for so that product lists should be designed to show lots of different garments.
In this larger user flow diagram, I outline all the flows a user can take to go through the Mirror website.
Retail clothing ecommerce information architectures can become quite large. These retailers offer many different type of products. In this information architecture, I used a card sort to come up with good sections but ultimately tried to keep the site as simple as possible.
While wireframing, I was able to create page layouts that met the needs of clothing shoppers I learned about from user research. I also experimented with new kinds of designs for filtering sorting, and editorial content.
This style tile's focus is to be fun and affordable. I chose a very vibrant color palette to make the site engaging and a wordmark that felt funky.
The UI kit offers clear guidelines on type, color, icons, and components. Since ecommerce sites have lots of functionality, lots of different elements needed to be designed like dropdowns and pagination.
Usability Test Findings
It was not clear enough how to navigating through different clothing categories.
Reviews were overly prominent on the product pages.
Shipping and returns information was confusing to users.
In the end, I landed on a fun and streamlined UI design for Mirror that prioritized sales, and made category navigation straightforward. Most notable was the fun use of color for editorial content and in scroll gifs or animated Jpegs to showcase relevant editorial content.