Kalendar

Figma prototype of Dashboard/home page
Figma prototype of Messaging page
Figma prototype of Profile page
Figma prototype of Task page

Inspiration

Remote learning is the most challenging for young kids, of lack of social interaction and not every kid is proficient with online learning platforms. Elementary school kids usually do assignments with worksheets, but with all these new online homework platforms, it can be hard to keep track of everything. Lack of social interaction is also a concern we wanted to address, so we wanted to include a little game-like aspect and communication tool for kids to make friends.

What it does

Kalendar is an easy and fun way for children and their parents to keep track of their school assignments. One of our goals is to motivate children to do their homework with point rewards that can be exchanged for different prizes. The website/app also allows communication between the user and their teachers/classmates. We hope to help children build good habits for their academic work and be able to bond with classmates. Features include (not all implemented):

A game that uses the avatar
Shopping for accessories to add onto avatar
An assignment grading system
Message page to communicate with peers and teachers
Profile page with student’s information and customizable avatar

The dashboard features a calendar that allow students to visualize when their upcoming deadlines are and acts as an online planner. The announcements bar features reminders about more prominent deadlines and teacher inputted announcements. The tasks page has a todo list for self-inputted tasks. There is also point leaderboards displaying classmates’ points and the user’s over different periods of time. These points can be exchanged for accessories for the user’s character in the profile page. The profile page lists basic information of the user and allows them to customize their avatar to their liking. The message page allows the user to communicate with their peers and teachers in a class group chat and private chat.

How I built it

We used Figma to prototype a mockup. Then, we built a website using HTML, CSS, and Javascript.

Challenges I ran into

Each of us have limited experience in Figma, HTML, CSS, or Javascript, so we had to learn what we didn't know from workshops and tutorials.

Accomplishments that I'm proud of

We are proud of learning new skills on Figma and Javascript.

What I learned

We learned new implementations of Javascript and website programming, such as slide shows and adding to a list.

What's next for Kalendar

We hoped to build an app version for Kalendar for better accessibility. In addition, we wanted to implement more customizable features for the kids' avatars, as well as be able to interact with other kids' avatars.