Onboarding Work

This page is intended to provide a quick overview of some of the design work from my small business banking onboarding project. It does not go into depth about the decisions that were made or why. 

 

1. A quick comparison between current and desired state after adding onboarding; the welcome messages in the current state experience provided minimal value to new customers

 
 
01-current state.png
 
 

2. Early on in the design process I created several Flow of Moments diagrams to highlight the key points in different onboarding concepts and how they connect at a high level; later a detailed logic flow was diagrammed

 
 
This concept offered a minimalist approach to help users get started with a few core tasks, all users recieved teh same set of tasks 

This concept offered a minimalist approach to help users get started with a few core tasks, all users recieved teh same set of tasks 

This concept was a wizard in which customers were asked a few questions upfront and then presented with relevant tasks in the onboarding space based on their answers 

This concept was a wizard in which customers were asked a few questions upfront and then presented with relevant tasks in the onboarding space based on their answers 

 

3. Quick sketch ideas looking at what early concepts might look

Similar to the expedited onboarding concept above, this was intended to fit into the current banking application with minimal changes to the core product

Similar to the expedited onboarding concept above, this was intended to fit into the current banking application with minimal changes to the core product

Another sketch looking at what the onboarding experience might look like if it's more integrated into the product itself, rather than being a layer on top of the application today

Another sketch looking at what the onboarding experience might look like if it's more integrated into the product itself, rather than being a layer on top of the application today

 

4. Low fidelity wireframes looked at creating an onboarding space within its own isolated area in the core application 

 
 
The onboarding "space" is the grey box in under the header on each device. It was important that the onboarding space could be within the application but as a standalone widget. This project specifically focused on creating this space on the homepage and linking to key tasks, but it depended on existing task flows owned by other teams

The onboarding "space" is the grey box in under the header on each device. It was important that the onboarding space could be within the application but as a standalone widget. This project specifically focused on creating this space on the homepage and linking to key tasks, but it depended on existing task flows owned by other teams

As a user completed tasks from the onboarding space, they would get checked off to indicate progress

As a user completed tasks from the onboarding space, they would get checked off to indicate progress

Several of the tasks were completed in existing modal flows 

Several of the tasks were completed in existing modal flows 

To help clarify some of the existing task flows, I explored using an existing framework like  Hopscotch  to provide step-by-step instructions and provide context about each step. In the end, I worked with the product team to make simple updates to some of these flows to improve the experience in the product directly,  learn more

To help clarify some of the existing task flows, I explored using an existing framework like Hopscotch to provide step-by-step instructions and provide context about each step. In the end, I worked with the product team to make simple updates to some of these flows to improve the experience in the product directly, learn more

5. High fidelity mock-ups exploring visual concepts. Please note: this stage of the design process was not completed since the project got de-prioritized

One of the first explorations for the visual treatment of the onboarding space, this concept did not focus on the actual interactions

One of the first explorations for the visual treatment of the onboarding space, this concept did not focus on the actual interactions

 
 
Mobile version of the exploration above

Mobile version of the exploration above