UI, UX

📝 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.
Role

Product Designer @roywonghoyin

Researcher @karen.svg

iOS Engineer Keke Arif

Android Engineer Chilin Wang

Backend Engineer Joe Wang

Span

2 Weeks for Designers

6 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

" I've no one to ask when I'm stuck."

Although most teachers would invite students to a class message group, but teachers won't be there to solve their problem all the time.

" I'm in a loop of going back to the same topic."

Students lost confidence of a topic after a period of time, and they would keep coming back to the same topic, which blocks them from moving onto other topics, and shorten practising time of other topics. And they also run out of challenging questions to practice, since they have limited source of practices, which mostly came from school teachers.

" I can show my mum my study progress."

Students check-off topics on textbooks' content page when they decide if they have fully understood a topic and move on to other topics. This is helpful when students need to know how many topics left they need to study before exam. However, every time they check their progress, they need to flip through multiple textbooks, it's easy to miss out 1 or 2.
Statistic findings from a questionnaire sent to 300 students in Taiwan
Students like to mark down the topics that they are confident and those that needs more practices.

From the result of a questionnaire sent to 300 students in Taiwan, we are able to see students like to mark down the topics or concepts that they are confident, and they will bookmark topics that need more practices and check them off after they feel confident.

Design Challenge

How might we design a study tool that lets student to work on their weakness with confidence, receive help when stuck?

💁 Possible Outcome

Assessment test

Students are able to work on their weakness on the go, and refresh memory by checking the answers and explanation. With the "Ask Tutor" feature on the Snapask app, students are able to ask Snapask tutor instantly to receive help, besides, we could provide hints when they are stuck.

Study tips
Besides working on quizzes, they can also watch videos of a topic they lag behind. Videos that can show them how to solve a tricky question and how to use such skill to apply to other questions.

Concept Mastery
We can provide result analysis for students, they would be able to see which topics they need to practice and which they have mastered and move on.

📎 Requirements

🎢 Design Process

Paper sketch is usually my first step to start the process. In this feature, We are very certain that we are going to categorise quizzes into topics and subtopics for easy navigation, and we should be able to provide a result screen as a summary for concept mastery. Students should be able to see their correctness of the quiz they have just taken, and right or wrong answer of each question. Students should also be able to see explanation for future reference and revision. These are the base of the design, from these, I can then work on the user-flow and the basic look of the UI.
One of many paper sketch of this feature

After many discuss with PM and researcher, see if the sketch meets all the requirement from PM. I can move on to working on wireframe for backend engineers to estimate the effort required and compatibility of the current backend structure. Depends on the size of the feature, we would use the wireframe to do usability testing with students.
One of many wireframe of this feature

After gathering all the feedbacks from the testing, I am able to make changes in 1 or 2 days. To the point I'm confident with the design, I have hold a begin review meeting with the product design team, focusing on getting feedback on the user flow and UI. I then will bring the final design to the front-end engineers to explain thoroughly how students use this feature, starting point, destinations of each button, ending point of the feature, different screen states: ie, empty, processing, complete, and interaction and transition animation demos.

Most used tools
My usual handoffs include uploading all the mockups on Invision, putting user-flow with notes on Overflow and creating a Drive folder with animation demos. I will send them over to the engineers on Slack and upload a backup file on Drive, and then put a link on Asana for record.

❤️ Final Mockups

Final Design & Flow

🔖 Feedback

It can be an extra source of practice before exam.
Peeping at the hints is a useful when students got stuck.
Ask tutor instantly during quizzes is helpful since school teacher is not always here to help.
It's hard to do Math on the go, it is easy with English or Bio, because students need pen and paper for doing Math.
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