UI, UX

👧🏼 Student Onboarding

An onboarding experience to prepare new students to start their Snapask learning experience, also letting users to signup as tutors to help out students on schoolwork.
Role

Product Designer @roywonghoyin

Researcher @karen.svg

iOS Engineer Jason Liang

Android Engineer @evanhou111

Backend Engineer Joe Wang

Span

2 Weeks for Designers

4 Weeks for Engineers

📖 What's Snapask

Snapask is a company that encourages self-learn and hoping student could ask more "why". We offers student and tutor 1-on-1 session, academy and online assessment, it's a all-in-one study hub where students can work on their weakness, ask question when they are stuck, watch video to clear concepts. Snapask is targeting students with high self-discipline, who are more williing to study by themselves.

😩 Problems

Students and tutors are complaining about falling into the wrong path during the signup process.

There are 2 signup options, users can signup as Student or Tutor. However, users usually did not realise there are 2 roles they can choose. They would mistaken the blue buttons as "Signup" and white button as "Login" if they were not reading carefully. They would fall into a wrong path and later realise they wasted time on signing up something they don't want.

Current Onboarding scrrens
Choices are vaguely presented on the signup screen (Left). Students being ask for upgrading to premium right after signing up. (Right)

Students won't pay before they like it

Students are lost after signup. Instead of inviting students to experience our offering for the first time, the current UX is asking students to pay for premium. It does not make sense since they won't pay unless they have a good experience with the product.

Design Challenge

How might we design an onboarding process for students and tutors that is not only easy to use, but also build a bridge between signup completion and experience the product for the first time.

💁 Possible Outcome

Migrate the whole Tutor Signup process onto Web
It's a reasonable change since the tutor signup completion rate is much higher on Web. From the research findings provided by the research team, this is mostly due to the fact that tutors applicants have to upload multiple documents and transcripts, these documents are usually stored in their laptops. Also they are required to take a test, in order to pass the test, they first have to read a 30 pages PDF documents, it's much easier to read it on the laptop.
Tutor signup form on website
Tutor applicants need to upload multiple documents that usually stored in their laptop, such as academy transcripts.

Ask first, pay later
Students won't pay unless they have a good experience with the app, it has no reasons to ask students to pay for premium on an empty state, especially for first time students. Instead, we can be more inviting on empty state, we can encourage them to ask questions they have found when studying.

Setup expectation
We could provide a brief walkthrough before signup to setup an expectation of what they are able to do in this app. Besides the main feature, "Ask Question", there are many other feature in the product, such as video, practices. We can use this opportunity to promote our other offerings to the users.

📎 Requirements

🎢 Design Process

I started ideating the onboarding process by laying out all our requirements that needed to be included in the process, and quickly map them out on a piece of paper. We then are able to see how many steps a first time user has to go through on the onboarding process. Also, I can bring this to the product managers to make sure it meets every requirement.
There are 6 key parts they have to go through during the onboarding process

There are 6 key parts they have to go through
  1. Launch screen
  2. Skippable walkthroughs
  3. Signup / Login (2 Social login, email)
  4. Complete Profiles (username, photo, grade)
  5. Reminder
  6. A screen that connect signup completion and ask their first question

After we have the requirements and their from the last sketch locked down, I created a simple wireframe on paper to coordinate the hierarchy of items on each screen. Having these paper sketch, we can already bring this to the product manager and engineers to discuss the feasibility and how many sprints required for each of these features.
New onboarding userflow

❤️ Final Mockups

Final Design & Flow

🔖 Feedback

The signup process seems longer, but the time spent is shorter. Since the flow right now seem more like a single path instead of having fork road on almost every screen, less time is spent on thinking which button should I choose.
The bridge between Signup completion and asking the first question is much smoother, no need to spend energy to look for the Create Question button.
The brief introduction of Snapask's offerings is colourful and fun.
Previous Project
Next Project

➕ More

06

👟 LANE-EIGHT Visual Identity

Building the LANE-EIGHT brand with 2 co-founders, a brand strategist, photographers and art directors.
Visual Identity, UX Design
See Project
roywonghoyin 2019