Refreshing an e commerce website and brand identity
Project Overview
Mirror is a clothing retailer that seeks to refresh their website to allow customers to shop online and would like a logo redesign. The logo and website should reflect the company’s brand by evoking a neutral and modern look and provide a seamless checkout experience for customers.
Role
User Research, Information Architecture, Interaction design, UI design, Prototyping & Testing
Completed as a student case study for DesignLab’s UX Academy. Imagery shown is not my own and is sourced from multiple e commerce fashion sites.
The problem
Mirror’s online presence does not allow customers to find products and purchasing items is only available at their physical locations. Mirror would like to tap into to a huge consumer base and provide flexibility for its customers by allowing them to shop online.
The goal
Mirror’s dated website and lack of a comprehensive online presence is the starting point for the development of this project and where I set the goal to be. The goal is to establish Mirror’s online presence by designing a website where customers are able to shop and access Mirror’s products from anywhere in the world.
The solution
I accomplished this goal by designing a website that will allow users to view products that match their needs and purchase them.
Step 1: Research
In order to better understand the retail industry and consumers, I identified the following research methods to better understand the problem.
Secondary research
Competitive analysis
User interviews
This project began with secondary research on the market, the retail industry, which allowed me to better understand how retail stores market themselves and their products. I found that companies have similar motivations, to push out products and to capitalize on the purchasing power of consumers. I wanted to identify stores that were similar to Mirror in terms of product and to analyze their current digital presence. In addition to that, it allowed me to explore user shopping habits pre pandemic and during the pandemic. With this research, I began to understand that there was a huge uptick in online shopping as users seek convenient ways to shop.
I moved on to interviews and to explore users, their needs, pains and shopping habits. In order to get a better understanding customers, I sought out participants who range between seasonal to frequent online shoppers to gauge their perspectives within the context of this project.
Understanding the user
I wanted to understand users’ shopping habits and their motivation for shopping online for clothing. Key questions such as “how would you define a successful shopping spree” and “tell me about a negative experience you’ve had while shopping online?” were pivotal to understand the user’s expectations and needs. I addressed these points in user interviews.
User interviews
Four participants who are seasonal to frequent online shoppers at were interviewed. They were asked about motivations for shopping online, clothing retailers and respective websites they like and their least favorite part about shopping during the pandemic or otherwise.
The goals for the interview included:
Identifying customer’s shopping habits
Identifying a customer’s motivations to shop online
Analyze how existing clothing sites sell products online
Learning pain points and successes for shopping online and in person
The key findings for the interview included:
Users feel pressure to purchase items from employees while shopping in person. Users can feel guilty if they are just browsing in a store with no intent to purchase an item.
Users feel there is a discrepancy between product information presented online and the product they receive. Users would like product photos that are truly representative and sizing charts. In addition, they would like to easily locate return policies if they are not pleased with their purchase.
Users are unable to view men and women’s clothing simultaneously. Users would like more flexibility to flip between sections and would like to see more gender neutral options.
Users would like to save products. Users appreciate saving products and returning to them a few days or weeks later after they have done more research on the item.
Users would like to shop at an eco conscious retailer. Sustainability statements and transparency on labor practices can motivate users to shop at a certain retailer.
“I shop online because I can decide what I really want without the added pressures of shopping in store ”
— Research participant
Persona
Data from user interviews and secondary research influenced the making of this persona. The persona works in the marketing industry and is consistently looking for new outfits for her job. This persona is budget conscious about the clothing she buys as she buys clothes in high frequency.
Users and the market
The clothing industry shows a high consideration for a clean and sleek brand identity. Imagery found between sites shows trends of minimal photography. The market places high emphasis on the product through photography with some brands opting to define identity that way.
Products across brands are similar, with varying price points. The price points help define the customer base per brand. Most brands choose to promote their products as trendy or timeless, with few aiming to do both.
Consumers tend to fall in the age range of 20-40+. Many of these consumers are tapped in to social media which potentially influences their online shopping decisions. These brands are catering to consumers who are socially conscious and care for sustainability.
Competitive analysis
To further analyze the market, a competitive analysis was completed between clothing stores. There is a range of stores here ranging from affordable “fast fashion” to more costly yet sustainably made clothing. Mirror exists in between these two extremes as the brand seeks to practice fair labor practices, sustainably made and affordable clothing for its customers.
Step 2: Ideate
Based on my conversations with users, and an understanding of the market, I was at a point to begin developing the information architecture. I completed a card sorting activity to understand how users categorize clothing items, a project goals diagram to prioritize business and technical needs, a features roadmap and developed user flows to plan how a user would navigate the app to complete specific tasks.
Card sorting
Four participants were asked to sort and group a series of items found at clothing stores, such as, scarves, pants and t shirts using Optimal Workshop. Once users grouped items, they were asked to give these items a category name.
100% of participants came up with the category titled “Accessories” and “Shoes” and 25% of participants used seasonal categories, ie. Fall/Winter Fashion. Trends in category names and grouped items were taken into account when developing the information architecture.
Project Goals
At this point in the project, I wanted to take a look at the priorities of the project. I did this by analyzing the business, user and technical needs of the products. If Mirror provide an easy way to engage with products for users, that will ensure customer satisfaction and loyalty.
Feature Roadmap
User interviews and market research influenced many of the “must have” features to allow for easy product browsing. Clear product photography and features was deemed as an important feature by all user interview participants.
User flow
The feature roadmap, along with secondary research of the market influenced this user flow and its navigation. This user flow seeks to include clear language and navigation for a user and showcases how a user would filter through products and purchase a dress. Filters such as size, fit and price were mentioned as highly important criteria by interview participants.
Wireframes
The user flow led me to sketches and then to low and mid fidelity wireframes. These wireframes showcase different pages such as the home page product page, search page. The checkout experience is also shown, providing a view of the shopping bag and a form for the user to input card information.
Step 3: Brand refresh
Mirror’s brand is fresh and modern, appealing to a wide range of consumers from kids to adults. The company felt their current website was outdated and sought to modernize their brand. With no particular brand guidelines, I had free range to execute visual design that was in line with Mirror’s philosophy.
The use of neutral colors and simple imagery emphasizes the product-a concern of many interview participants who want informative product images. These images also provide a cool and simple mood with minimal distractions.
Style tile
High fidelity wireframes
Responsive design
Step 4: Test
Once I had established high fidelity wireframes and polished them, it was time to test the app. I was testing to see if the content was easy to navigate to, the filters, product information and to gauge users’ impression of the branding.
This usability test was completed on high fidelity prototypes for Mirror. The screens tested were the homepage, special collections page, products page, category page, shopping cart checkout. Five participants who range between seasonal to frequent online shoppers were tested.
Tasks included in the test were:
Purchase blue puffer coat from Mirror’s new winter collection
Add a baby beanie to cart
Purchase white t shirt that is on sale
Add an additional white t shirt to cart halfway through checkout process
Key Objectives
Identify if users are able to complete tasks
Observe general search and browsing patterns
Observe how users initiate checkout process
Test usability of checkout process
Observe any difficulties users face while navigating site
Results
Browsing patterns: All participants scrolled through the product page appearing as if they were scanning it up and down.
Search patterns: 3/5 participants gut instinct was to use the search engine to find products
Successes
All participants commented on liking the color scheme, citing it as “neutral”
3/5 participants mentioned the pop up had information that was important to them
4/5 participants mentioned that the navigation was clear and easy to navigate
3/5 participants liked the diversity of the models and felt represented
4/5 participants appreciated the “Unisex” and “Sustainability” pages
Pain points
2/5 participants mentioned they would skip over the “Style, Comfort, Conscious” section on the homepage
5/5 participants did not remember for the second task that they needed to double click the size function to select a size
3/5 participants wanted to click the “Proceed to Checkout” prematurely as the quantity dropdown was still not finalized, thus prohibiting them from clicking that CTA
3/5 participants suggested a “Unisex” link under the “Baby” category
2/5 participants would like to see a “Checkout as Guest” option
Affinity Map
To further organize the usability test results, an affinity map was developed. This affinity map allowed me to find trends in successes, pain points and suggestions from users and allowed me to prioritize changes between primary, secondary and tertiary.
Reflections
This project pushed me to understand the clothing retail market and focus on issues that were important to the user, such as the option to shop at their own pace and make informed decisions before purchasing. I researched methods that could make the shopping experience seamless and productive for users and created a solution for these concerns.
As for next steps in the project, I will consider adjusting the dropdown so a user only has to click one time to confirm their selection. I would change the final checkout CTA to “Place Order to differentiate it as the final step. I would also add “Checkout as Guest” and “Login” CTA on checkout page to allow for a quicker checkout process and add a “Unisex” subcategory under the “Baby” category.