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.
💡 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.
👩🏻💻 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.
💭 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