Habit Hatchery

Inspiration

Traditional habit trackers are uninspiring, so we wanted to create a fun and interactive alternative!

What it does

As users check off their daily habits, their virtual fish tank is populated by vibrant creatures and plants, encouraging them to stay consistent.

How we built it

We created a design prototype for our project on Figma, then implemented it using HTML, CSS, and Javascript. We used Procreate to draw our illustrations and bring our project to life.

Challenges we ran into

The biggest challenge we ran into was animating the elements of our fish tank and making new images appear each time the user tracked a habit.

Accomplishments that we're proud of

We are very proud of completing a project from start to finish in a limited timeframe. While working on our design, we were able to prioritize so that we could to create a finished product by the deadline that both challenged us and allows us room to grow.

What we learned

It is important to delegate tasks and trust your teammates to fulfill their respective roles. We also expanded on technical skills such as animation, designing prototypes on Figma, and adding interactive features, like counters, to a webpage.

What's next for Habit Hatchery

We would like to expand Habit Hatchery's features by allowing users to set customized time frames for their goals, as well as implementing customizable features such as more tank designs and a larger variety of fish and plants. We would also like to make our project more accessible by making it available on smartphones.

Built With

• html/css
• javascript
• procreate