Project Overview
I was responsible for designing the new user onboarding experience for the MVP launch of our product, ESP+. To achieve this, I utilized Appcues to create the onboarding flows and Adobe Illustrator to design the graphics.
About the User
We were developing the new user onboarding process for our ESPWeb distributors transitioning to ESP+. This required creating a comprehensive guide for them.
My Role
Closely worked with the product and engineering teams as well as internal stakeholders. For our new user onboarding, my approach was centered around collaboration, feedback loops, and constant refinements to ensure we met both business goals and user needs.
Empathy Mapping
The goal here was to get to know our users (distributors in the promotional products industry) to understand how we wanted to approach the in-app onboarding.
An Empathy Map is a tool I used to help empathize and synthesize my observations from the research phase and draw out unexpected insights about our user's needs.
Modals
The user onboarding experience starts the moment someone signs up for your product. A good user onboarding experience doesn’t just teach new users how to use software—it teaches them how to use it successfully to meet their goals.
Approach 1: Having a Welcome modal on the home screen with a few features that will benefit their business.
Approach 2: User onboarding isn’t just about pointing out key features (although that’s certainly an important part of the process). A complete user onboarding experience may include sales demos, emails, customer success outreach, learn-by-doing patterns, etc—as well as product tours and walkthroughs.
Tooltips
The goal here was to help guide distributors through this new experience and how their business will benefit from it.
Approach 1 : Placing the tooltips on visible elements. In this case we placed the tooltips on the navigation tabs. Every time a user clicked the “next” button, the flow would go to the next tooltip until they were done.
Approach 2 : Placing the tooltips on dynamic elements. There will be cases where you'll want to attach a pattern to an element that will only appear after some hovering or clicking action from the user, such as a dropdown menu.
