Data Analysis
User Interview
Usability Testing
Sketch Prototype
Existing Website Redesign: Google Merchandise store
Project Overview
The Google Merchandise Store sells a variety of branded products to its fans around the world. They wish to promote one of the bestselling products for charity fundraising events. I was asked to use quantitative data to measure the site performance to inform design decisions and validate my hypothesis via usability testing.
Hypothetical Client
Duration
8 Weeks
Before & After
Challenge
Business Goals
For this project, the goal is defined as:
-
Increasing the number of loyal customers
-
Increase sales in highlighted product for charity fundraising
-
Improve user flow to achieve a seamless purchasing experience
Problem Statement
-
How might we encourage new users to return to our site?
-
How might we increase product view and decrease checkout drop-offs?
-
How might we direct users from over the world to the correct destination site?
Solution statement
-
Offer newsletter subscription to users
-
Provide proper content arrangement throughout the site
-
Provide better guidance during the checkout process
-
Improve ease of use by providing better navigation on the website
Research
Scope & Limitations
This project focuses on improving the North American website. The analytic reports used for quantitative research were dated between 1/1/2019-12/31/2019. The original website screenshots were taken in May 2020.
The Google Merchandise Store is operated by Robertson Marketing. They are Google’s branded merchandise partner in North America.
Understanding The Problem
For this project, I took advantage of using a Google Analytics demo account to look at the site’s performance data. After spending some time reviewing each metric, I realized that the quantitative data alone are just numbers, it's best used in combination with qualitative data. It took me a while to determine the key information to measure the performance, but eventually, I found the right metrics.
Analytic reports used in this project
The following sections are considered the essential information to its performance:
-
Who are our users?
-
Where did our users come from?
-
What is their shopping behavior like?
-
What is their checkout behavior look like?
Insights from Google Analytics
User Research Methodologies
User Interview
To gain a better understanding of the online shopping behaviors and daily technology usage from participants, the questions I asked include:
-
Do you shop online? How often do you shop online?
-
What kind of stuff do you usually buy online?
-
When was the last time you shopped online? What did you buy?
-
What kind of equipment do you usually use when you are shopping online? Why?
-
What is the most thing you are concerned about when you are shopping online?
Usability test: Requirements and tasks
-
Participants were required to perform the tasks on the desktop versions of the Google merchandise website.
-
Window shop for 2-3 items they like to add to cart.
-
Complete checkout process using their own Gmail account.
Insights
The test results explained the relationship between the data and user behavior:
Define
The problems that need immediate improvement were defined as the following:
Provide location preference settings
Allow users to switch between different location websites.
Improve product page layouts
Showing relevant content and engaging layouts for a better shopping experience.
Improve sign-in options
Eliminate frustration during the sign-in process.
Redesign checkout webform
Decrease checkout drop-off.
Offer newsletter subscription to users
Motivate users to return to our site.
Design Iteration
Area of Focus
In the redesign process, I focused on the following elements to provide a pleasant purchasing experience to users. Other than the improvements mentioned above, I have also improved other minor components on the interface to maximize the pleasantness of the shopping process.
Challenge 1
Allow users to switch sites between different locations
Allow users to switch sites between different locations
To enter the Google Merchandise Store, the users will first encounter a map display. Users may land in the wrong location website because they weren’t expecting to see a map to enter an e-commerce site. It frustrates users when they reach the last steps of the checkout process only to find out the site does not ship to their destination.
1. By providing location preference to users, they will be able to choose from their preferred location as well as exploring other countries’ merchandise sites.
2. The location preference setting is included in the footer section.
Challenge 2
Offer newsletter subscription to users
Provide sign-up incentives to motivate new visitors to Provide sign up incentives to motivate new visitors to subscribe to the newsletter and send frequent newsletters to encourage users to return to the merchandise store website. As a result, we can increase the ratio of returning visitors.
1. Replace the carousel on the current landing page with box images to display the categories.
2. Offer newsletter subscriptions to users and explain what kind of information is included in the newsletter.
3. Rearrange the information in the footer so it is presented in an intuitive way.
Challenge 3
Improve navigation to the product detail page & page layout
In the current design, it uses cards in the layout to present product lists. When a user clicks once on the product card, the card would flip over with some text about the product. When the user clicks again, the card flips back to the image, instead of taking users to the product details page. The button to the product details page is placed under the text with no contrast or highlights. This explains the 94% page drop-off shown in the data analytics.
1. Remove the card flipping function and add other elements (e.g. rating, brand, new or sale product) to help the user decide which product they are interested in.
2. I have rearranged the product details layout to only show the relevant information users need.
3. In addition, I have provided a list of suggested products for users to explore further on the website.
Challenge 4
Improve sign-in options
In the current checkout process, users are required to sign in to their account first. When participants used the Gmail sign-in option on the left, the page was redirected to the home page. it caused frustrations among users because they thought they lost the items in their cart and have to redo the shopping process.
1. By proving guest checkout to non-member users will smooth the checkout process and decrease cart abandonment.
2. Distractions were removed in the footer section while users go through the checkout process. Provide customer support hotline for timely support to present security and trustworthiness.
3. Use checkboxes to simplify the steps in creating an account. Users can decide whether or not to create an account or to sign up for the newsletters, all they have to do is to click on the checkbox.
Challenge 5
Improve webform design
This is the step where users have the most trouble. The confusing layout and imprecise messages frustrate users filling out the web form. Moreover, error messages only show up on the top of the page after users have submitted the information. This explains the 97% drop-off in the checkout process.
1. The progress bar indicates how far off they are with their filling process, and how many steps remaining until the end of the checkout process.
2. Provide place holder in the box to provide guidance while users input personal information.
3. Verifying the information inputs provides assurance before moving on to the next step.
4. When an error occurred, provide relevant information at the point and detailed instructions for users to self-correct.
What I Learned
For this project, I learned to use analytic data and usability test results in comparison to inform UX design decisions. Each section of the data is meaningful, depending on how we interpret it, and does not fall into the traps of vanity metrics.
It took me a while to understand the relationship between the data and usability test results, trying hard to look for data that “matters.” Once the dots were connected, the problems became apparent.
Moreover, I often find myself going over creative with my designs; the best thing I learned from redesigning an existing site is to limit creativity to keep the branding and usability in UI.
Wireflow
Final Designs
