Responsive e-Commerce Design & Branding
Full website design and branding for clothing company
Overview
The goal of this project was to create a responsive e-commerce website for a fictional clothing brand. Mirror is a retail clothing store that sells womens, mens, and kids clothing. The company has been doing sales primarily through their physical stores but looking to break into the e-commerce market and launch a responsive website. Mirror also wants to redesign their logo to be modern and neutral to attract all types of people.
My role consisted of conducting research, developing a new brand elements, and creating the responsive website.
My Role:UX/UI Designer, UX Researcher, Graphic Designer
Tools Utilized: Pen and Paper, Figma, Zoom, Maze.co, Google Forms, Google Drive
Duration: 2 Weeks
The Problem
Shoppers are frustrated by the quality and fit of the products they order online from clothing companies. Many times the product’s color isn’t correct, the item doesn’t fit right, or it looks completely different than when the model is wearing it on the website.
The Proposed Solution
Design the user experience spotlighting real people wearing their clothing through collaborations with social media platforms like Instagram or LikeToKnowIt. Product pages would include models of different sizes to demonstrate the product in a more inclusive manner.
Secondary Research - Market Analysis
I decided to start off with secondary research in order to understand the online retail market and its user demographics. Based on my market research, online shopping has become an integral part of everyday life. A user’s first step when deciding to purchase an item is by going online to compare prices and read reviews. 81% of US shoppers prefer to do their shopping online and over 75% of people are shopping at least once a month online. The top demographics that shop the most online are millennials at 67% and Gen X at 56%.
Primary Research - Competitive Analysis
In order to better understand the user, their motivations for online shopping, and what makes it as enjoyable as possible I completed a competitive analysis on three competitive brands to Mirror: H&M, UNIQLO, and Old Navy. I evaluated these companies on their strengths and weaknesses as an overall brand and for specific features that are typically found on retail websites.
My research resulted in the following findings:
Primary Research - User Interviews
I performed additional research in the form of user interviews. First I conducted a pre-screening of people’s shopping habits and demographic information in order to determine initial eligibility of the participants for my research. I selected three participants to interview from a group of 10 people who responded to a preliminary questionnaire.These participants ranged in age from 23-43, one male and two females, one married and had young children, the others were single. I focused on their recent online shopping experience, their pain points, and ultimate goals when online shopping. The key takeaways were as follows:
User Persona
From my research, I determined that one persona was capable of representing the target audience. Lauren Prince, a 32 year old mother living in Chicago who shops online regularly for herself and her family.
Strategic Objectives and Requirements
Mirror wants a responsive website design so users can access the site from any device and provide the ability for users to filter for products easily. Additionally, I wanted to discover existing issues users have with online shopping and see how Mirror could accommodate their needs.
I developed my problem statement (above) based on the market and user research performed. All of my interviewees share a similar frustration which helped me determine my direction for this project:
Users are frustrated by the quality and fit of the products they order online from clothing companies. Many times the color isn’t correct, the item doesn’t fit right, or looks completely different than when the model is wearing it on the website.
Business Goals and User Goals
Now that I had empathized with target users and identified their needs, I needed to define the project goal. I reflected on the business goals, user goals, and technical considerations to find a happy medium for all stakeholders. Once I had identified common goals, I could decide what product features were necessary for the prototype.
Feature Roadmap
Following my research, I created a feature roadmap based on categorizing user insights and market research information in order to guide my design process. More details can be found in the full Mirror website Feature Roadmap.
Card Sorting and Sitemap
Next, I conducted an open card sort through OptimalSort to discover how users categorize different clothing options and accessories. Participants were asked to sort 30 cards of clothing and accessories into categories of their own naming. Ultimately, this study was useful in helping me find common terms and thought processes of users as they shop for clothing. Based on the findings, the majority of participants group clothing into categories already established by the retail clothing industry. These are familiar to them and recreating a new navigation system would be too disruptive and hard to implement.
Based on the results of the card sort, I created a site map to visualize the organizational structure of the site and its content.
Task and User Flows
I created a task flow and a user flow in order to imagine how a user might navigate to the site from different pathways and still achieve their goals. This helped me make sure I was thinking as the user would and captured all the necessary steps in an organized manner.
Sketches
I began my design process by sketching out the main screen that my user persona would be interested in seeing; the website landing page. During this process, I considered how a user would want to see the content structured, what the business goals are, and kept in mind the visual goals of the brand (clean, neutral, modern, and fresh).
Lo-Fidelity Wireframes
After selecting a sketch to develop further, I developed wireframes for the desktop, tablet, and mobile viewpoints to ensure the design would be effective across different screen sizes. I chose to expand my wireframes of the desktop version to visualize the user’s flow through the website. I kept in mind my problem statement and decided to design a non-traditional user journey through the outfit inspiration page, selection of a product and ultimately the purchase of the product/checkout flow. My product page featured an image filter for models of different sizes and reviews of the product. This aligned with my proposed solution of designing the user experience spotlighting real people wearing their clothing through collaborations with social media platforms like Instagram or LikeToKnowIt.
As design can be subjective, I made sure to collaborate with other designers for feedback on my wireframes. I learned how important it is to iterate on your designs and take constructive criticism in order to develop a stronger design.
Branding and UI
As part of this project, I was tasked with updating the branding for Mirror. I wanted to expand on the provided adjectives of neutral, modern and clean to include effortless, timeless, and authentic as descriptors for the brand’s overall tone.
I took these adjectives and created a mood board using Pinterest, curating images, typography, logos, and color schemes that evoked my vision for Mirror.
From this mood board, I began to develop the logo for the brand along with a Style Tile and UI Kit. These documents include an expansive collection of the site components and UI patterns and will represent a living document to be updated over time as brand needs change and grow.
Hi-Fidelity Prototype
Next, I scaled up my desktop wireframe pages to include images, color, typography, and other UI elements. In this phase, I iterated further to ensure that the content and visual elements of each page were cohesive and fit the brand tone/image. I converted the pages into a prototype using Figma and included different interactive elements like hover states, button states, and overlays in order to make the experience feel like a real website.
Usability Testing
I recruited four participants who aligned closest to my user persona to take part in usability testing of my prototype. Using a preliminary survey, the participants I chose to partake were all females between the ages of 28-37 who shopped online at least once a month and used social media. My goal was to test my proposed solution of providing real people as style inspiration as well as the checkout flow of the website. I also wanted to gather feedback on the UI elements of the pages, the content included, and any pain points/successes from potential real users.
All testing was done remotely over Zoom and recorded. Participants were provided a link to the hi-fidelity prototype of the Mirror website. They shared their screens and moved through the scenario providing feedback on the homepage, finding a product based on style inspiration page, product page, and checkout flow.
Questions asked are detailed under the Usability Test Planning document.
Affinity Map
I compiled the responses of my usability test into an affinity map. This helped me synthesize the results into a visual manner and determine positives, negatives, failures, and areas for improvement. I identified areas of improvement by importance based on the number of similar comments and the severity of the failure.
Test Results
Based on these results, I decided to go back and implement changes to those issues I identified as top and high priority. The following changes were made to the prototype to accommodate my findings:
.gif)
.gif)
.gif)
Due to the limitations of the prototype and some missed opportunities highlighted in my usability testing, measuring success of this project is a challenge. I chose to design an alternate route for the user to find a product which presented a hurdle from the start. As more brands are including style inspiration sections to their websites, I do believe that this is a user experience that would be successful in a real-world application. Hypothetically, I would measure the impact of this project by some key metrics:
This project helped me learn the importance of research and collaboration in design decisions. My research was critical in helping determine an existing problem for users and to provide direction for my designs. I kept in mind the intended user at all times, working through usability and design thinking principles. Collaborating with my mentor and peers throughout the process improved my designs tremendously. The UX community has shown me that design is not done in a vacuum and that when we share insights with one another, a better and more functional product is achievable.
