overview —

Role: UX Designer, Front-end Developer
‍
Tools: HTML, CSS, Express, jQuery, SQLite, Firebase
‍
Teammates: Kellie Higa, Shelly Bae
‍
Date: April - June 2018

Responsibilities: Created the visual basis of our prototype; Used HTML, CSS, and JS to code pages, modals, and buttons; Used Firebase to create requests to our database

Habit-at helps children to encourage or discourage habits by maintaining a habitat. They take care of a virtual pet to earn points towards their daily streaks by tracking their tasks.

The main focus of this project was to work with a backend server (we used Express) and a database (SQLite and Firebase) and connecting them (with Ajax) to create data visualization on the frontend.

Therefore, because this focused more heavily on the coding aspect, we did not utilize the entire design process. Rather, we mainly utilized the ideation aspects such as storyboarding, creating personas, and prototyping in order to keep us on track of solving our main problem.

the problem —

We've all thought about something in our lives that we need to constantly change and improve on, but when it actually comes to taking action, it can be difficult for us to follow through.

It can be especially hard for parents to motivate their children to build healthy habits and break existing ones. It's also difficult for kids to keep themselves accountable because they either don't know how to or need an incentive to boost their motivation.

the solution —

We created Habit-at, an app that helps parents keep track of their children's habits.

The main feature of this app is the ability to take care of your own "pet" in a virtual habitat by gaining points to feed it, train it, and ultimately to keep it healthy. The user gains points by completing their daily task, and they can spend these points to care of their pet.

By having a point system and ownership of something such as a pet, it incentivizes the habit-building process to make it easier and appealing for children.

storyboarding —

We created these storyboards to help us identify key insights and moments where people need to break or create a new habit.

Two of our storyboards

prototyping —

Disclaimer: Our priority was not to focus on the UI of our app, but rather the functionality by including key components such as a data visualization chart and the ability to create new data.

Prototype by Kellie

Prototype by Shelly and I

final
thoughts —

View our demo video to see the final product!