My first brief this semester is to design three screens for a smart watch app.
I began by brainstorming in class via mindmaps on paper, writing down everything I could think of that related to smartwatches and all that they could involve. Like health, fitness, productivity, travel and sleep. This was a really useful starting point as I had no idea where to begin, and hadn’t ever used a smartwatch before myself.
When mindmapping I found that I liked the idea of an app which focused on mindfulness, as well as the function of heart rate monitoring. By linking the two ideas I then came up with the concept of an app designed to provide breathing exercises both manually and automatically, activating automatically when an increase in resting heart rate is detected. This is something that I myself would find to be useful, especially to use on the go when feeling anxious or stressed.
First of all I did some research into effective breathing exercises and how they work, as well as the different types, as I didn’t really know that much on the subject. This gave me a good starting point as I knew what I should include in my app. I also took a look at some pre-existing apps which offer breathwork, mostly mindfulness and meditation mobile apps, which are very popular. I couldn’t find any which are currently available on smartwatch so it would be interesting to have these features on a watch.
I began sketching out possible screen ideas roughly onto paper until I came to ones that I was satisfied with. I explored a couple of different displays for the actual breathing exercises screen, but eventually settled on something simple with a moving circle tracing a shape, that you can follow as a breathing guide. Although looking at the screen isn’t essential as I would use the vibrate function of the smartwatch to mimic breathing. I think this would be a simple and effective tool.
The screen setting up the breathing exercise was more difficult to design as I wanted to add the options for timing, breathing style and an option to toggle automatic mode. That’s a lot of information on a small screen. The timer-setting buttons were hard to design because I didn’t want it to be too small and fiddly. I took a look at some different options found on other smartwatch apps and designed one that I was happy with. I also had to tweak the screen for displaying the breath exercise, as I wanted it to have a restart and a pause button.
I made my three screens on Figma which didn’t take very long, I used a 40cm smartwatch screen. Once I had my wire frame on Figma I chose some colours.
I wrote down everything I could think of which relates to breathing and calmness and got some good ideas from it. I wrote down all the names and eliminated them, til I was left with ones that I liked. Breathflow stuck out for its simplicity and straightforwardness. It feels balanced and the word “Flow” adds to the calming properties of the app.
I knew I wanted something muted and inconspicuous, as well as something calming. The dark background fits this, and I chose some muted accent colours to represent the different breathing types. From a colour psychology standpoint, green is an obvious choice. I think it makes a particularly good accent colour for the app because of its calming properties. I am avoiding pure black and pure white, for the dark background I opted for a navy colour which will tone in well with the blue I am using as an accent colour. The green also looks good alongside the navy.