Conceptual Project: Common Us - Clothing E-Commerce

Creating a seamless shopping experience across platforms.

  • My Role
    User Research,
    UX/UI Design, Branding
  • Team
    Sole UX/UI Designer
  • Project Timeline
    April 2021
    80+ hours in 4 weeks
  • Tools
    Figma, OptimalSort, Illustrator, Miro, Whimsical
Common Us - Mock Up - Clothing E-commerce Web design
Project Overview


Common Us is a fictional clothing store that has been a successful business with over 50 physical stores. Their target customers are those who have budget-minded, look for clothing for any occasion. The company is aware of the needs of online shopping from their customers therefore they want to provide a way to allow customers to shop clothing online effectively and effortlessly.

The Problem

Common Us current website is outdated, only use to display basic information about the company. Customers can not purchase from their online website while the demand for e-commerce store has been increasing.

The Solutions

I designed a responsive website that helps take Common Us into the digital age, maximize profits while bridging in-person experience with online format.

Here is the prototype! Let's explore and order a Linen Mini Dress from Common Us.

Solutions Breakdown

The solutions in detail

Relaxed Shopping Experience

Glancable content & Easy navigation

  • Search bar & Menu navigation: Allow users to find the items in their own ways.
  • Quick View Mode: Provide a modal window to give a quick access to wanted items without jumping to another page.
  • Informative product cards: Inform users what the brand is about and what items Common Us carries.

Fitting without worrying

Flexible ways to find the size that fits

  • Size Guide & Find Size feature: Help users find size either by inputting their measurement or checking the informative size chart.
  • Size tips from the review: Provide users more information from other's purchases regarding how the item fits that help users more confidence in choosing the size.
  • Change model options: Allows users to view the clothes on models that look like them.

Being Inspired & Stay Informed

Inspirational sections

  • Trending section: Help users keep up to date about the latest trend.
  • Social Media section: Insprie users by showing how others mixed & matched, expressed themselves with the brand clothes.
  • Styling & Similar item section: Offer users similar looks and recommend users how the item could be mixed.

Quality wins over

Product in detail

  • Product detail: Provide detail regarding to material & more.
  • Review & Rating: Help users set the right expectation based on other's review photos and rating.
Design Process

Design Thinking Framework

Let me walk you through how I came up with the solutions



Market Research

Competitive Analysis

User Interview



Empathy Map

User Persona

Problem Statement

Product Goal




Task Flow

User flow



Prototype & Test

High-fidelity prototype

Usability Testing

Affinity Map

Final Prototype

01. Empathize

Understanding the market and users


To gain a better understanding of the online shopping industry as well as online consumers, I began with creating a research plan to keep me stay on track, guide my work in a clear direction and purposeful way.

Research Goal

To understand the current landscape, identify common patterns that could enhance the shopping experience. Along with learning user’s behavior, emotion when it comes to online shopping.


  • People's shopping behaviors has been changed since the pandemic hit.
  • People wants to shop for clothing in the fast and convenient ways.
  • People tends to shop online on their mobile phone.


Secondary Research

Market Research

After outline the research plan, I started with conducting market research to get an overview of the industry, discover existing standard of e-commerce landscape such as what the market trends are and who the market is made up of. Here are some key metrics

  • Secondary research: Market research, competitor analysis
  • Primary research: User Interview


is the value of Global Fashion industry

Source: Statisca


is the percentage of E-commerce sales via mobile.

Source: Statisca


of US digital buyer in 2020 was Millennial internet users.

Source: Statisca


is the percentage of increase in online retail sale in 2021

Source: digital360

Competitor Research

Next, I proceeded to analyze direct and indirect competitors to identify competitors' strengths and weaknesses. Conducting competitor analysis will also help to discover what areas of opportunity exist for Common Us.

Direct competitors are official clothing brands with physical and online stores, only sell products of their brand. While indirect competitors are online clothing marketplace retailers, selling products from many brands.

I also conduct in-depth analysis on direct competitors to identify some key features that have been employeed in their websites to deliver online experience.

Key Takeaways

  • Industry trends: 24/7 customer support, chatbots, AR try on
    → The brand could take note of the highlighted technological innovation to enhance users' experiences.
  • The pandemic has been accelerated the demand for online shopping & mobile shopping is on the rise.
    → This is an opportunity for Common Us to boost more sale by increasing their online presence across platforms.
  • Online shopping consumers are mostly the young generation especially Gen Z and Millenials and they will likely shop online more than before.
    → With such a major shift in shopping preference and behavior, updating operations to support more online activity is crucial.
  • Big brands like H&M, ASOS Strong online presences, hand-out a host of promotions and discounts. While H&M, Zara websites interface are clean and neat, indirect Target & ASOS interface are overwhelming with banners and text.
    → A clean, neat layout would help Common Us to capture audience's attention together with promotion highlights.
Primary Research

1-on-1 User Interviews

After gaining the general view of industry, current trends and competitors, it's time to get to know more about who we are desining. I crafted  plan and script to prepare for interview session which is conducted remotely via Zoom.

Interview Objective

  • Gain in-depth understanding  of user’s behavior , their needs, wants, motivations & frustrations when they shop both at physical stores & online websites.
  • Discover shopping habits when it comes to shopping online.
  • Uncover the different attitudes users have towards shopping in-store and online.


  • Gender: 4 females, 1 male
  • Age: ranging from 22-36 years old
  • Habit: Have had shopping online for clothings within 3 months.

Assumptions Validated

  • People's ordering behaviors has been changed since the pandemic hit.
    → Validated. 5/5 participants mentioned they tend to shop online more than go to physical stores because they feel it's more convenient & get rid of the risk of the Covid-19 transmission.
  • People wants to shop for clothing in the fast and convenient ways.
    → Validated. 4/5 participants mentioned they perfer shopping online due to the convenience especially when it comes to payment.
  • People tend to shop online on mobile phone.
    → Validated. 4/5 participants mentioned they tend to shop on mobile phone.

Key Takeaways

From the interview session, I summarized the key findings:

Sizing confusion

Participants are struggling in finding sizes that fit their appearance.

"Sometimes I don't know what size should I buy because different websites they have different size chart"

Fail to meet expectation

Participants feel lack of confidence in online shopping and mistrust the company because the non-transparent product detail and images.

"I have seen some posts on Facebook about Shopping online vs reality, i thought it's just for fun but you know I was shocked as I experienced that exact situation."

Save time and enegery

Participants love shopping online due to its convenience and time-efficiency. They don’t need to line up at physical stores and wait for their turn to try on.

"I really hate the feeling of queuing up in weekend. It's wasted time especially when the stores have seasonal promotion. I need to line up for payment as well."

Attractive deal and promotions

Participants are motivated to shop online because of the deals and attractive promotions.

"I feel shopping online cheaper than at the stores. I received a lot of promotion code and it makes me buy more haha."

Logistic is a key

Shopping cart is often abandoned due to highly cost shipping fees and long delivery time.

"I really hate those websites that hide the shopping fee until the last step of check out. I don't know why they didn't inform me the price at first"

02. Define

Concreting the problems

Empathy Map & User Persona

Research Synthesis

After conducting user interviews and gaining key insights, I created an empathy map to generate a cohesive, empathetic view of our users and organize research in digestible way.

Let's meet Jenny

Next, I created a persona to represent target audience as well as to build empathy with users by capturing user’s problems, motivations, wants & needs.

Throughout this project, the persona was referenced to anchor my solutions on users and help me decide on features prioritization, establish information architecture, and detail-specific interactions.

Problem Statements & How Might We Questions

Frame the problems

With the user persona, and insights from the research stage, I turned my knowledge into Point Of View (POV) Statements to frame the problem from the user’s perspective.

A young busy marketer need to shop online at ease and feel confident in her decisions regarding the items' size and quality because she wants to spend time, effort on the things that matter.

"As a busy young marketer, Jenny needs to buy clothes without hassle, moving from racks to racks just to find items that suit her taste & fits her perfectly because she prefers sparing time to hang out with friends and focus on her work."

After defining the design challenge in POV, I generated a series of How Might We questions to fuel my process for a solution brainstorming session later on.

  • How might we make the online shopping experience become intuitive and stress-free the helps Jenny saves more time and enegry.
  • How might we assure Jenny of the right sizing & quality of items that helps her feel more confident in her purchase.
  • How might we digitalize the physical aspects of shopping that make Jenny feel more tangible about the online shopping experience.

"How might we make the online shopping experience become intuitive and stress-free the helps Jenny saves more time and enegry?"

Product Goal

Keep things aligned

After clearly understanding users' goals, I revisited the business goal & wrote down some technical considerations. I then created a Venn diagram to visualize the project goals which user and business goals are aligned to ensure our product would be backed by all stakeholders.

03. Ideate

Generating solutions to the problems

Information Architecture

Card Sorting

To create a website’s navigation providing frictionless experience & meet users’ expectations, I need to uncover how the target audience’s domain knowledge is structured in terms of grouping items in clothing e-commerce.

Therefore, I proceed to conduct Virtual open card sorting via Optimal Workshop with 11 participants in the age group from 24-36 years old. Each participant was given 28 cards and asked to create categories based on how they think the clothing should be categorized. Below is Similarity Matrix and Dendrograms from the activity

Key Findings

Based on the categorizations with the highest degree of similarities and the areas of opportunity, the following categories for Common Us website are recommended:

  • Top
  • Bottom
  • Dresses
  • Outerwears
  • Accessories

The above categories became the broad headings for navigation, with more specific subcategories available as options underneath them once the user arrives on the page.

Users who often shop online tend to group items based on their familarities with other e-commerce categories and functional product types such as tops, bottoms, dresses, etc...

Task Flow

Linear flow for the task

Now that I knew what kind of content would it be on Common Us's websites based on the sitemap and research findings. I started creating a task flow of an ideal path a user would take to purchase the items. I decided to focus on one main task flow to identify the necessary steps for completing the task.

User Flow

Adding decision points

With a clear picture of the task, I then map out the user flow following the established task to explore the different paths and decision points users would take while interacting with the website. By doing this, I would understand users’ cognitive processes better when browsing through the site.


Wired up the ideas

Taking what I’ve learned throughout my process to this point, I drafted out the overall layout to get a sense of how content should be laid out in structured and logical way and most importantly to address user pain points. I also list out the UI requirements and note down the design patterns from other e-commerce websites to alleviate cognitive load for the user.


I began with sketching the homepage since this is the first page user will land, I then created different sketches to evaluate which sketch might address the user’s problem better and offer an intuitive layout.

Mid-Fidelity Responsive Wireframes

After deciding the visual direction of the layout that might best fit Jenny's goals and needs, I designed low fidelity wireframes based on sketches and understandings of UI pattern across e-commerce.

I utilized 8px grids layout to scale down the content and components from desktop to tablet and mobile, to ensure the layout is fluid intuitively across different devices.

04. Prototype & Test

Building representation of ideas and refining


Introducing Common Us

Before moving on to the UI design, I began with planning the concept for the rebranding of Common Us. Keeping in mind the brand attributes and keywords #delightful #vibrant #pleasure #relaxing #genuine, I created a mood board in which I put ideas, concepts together to set the direction of the new branding.

I also keep in mind the persona to make a decision on what kind of brand Jenny would want to shop at. I digitized the strongest five concepts after sketching a tons of them on paper. I then ultimately narrowed them down to the final logo, which could be best reflect Common us's brand identity.

The window shape represents the wardrobe doors that allow users access to their whole new fashion worlds. I also consider the simplicity and legibility at both large and small scales when determining the final one.

UI Kit

Cohesive visual language

Next, I developed a UI style tile to showcase brand identity and ensure consistency throughout the website with the brand attributes of pleasure, relaxation, and genuineness in mind.

High-Fidelity Design


With the visual style defined for the UI design and wireframes ready, it's time to put things together.

Desktop Prototype

Ready to test

Finally, it's a time to test my assumptions, decisions around content strategy, information architecture, interaction, and more by observing how users interact with the high-fidelity.

Therefore, I designed additional screens needed for users to complete the task and created the prototype in Figma. This time, I decided to go with desktop prototype to study the behavior on a bigger screen while keeping in mind mobile is still a go-to devices when it comes to shopping online.

Task flow: Adding Elati Mini Dress to cart.

View Initial Prototype
Usability Testing

A rehearsal

After completing prototype, I test the design on a group of users who fit the user persona in order to:

  • Identify how easy or difficult it is for users to navigate website to complete the given tasks.
  • Identify pain points, confusion occurring during their progress that would prevent them to purchase the product.
  • Uncover any areas of frictions or opportunities to improve usability.


Moderate remote testing via Zoom.


  • 5 participants with age ranging from 22-37 years old
  • Have shopped online for clothing within the last 30 days
  • Have experience in shopping online for clothing, especially shopping via desktop.

Participants were asked to place themselves in the following scenario:

"It's summer time and you want to find a mini dress for upcoming field trip, then you found Common Us ads on Facebook page.You clicked the ad and landed to Common Us page. From the homepage could you show me what you would do to find and buy the mini dress. Please walk me through your thought and actions regarding to this journey."

Main Tasks:

  • Locate mini dress from the home page.
  • Homepageand product page walk through.
  • Add an interested item to cart. ( In this case: Elati Linen Mini Dress)

Please find the full scenarios and observation note  of usability testing here.

The Result:

Here is the summarize of the result from my uasbility testing:

  • Completion rate: 100%
  • Error-free rate: 80% ( Task 2: 1 user click at product card instead of product image to see full detail. While prototyping just set image is clickable.)
  • Overall rating: 4.8 (on the scale 1-5, how easy it is to navigate website and add to bag the item that you want)

Please find the detailed findings from Usability Testing here.

Affinity Map

Finding patterns to make improvements

After gaining a wealth of comments and feedback from from 1-on-1 test session, I then built an affinity map based on observation sheets, reports from usability testings. Synthesizing usability testing into a visual map helps me to identify patterns, themes, make an iteration on the design in terms of priority and severity.

Key Takeaways

  • 3/5 participants thought that sale section needs something to be more stand out. Current design didn't bring the vibe of promotion & discount.
    → Area for improvement: Make the sale section more appealing, showing more discounted price rather than just displaying images so users could know exactly what's the deal and what items are on sale.
  • 4/5 participants showed confusion about "what's my size" feature. They are kind of familiar with Size Chart. But participants found this feature helpful after discovering.
    → Area for improvement: Make "what's my size" term easier to understand for user and to encourage them to try this feature if they are not familiar with this function.
  • 2/5 participants feedback about Shopping Bag layout which makes them feel unorganized, hard to check items in the bag at glance.
    → Area for improvement: Relayout Shopping Bag page to ensure the information is skimmable, glanceable.
  • 2/5 participants wanted to see size availability at the product listing page before going to product detail.
    → Area for improvement: Add available size information in product card to allow users get a glance at availbility before going to the detail.
Revise Design

Change for the better

Now that I uncovered the pain points from the affinity map, I then evaluated the level of effort and value before moving on with the revision. Besides, I also consider implementing on Wix in a later stage to identify the priority revisions.

Appealing Sale Section

Based on the insights from the usability study, I tweaked the layout, add product cards and highlight the deal, sale-off tag. This will help user to have a overall view on promotion items and deals.

Rewrite the term & Simplified finding size

Since users are not familiar with the copies "What's my size" and are hesitant to use this option. I made a treatment on writing, change to a more straightforward term “Help with size”.  Besides, I decided to combine features to 1 modal window, so users can switch to another tab if they want to.

Detailed product card

To inform the user of the size availability of items on the product page, I added the size available on the product card. Users' purchasing process is optimized as they can skim through other products if the desired size is unavailable.

Organized Shopping Bag Page

To ensure the information is skimmable, glanceable, and helps users enjoy the shopping experience without time-consuming, I revised the Shopping Bag page layout.

Final Prototype

Time to shopping!

With all the high-fidelity wireframes designed, I built up the final prototype, which provides all the information necessary for customers to experience the seamless online shopping journey.

Ready to shop? Let's try to order a linen dress yourself.

View Initial Prototype

The Outcome

Based on first round of usability testing, 100% of participants complete the specific task with 80% error free rate.

Overall rating score: 4.8/5 (Based on High-Fidelity Prototype)

Score rating in term of how easy it is to navigate & add item to bag.

All and all, this website is so nice. It gave me a vibe of relaxing and calming. I really love it, if this is a real clothing stores, I will try it out without a doubt

Nikki Yang - Marketing Manager

Participant in Usability Testing


What I learned

  • This project has shown me why I should apply a design thinking framework to guide my work. By gaining in-depth understandings of people's motivations, needs, and frustrations before designing, we can create impactful user-centered products not only to address users' problems but also alleviate their pain points, create delightful moments along the way.
  • The important of designing based on grid system as it helps to ensure responsive designs scale proportionally.
  • The usability testing is crucial and does wonder in uncovering usability issues which have neglected by me as the designer.
  • Overall, throughout the project I have gained a host of knowledge and understanding in the UX design process and e-commerce industry.
Next Step

Moving foward

  • Conduct a second round of usability testing to identify any other pain points that may occur and validate if the priority revisions improve user experience.
  • Prepare handoff documents to pass to developers.
  • Revisit feature roadmap and prioritization matrix to evaluate & proceed the next features that need to employ.

Happy Shopping

& thanks for reading!

Next projects