Background:

During my time as a UX/UI Design student at the University of New Hampshire, I chose a capstone project for a hypothetical e-Commerce business. I had the freedom to choose the company name as well as the visual branding and design.

The ultimate goal was to create a solution to improve the conversion from browse to completion of checkout to increase revenue on the product’s mobile-web experience. I was given information such as statistics about the target users, current user pain points, and the brand’s attributes.

My Role:

UX Designer and Researcher, UI Designer

Tools Used:

Information from Product Manager:

I was given a hypothesis and specific data from the Product Manager:

Hypothesis: Users are unable to determine which bike is best based

on relative features.

Data Collected:

50% of users open an average of 7 item pages and then abandon the site

without adding items to their cart.

70% of users who place an item in their cart do not actually purchase
Users tend to abandon the cart at the registration page
- (users currently have to make an account to purchase)

Product Manager Requirements: Design a guest checkout option that captures

an email address to solve the problem of users dropping off at the current registration page.

The Problem:

Many online shoppers are unable to determine which product is best for them, and those who begin the checkout process become frustrated once they are forced to create an account before placing their order, so they abandon the site altogether.

The Solution:

mockuuups-iphone-13-pro-mockup-held-up-beside-the-ocean.jpeg

After conducting additional research and user testing, I was able to design a solution that included an intuitive compare feature and a guest checkout option on the registration page to address the problems stated above.

Jump to final design >

Project Plan:

DISCOVERY

Secondary Research: Best Practices

Avoid clutter

Websites with simple designs have higher conversion rates

Add a search bar

Provide additional filters and search results

Eliminate steps in your checkout process

28% of consumers said they abandoned a shopping cart during checkout because the process was too long and complicated
Get only essential information from the buyer

Accept as many payment options as possible

Provide multiple forms of payment so the customer can choose their preferred method

Write informative product descriptions

Explain how the product works by highlighting key benefits
Use bullet points to make it easy for consumers to scan text

Display high quality product images and videos

Online shoppers rely on pictures to give them a sense of what they’re buying, being able to zoom in and highlighting top features helps
90% of consumers say videos help them make a decision about purchasing a product

Feature customer reviews and testimonials

Testimonials and reviews are another way to add credibility to your products and brand.

Competitive Analysis Findings:

Best Practices from Competitors

Having a guest checkout option lets a new user avoid setting up a profile, saving time
Simple and intuitive product comparison tool, basic feature descriptions makes it easy to compare quickly, avoiding frustration from spending lots of time switching between tabs or screens
Having top navigation including hamburger menu, search icon, and cart available on every page, so users can easily access popular tools
Incentive prompt to make an account instead of making it mandatory
Product name, star rating, brief description, big photos all in view before having to scroll to see more detailed information, avoiding unnecessary scrolling

Research Goals:

Through conducting secondary research, competitive analysis, and sending out
a survey to potential users, the goal was to answer the following questions:

What features are most important to users when searching for a bike?
What online tools help users narrow their search to purchase a product that best fits their needs?
What deters users from completing a purchase?
What features are developed effectively on successful e-commerce sites?
What UI elements can improve or worsen the purchasing experience for the user?

The survey contained eight questions, and users could select multiple answers as shown below.
I received responses from 29 potential users.

Survey Findings:

Shoppers can lose confidence in buying a product online if the product features are explained or shown poorly or ineffectively.

Shoppers can get so frustrated by not being able to compare features amongst multiple products that they decide to abandon a site and look for an easier experience.

After most likely spending a lot of time deciding on a product to purchase, shoppers can still feel frustrated enough to give up on their order altogether if they are forced to go through a lengthy checkout process or being forced to make an entire account profile before completing an order.

Being able to utilize powerful, responsive, and easy-to-access search and filter features on a site greatly improve the online shopping experience and can keep users engaged.

1 discovery

DESIGN

User Flows:

After gaining valuable insights from my research, I created user flow in order to prioritize the goals and
the most important tasks that users want to accomplish.

Sketches:

1/3

Part of my process is to start sketching with paper and pencil along with gray markers. From there, I chose my best sketches and turned them into low-fi wireframes in Figma.

Low Fidelity Wireframes:

Home

Road Bikes Guide

Order Confirmation

Home

1/8

2 design

VALIDATE

3 validate

Usability Tests Round 1:

For the first round of user testing, I conducted usability tests with five people. These people had completed the survey I had sent out the week before about their online shopping experiences. Three tests were completed in person in their homes with the users accessing the prototype link on their mobile devices, and the other two tests were conducted remotely over Google Hangouts where users shared their screen of the prototype so I could watch them navigate the site.

The goal of the usability tests was to determine how intuitive the shopping and checkout experiences were. Specifically, I wanted to test the product comparison tool and the process of completing an order as a guest.
I expected that certain call-to-action buttons and features would be utilized more than others, such as the bike guides and the compare tool, instead of the generic search icon at the top or any buttons further down the pages.

To begin, we will assume that you are shopping online at Bike Master for the first time. You are looking to purchase a Road Bike, and want to make sure you choose the one that best fits your needs. Take a minute now to scroll through the home page without clicking anywhere yet.

1. Before you begin looking for a specific road bike, you want to better understand the features and specifications
of road bikes in general. Where would you go to find that information?

2. Where would you go to search for all the road bikes that this site has to offer?

3. Navigate to the product “Road Bike 1” and explain what info you can find on that page.

4. You’ve narrowed your search to two bikes, Road Bike 1 and Road Bike 2. You want to see all the similarities and differences of both so you can make a final decision to purchase one of them that best fits what you’re looking for. How would you accomplish that?

5. You’ve decided on purchasing “Road Bike 1.” Walk me through how you would complete your purchase without logging in or creating an account.

After the last task was completed, I asked the users a few concluding questions: What were your overall impressions of the site? What changes would you make to the site, if any? Did you have a favorite feature or
page and if so, can you explain why?

Findings & Feedback:

Issue #1: Product Compare tool was not intuitive
• 4/5 users had great difficulty understanding what buttons they had to click in order to add a product to the compare list, and were frustrated they could not do so with fewer clicks and navigating pages to do what should be a simple task.
Solution: Change the compare icon from arrows to a plus icon with text prompt “add to compare list” above product photo and in a banner at the top of the page.

Issue #2: Lack of back arrows to navigate quickly and simply
• 4/5 users became frustrated when there was not a simple back arrow in order for them to easily go back to the previous page they were on, which forced them to use the menu and redo multiple steps needed to get to a certain page.
Solution: Add a back arrow with “previous page” at the top of each page just under the top navigation bar, and large enough to be clickable.

Issue #3: Small font sizes for descriptions
• Some prompts and information were too small or light to read, so people will not want to read them or get frustrated.
Solution: Adjust the font sizes, minimum size 12.

Issue #4: Compare Page
to Cart
• From the compare page, there is currently no way to directly add a product to the cart. You have an extra step of going back to the product page and then adding to the cart.
Solution: Add an art to cart button on the product compare page.

DESIGN

Iterating on Designs After User Testing:

The goal of the usability tests was to determine if the changes I made with the feedback collected from the first round of testing improved the user experience of the shopping and checkout experiences. Specifically, I wanted to test the changes I made to the product comparison tool. Users found it difficult to use in the first round, so my prediction is that the improved tool will be more straightforward and intuitive for users to comprehend.

I also added more back arrows and breadcrumbs to the previous screen since that was a common frustration users had with the first round as well. They would have to spend extra time figuring out how to go back, or go back to the homepage and re-trace their steps.

Other minor changes were made such as: increasing font size for descriptions, rewording some text prompts for clarity, and adding the shipping company in the checkout process. Some users also were looking for and wanted to see related products suggested to them such as adding an appropriate accessory for the product they’re purchasing.

Home

Road Bike Guide

Order Confirmation

Home

1/8

4 design

VALIDATE

User Testing: Round Two

For the second round of testing, I conducted usability tests with five new people. They were asked the same questions as the first round of testing so I could compare their experiences to the first group. All tests were conducted remotely over Zoom and Skype in which users shared their screen of the prototype in Figma so I could watch them navigate the site.

Findings & Feedback:

Issue #1: Compare Product and Compare buttons can be overlooked/misunderstood• 3 out of 5 users did not notice either compare button right away, and there was some confusion before clicking them if they lead to different places since they were worded slightly differently.
Solution: Simply rearranging the order in which the compare overlay appeared would help, along with instant feedback in the longer compare product bar, showing how many products were selected would be helpful.

Issue #2: Long compare button does not show how many items are in the list
• Users expected to see a number showing how many items they had chosen to compare.
Solution: Add a number to that bar to show how many items they’ve chosen.

Issue #3: Related products on the cart page did not auto add to the cart
• Users expected an item suggested at this stage would be automatically added to the cart with that button unless they had to choose a size or color first.
Solution: Simply change the button’s text to “add to cart.”

5 validate

DESIGN

Final Designs:

After implementing feedback from two rounds of usability testing, I had a final solution designed. My capstone project only required two rounds of testing, but if this were a real company, I would have conducted additional rounds of user testing until there were no further issues found.

1/19

6 design

Style Guide:

Interactive Figma Prototype:

final designs

Outcomes & Lessons Learned:

Categorizing Findings from User Testing:
After typing all my notes from user testing, I decided to make a table in Google Docs to prioritize which user issues seemed critical, major, minor, or normal that needed to be addressed. I made sure to fix the critical and major categories first. I also included a “recommendation” row in my chart to see the issues and solutions all on the same page. I did not use this method for my previous capstone project, so I plan to use this technique going forward since it helped on this project.

Don’t over complicate tasks:
Never assume that users are willing to spend too much time to figure something out. If a task that should be straightforward becomes frustrating, a real customer may end up abandoning that task or the site altogether. When participants in my user testing rounds came across something difficult, they did spend some time trying to figure it out since they were in a testing session, but admitted that if they ran into a similar problem while online shopping for real, they may have considered trying a different site.

^ Back to top of page

Background:

My Role:

UX Designer and Researcher, UI Designer

Tools Used:

Information from Product Manager:

I was given a hypothesis and specific data from the Product Manager: Hypothesis: Users are unable to determine which bike is best based

on relative features. Data Collected:

50% of users open an average of 7 item pages and then abandon the site

without adding items to their cart.

70% of users who place an item in their cart do not actually purchase

Users tend to abandon the cart at the registration page

(users currently have to make an account to purchase)

Product Manager Requirements: Design a guest checkout option that captures

an email address to solve the problem of users dropping off at the current registration page.

The Problem:

Many online shoppers are unable to determine which product is best for them, and those who begin the checkout process become frustrated once they are forced to create an account before placing their order, so they abandon the site altogether.

The Solution:

After conducting additional research and user testing, I was able to design a solution that included an intuitive compare feature and a guest checkout option on the registration page to address the problems stated above.

Project Plan:

DISCOVERY

Secondary Research: Best Practices

Competitive Analysis Findings:

Research Goals:

Through conducting secondary research, competitive analysis, and sending out a survey to potential users, the goal was to answer the following questions:

​

What features are most important to users when searching for a bike?

What online tools help users narrow their search to purchase a product that best fits their needs?

What deters users from completing a purchase?

What features are developed effectively on successful e-commerce sites?

What UI elements can improve or worsen the purchasing experience for the user?

The survey contained eight questions, and users could select multiple answers as shown below. I received responses from 29 potential users.

Survey Findings:

Shoppers can lose confidence in buying a product online if the product features are explained or shown poorly or ineffectively.

​

Shoppers can get so frustrated by not being able to compare features amongst multiple products that they decide to abandon a site and look for an easier experience.

​

After most likely spending a lot of time deciding on a product to purchase, shoppers can still feel frustrated enough to give up on their order altogether if they are forced to go through a lengthy checkout process or being forced to make an entire account profile before completing an order.

​

Being able to utilize powerful, responsive, and easy-to-access search and filter features on a site greatly improve the online shopping experience and can keep users engaged.

DESIGN

User Flows:

After gaining valuable insights from my research, I created user flow in order to prioritize the goals and the most important tasks that users want to accomplish.

Sketches:

Part of my process is to start sketching with paper and pencil along with gray markers. From there, I chose my best sketches and turned them into low-fi wireframes in Figma.

Low Fidelity Wireframes:

VALIDATE

Usability Tests Round 1:

Findings & Feedback:

Issue #3: Small font sizes for descriptions • Some prompts and information were too small or light to read, so people will not want to read them or get frustrated. Solution: Adjust the font sizes, minimum size 12.

Issue #4: Compare Page to Cart • From the compare page, there is currently no way to directly add a product to the cart. You have an extra step of going back to the product page and then adding to the cart. Solution: Add an art to cart button on the product compare page.

DESIGN

Iterating on Designs After User Testing:

VALIDATE

User Testing: Round Two

Findings & Feedback:

Issue #2: Long compare button does not show how many items are in the list • Users expected to see a number showing how many items they had chosen to compare. Solution: Add a number to that bar to show how many items they’ve chosen.

Issue #3: Related products on the cart page did not auto add to the cart • Users expected an item suggested at this stage would be automatically added to the cart with that button unless they had to choose a size or color first. Solution: Simply change the button’s text to “add to cart.”

DESIGN

Final Designs:

After implementing feedback from two rounds of usability testing, I had a final solution designed. My capstone project only required two rounds of testing, but if this were a real company, I would have conducted additional rounds of user testing until there were no further issues found.

Style Guide:

Interactive Figma Prototype:

Outcomes & Lessons Learned:

^ Back to top of page

I was given a hypothesis and specific data from the Product Manager:

Hypothesis: Users are unable to determine which bike is best based

on relative features.

Data Collected:

Through conducting secondary research, competitive analysis, and sending out
a survey to potential users, the goal was to answer the following questions:

The survey contained eight questions, and users could select multiple answers as shown below.
I received responses from 29 potential users.

After gaining valuable insights from my research, I created user flow in order to prioritize the goals and
the most important tasks that users want to accomplish.

Issue #3: Small font sizes for descriptions
• Some prompts and information were too small or light to read, so people will not want to read them or get frustrated.
Solution: Adjust the font sizes, minimum size 12.

Issue #4: Compare Page
to Cart
• From the compare page, there is currently no way to directly add a product to the cart. You have an extra step of going back to the product page and then adding to the cart.
Solution: Add an art to cart button on the product compare page.

Issue #2: Long compare button does not show how many items are in the list
• Users expected to see a number showing how many items they had chosen to compare.
Solution: Add a number to that bar to show how many items they’ve chosen.

Issue #3: Related products on the cart page did not auto add to the cart
• Users expected an item suggested at this stage would be automatically added to the cart with that button unless they had to choose a size or color first.
Solution: Simply change the button’s text to “add to cart.”