Mint's trust-building user onboarding and educational product tour

April 4, 2019
Product tour

Getting a handle on your personal finances isn't easy—bills, accounts, credit cards, and budgets are spread across dozens of different banks and services, making it difficult to stay on top of your money. Intuit's personal finance service Mint (desktop, iOS, Android) brings all your financial info together in one place, helping you make sense of your cents.

this is a screenshot image of intuit mint's product landing page on their marketing site. a large header image shows a hand holding a mobile phone with mint's mobile app, and the words "it's all coming together" are overlayed on top of the image

The web experience

In their web app, Mint's onboarding process begins with a simple customization question—users are asked to select their country and input their zip code—alongside a nice little bit of trust-building copy that reiterates the main value proposition.

this is a screenshot image of financial service mint's user onboarding flow. this screen shows a welcome message and a customization question that asks users to enter their zip code. on the right is a panel with trust building copy that reiterates the app's core value prop

Next, users are prompted to connect their first bank account. There is more trust-building copy on the right to further reassure users by:

  • Describing the 3 steps in the upcoming process helps set user expectations and makes them feel in the know
  • Using a known brand name like Norton, as well as including recognizable logos for popular banks, helps to alleviate common fears about account security
  • Listing the number of accounts added (over 300 million) builds social proof for the app
this is a screenshot image of financial service mint's user onboarding flow. this screen show's mint's bank account linking step. on the right is a panel with trust building copy and social proof

While users wait for Mint to connect a bank account, an animated loading screen keeps them updated on what's going on in the background. Waiting is never fun, but loading pages like Mint's make it a little more bearable.

this is a screenshot image of a loading screen design from financial app mint. this screen from their web app shows a modal window that includes a loading circle and an animated checklist


After adding their first account, a modal dialog appears inviting users to take a tour of the app. Each step in the comprehensive tour includes a tooltip teaching users how to use each feature. The copy in each tooltip focuses more on benefits than features, teaching users how that feature will help them improve their financial health.

The dark background and vivid blue CTA buttons help the tooltips stand out from the rest of the UI. Each tooltip also includes a direct link to set up the feature, helping users get value from that feature faster. For example, in the tooltips below, users can click the included link to quickly add a brokerage account or see how their finances compare to others.

this is a screenshot image from personal finance app mint. this is an example of a tooltip used in a fintech web app. the tooltip includes a header, ux copy, links, and a CTA button
this is a screenshot image from personal finance app mint. this is an example of a tooltip used in a fintech web app. the tooltip includes a header, ux copy, links, and a CTA button


Each tooltip includes a subtle animation and appears to float up and down slightly. It's a nice touch and serves to make the whole experience feel a little friendlier.

this is a gif image of a tooltip animation from financial service Mint. the tooltip is hovering below a feature icon and is gently floating. this is a good example of a tooltip UI animation as part of a product tour


Each time the user clicks on the Next Tip button, the page scrolls to the next feature in the tour. The scrolling helps build navigational awareness, teaching users where each feature can be found in relation to the others and making sure they can find each feature again once the tour is complete.

this is a gif image of a tooltip animation from financial service Mint. after clicking on a tooltip the page scrolls to the next tooltip. this is a good example of a tooltip UI animation as part of a product tour


The tour is long, so Mint includes a link in their top nav menu, making it easy for users to pick the tour back up if they exit before finishing, or revisit specific steps through a drop-down menu. These extra navigational options keep users in control of their own education, and make sure that contextual help is always available.

this is a screenshot image of mint by intuit's desktop web app top navigation bar


The mobile experience

Mint offers both desktop and mobile versions of their app, and the onboarding experience adapts well to mobile with one glaring exception, which we'll get to in a minute. The welcome screen matches the feel of the desktop app, and includes a few short lines of copy that reiterate the product's core value proposition, with a single CTA.

this is a screen capture of mint by intuit's mobile app welcome signup screen


Unfortunately, we couldn't screenshot some of the mobile account setup flow due to the native screenshot security built into the app (kudos to Mint for adding that extra layer of security). Take our word for it: The flow nearly mirrors the desktop version.

But after the app finishes connecting the first bank account, users are dumped straight into the app. There's no tour, no tooltips, and nothing to guide users on what they should do next. In fact, more than half of the very first screen is dedicated to advertising—overall, not the best experience for new users.

this is a screen capture of mint by intuit's mobile app showing the mobile dashboard UI


Even without the tour, though, Mint's mobile app is easy to navigate. The desktop web app has been simplified for mobile, and the main features are accessible through the bottom navigational tabs. Additional features can be found through a series of “cards” that explain the benefits of each feature, along with a simple icon to make identifying each card a little easier. Overall, the mobile app is intuitive and makes it easy for new users to get started.

this is a screen capture of mint by intuit's mobile app showing its intuive interface and ux copy. this is an example of easy to navigate mobile ux


Why this really good UX matters:

Mint's focus on education and building trust throughout their entire onboarding process provides positive momentum for new users—who may be justifiably wary about handing over their financial information to a third party—to receive value from the app, and take concrete steps towards better financial management.

Check out our piece on Mint's Credit Score 101 for more ReallyGoodUX from Mint.