MyHealthyAvatar

GIF
The hamster sprite
Here is the main game page where you answer survey questions and complete challenges
Here is the starting page where you select the avatar

Inspiration

We took inspiration from our love of video games and decided that the most engaging self care app would be a combination of both. Since we know that young adults are less interested in evaluating their health based on plain text surveys, we concluded that incorporating a playful game element with your own avatar would be more appealing.

Drawing inspiration from our passion for video games, we envisioned creating an engaging self-care app that blends the two. Recognizing that today's young adults may be less inclined to assess their well-being through traditional plain-text surveys, we settled on the idea of integrating a gamified element where users can select and impact their own pixelated avatars based on their responses, making self-care an engaging and visually enjoyable experience.

What it does

MyHealthyAvatar is an interactive survey based web game that evaluates your current physical and mental wellness levels, and encourages you to complete Self-Care challenges. The avatar’s disposition will reflect your own mood in real life which will change based on how you answer the questions and whether you complete your daily challenges.

How we built it

We built this project with the React library, and the languages we used were: JavaScript, HTML, and CSS. We also took advantage of a free drawing app called Piskel to create the pixel art avatars and sprite animations.

Challenges we ran into

Learning the correct syntax for using React Hooks was a bit confusing, but we eventually got used to the [variable, setter function] format for useState(). Artistically, it was a bit challenging to make the avatar expressions seem believable, and spacing the divs and text boxes to accommodate for different monitor sizes was a unique obstacle that we overcame.

Accomplishments that we're proud of

The avatars themselves are original and look great aesthetically, so we’re very proud of that. One of our team members is also pleased with completing their very first hackathon, and we all feel that we are slightly better at web development to create apps that better accommodate the users’ needs.

What we learned

MyHealthyAvatar taught us that 2D animation is harder than it looks, and that UI/UX design is vital to the project’s success. We also learned that in general, all software should involve a dialogue between the user and the function of the app, especially involving mental health needs. Additionally, along the process of researching prompts on how users can better their mental and physical health, we feel that we’ve also accumulated much more knowledge in this aspect.

What's next for MyHealthyAvatar

We plan on expanding our web app to mobile devices as well, and even VR headsets. We also plan on making the app more customizable with a login system and user-specific tailored questions. Finally, we plan on creating a daily notification system and adding more incentives to complete self-care challenges, such as unlocking new avatars.