CLIENT ONBOARDING
Image: final design of the first step of onboarding.
Overview + Objective
Senior Experience Designer
11 Months - Launching February 2024
The objective of this project to was to redesign an existing onboarding experience that would accommodate different users who entered the MyRocket space. For our phase 1 release we were targeting new mortgage clients, acquired mortgage clients, and a general population of users who created accounts.
Our team consisted of: Product Manager, UX Designer, UX Writer, UX Researcher, Solution Architect
Problem
For this project we were dealing with two discrete problems. The first was an existing onboarding flow for mortgage clients that was outdated and did not follow good UX practices. The second was the existing onboarding flow only serviced one type of user and the business was looking to expand onboarding to any kind of user entering the MyRocket space (ie. creating a Rocket account).
Solution / Outcome
I worked heavily with my engineering partners in order to ensure design and functionality were implemented to provide an optimal user experience. My team and I worked through many iterations of content and design functionality over the 11 month duration of this project. It has not yet launched to a live audience.
45%
Increase in onboarding completions compared to old experience
54%
Increase in clients enrolling in autopay for their mortgage payments compared to old experience
Design Process
01. Comparative & Competitive Analysis
The first step I took after getting assigned to this project was to evaluate other in-company onboarding experiences and external onboarding experiences. I was looking to discover patterns and best practices that would help guide design decisions. I reflected on the UX law that states "users expect your site to behave like other sites they use".
I pulled together many of these flows via screenshots into a figjam and began noting the similarities, differences, anything that seemed important.
Image: birds-eye view of a portion of my onboarding analysis.
Design Process
02. Lo-fi Wireflows
When I work on projects where users must traverse a flow to reach a destination, I like to utilize wireflows. This happens once I feel like I can begin organizing information on a screen and can start thinking about hierarchy. I start with some lo-fi designs and connect them via arrows and decision points, making notes along the different pathways.
Image: lo-fi wireframes that would be included in a wireflow diagram.
Design Process
03. Testing + Final Designs
After creating wireflows for the different use cases of the onboarding flow, we decided to user test our new designs. Since this project was a redesign of an existing onboarding experience, we wanted to ensure our new designs met user expectations and provided same if not better usability.
We learned:
- All participants of our test understood the purpose of and how to complete each step of the onboarding flow, but some opinions varied in how much context setting would be useful in the content we provided.
- There were a few minor elements in the UI that participants weren't all sure if they were functional or not.
- At the end of the flow, we offered a call to action to take a tour of the users dashboard. Most participants said they would skip the tour.
I made adjustments to our designs and worked heavily with engineering on implementing correct CSS to ensure the design worked responsively.
As of now the work is still in development and being QA'd. We have a planned set of future feature releases and analytics tracking to monitor the performance once the onboarding flow goes live.
Image: Hi-fi of usability test prototype.
Image: MVP hi-fi designs.