App Onboarding Revamp

Collaborated with multiple function teams, and validated design through user interview

App Onboarding Revamp

Collaborated with multiple function teams, and validated design through user interview

App Onboarding Revamp

Collaborated with multiple function teams, and validated design through user interview

App Onboarding Revamp

Collaborated with multiple function teams, and validated design through user interview


Snapask is an educational tech company that pairs students and tutors for 1-on-1 tutoring (Q&A for short).

At the end of 2021, Snapask decided to provide more value to students. In addition to the previous Q&A service, we have introduced two new services, which we are calling Regular Classes and Intensive Courses.

Onboarding screens before the revamp

Project goal

My job is to break the existing impression the students have of Snapask, which has always been seen as "a platform to ask questions". Now, we are evolving into something more.

Our current onboarding flow only mentions the Q&A service, I need to design a new first impression to introduce our two new services.

What I did

  • Discuss the need from various stakeholders

  • Deliver prototype and design

  • Conduct usability test with researcher


6 out of 9 students can distinguish our services, and our team gets to know students better based on the data collection.


1 Month

Design Process


How can we help student find the course they need?

"User Onboarding" in this case is about getting to know the students and showing them educational content tailored to their needs. Students can see some of the value within just a few minutes of entering the app.

Collaborated with marketing team

Building a product requires a lot of teamwork. Before diving into the world of pixels, I engaged in discussions with various stakeholders, including the PM and marketing team.

Through these discussions, I learned there is an issue faced by the marketing team. Each new student is like a blank paper; they lack clarity on the specific services or content that interested the student.

The marketing team desires an onboarding process that effectively identifies students who are interested in Regular Classes or Intensive Courses.

"I wish there can be funnel to find the student who are most interested in video content."

Quote from marketing team

Sums up the conversations we had for now, three thing we need to achieve:


Students can distinguish our three services


Provide students with suitable educational content


Our team can have a better understanding of student

First design

According to our goal and marketing requirement, I design three parts of the flow: Welcome Page, Setup Page and Recommendation Page.

Welcome Page: Value Proposition

The Welcome Page serves as the initial page users encounter upon opening the app. In the past, we conveyed our value proposition using a simple text label along with a friendly greeting from Eve, our mascot, to display the amiable personality of our product.

We want to demonstrate that Snapask extends beyond being solely a tutoring platform. and students can learned about the value of new services at a glimpse. So I choose to show our aesthetic content thumbnails made by brand designers with product value in a text label.

In the third screen of the new version, I chose two "bubble" to demonstrate the process of Q&A, I was trying to find effective and achievable way, but it turns out student couldn't understand it in the later usability test.

Before and after for onboarding
Before and after for onboarding

Setup: Know our user

Once users click on the "Create Account" button, they will proceed to the setup process. Depending on the role (Student or Parent) that users select, we will present the app in a different set of tone and copywriting.

Furthermore, we will collect the following information to generate personalized recommendation, and to provide data for marketing team about the user.

Q: Where are you studying?

Users will receive content that fits their education system based on their regions

Q: What matters to you the most in learning?

The order of the recommendation changed base on this question.

Q: What're subjects do you want to improve?

The system recommends content based on the user's selection. And sales clerks get a more clear picture of users before contacting them.

Q: What's your grade level?

The system recommends content based on users grades.

Wireframe for setup flow
Wireframe for setup flow

Recommendation: Show the value

After completing the setup, users will receive a personalized recommendation listing classes, courses, tutors.

The order of services is based on previous question "What matter to you the most in learning?"

While video content may be more profitable, I believe that our users should remain the central focus of our platform. It is essential to prioritize providing them with what they want, even if they choose the less profitable Q&A service.

User Interview

The first version of the design is now complete, and we have some spare time before the implementation phase. So I asked to join user research project to conduct usability test and gather feedback from users.



Learn what student think of the new onboarding process


Learn how will student distinguish our services


Perform usability test


Try it 👇🏻


Due to the COVID-19 pandemic, we conducted the user interviews remotely. Thanks to our research team, we successfully recruited a total of 14 interviewees, with 5 located in Hong Kong and 9 in Taiwan.

I hosted one of the interviews.

Screenshot from user interview process

I partnered with another team member, I am the host of this interview, and my partner is note-taker.

To kick off the interview, I began with ice-breaking questions such as "How do you manage your studying time?" and "What kind of teaching style do you prefer?", this approach helped us establish a comfortable atmosphere.

Proceeded to test phase, we shared the prototype link with the interviewee and asked her to share her screen with us. Additionally, we requested her to practice "Thinking Aloud," encouraging her to vocalize her thoughts while navigating the prototype.

During moments when the interviewee remained silent, I will asked questions like "What do you see on this page?" and "What does this UI element represent?" to encourage her to share her observations and insights. This helped us gained more feedback from the interviewee.

Situation 🚨

During the interview session, we encountered a situation where one of the prototype didn't work for unknown reason. To overcome this issue, we quickly improvised and opted for a temporary solution. I took control of the prototype and shared my screen with the interviewee.

It's not the most ideal way, because we can't observe how the user actually interacts with our product and if there's anything particular attracting the user, but this is the only way to keep the interview going.


From 9 interviewee in Taiwan


students are able to distinguish services, 2 of them think the recommendation is useful


student said he doesn't like to ask unfamiliar tutor question, even the tutor is recommended by system


students think learning on their pace is interesting


Students are able to distinguish services

U6: I think Regular Class is like a live cram school, and Intensive Course is like a review plan, and Q&A is asking question.

U2: It's based on what I said, like the subjects or the preference

U7: If I can see the rating of the tutors on this page, I am more willing to ask them question.


Student recognized the recommendation is based on their selection. Student prefers get to know more about the tutor before asking


Helping students to take their first step

U6: Putting the three most used functions on the top is a great idea.

U9: I haven't choose how I want to learn with this app, so it pops out some recommendation for me.

Design Iterate

According to the research result, now we are positive that students can learn about our new services, and are able to distinguish them, also students recognize the system recommendation is based on their needs, I think we have achieved the project goal 🙇🏻‍♂️.

Second Design

The "bubble" icon of the Q&A demonstration has changed to text messages with animation, and we localized the copywriting, so the new users can see the Q&A process. And we combined the recommendation page with the recommendation section on the homepage, to cut down the time of development.