UI, UX

👨🏻‍🏫 Tutoring 1-on-1

Students can ask question about any problem they found on textbook. They can send out the question in form of photo or text. Tutors on the other side will pick-up the question, answer and explain to them inside a 1-on-1 chatroom.
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

" 1 photo isn't enough for question with multiple parts. "

Questions such as Chinese essay or English essay require taking multiple photos to capture the whole content to be fully presenting the question to tutors, however, the current UX does not allow such action. Students will have to send them over again with the additional images.
Current Question Draft only support 1 image at a time.

‍

" I don't need to camera, stop asking me for permission. "

If students want to send out a text-only question, they have to open the camera, grant the permission for opening the camera, and then tap "Skip" on the camera screen to start typing.
Students have to grant permission before asking a text-only question in the current experience.

Design Challenge

How might we create a question drafting experience that allows students to be able to fully communicate and present the questions they need help, in order to facilitate the explanation process.

💁 Possible Outcome

Flexible on choosing photo or text
‍Student should be able to choose the only format they need to draft their questions. They should be able to choose either only photo or text, or both. Permission should only be asked when it is needed.

‍

Multiple photo enabled
Students are able to choose multiple photo in order to fully capture the questions they found on textbooks; hence, tutors are able to get the full picture of the question when helping students. Therefore, it would facilitate the efficiency of the tutoring session and shorten the session time, students are able to receive their explanation with shorter waiting time.

📎 Requirements

As a student, I am able to send out photo only when drafting a question.
As a student, I am able to send out text only question.
As a student, I am able to send out question with both photo and text.
As a student, I am able to send out text without skipping pass a camera.
As a student, when I quit during drafting a question, I will receive an alert.
As a student, when I'm choosing what subject this question is belong to, I'm able to type and search.

🎢 Design Process

In the initial sketch, we were going to fully redesign the camera to enable taking multiple photo. However, the effort required to build this feature is too much, then we changed the userflow to adding photo one by one. Also, we ask camera permission only when the camera is needed.

‍

In the new UX, students tap on the "Ask" button to open a question drafting drawer, on this drawer, they are able to take or upload photo, type out their question, choose subject and the academic level of this question. They will receive a feedback to notify them the question has been sent to tutors.
Userflow restructure for question draft
Userflow restructure for question draft

❤️ Final Mockups

Final Design & Flow

🔖 Feedback

This flow feels more like everything happening in the same place, it used to jumping back and forth choosing subject and curriculum, it used to feel long and dragging.
Why can't I choose multiple photo in my album like Whatsapp?
How do I edit photo? I would like to draw and circle on my photo.
Previous Project
Next Project

➕ More

01

📝 SnapQuiz

Snapask offers online assessments on app and web. Students are able to work on their weakness on the go, have a quick refresh their memory before the exams. We offers hints when students are stuck, and explanation to clear the concepts, and analysis of their strength and weakness of each topic.

UI, UX
See Project

02

📙 SnapNote

A note keeping feature in Snapask to help students to organise personal learning materials, such as study notes, remarked textbook and exam paper.

UIUX, Interaction Design
See Project

03

👨🏻‍🏫 Tutoring 1-on-1

Students can ask question about any problem they found on textbook. They can send out the question in form of photo or text. Tutors on the other side will pick-up the question, answer and explain to them inside a 1-on-1 chatroom.

UI, UX
See Project

04

👧🏼 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.

UI, UX
See Project

05

💵 Brand Campaign - The Power of Asking

A landing page design done for the use of a branding campaign. Students are able to win scholarship by posting photo on Instagram with #TPOS. All work is done on Webflow, only minor help from engineers.

Web Design, UI
See Project

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