📚 StudyBuddy

a case study

Role: Designer & Developer
Timeline: December 2020 - January 2021 (2 weeks)
Skills/tools: Interaction Design, UX Research, Prototyping, Wireframing, User Flow Mapping, Personas
Tools: Figma, HTML/CSS, Javascript, Dialog flow
Team: Worked in a team of two with Jaskomal Natt


Many students have felt alienated from their peers, families, and teachers as a result of Covid-19. Isolation can make students feel unmotivated and frustrated when it comes to finishing schoolwork. According to a recent survey, 7 out of 10 Ontarians believe the pandemic will cause a "serious mental health crisis" (stats from CMHA). The number of students with mental health issues has risen as a result of online schooling, and there must be ways to help reduce the numbers.


"Students, particularly those who are isolated at home, need a support system.”

My solution to this issue is to create a virtual assistant that will provide students with personalised updates, motivational notes, and simply a friend to talk with in order to help them stay motivated. My aim is to develop an intuitive application that students can use without the assistance of their parents or friends.


When I considered our target audience, I considered students and the changes that Covid-19 has brought. Many high school and university students (ages 12 to 20) were at ease in a classroom environment, surrounded by other students, peers, and educators. It's more difficult for teachers to read their students' facial expressions while online Zoom classes to see if they're having trouble. Furthermore, students need the presence of classmates with whom they can converse, and being in the company of other students increases motivation. As a result, our target audience consists of high school and university students who have lost inspiration and feel alone.

Target User:

Mona is an excellent example; prior to covid, she had swimming lessons, studied with her friends after school at the library, and enjoyed engaging with her classmates. She says she misses engaging with her friends and is currently feeling lonely because of the latest online courses. She observes that studying with her friends on Zoom is not the same, and that scheduling a time to study together can be difficult due to differing schedules.


I sketched out the rough outline on the iPad keeping in mind my research, target user, and the issue and goal in mind. I drew out the basic layout for the three web pages, while thinking about how the user would work through them as easily as possible.


We started brainstorming colours and designs using the wireframe. The design was developed entirely in Figma, and after conducting UX analysis, we chose pastel colours and the Monserrat and Arial fonts as soothing tones and easy-to-read fonts. We have considered calling our chatbot liv, as it is a simple and easy-to-remember name.
This was our first prototype of the web app:

We produced a new prototype with a more concise design after a couple of user interviews. To keep the interface clean, we removed the clouds theme and added more buttons to aid navigation. One of our users expressed her desire to be able to close the chatbot so that it does not interrupt her from her studies. This helps students to concentrate on their to-do list while still being able to easily open the chatbot when they want to chat.
Our final prototype:

How we built it.

We started creating the web app after designing it. The web application was built using Bootstrap, Javascript, and HTML/CSS. Dialog Flow's API was used to integrate the chatbot AI, and Angularjs was used to build the todo list. Students may use the web application to build a to-do list and talk with liv (chatbot) to identify a collection of daily goals, and the chatbot will send friendly reminders. Liv can also play music, YouTube study with me vlogs, and include inspirational and motivational quotes while studying. All of these commands were made with Dialog Flow.
Our tech stack:


StudyBuddy Website

Github Repository

What I learned.

As a student, I understand how difficult it can be to study alone at home, so this was a great project to collaborate on with Jaskomal. I was able to incorporate strategies for enhancing the experience of studying alone in a way that was both practical and intuitive. From design to development, I learned how to use my creativity to build an application that would assist students with productivity.

What's next.

  • Storing the todo-list into a database (eg. mangoDB)

  • Allowing users to log into their Google or Notion accounts, and the chatbot will be able to send reminders based on the dates from their accounts.

  • Incorporating an extra tab for a calendar, so the chatbot can add the due dates into the calendar.

⬅ Back to site