Designing an e-commerce site
Timeline: 1 month
Roles: UX researcher & designer, visual designer
Mirror is a self-initiated conceptual project.
Project brief: Started in 1994, Mirror is a brick and mortar clothing store with 400 stores around the world in 32 countries. They provide customers with quality, yet affordable clothing in various styles for all different types of people and body types.
Mirror has its dedicated clientele, however, over the years they have been asking for an online website where they can order from Mirror. Customers argue that they can’t always find their size in store and they end up ordering clothes online from the competitors. Mirror has outdated branding and wants to change to be more modern, clean, and clear. Right now, they are looking for a homepage, a categories page and a product page.
Create Mirror’s first e-commerce website (homepage, categories page and product page) and to rebrand the company to give it a clean and modern feel to it.
I used a human-centred design approach to understand the user goal by researching on the competitors along gathering data from the users directly and synthesising the insights into design through rapid prototyping and testing.
Methods: competitive analysis and user interviews
1.1 Competitive analysis
In order to understand how other clothing companies developed their websites, I researched three popular brands: Uniqlo, H&M, and Zara. Each of the websites had varying approaches to the design of their homepage, category page, and product page. Below are some key differences I found.
I interviewed Mirror’s target audience, men and women between the ages of 18-65 via telephone. Over the course of each 30 minute phone call, I was able to distill a lot from the interviewees. In great detail they were able to describe to me when they had a positive shopping experience online and when they had a terrible experience. I found out the following:
Needs: Faster checkout process; clothing across different settings (work, going out, etc)
Wants: Free shipping and return; more availability for sizes
Desires: More info on fit and sizing of the products
Pain Points: Hidden fees and shipping charges; items don’t fit as described and can’t determine quality of material.
1.3 Key takeaways
A lot of valuable information was uncovered from my research. From looking at the competitors websites, I saw design patterns I wanted to copy. Speaking to potential users, I was able to uncover their pain points and gains when shopping online. Using this information allowed me to start drafting ideas of how I wanted to create the information architecture and the product page screens.
Methods: persona, empathy map, and user flow
I created a persona based on my research findings. Phil Bodin is a young professional who doesn’t have much time to shop due to his busy schedule. He would like to buy fashionable items but doesn’t know how to put outfits together. He likes the idea of being able to buy outfits online and search for his favorites quickly. He hates paying for shipping and when there are too many pop-ups.
2.2 Empathy Map
After creating the persona of Phil, I created an empathy map to get a further idea of what he might be thinking when shopping online. I wanted to write down what he might be hearing and seeing, what were his pain points and gains when shopping online. I visited the competitors’ websites with his persona in mind to see what he would like or dislike about the experience.
2.3 User Flow
Based on my site map, I built a user flow that Mirror customer would take upon entering Mirror’s homepage. The flow includes different ways how a customer would navigate to the right product and the checkout procedure.
Methods: Sketches, Wireframes, UI Kit
Once I had my research and information architecture complete, I wanted to sketch out multiple ideas I had for the homepage. I visited different online retailers’ websites to develop a vision of how I wanted the overall project to look. Above are some of my initial sketches I had for the homepage and different versions of the product page.
3.2 Low Fidelity Wireframes
Once I sketched out multiple versions of the different pages, I picked the designs that I felt served the customer needs the best. I created wireframes for the homepage, categories page, product page, and checkout page. I reviewed them with friends to get their opinions on them if they were a potential customer. Here are some of the questions and feedback I received:
How relevant is the best-seller section for your target segment? And how is it different from trending?
How important is the review rating?
Loved the "complete the look" section. Definitely helps to understand how to pair clothes.
3.3 High Fidelity Wireframes
I took my style guide and low fidelity wireframes to create a high fidelity mockup for the user flow of searching and adding an item to the cart. As I was building, I realized some of the features such as trending and best sellers weren’t needed and created too much clutter, which took away from the goal of creating a clean and clear website.
3.4 Brand guidelines
I built the UI kit based on Mirror’s want of rebranding themselves as a modern, fresh, clean and clear retailer.
For the color scheme, I wanted to give Mirror a clean, simple, modern look. What better than the classic combination of black and white. To spice things up, I added two accent colors. The blue is used throughout the website for the prices of the items. The red is used tastefully as the highlight color of the categories. It establishes for the user what category they’ve selected.
To help give the site the look and feel I wanted, I knew I needed to use a sans-serif font. I experimented between Futura and Avenir. I found the Avenir and its respective families gave the site the best look. I used a mixture of the fonts found in the family to establish hierarchy and highlight important information for the user.
I wanted the photographs to represent the clean, modern look and feel of what Mirror is. The sleek grey background with the high quality photographs translates well across the site and invokes the sense of a modern fashion company.
Methods: Prototype, Test, and Iterations
After creating my prototype, I was very excited to test it out with users. I used Maze to test my prototype because I liked their concept of “missions”. I found that it helped convey to the testers what they needed to accomplish in the test. This was perfect for me as my test was unmoderated and sent out via email. I also like using maze for the report it generates at the end. It gave me insights where the users were clicking on the screen, if they miss clicked a hotspot, and if they exited the task before finishing.
At the end of the prototype testing, there was a Google form with 6 questions asking the users about their experience with the prototype. From there I compiled their responses into an affinity map to further see where I was successful and where I needed to improve on my design. Some of my key findings I distilled from my first prototype are:
“Good use of white space, very clean and clear”
“This looks great and easy to navigate”
Opportunities to Grow
Add “&jackets” to outerwear or create a sub-category
More spacing between options in drop down
Hero image is very large and takes up bulk of screen
Image at the end of the page doesn’t match the images and branding throughout the website
Logo is not consistent with branding across the website
After reviewing all my notes from my usability testing, I redesigned my prototype to address the following issues:
Landing Page: I wanted a more sleek and modern feel to the landing page. I kept the options limited and didn’t want too many repeating elements
Logo: I redesigned the logo to make it more uniform with the branding across the site
Drop-down menu: created more spacing between categories, created sub-category for Jackets underneath Outerwear
WHAT I LEARNED
Create and categorize a large inventory e-commerce site
Developed research plan to uncover what users wanted in a e-commerce site
Rapid prototyping wireframes and testing with users to determine what elements need to be improved
Developing and creating a style guide
Let customers buy without creating an account and make checkout a single page
Simplify filtering and sorting of products to make search quicker
Simplify our overall site structure so that it’s more intuitive