Responsive e-Commerce Design & Branding

Full website design and branding for clothing company
Hero Image Bilby

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,, Google Forms, Google Drive

Duration: 2 Weeks

View Prototype

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:

  • Trendy Brand Collaborations / Pop-up Shops: Multiple brands include collaboration collections with other designer brands. This cross-branding is appealing to users who may want the look of the more expensive brand and can afford it at the price point offered by the collaboration.
  • Sustainability and Eco-Friendly Options: Brands are now highlighting their sustainability efforts on their websites, which is appealing for users who value eco-friendly practices in their clothing brand choices.
  • Social Media Integration: Users enjoy shopping straight from their Instagram feeds, getting outfit inspirations and reviews of products from social media influencers and celebrities. Companies use branded and non-branded hashtags in order to build a library of user-generated content. This increases engagement with the brand’s customers and generates a positive buzz around the company and its products.
  • Inclusivity: Progressive brands have started to include features to attract a more diverse customer base. New product labels like “divided”, displaying gender neutral clothing and not requiring users to provide their gender for reviews or account profiles have helped to improve brands’ inclusivity reputation.

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:

  • Users like to have choices when they shop
  • All users want deals and incentive buys
  • One user talked about liking the option to buy online and pick up in store. This is a newer option that has taken off in the past year because of COVID. I think this is an important filter that the site should highlight.
  • All users' frustrations focused around customer service aspects such as returns and shipping and items they received not being as advertised. They do not like to pay for shipping and want a good return policy as well.

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.

user persona

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.

business goals

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.

Site Map

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.

Task FlowUser Flow

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.

Mood Board

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.

View Prototype

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

  • Reception of the website was generally positive.
  • Many user errors could be attributed to the prototype not being fully functional.
  • All participants said they enjoyed the experience and were very satisfied with the checkout flow.
  • All participants were able to complete the checkout task, but only some of the participants followed my intended flow through the style inspiration page, #mirrormirror. Instead, the participants said they would shop a more traditional way, through the menu nav or search section for a particular product.
  • All did agree that the style inspiration page was an innovative idea that they would have gone through if there was more information highlighting it on the homepage.  
  • A few mentioned that they appreciated that inclusion was represented with models of different sizes, shapes, and ethnicities.
  • All identified missing elements on the checkout flow such as order confirmation number and estimated shipping arrival.

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:

Iterations Gif
Update image hero area to emphasize the style inspiration page and make it a clear main CTA
Design Menu Nav dropdown for #mirrormirror to provide users with more information on the style inspiration options that the brand offers
Iterations Gif2
Updated checkout flow to include guest or member checkout pages
Iterations Gif3
Update checkout flow pages to include additional information in the order summary such as estimated shipping information and checkout confirmation number, taxes, etc

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:

  • Increase purchase rate of products
  • Ratio of positive to negative adjectives while using the product

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.

more projects