THE BEST PRICE FOR ANYTHING ONLINE

This is a Google Chrome plugin by Capital One Bank that scrapes the internet for the best price on anything the user is currently shopping for on any website. It has become one of the most popular plugins downloaded in 2020. I was brought in to design the user interest onboarding.

COMPANY TYPE

Fortune 500 - Capital One

MY ROLE

Product Designer

PROJECT DURATION

3 Weeks

01
ROLE

Myself, two developers, and a product manager were assigned this project with the goal of producing the interest onboarding experience (including design files and a coded prototype) in a 5 week timespan. The process included a UX audit of their existing onboarding, a design sprint process for ideating the new onboarding experience, and production of UX and UI for it. We worked closely with their head of product design and interfaced with the lead developer for this project frequently.

02
PROBLEM STATEMENT & GOAL

Interest Onboarding is a new approach WikiBuy is adopting to allow customers to personalize their shopping recommendations. WikiBuy interests onboarding helps customers get started in a fast and fun way. It also allows WikiBuy to understand their customers and optimize their experience by connecting them to a specific market.

 

Prior to implementing it, many users felt that the recommendations being suggested to them were inaccurate or seemingly out of place comparative to what they were shopping for. The overall goal was to produce a design that converted more users from download to account creation (goal an increase of 25% in 1Q), and then further converted from account creation to a faster first purchase (goal of an increase of 10% in 1Q) . To do this, my strategy was to efficiently collect necessary data points to technically produce a better recommendation result in the fewest clicks possible, add opportune placement of product showcasing, while also inserting some brand personality throughout the onboarding process. 

03
DESIGN PROCESS
1

Discover

– Initial Research

– Identify Pain Points

– Competitive Analysis

– Analyze Existing Data

– Analyze User Feedback

2

Define

– Product Requirements

– Feature Specifications

– Product Roadmapping

– Information Architecture

– User Journeys

My responsibilities

3

Ideate

– Creative Brainstorms

– User Flowmapping

– Lo-Fi Sketches

– Wireframes

4

Prototype

– Hi-Fi Mockups

– Interactive Prototype

– Invision File

5

User Test

– Usability

– Feature Validation

– Task Tracking

6

Develop & Launch

– Finalized Mockups

– Asset Slicing & Components

04
COMPETITIVE ANALYSIS

The core competitive product, Honey, had been on the market 2 years before WikiBuy and had pioneering technology and considerable traction with its user base, but was relatively small in company size comparable to Capital One and hadn't yet become a household name with online consumers. Capital One's ability to build and scale fast, along with its unfair marketing advantage (via their 200,000+ banking customers they could directly market to) created the opportunity to surpass the competition quickly with a well-executed product.

I conducted a series of focused interviews with existing Honey users and Wikibuy users to see the similarities and discrepancies in pain points within each product's user experience. In addition, I performed a UX audit of both products to understand the user experience's drop off points and delightful features. The data from both processes aided in strategizing a best-in-class UX for the interest onboarding I was designing.

Honey - super user

I mainly use it for shopping on Amazon and really like how they not only surface the best price for the item i'm currently looking at, but I do wish it gave me some kind of bundling options or suggested items. I tend to end up spending 3x the time on Amazon looking for things that are commonly bought with the item i'm purchasing. Amazon bundles items on the same purchase page. I would like to have that functionality work. It would likely increase my spending and reduce time.

Richard T.

Wikibuy - super user

I like Wikibuy because of their special offers to me as a Capital One member but I must admit that their recommendation engine often does not make sense based on what I usually purchase. It bothers me when i'm recommended sandals when I usually buy camera equipment and  technology. That should definitely be fixed.

James S.

05
DESIGN CHALLENGES

There will have to be a balance of collecting enough data for the algorithm to work while not asking for too much.

More data fields = more drop off.

#1 pain point for honey is their extensive onboarding process. We aimed for Wikibuy to reduce our onboarding by 2-3 steps.

Need to reduce the entry steps.

Onboarding layout, copy language, and process should be inviting and conversational to disarm and ease users.

Promote brand personality.

06
UX FLOWS & WIREFRAMES

After rigorous evaluation of necessary data fields and flow process, We landed on a simple concise user flowpath that gathers the required data and reduced 2 steps in the onboarding process (comparative to Honey).

The complimentary wireframes then began to bring the page to life and showcase how the content of the tutorial could flow contextually.

5

Deals Of The Day

The final step was to lead the user to their own portal on Wikibuy.com where they are presented daily deals and suggested deals based on their chosen interests. This doubly introduces them to their own profile while giving them potential purchase opportunities immediately.

07
UI DESIGN

I took the designated style guide and designed a simple and clean onboarding UI that placed emphasis on data entry, copy, and bold declaration of promoted statements. The end result was a 5-step process that guided a user completely through the process of sign up, sharing their shopping interests, and how WikiBuy works. In addition, we were able to advertise known attention attractors like potential savings and daily deals.

1

Collect Basic Data

The first step in the process was common data collection. From a design perspective we opted to add explanation text to every field to encourage trust and comfortability. I specifically positioned the text to the left and the fields on the right for unique juxtaposition and to ensure the user read the text before entering their data. This helped personify the brand.

2

Estimated Savings 

We show how items purchased & money saved on WikiBuy are connected. This allowed us to display the core offering of the product and create a needed splitting point between the data collection and the choosing of shopping interests. This is key because most people dropped off in user testing when those screens were initially back-to-back.

3

Picking Interests

This allowed the algorithm to consolidate the user's general shopping interests into categories and then suggest them items in that range. However, the placement of logos of popular brands instead of product categories created instant familiarity with the user, and ultimately made the question easier to answer.

4

Interactive Walkthrough

Rather than having the user sit through a video or read and clicking to confirm, we used this opportunity to walk them through how WikiBuy works via performing a mock purchase. Doing this creates a very effective tutorial and creates visual memory for real-life use, all which is aimed to increase the speed of a user's first WikiBuy purchase.

08
END RESULTS

The interest onboarding launched in Q1 2020 and produced immediate results. Download to onboarding retention dramatically increased while eventual conversion to paying users spiked higher as well

In Q1 alone, their new account conversion rate raised from 18% to 55%, even with a decreased advertising budget.

37% more users created accounts

Not only did more users make purchases with WikiBuy, their speed and size of their first purchase increased as well.

19% more users made purchases

With more official users on the platform, the word of mouth increased, and was quickly in the conversation with Honey.

Many more positive reviews

© 2021 By Remy Sylvan, All Rights Reserved.