Inspiration

Due to the pandemic and summer break, our team has had a lot of time on our hands. However, with this freedom and our continued workloads, we have a lot of difficulty planning out our days. In order to stay productive, we all use different methods of organization. Some team members used Notion and Taskade while others preferred calendars and paper agendas.

Sometimes, these methods can indirectly promote unhealthy schedules and can lead to burnout. Our response to the theme of Wellness was minimalist design, cats, and breaks.

A calendar is an amazing way to organize your day, which in turn, leads to more productivity and maximized relaxation. With our website, we offer the unique option of selecting breaks and habits such as drinking water, washing hands, and etc.

What it does

Cat Calendar allows you to practice good habits, plan out your day, and much more with a minimalist Pusheen inspired UI. You are followed throughout your day with a moving pusheen while habits and breaks are randomized.

At the event’s page, we can add all of the tasks we will be doing today. The event page stores tasks on the user’s local device, so in case they refresh, their tasks will be still saved. Once tasks have been added, we can move on to the Habits page. Here, the user may select any amount of habits to incorporate into their schedule. Finally, we can head to the schedule page. The schedule has been automatically generated, with habits automatically placed between fixed schedule events. There’s even a cat to indicate where you are in the day, although in our demo it has been sped up drastically to show its ability to move a-claws the timeline.

How we built it

After brainstorming how we could address the theme, we created a preliminary prototype in Figma (https://www.figma.com/proto/txDUTDlIUOZz3CXwbTAc1g/Cat-Calendar?node-id=10%3A252&starting-point-node-id=10%3A252&scaling=scale-down-width) along with a design system. After the logo, font, and the interface was completed, the VSCode IDE was used in conjunction with React, HTML, CSS, and JavaScript. Finally, Photoshop was used to create mockups and Premiere Pro to edit our video.

Challenges we ran into

Only 1 member of the team had used CSS before while everyone else learned from scratch. We had a lot of issues with CSS like adding a shadow on buttons in the selected state.

Accomplishments that we're proud of

We experienced a ton of merge-conflicts and had a lot of difficulty collaborating. Being beginners, we are amazed we ended up with a functional website and slept very late to finish this project.

What we learned

We made a lot of design compromises due to time and we learned how to prioritize and split up work while staying true to the initial vision. Some of the issues we had were with exporting from Figma and turning a design into functional code. This was the developers’ first time collaborating with a designer and the handoff process was very difficult.

What's next for Cat Calendar

WIth more time, we want to add a priority to the tasks and changing the cat depending on the task and day.

Built With

Share this project:

Updates