B2B • AI • A/B Testing• WEB

Amp.ai Onboarding Design and User Retention

ROLE

Product Designer

TOOLS

Sketch, InVision, Google Workspace, JIRA, Inspectlet

YEAR

2019

Thumbnail Image of Amp.ai dashboard.

Project Overview

Amp.ai is the flagship product of Scaled Inference. It's an AI-powered optimization platform that delivers personal experiences at scale to drive metrics and business growth.

Challenges

The onboarding process is a crucial aspect of the product experience, but its complexity presents a significant challenge: it can take several days to complete and often requires coordination and effort from multiple users, making it difficult to streamline and ensure a smooth start for new users.

An image says key problems with two quotes from users
An image says key problems with two quotes from users

Goals

01/ Provide seamless Onboarding experience for people who came through the funnel.
02/ The Onboarding experience should provide guidance as they go.
03/ Increase user engagement and keep them in the loop until their projects are ready to optimize.

My Roles

As a product designer, I was responsible for the whole onboarding experience from brainstorming to the final interactive prototype.
On product level, I designed features across entire product flow, conducted user research to understand users and to improve the user experience.

Highlights

01/ I worked with stakeholders and developers to develop new features for the onboarding process. I led iterations and tracked how designs were implemented.

02/ I proposed designs of the three key features and the feedback is positive.

03/ I took initiative to conduct usability test and integrate user testing tool with Amp.ai to locate pain points and uncover needs.

04/ Being proficient in design tools, I made all the mockups and protypes on my own. I created the status email template and helped code in HTML/CSS.

05/ I aligned the product vision with company vision and goals.

Research

This section outlines the research process, covering user research, planning, analysis, ideation and testing during the project.

User Studies

I conducted user research with five experienced Amp.ai users, closely observing their product interactions and tracking their mouse movements. Through this analysis, I gained a deeper understanding of how they used the console to set up projects, which helped uncover critical pain points and usability challenges.

Pain Points

01 / How many steps left? Where am I supposed to click?

Users frequently lose track of their progress during the onboarding process, and after completing several steps, they often become confused and disengaged, ultimately leaving the console without completing the setup.

The lack of sufficient guidance and support during the onboarding process left users unsure of where to navigate or what actions to take, resulting in confusion and difficulty in using the platform effectively.

02 / What does it mean?

The onboarding process for the complex dashboard presents a challenge, as certain concepts and terminologies are not immediately intuitive. Additionally, the introduction and explanation of these new concepts have been insufficient, leading to user confusion and a steep learning curve.

Personas

Project managers and developers are the primary target user groups for our product. I developed two detailed personas for these users based on insights from previous research. These personas serve as key reference points, guiding my understanding of their mental models as they navigate the process of setting up a project for the first time.

Ryan is a project manager in a tech company. He’s comfortable using Google Analytics and A/B testing. He’s not familiar with machine learning. He’s willing to try out new tech and he’s looking for ways to get conclusive results from testing.

Ryan's persona as a Project manager
Ryan's persona as a Project manager
User Persona named Ryan, who is a project manager.

Josh is a developer and he’s experienced with integrating A/B Testing. He usually has to go back and forth with the integration.

Josh's persona as a developer
Josh's persona as a developer
User Persona named Josh, who is a developer

User Stories

Using what we knew of the 2 personas and what we could glean from a quick review of the marketing materials, I began drafting a series of user stories that covered the key flows for the User Onboarding.

As a [User Type] I want to [Task] so that I can [Why].

After prioritization on the part of stakeholders, selected user stories will be added and tracked in Jira throughout the production sprints. Here is an example:

A screenshot of user stories.

Group Brainstorming

I synthesized the research notes into insights and sat with my team to discuss and brainstorm possible ways of improving the overall Onboarding process.

A mindmap shows ideas during the brainstorming session.

Task Flow

I took the lead on creating high-level Task Flow, which shows common task flows completed by users in their interaction travels through the product. With the prioritization of user stories and key features, the task flow will represent key user tasks that underline each prioritized feature that should be introduced during the Onboarding experience.

The task flow of the onboarding process.

Design

This section outlines the step-by-step design process, including design workshop, planning, decision-making, development, and presentation during the project.

Sketches and Whiteboarding

I began the onboarding design project by sketching, whiteboarding, and brainstorming based on insights from user interviews and analysis. These low-fidelity sketches served as the foundation for group discussions and presentations, helping to guide the design process collaboratively from the start.

Sketches of steps 1 to 4
Sketches of step 5 and 6 with some progress indicator exploration.
A photo of the wall that shows a brainstorm and ideation.

Minimum Viable Product (MVP)

Given the tight timelines, we prioritized three key aspects of the onboarding experience, focusing on displaying prompts based on the user’s current state. The following are the different user states we addressed:

A diagram shows different states of a new user.

01/ How to guide users

Static up-front tutorials are a common practice and relatively easy to implement, but there are several reasons to avoid this approach. We can’t expect users to read through all the tutorials before engaging with the product, and these tutorials often become obstacles for users who prefer to explore and experience the product directly.

Research shows that 90% of knowledge is gained through practical experience. Instead of overwhelming users with information upfront, we should support them as they interact with the product. For this reason, I chose a contextual approach, delivering relevant information at the moment of user action.

I used blinking indicators (the red dot) as visual cues to highlight key steps in the onboarding process. Users are required to complete these seven essential steps to get their project fully operational. As they progress through the steps, the console provides additional prompts to introduce new concepts and features.

The onboarding process should be separate from the core product experience, avoiding overwhelming users with too much information at once through education carousels. Instead, an interactive onboarding approach allows users to learn more effectively and quickly become familiar with the platform.

A gif show different helper tools

Our team decided to use a playful handwriting typeface for all the tooltips due to the fact that the process can be long and tedious.

More explanation for the helper tool design

02/ How to keep track on progress

The progress indicator remains prominently visible on the console’s main page, continuously showing users their current step in the onboarding process. This persistent visibility helps users stay oriented and aware of their progress. When users click on the indicator, it opens a modal with detailed, step-by-step instructions, offering guidance on what actions to take next. This ensures that users have easy access to helpful information without disrupting their workflow, allowing them to proceed confidently through the onboarding process.

A screen shows the progress.

03/ How to keep users posted

Given that the onboarding process may take several days, I designed a status email template to keep users informed throughout. Automated daily emails will be sent to update users on their progress and encourage them to return to the console. This approach allows users to complete the setup at their own pace while staying engaged with the process.

Wireframes and Experience Design

I brainstormed potential solutions to address users’ pain points and evaluated each concept. The result is an interactive prototype, complete with a clickable interface, that demonstrates the user journey throughout the onboarding experience.

A clip shows the onboarding expeirence

Reflections

The onboarding project spanned approximately four months, running in parallel with the website redesign and other design initiatives. Here lists the key lessons and insights gained throughout the project.

Learnings

Collaborating with designers, researchers, project managers, and front-end engineers, I gained not only valuable design experience but also learned how to effectively communicate and coordinate across teams. Balancing multiple projects simultaneously taught me the importance of time management and prioritization, allowing me to successfully contribute to various efforts while maintaining a clear focus on the overall project goals.

  1. In engaging ourselves with an in-depth process, our team finished the Onboarding feature from design to implementation in a short amount of time.

  2. I learned that how to balance business goals and user experience under time and Resource constraints and it’s necessary to make trade-offs.

  3. The product can’t be perfect by any means. After making sure it works properly and it’s functioning, we should release it instead of holding back and doing test in house.

  4. I honed my communication skills when collaborating across disciplines.

Contact

Have a question, some feedback or ideas?ottessa moshfegh: say more about that

@ 2024 Ritz Yufeng Wang

Contact

Have a question, some feedback or ideas?ottessa moshfegh: say more about that

@ 2024 Ritz Yufeng Wang

Contact

Have a question, some feedback or ideas?ottessa moshfegh: say more about that

@ 2024 Ritz Yufeng Wang