App Design

Role: UI + UX Designer

preview of screens

When given the task of solving a problem commuters face using the TTC, I wanted to focus on making the commute a little easier, and a little calmer.

I learnt how to navigate solving a problem with the “5 planes of UX methodology, and designed an app.


Strategy + Scope:

In the conception phase of this project I began with two of the five planes of UX Design.

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

In this phase, I completed a competitive landscape, and looked to two other apps for inspiration.

Clue - a period tracking app, I was inspired by their non gender bias use of colour, and how bold tones can create an inviting and trustworthy tool.

Headspace - With full transparency of the app features and everything it has to offer, it is never presented in an overwhelming way.

Through user research, I found the users of Calm-Mute would want this product to include 3 important features:

  1. Easy to use in time of panic.
  2. A learning tool.
  3. Something that doesn’t look too medical.

In order to put the user first and to test my ideas with them, I created a persona, to better understand their everyday and pain points using the TTC.


21 | F | Toronto

A student at UofT, a volunteer at a animal shelter and with a part time retail job, Margot relies heavily on TTC to get about on time. Margot has PTSD, as well as panic disorder and avoids taking the subway as much as possible due to panic attacks being triggered at any time. When an attack occurs, Margot loses vision, feels alone and scared and has to take the rest of the day off to rest before she can feel like herself again

  • Arrive at every commitment on time, and in a calm ready-to-go state
  • To use all modes of transportation TTC provides.
  • Not to draw attention to herself in time of crises.
  • Freedom.
  • Positive Affirmation.
  • Help silencing the outside world.
collection of wireframes

Structure + Skeleton:

In the Structure and Skeleton planes I used my collection of data to better inform, information architecture, paper prototypes, and wire-frames.

A user flow map was an important visual way to answer the question of; How do all the pieces of the app fit together and behave?

user flow chart

After I mapped out how a user would use all the features my app comes with it was time to make some wire frames. Starting out with multiple sketches of what each feature could look like, this acted as a buffet of UI elements and patterns to choose from. Once the wire frames were complete, I made paper prototypes to test out with users. I learnt where a user would want to click, and what the users expectations were.

breathing wireframe

For the breathing exercise I explored the idea of a circle in the middle of the screen that would get bigger and smaller as the user inhales and exhales. Mimicking the ‘design pattern’ of how lungs function. This way the user can follow along and focus on the circle and help silence the outside world.


My overall design goal was to create a calm and inviting space for my users.

I learnt everything had to be large in this experience, because if Margot loses her vision she will need to follow along with something large and recognizable on her phone screen. You can see that knowledge displayed in how large the icons are in the main navigation at the bottom of the screen. With this in mind I wanted the user to feel like this was a friendly inviting, and trustworthy experience. I choose two fonts that are sort of rounded in character, but easy to read. I decided to keep all characters in lowercase, for more of a friendship feel. As for the colour palate keeping with the theme, I thought blue was trustworthy and not too clinically serious, with a subtle accent colour for a call to action.

screen preview

Listening and waiting, Calm-mute is like a good friend waiting to help. Also learning from your patterns, the app will send you positive affirmations when you need them the most.

Apple's breathe app

Future Considerations:

When I first set out to solve a problem for the TTC, I never imagined that this project would turn out to be a feature included in a new Apple product. It was also hard to consider how to get around the safety of an app, and what it means for an app to be continuously running in the background all the time.

My initial idea was to detect a users heart rate by wearing some sort of heart rate monitor and or fitness device like Fitbit. Apple’s new feature Breathe, is an app designed to assist with mindfulness, meditation and stress reduction. However, it’s designed to act as a notification throughout the day, instead of sensing the user needs help.

Is it possible to hook up to an API and create an app that still runs off of the users heart rate?

In conclusion, Calm-mute may not even have to be an app at all but maybe an addition to an already existing feature on an Apple watch. The future is now.

Apple's breathe app

Apples Breathe app has a similar interface with an increasing flower to mimics a users breathing. Also shows a users heart rate upon completion to encourage mindfulness.