CalmingCat

Charlie's introduction
Helping Charlie choose their outfit
Scavenger Hunt
Helping Charlie choose their breakfast
Town Map
Inside the cafe
Inside the sock store
Other community members
Town Map at night
Ending scene

Inspiration

This project was created to become a source of support for those struggling with anxiety. It was based on our own struggles with anxiety, which were further heightened during the pandemic. In response, we wanted to develop a website where users could take a break, or look for a distraction from their constant thoughts. We wanted it to be accessible and applicable to users of all ages, backgrounds, and identities, making the storyline and characters simple but heartwarming.

What it does

When people are in a state of anxiety, even the most simple tasks can seem impossible and overwhelming. They can also feel like they lack control over themselves and their environment, which eventually leads to a spiral of worries and thoughts that exponentially expand. CalmingCat addresses all of these issues by tackling the hurdle of daily, mundane tasks. The website first opens with the 4-7-8 breathing exercise in order to calm down and relax users. It’s the most effective and efficient way for a quick reprieve from anxiety, and we wanted to utilize every strategy to help users. It then dives into the daily routine of Charlie, our gender-neutral main character of CalmingCat. The user then follows Charlie on a simple, but peaceful daily routine. Throughout the story, the user is faced with choices and options, allowing them to become more “grounded” with their environment and distracting them from their thoughts. Words of affirmation are present around every turn, in hopes of comforting and reassuring the user. The various scenarios and interactions between other characters represent possible stressful situations for those with social anxiety – but the heartwarming gestures shared between these characters prove these worries wrong, which hopefully transfers into worries in real life.

How we built it

We began this project by researching efficient ways to reduce anxiety. We wanted our experience to be unique, and actually helpful for our users. Then we created a wireframe in Figma in order to better visualize our aspirations. After finishing our wireframe, we translated our ideas into HTML, CSS, and Javascript to build our website. We mainly utilized CSS animations and image-mapping, so most of our functionality was done through CSS.

Challenges we ran into

It was initially difficult to create the image maps, as we were completely unfamiliar with them. But after multiple tries, we slowly began to be able to easily code them into our website. In addition, because our storyline opened up the possibility for multiple endings, we had to incorporate a large amount of HTML files to provide the users with the outcome they had chosen. Therefore, we also had to implement ways for the website to load smoothly with a large amount of files.

Accomplishments that we're proud of

We are proud of the user experience of our website. We believe that we have truly succeeded in the design aspect of our website, as we purposely chose specific colors and styles to appeal to our purpose and incorporated numerous anxiety-reducing techniques to make our design practical.

What we learned

We learned more about the increasingly common issue of anxiety, and why it is so important for us to develop products like CalmingCat to combat these issues. In the technical aspect, we became much more flexible in CSS animations and image-mapping, and gained invaluable skills to apply to future projects.

What's next for CalmingCat

We hope to expand our storyline in the future and introduce new characters as well as new outcomes so that our users can have an exciting and unpredictable experience each time. We would also like to develop our project into a mobile app in order to reach more users and expand the positive impact that our project can have on mental health.