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.
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.
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.
Relaxed Shopping Experience
Fitting without worrying
Being Inspired & Stay Informed
Quality wins over
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
Sitemap
Task Flow
User flow
Wireframe
High-fidelity prototype
Usability Testing
Affinity Map
Final Prototype
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.
Assumptions
Methodologies
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
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
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.
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
Participants
Assumptions Validated
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"
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.
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.
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.
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.
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:
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...
Following the result from card sorting, I created a site map to map out the structure of navigation and organize the website's content to ensure the site's navigation could address the user's problem.
.png)
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.
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.
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.
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.
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.
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.
With the visual style defined for the UI design and wireframes ready, it's time to put things together.
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 PrototypeAfter completing prototype, I test the design on a group of users who fit the user persona in order to:
Methodologies
Moderate remote testing via Zoom.
Participants
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:
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:
Please find the detailed findings from Usability Testing here.
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.
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.
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
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
Helping a Vietnamese local business expand its online presence
Making skincare accessible and empowering people to adopt healthier skin choices.
If you like what you see and want to work together, get in touch!
hello@itskim.design
