Interaction Designer and UX Advocate

Planet3 Teacher Onboarding

onboarding banner.jpg
 

My Role: Interaction Designer, UX Designer

UX Engineer: Martin Figuero-Ramirez

Software: Sketch, Invision

Timeframe: 3 weeks


THE CONTEXT

What's Planet3?

Planet3 is an exploration-based learning company that's transforming science education by presenting the entire earth as a living laboratory. Planet3 is also the name of their product, a learning platform for K-12 science education.

What was my role?

I led the design efforts in crafting an onboarding experience for teachers who are first-time users. This includes defining the design specs, wireframing, building interactive prototypes, and handing them off to developers.

 

my process

understanding our user'S onboarding issues:

User research grounds my design thinking and enables me to focus on the problems of our users. I did get some feedback from chats with teachers; however most of my research was done in prior projects. (Check out my research insights in this case study.) The user's problems?

  • A lot of our features were brand new edtech concepts to teachers. This made it difficult for them to understand how the product fits into their classroom experience.
  • Teachers had a hard time understanding what the product’s storyline is and how it relates to the curriculum.
     

understanding MY TEAM's STRUGGLES:

 
 Talking with teammates; uncovering not only the needs of the users but also my teammates

Talking with teammates; uncovering not only the needs of the users but also my teammates

 

A few insights I learned talking to my teammates and reflecting on where I stand in this project:

  • The professional development team wanted to spend less time onboarding users and more time on what's important to teachers - implementing the curriculum into their classroom.
  • The development team was swamped with tense timelines and couldn't afford to spend much time beyond coding the product.
  • "Out of sight, out of mind." - As the only remote worker on this team, it's easy to get forgotten when there's so much to do in the startup setting. Constant communication was needed to bridge this gap.
     

finding inspiration in other onboarding experiences

Since this was my first time designing an onboarding experience, I looked at other onboarding experiences to see what's already out there and working. I was particularly inspired by Invision's. I love how Invision made there experience more personable, especially with the usage of a wizard. It's reassuring knowing that there's a human on the other side I can interact with.

 The project page for a first-time user. I imagine Invision's current onboarding is different.

The project page for a first-time user. I imagine Invision's current onboarding is different.


Sketching out the flow and interactions

Before I start using software, I sketch out my ideas and find the connections between them. Before I get into the UI design, I take time to understand the system as a whole, the components within and how they and the users interact. In image 1, I explore the different ways the teacher might navigate through the platform and how he/she might prioritize certain actions. In image 2, I delve deeper into the UI flow and explore what the teacher's onboarding journey might look like.

Image 1: Teacher Navigation  /  Image 2: Teacher's Journey


The first iteration (v1)

In this iteration, we were inspired by tool tips and hot spots. These were incorporated to entice the user into interacting with the interface and learn more about each feature in digestible chunks.

V1 Components

onboarding_components_1_v2.jpg

V1 Screens


the second iteration (V2)

In the second iteration, my coworker shared an Invision article that revolutionized the way I thought about onboarding. I learned that instead of guiding the user and preventing them from actually using the product, why not let them explore right away. The sooner they succeed, the sooner they’re hooked in. The design should be intuitive enough to not need modals or tool tips.

However, a lot of our features were still brand new concepts to teachers. They still wanted guidance on the most efficient way to use the product. As a result, we designed a gamified, bite-size wizard that provides optional help. Each “objective” leads the teacher to a meaningful success point in a few clicks. Modals are used sparingly to celebrate and delight the user.

V2 Components

onboarding_components_2.jpg

V2 Screens


The last iteration (V3) before shipping

In this iteration, we continued finetuning the wizard and modal components. We made the wizard more visual and glanceable. We also incorporated illustrations into the modals to add more visual delight to the user's experience.

V3 Components

onboarding_components_3.jpg

V3 Screens

PERSONAL REFLECTION

There were a few key takeaways I took away from this project:

  1. A great onboarding experience enables the user to jump right into using the product and experience feelings of success early on.
  2. Modals, tool tips and tutorials distract users from what they really want to do — use the product!

Given the tight 3 week deadline, there’s more I wish I could've done. I would've liked to add more microinteractions / animations to make the experience more delightful. I also wanted to test the last iteration with our end users and gather data on what worked and didn't work. Overall, this project was a great joy as it was the first design project I took the lead on in the company as well as a great lesson on onboarding best practices.