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
logo2.png
Duration

8 Weeks

Before & After

Before after.png

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

Desktop mock up.png

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

Google Analytics_2x.png

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

Insights from Google Analytics.png

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

  1. Participants were required to perform the tasks on the desktop versions of the Google merchandise website.

  2. Window shop for 2-3 items they like to add to cart.

  3. Complete checkout process using their own Gmail account.

Insights 

The test results explained the relationship between the data and user behavior:

User research insight.png

Define

The problems that need immediate improvement were defined as the following:

Improvements-location.png

Provide location preference settings

Allow users to switch between different location websites.

Improvements-product page.png

Improve product page layouts

Showing relevant content and engaging layouts for a better shopping experience.

Improvements-signin.png

Improve sign-in options

Eliminate frustration during the sign-in process.

Improvements-Checkout form.png

Redesign checkout webform

Decrease checkout drop-off.

Improvements-newsletter.png

Offer newsletter subscription to users

Motivate users to return to our site.

Screen display.png

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. 

Area of focus.png
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.

Location Shadow.png
Location preference.png

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.

Messages.png
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.

Newsletter .png

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.

Product display.png
Product page layout.png

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.

Current signin.png
Improved signin.png

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.

Web form display.png
Webform redesign.png

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

wireflow.png

Final Designs

Design showcase.png

UX designer

Phoebe Huang

social