Pro Grills UI/UX Design

Problem

Product Manger Information and Data:
First, data shows 50% of users, open on average 7 item pages, and then abandon the site without moving any items into the cart. Hypothesis is that users are unable to determine which grill is best based on relative features.

Second, 70% of users who place an item in the cart do not purchase. Data shows that users abandon the cart at the registration page. Right now, users must sign up and make an account to purchase. The Product Manager is requesting a design change to add a guest checkout feature to solve this opportunity.

The client and the product manager supplied wireframes and notes on the existing site as a starting point to identify areas that need attention.

Project Scope & Solution

Current Product Assessment

I have determined based on review of the current mobile version and secondary research that the current Pro Grills mobile experience can be enhanced to include a better product display, a comparison product option, a 3-step checkout process, and additional payment options other than standard debit/credit card purchases to retain a user from leaving the site before a purchase is made. There are five main areas that I would like to recommend enhancements to improve purchase activity and customer satisfaction. I have also included my research discovery for a deeper understanding of why these recommendations are needed.

The Solution & Mission

• Redesign the features based on research, business goals, and user-friendly steps
• Make Merchandise Product Cards to quickly review items and relative features, with the ability to save selections to a product comparison page.
• Develop a comparison product page and chart so users can choose features that meet their needs and have add to cart features.
• Create a guest checkout option so any user can complete a purchase. At a minimum the process must capture the guest’s email to purchase.
• Checkout must be quick an easy in a few simple steps, so users DO NOT abandon the purchase stage!!!!
• Develop alternatives to purchase items. (i.e. Apple pay, PayPal, and/or other payment methods to purchase).
 These payment options must allow the user to return to the Pro Grills website after purchase.
• Move account sign up and registration page to another location.

UX Research

During secondary research, I looked for how process were done, how many steps, and minimal information needed to make a transaction. I also studied payment options and how feedback was provided at each stage. I also studied the design layouts used by popular site that helped the user through the process and retain the user through the check out funnel to make a conversion. Semi-structured interviews were done to capture how users interacted with online purchasing to empathize with users.

Lean UX Methodology

This method was chosen due to time constraints and the need to produce change with an existing product, where some existing data was already available to enhance the current usability experience. There was a need for rapid results and to obtain data feedback as early as possible to make quick decisions iterations.

I developed a hypothesis about buying online from the secondary research comparing 8 industry standard leaders and 5 quick in person interviews to gather insight from users who purchase online using the web or a mobile device.

I then used these assumptions and hypothesis to produce change and improve the Pro Grill web-mobile site. I used assumptions, brainstorming, sketching, and core workflows to develop what I thought to be true about the product and the process.

Six key areas to develop an MPV

• Home Page Opportunities: recommend using more white space & viewing no more than 2 items on the  screen at a time.
• Product Cards Comparison: Allows 4 items to be compared side by side to see features like, price, size, short product description.
• The shopping cart page: Solve abandonment of purchase by using a guest checkout and 3 easy steps to purchase and funnel the user into the conversion process.
• Check Out Enhancements: Remove force sign-in and/or make an account in order to purchase. Because it is believed that this is causing users to abandon the checkout process.
• Make sign in/make an account an optional process: Move this to it's own page. Provide rewards for   registering and making an account. This will bring customers back with another chance to purchase again.
• Payment Options: Add additional payment opportunities like PayPal, Google Pay, and Apple Pay.

Sketches

Developed using the 6 key areas, along with the business goals to improve and retain purchase activities.

Journey Mapping & Core Workflows

To improve the consumer experience, I realized it was necessary to rebuilt the core interface to support business activities that focus the user on productive purchases. A core workflow was developed for an easier checkout process, so a user completes the purchase. I developed only one flow first to test with users. Once validation and any iterations occurred, then other shopping areas can be added into the process flow in the same fashion. Allowing for growth and future shopping categories.

Wireframes & Red Routes

In this stage, the new user interface was designed using the initial flows, mapping out the process for the end-to end journey the user will take to enter the conversion funnel and retain the user during checkout, without abandoning the process.

MVP Release for 3 step checkout

I did another round of testing to confirm the 3 step check out process was solid before moving to high fidelity Screens. I also did a round of testing on my red route screens to confirm the process for a guest checkout was short & simple, all navigation made sense to the user, and conformation responses assured the customer a purchase was made as they intented.

Style Guide

A design guide was created to define logo uses, color schemes, icons, buttons, font styles and how to properly display these elements for when the project is passed off to other team members or developers, so the structure remains the same.

UI & Visual Design

At this stage it was time to capture the look and feel of the product with a fully interactive prototype. The prototype included the 6 key areas so users would not abandon purchases, use the product cards item cards to make a selection, have a comparison items page, a guest checkout feature with 3 easy steps to purchase, payment options with PayPal, Google Pay, Shop Pay, & Apple Pay. Made sign-in or make account optional.

Final Product

High Fidelity Interface and Main Features

Guest Checkout with 3 easy steps to purchase

Optional Sign In with 3 easy steps to purchase

Payment options with PayPal, Google Pay, Shop Pay, & Apple Pay

Create Account or Reset Password Option

Validation & Prototype Usability Testing

Conducted 1 cycle app testing, using a fully functional prototype, created in Figma.
‍
‍Performed 5 in-person narrated usability test to reveal how the user responded to the tools and features in real time.

User testing revealed no major issues with the UI experience. All the participant liked the look, feel, and colors of the screens viewed. However, I did find a few interactions that needed to be adjusted.
‍
‍First, there was a suggestion to add a “Remove” option from the comparisons page to help a user eliminate an item and focus on a purchase.
‍
‍Second, it was also noted, from the first round of testing that the “Shop Icon” shape may possibly confuse users as to its function. During testing I made note how users interacted with that icon and found that users had no trouble learning that the Shop Icon took the user to the home page.
‍
‍Third, I also changed the color on the bottom navigation from light gray to a dark gray so users did not think the icons were inactive and kept the main Call to Actions used in red.

Overall, very positive feedback! No major changes were necessary.

Want to try out the Prototype?

click on the link below