People go to bed and wake up with their smartphones, partly due to the alarm functionality they have taken in our bedrooms. This is having an indirect effect on the amount & quality of our sleep. What can we design to improve people’s sleep?
Circa is a present-day take on the alarm clock. It provides modern functionalities without offering the distractions that usually come with them. Using a custom sensor, it provides insights in a night’s sleep that go beyond just numbers, allowing people to regain control over their sleeping routine. The project was co-funded with a crowdfunding campaign, raising over €150k in pre-sales. In 2018, Circa was awarded a Dutch Design Award in the product category.
I was — among others — responsible for creating an overall vision of what Circa could be in people’s bedrooms. Later, my responsibilities shifted to prototyping & creating all parts of the design system and guiding a team of programmers throughout the development of the custom operating system.
General sleep hygiene
We started our research by identifying what factors influence your sleep, and where we thought technology could have an opportunity to intervene or help people.
We then proceeded to doing short, informal interviews with people. We asked them what their issues were when trying to pick up or keep a healthy sleeping routine. We also asked them general questions about their knowledge on sleep hygiene. Doing so, we identified a few key issues people have:
- Distractions in the bedroom that keep you awake, such as TV or your smartphone.
- Going to bed and waking up at the same time daily, especially combining this with a social life & weekends.
- Current ‘quantified self’ technology mainly tells you numbers, not what you can do with these numbers
- The ‘snooze’ button
- Lack of general knowledge or misconceptions about secondary factors that influence sleep (such as alcohol, exercise and your diet).
The market focussed on sleep-products is an active one at the moment. We analysed and tested a few products on their functionality, and at what point the user interacts with the device or vice versa.
Research analysis & synthesis
From our findings & research, we identified two main target audiences and their main goals and frustrations. Based on these audiences, we designed two key personas to focus on during the following design process.
During our research, we realised that our product was focusing on helping people sleep better, rather than some other goals that a lot of businesses seem to have nowadays, such as gathering and selling data. We were therefore inspired by the Time Well Spent movement, to design technology that is respectful of the user and their information. During the early phases of the project, we developed the following philosophy to adhere to:
- No distractions. Our product helps people sleep. It should never distract them from their sleep.
- Privacy centred.Our product is living in the bedroom, which some describe as a room for sleeping and screwing. Our product should therefore respect privacy.
- Design for regularity & rhythm. Rhythm is the most important. The product should reflect this.
- Insights & educate. Too many products just give numbers. We want to provide people with ways to actually improve their sleep.
- Other functionalities.
Strengthened by the research phase of the project, we ended with useful insights and hundreds of possible features and a clear sense of direction:
Circa was going to be a standalone product, built on a custom operating system. A beautifully designed product, built to help people maintain a healthy sleeping rhythm. A few key features would be:
- Setting alarms with the freedom people are used to nowadays. This means repetition, multiple alarms for different days of the week, etc.
- We were looking into building or buying a sensor that would be able to measure people's sleep stages, to be able to wake the user at the exact right moment: the light sleep stage.
- Provide insights into sleeping habits and how to improve on them.
- Beautiful clockfaces, displayed on a special OLED display to limit the amount of light emitted by the device.
- High quality audio to wake people with nice sounds and music from their favourite radio stations and artists.
For the industrial design, we worked with Robbert Bronwasser to create a beautiful product. We felt that his philosophy of giving technology a “friendly smile” matched the idea we had for our product.
During this process, we worked together to create a seamless integration of physical and digital interaction. This is best shown in the rotary dial on the right of the clock, which was born out of a desire to reminisce old watches, as well as the ability to quickly navigate the digital interface through physical interaction.
Circa's industrial design gallery
Because Circa runs on custom hard– and software, there was complete freedom in designing the operating system and its interaction patterns. This resulted in some unique patterns, such as the list, the off-centre menu and the contextual menu (more below).
To get a more realistic sense of what we were building, we put together a lasercut prototype using an Android phone and a Teensy microcontroller functioning as a keyboard. Using HTML, CSS and JS, I was then able to replicate physical as well as digital interactions. This prototype allowed us to test interaction patterns as quickly as we were designing them.
Main system structure
It quickly became clear that Circa consisted of five major pillars: Clocks, Alarm, Sleep, Music & Settings. We initially put Sleep on the idle clock screen, since that would provide the quickest access.
The main menu would then consist of the remaining four. Later, it was decided that Sleep was too important and deserved its own spot.
The different clockfaces Circa. Also the screen Circa returns to when idle.
Setting, changing and deleting alarms.
To gain sleep insights, as well as finding aids to fall asleep at night.
(Internet) radio, Spotify and other music sources.
The contextual menu bar
With this structure in mind, different experiments were done of presenting the menu and layering information. The menu was moved to the right of the screen, to be close to the rotary dial on the device.
This is also when the idea arose to place the screen off-center in the device, so that the menu was always 'present'. During the wireframing of the different screens, I discovered that sometimes the system needed some actions that were contextual. The off-centre menu sparked the idea for a contextual menu bar. First, as part of the regular menu. But it was clearer when the normal menu temporarily disappears, in favour of a very specific action.
Presenting sleep information
One of the most important features of Circa, is how it presents sleep information. From the research, it was discovered that Circa should go beyond numbers, and provide context to the information it presents.
This meant that a large enough portion of the screen real estate should be reserved for this information. In the end, we're using a list of cards for each information type, that included enough space for context.
The visual design of Circa has had a few iterations. We started out doing a dark interface, with a clear distinction between the active part of the interface and the menu bar. In the end, this resulted in too much light being emitted from the display at night, possibly impairing our user's sleep.
This meant that later, the interface was simplified to be all-black, so it would emit as little light as possible. This had a few consequences, mainly for typography, since the copy should still be legible. To compensate for the extreme contrast, I changed to use the Heebo typeface, because it is highly legible. I also increased the overall size and leading throughout the system, and used a lower amount of different levels in typographic hierarchy.
For all the Sleep related screens, we procedeed to add a blue 'glow' to give more of a night feel to the screens. Also, this is where we decreased the light emitted by the interface even more by reducing fills to strokes.
Some examples of the new design style
For the digital clocks in the system, I could not find a typeface that exactly suited our needs. This is when I proceeded to design my own custom typeface for the first time, something I always wanted to do. It's called Clock One, and currently only includes numbers and a colon, but I am planning to expand it in the future.
To match the iconic, friendly design of the Circa device, I customly designed a set of icons for the interface. They are intended to give the digital interface the same friendly feel as the outside, by being rounded and simple.
The front of Circa is the clock, for which I designed a number of clockfaces for the users to choose from.
Some examples of Circa's clockfaces
After succesfully raising over €150k in crowdfunding, Circa is on its way to production. In 2018, Circa was awarded a Dutch Design Award in the Product category.
During the process, the team developed a custom sensor that goes under the mattress to measure heart rate, respiration rate and movement, in order to determine in what phase of the sleep you're in.