Fanschool
Product Design
Project
Onboarding
Timeline
4 Months
Shipped
September 2021 ✅
Overview
In early 2020, former company Kidblog decided to partner with two other Edtech startups to create Fanschool. Many of the same features that Kidblog was known for were transferred over to Fanschool with added benefits and a total redesign. This new launch meant focusing on creating an onboarding flow to help existing and new customers migrate over to the new platform while also giving them the tools needed to create successful learning communities.
The Problem
This past year, Fanschool has been rolling out new features at a rate that customers seem to have trouble keeping up with. In turn, this has led to an increase in support tickets and an overflow of customer inquiry. This meant that we needed to create an onboarding flow which could easily be adaptable as new features roll out while also helping our customers understand some of our core primitives.
Using a mix of quality data and user feedback we identified a handful of issues with Fanschool's onboarding. They were as follows:
1. There was a lack of understanding of all the channels users might be entering from and what each
experience entailed depending on their journey.
2. The path after registration was confusing and often led to states where the user had little idea what to do next.
3. We didn't educate users about our core primitives (spaces, articles, etc)
The team consisted of a project manager, a full stack engineer, and a product designer (me).
Using a mix of quality data and user feedback we identified a handful of issues with Fanschool's onboarding. They were as follows:
1. There was a lack of understanding of all the channels users might be entering from and what each
experience entailed depending on their journey.
2. The path after registration was confusing and often led to states where the user had little idea what to do next.
3. We didn't educate users about our core primitives (spaces, articles, etc)
The team consisted of a project manager, a full stack engineer, and a product designer (me).
Entry Points (User Flows)
Fanschool's customer segment consists of three main groups: Students, Teachers, and Parents. Before the onboarding process was implemented, it was crucial to understand all the different entry points for each type of user.
With the help of the project manager we were able to distinguish all the different paths users could take in order to sign up for an account with Fanschool. In sum, no matter what role a user selected the entry points boiled down to three main channels: the landing page, an email invitation, or a join code. A user flow was then created for each customer segment showing the current flow and the suggested.
Welcome Modals
Part of our onboarding methodology consisted of creating welcome modals in order to introduce some of our core primitives throughout the platform. By giving our customers an introduction of who we are and what we believe in our mission, we are laying out the groundwork for the rest of the onboarding flow.
An important component of the new modal designs was making sure that they would work properly for our mobile users. Keeping the text simple while allowing the imagery to do most of the communication proved to be an important aspect for the modals.
An important component of the new modal designs was making sure that they would work properly for our mobile users. Keeping the text simple while allowing the imagery to do most of the communication proved to be an important aspect for the modals.
Tooltips + Hotspots
While researching different onboarding tools, there were a couple of important factors that I knew we DID NOT want as a result from this onboarding flow. The first being I didn't want the user to get lost in a series of onboarding modals and eventually leave the platform because it was too long. The second is that I didn't want to try and sell the platform to them, but rather have them experience it for themselves and have them make the choice. The last being we wanted to make sure whatever tool I chose would still allow room for the customer to breathe.
Pulsating hotspots ended up being the answer to the problem. They were subtle enough to not obscure the interface, but eye-catching enough to make users engage. It allowed us to introduce a "learning by doing" methodology within our platform. Our customers are in charge the whole time, we're just there to aid them whenever they get stuck.
Pulsating hotspots ended up being the answer to the problem. They were subtle enough to not obscure the interface, but eye-catching enough to make users engage. It allowed us to introduce a "learning by doing" methodology within our platform. Our customers are in charge the whole time, we're just there to aid them whenever they get stuck.
Engineering
After the design was complete, the next challenge was figuring out a way to communicate all the locations for the hotspots and tooltips. Many of the tooltips had multiple locations that repeated for many our customer segments. Our engineer wanted a way to quickly know where the tooltips would be located, what the copy would consist of, where it would repeat if applicable, and if the tooltip consisted of a sequential action. Sequential being if a user needs to complete a prior tooltip in order to make the following one appear.
The result ended up being a table inside Notion for the whole team to access. This also allowed the PM the ability to review the copy and make any changes if necessary.
The result ended up being a table inside Notion for the whole team to access. This also allowed the PM the ability to review the copy and make any changes if necessary.
Results
All of these features and designs shipped in early 2021.
Since then we have had a decrease in support tickets regarding our core features and an increase in new user acquisition from invitation links.
While there's still a considerable amount of work left to be done, I'm proud of the work my team and I did for the features showcased above.
Since then we have had a decrease in support tickets regarding our core features and an increase in new user acquisition from invitation links.
While there's still a considerable amount of work left to be done, I'm proud of the work my team and I did for the features showcased above.