2023-2024

Visual refresh and new design system library for authentication experiences across Intuit

Overview

The last time authentication experiences were designed was back in 2017 and over the last 6 year we have been incrementally making changes to the UX and UI but we did not implement a singular UI refresh and our experiences started looking old and stagnant. I was the sole designer working on designing all the new UI refresh experiences for all of Intuit’s authentication experience. I have successfully scaled the new UI patterns to different device platforms and Intuit product themes including dark mode.

Since my work is currently being implemented, I created a fully functioning design library that can be used across Intuit’s design teams and configured for specific use cases.

Role

Lead designer

Skills

Visual design

Design system

User research

Team

Myself

Product manager

3 engineers

Customers want more consistency

Our goals with UI refresh

Improved interactions

How might we better integrate authentication with product experiences to minimize the feeling of context switching?

How might we take into consideration the new app loading experience?

Our success metrics

Do no harm

No negative impact to business KPIs.

Increased sign in speed

Reducing friction for customers, while giving them the 
choices they need.

Our challenge

Web platform experiences

Improved messaging

How might we break up content into simpler, bite-sized chunks?

How might we dynamically reveal the required legal language at the moment it matters?

Improve developer productivity

Reduce clones and maintenance for auth experiences.

How might we create a new configurable and theme able design library by using the Intuit Design System to have improved interactions, messaging and branding for our authentication experiences?

Improved clarity for brand and legal

How might we ensure the context of Intuit brand within the product experience is clear?

How might we effectively communicate our ecosystem offering without adding cognitive burden?

Since Intuit offers a wide variety of login and account creation experiences tailored to differing needs, we encountered a variety of challenges identified by both our customers and our business stakeholders.

It matters because of the volume of customers at authentication experience across Intuit products

Handle

2.7B

signs in per year

As an Intuit customer, my login experience differs from one Intuit product to another which makes it difficult to identify what type of information is needed to successfully get to my product.

Customer problem statement

As a business, we want to create a singular authentication experience that can be scaled across our Intuit ecosystem without maintaining separate disparate sign in and create access flows, ensuring developer productivity and reducing customer confusion.

Business problem statement

Creates

77M

accounts per year

Used by

21

Intuit apps

Averages

15M

users per day

Supports

200+

products at Intuit

Launched

7

years back

What would we change as a part of UI refresh?

Native app experiences

Placement of authentication experiences in user workflow

Web marketing experiences

Analysis of current state

Current state for native

Current state for web

Customers want simplified experiences

I conducted a competitive audit for sign in and create account experiences and found that:

  • Customers want simple authentication experiences

  • Reduce number of steps but maintain high security

  • Less is more when analyzing input fields and customer education

QuickBooks basic

QuickBooks basic

I explored a wide range of design options for the new authentication experience.

Final recommendation for UI visual refresh

From: Disparate brands with mixed branding

From: Native old create account

To: Scalable and configurable branding solutions

To: Native create account with UI refresh

From: Mobile web old create account

To: Mobile web create account with UI refresh

Mailchimp

Credit Karma


From: Marketing web old create account

Creating additional screens, documentation and specs

QuickBooks horizon

To: Mobile web create account with UI refresh

Pressure testing new designs across multiple user flows and device sizes.

Mobile web

Stationary web

Scaling authentication screens to be product themed. These were approved by BU team design leads.

TurboTax

Creating a brand new design library

I turned all my screens into components and created a new configurable and scalable authentication library using the Intuit Design System to create shareable resources across the company.

Create new screens from the library

Theming screens based on styling input

Big takeaways

Build a design library first and get it right the first time

I had to retroactively build a design library post fleshing out all authentication screens. This made the process extremely tedious and hard to update across multiple files.

Native experiences and library is a separate challenge

The native platform has unique challenges and needed more time and effort to figure out across iOS and Android for all Intuit apps. This is something that was ignored at the start and became a necessity to update and maintain separate guidelines.

Building influence and alignment with PM and Dev teams was crucial

UI visual refresh was never considered an important change but a nice to have update for many quarters, I worked with the design director and team leads to ensure the new library work was used for all new implementations and was able to align with PM and Dev teams to implement this work which will go live in September 2024.