LivePlan App Onboarding

Although I primarily work on website design, I had the opportunity to design the onboarding experience for our app product. This was a great learning opportunity to create a more detailed and functional user interface and also think through a complex user experience journey.

Design Approach

At the time of working on this project the look and feel of the app and the marketing site was in flux. So I decided to go with a super simple, minimalist style that would be more timeless and universal for what we have been doing and what we plan to do.

A Mini Design System

There wasn’t a clear design system with existing components to draw from for this project. Because I prefer to work in a design system environment, I created a small system just for this project. It included variants of these selectors, the main interaction of the onboarding, and some solid button styles with good hierarchy. Doing this made my life as a designer way easier, and gave the developers more documentation to work with.

The Full Flow

I worked closely with the project lead to dial in the overall flow of the onboarding and map out what screens would be seen when. There are several key paths a user can take through onboarding which had to be considered.

Prototyping

The team really benefitted from having access to a fully interactive prototype. This really made it easy to see what areas of the user flow made sense and what needed to be improved. It was fun to explore this feature in Figma that I don’t normally get to use much.