Deferred Checkout

Disclaimer: Because of the NDA, I cannot release task flows, wireframes, and final analysis from the results of the new user experience for the deferred checkout. At the time I was doing my internship, Quicken was working on a new financial app which had proprietary information that was held behind closed doors.

01

Overview

Background

Quicken.com is a tool that helps people make healthy choices and control their finances by managing their accounts, budgets, and investments.

Problem

The problem was there was a sharp drop-off in cart conversion at the create account/sign in step. Because of this, it was more so a business priority due to the small percentage loss and many either hesitated or dropped out at that step.

Solution

The solution was simply to have your account managed (new or existing user) through the home page. Because of the complexity of the situation, it was better off to simplify and not frustrate users for going through too many steps to manage your Quicken subscription. We also added a new feature implemented for a progression bar to track what page you're looking at and to show how many steps remain before completing your purchase.

PC Mag:

Project Duration:

June 27th-July 19th 2019

3

Marketing

1

Designer

1

Engineer

1

Product

02

Execution

Fonts

(H3) Roboto * *48 pt** (60% opacity).
ios headline 1 (SF Pro Display **22 pt.**)
(Subtitle) Roboto *16pt.*
Roboto *12pt**.

Style Guide

Using clean, consistent fonts was imperative given the limited time frame I had to design the master flow within 4 weeks, Roboto was the clear cut winner. Along the way, assets and deliverables like the thank you image were handed to the engineer and coded off.

Manage your Quicken ID the Right Away

As soon as you visit Quicken.com's official site, you'll notice a Sign In Page on the top Nav Bar and manage your account. No friction! Take a look at the before and after photos.

Before

After

Progress Bar (Breadcrumbs)

Here is the simplification of what page you're looking at. As you can see, before there were too many steps and frustration for managing your subscription. Now, it shouldn't take less than 5 minutes to go enter your payment, double-check what your purchasing, and receiving a email confirmation.

Payment Info

As you create or log in to your existing account, one of the first things you see is to enter your payment info. This ensures that the subscription you are renewing/buying will be a seamless transaction and won't take 4-5 steps from before.

Optional Backup CD

For existing/new members of Quicken, they have the option to order a backup, physical CD (optional) and enter your shipping address if there is some troubleshooting for downloading the product digitally. This flow was slightly improved from the previous version where you had to answer a token/questionnaire regarding whether you have used a Quicken product before preceding to the next step.

Completion!

For the final step, here is the thank you page where you can get your receipt and order number emailed to you after you have made your subscription purchase.

Mobile Mockups

To conclude, here are some mockups for mobile if you were to visit the site at this moment. Familiarity is important and consistency is key to improving the user experience, so there was no doubt in doing this project that was executed to the tee from designing on a smaller scale.

03

Review

Biggest Takeways

  • Fun, fast paced project while maintaining
    guidelines and expectations
  • Constant communication with the team;
    iterations and meetings were important

Biggest Improvements

  • Did mostly UI work moreso than looking
    data
  • No input for user testing since marketing
    took care a lot of that

More Case Studies