top of page
grounded logo.png

Team: Martin (backend developer)

Sam, Edwin (2 frontend developers) & myself

Role: Product & UI Designer

Software: Figma, Adobe Illustrator

Duration: February 2021 (24 hours)

grounded is a simple, all-in-one web app that provides interactive grounding exercises and easy access to support lines and resources for those suffering from anxiety and panic attacks.


grounded received the "Best UI/UX" award at SFU Surge's Stormhacks hackathon.

✦ According to the Canadian Mental Health Association, up to 1/3 of adults may have a panic attack in any given year.

✦ A panic attack is a sudden episode of intense fear, triggering severe physiological and psychological reactions such as shortness of breath and a loss of control of one’s thoughts. As such, it can be very overwhelming to search for support resources or exercises when in this state of panic.

grounded mockup1.png

💡 the problem

🛠 the process

✦ We looked at existing mental health-related apps such as Calm and Headspace—we decided that having to download and login to a mobile application could be a barrier for someone who is struggling, so we opted for a simple web application instead. With grounded, the user can simply open up the website and begin immediately.

✦ We brainstormed the ways in which this web application could support those who suffer from anxiety disorders and/or panic attacks. Two of the most effective exercises we came across are guided breathing and 'the 5 senses'. Due to the time constraint of 24 hours, I began designing screens and prototyping directly in Figma.


✦ Once a rough prototype was finished, I collaborated with my team to turn the design into a functioning web app, and continually make improvements with regards to usability and aesthetics.

grouded mockup2.png

👩🏻‍💻 how it works

✦ Upon opening the web app, the user begins with guided breathing. Since the average panic attack peaks within 10 minutes, grounded will check-in after 10 minutes of continuous guided breathing, and ask the user to reflect on your emotional state.

✦ Based on your response, it then allows you to switch to another grounding activity, access relevant resources, or continue with guided breathing.


✦ In this way, grounded allows the user to control what works best for their needs without overwhelming them with too many options.

grounded mockup4.png

💭 outcome + reflection

grounded was a successful project, and was awarded 'Best UI/UX' at SFU Surge's StormHacks 2022. This project was challenging⁠—working within a short time frame, balancing feasibility and ambition (especially with the animation) was difficult, but ultimately rewarding. 


In the future: 


✦ Working with mental health professionals to implement more activities

✦ Increasing accessibility with narration

✦ Conducting user research & usability tests

✦ Creating a mobile app & ensuring functionality across all devices

bottom of page