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
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.
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.
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
is the percentage of E-commerce sales via mobile.
of US digital buyer in 2020 was Millennial internet users.
is the percentage of increase in online retail sale in 2021
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.
From the interview session, I summarized the key findings:
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.
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.
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 Prototype
After completing prototype, I test the design on a group of users who fit the user persona in order to:
Moderate remote testing via Zoom.
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."
Please find the full scenarios and observation note of usability testing here.
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