Close Menu

Solving a Transportation Design Problem

Calm-Mute is an app I designed to solve the mental distress caused by public transit.


The ask was to think of a design problem that the TTC is facing. The design problem I focused on was for TTC commuters who live with mental illnesses and find TTC services triggering. Specifically commuters with anxiety or panic disorders who have panic attacks while riding the TTC, the problem is they have no way to control their anxious state and arrive at their destination calm.

My Goal:

The goal I created for myself was to design a mobile app that could be used by people living with mental illness or panic disorders to take control of their anxious state. As a part of a larger goal, I was hopeful this would take take the stigma out of mental illness and create a safe place for it’s users.

Being a mental health advocate I understand that TTC is a breeding ground of triggers that lead to panic attacks or worse may become a suicide solution for some users. I’m worried that this is a wicked problem the TTC hasn’t been able to solve. And while an app doesn’t solve the full problem, I felt compelled to start tackling the problem.


I took this image at a subway station. Currently this is one approach the TTC is using to help solve the problem. This is a small poster at the back of the platform.

My Process:

I set out to solve this design problem using the 5 Planes of UX Methodology. Using this process is helpful the you already have a clear understanding of what the final product will be. In this case the project requirement was to design a mobile app.

01 Strategy:

  • Product Objectives
  • Success Metrics
  • User Research
  • User Needs
  • Personas
  • Empathy Maps


I created the persona Margot based off of data collected from the Strategy Plane. In order to put the user first, Margot was my made my north star from here on. She provided insight into users everyday pain points and needs.

In this plane I reached out to the BUNZ Helping community on Facebook for users to interview. I turned to BUNZ because I didn’t have users living with anxiety or panic disorders available to me to interview. I learnt that the users I was designing this app for needed the app to be: 1. Easy to use in time of panic. 2. A learning tool. 3. Something that doesn’t look to medical.

I found that distilling these user needs into a persona helpful to define the scope of the project and ensure I was designing a solution that was truly human centric.

02 Scope:

  • Competitive Landscape + Analysis
  • Defining Requirements
  • Features + Functionality

IMG 1334

This is an image of my notebook showcasing the Competitive Landscape and Analysis completed for the Scope Plane.

I found there were no direct competitors (at the time of starting this process). However I turned to Clue - a period tracking app and Headspace- a guided meditation app for inspiration.

From Clue I was inspired by their non-gender bias use of colour. I found their app to be trustworthy, and through their blog and social media platforms they are able to help remove stigma around periods.

Headspace offers users full transparency in a minimal easily understood layout.

The competitive landscape was a valuable piece of the process to understand my apps objectives and provided insight into how others are accomplishing similar goals to my own.

03 Structure:

  • Content Strategy
  • Iterative Feature Concepts

IMG 1336

In my notebook I started to sketch out concepts. This interactive process helped me design concepts to test with users in the next step of the process.

After listing all possible features and funning them through a feature filter I was able to choose the key features the app needed to have to be a successful solution for it’s users.

The key features included:

  • Inhale and Exhale animations for users to breath along with to help lower their heart rate.
  • When the app recognizes the users heart rate is indicating the user is about to have a panic attack, there needs to be a countdown screen to show the user is about to start a breathing exercise. Or give option for user to cancel out of this flow before exercise begins.
  • A calendar to track and journal the users panic attacks and progress in completing exercises to lower heart rate.
  • Positive Affirmations section. This allows user’s loved ones to write notes for the user. These notes are stored in the app and will show up when the user needs some recognition, or connection to a loved one.

The features helped define what screens I would need to design as a well as a user’s journey throughout the app.

04 Skeleton:

  • Prototypes
  • User Testing
  • Evolution of Personas
  • User Journey Maps
  • Wireframes

IMG 1339

Paper Prototypes are a great low hifi/low cost way to test concepts with users. I sketched out what I thought elements should look like and where they should exist on each screen. Then placed the cards in-front of users and asked questions like “What do you see here? And where would you click next” to understand if the screens were intuitive.

To kick start the final design solutions I completed a round of user testing to ensure my assumptions how how users would use the app were correct. I took this feedback and redesigned my iterations to optimize the arrangements of elements. This piece of the process is valuable to address user pain points before heading into wireframes. And allows quick iteration and refinement before solidifying the final design.

05 Surface:

  • Colour Palette
  • Typography
  • Iconography
  • High Fidelity Design Composition


This is an image of what the “Positive Affirmation” screen. This is an example of what the high visual polish designs look like including my chosen font and colour palette.

My goal was to design an app that users would be able to use to control their anxious sates while using TTC services. Throughout the process I learnt it needed to be more than that. The app needed to feel like a friend, or a calm and safe place for users to get help. I was able to accomplish this by:

  • Designing large elements/and simple screens so the user could follow along in times of panic.
  • I choose a monochromatic colour palette of blues to create a calm and non gender biased inviting space.
  • Roboto was the main font used throughout the app because I felt the founded font lended to a friendly non-clinical atmosphere.


Calm-mute! An app that syncs with a users wearable tech that continuously tracks heart rate - ie, Fitbit. When the users heart rate goes above 90 beats per minute (BPM) the app acknowledges the user may be going into crisis. Then automatically starts a breathing exercise for the user to follow along with. This allows the user to breathe through their crisis and continue with their commute and arrive to their destination stress free.

Future Considerations:


At the time of designing this solution, the new series of Apple Watches had not come out to market yet. The last two series of apple watches include a “breathe” feature. Recognizing that mediation and breathing makes a great impact on overall health, the breathe feature is something that notifies users throughout the day to take 30 seconds to breathe. This is great! Not only is it validation for my solution, but it could help in two ways. 1. I can hope that it helps in destigmatizing mental health! If everyone wearing an Apple Watch is mindful of their own mental health, perhaps they will be more empathetic towards those living with mental illnesses. 2. This new Apple watch feature could aid in my initial solutions biggest roadblock. My app actually wouldn’t work on its own because of security risks, I learnt about after completing the assignment. An app cannot be running at all times and listening to the users activity in the background of the users phone. However the Apple Watch is synced to the Health, and Activity apps on an iPhone. The next step would be to research how or if I could integrate my solution with Apple’s existing tech.