Background
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
Result
6 out of 9 students can distinguish our services, and our team gets to know students better based on the data collection.
Duration
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
02
Provide students with suitable educational content
03
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.
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.
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.
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.
Goal
Learn what student think of the new onboarding process
02
Learn how will student distinguish our services
03
Perform usability test
Prototype
Try it 👇🏻
Process
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.
Result
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
01
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.
02
Student recognized the recommendation is based on their selection. Student prefers get to know more about the tutor before asking
03
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.
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.
