Home

Daan
Weijers

e-mail me

Circa: A deliberately dumb smart alarm

Kickstarting a product to help people sleep better

Image of the circa alarm clock on a nightstand

In short

The situation

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?

The outcome

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.

My role

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.


Jump to:

Research   Analysis & Synthesis   Industrial Design   Interaction Design   Visual Design   Current Status

Research

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.

General guide for healthy sleep rhythm, and opportunities for technology

Interviews

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:

  1. Distractions in the bedroom that keep you awake, such as TV or your smartphone.
  2. Going to bed and waking up at the same time daily, especially combining this with a social life & weekends.
  3. Current ‘quantified self’ technology mainly tells you numbers, not what you can do with these numbers
  4. The ‘snooze’ button
  5. Lack of general knowledge or misconceptions about secondary factors that influence sleep (such as alcohol, exercise and your diet).

Market research

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.

Various touchpoints of products competing in the sleep-market.

Research analysis & synthesis

Personas

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.

Image describing persona #1 -> a young, social person with difficulty keeping a steady rhythm and choosing sleep before social life Image describing persona #2 -> an older, less technological literate user that has trouble sleeping at night

Design philosophy

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:

A pyramid of importance describing the design philosophy that was kept in mind while designing circle. From the base up: No distractiosn & privacy centred; Design for regularity & rhythm; Offer insights & educate; Aid sleep; Other functionalities.
  1. No distractions. Our product helps people sleep. It should never distract them from their sleep.
  2. 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.
  3. Design for regularity & rhythm. Rhythm is the most important. The product should reflect this.
  4. Insights & educate. Too many products just give numbers. We want to provide people with ways to actually improve their sleep.
  5. Other functionalities.

Key features

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:

  1. Setting alarms with the freedom people are used to nowadays. This means repetition, multiple alarms for different days of the week, etc.
  2. 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.
  3. Provide insights into sleeping habits and how to improve on them.
  4. Beautiful clockfaces, displayed on a special OLED display to limit the amount of light emitted by the device.
  5. High quality audio to wake people with nice sounds and music from their favourite radio stations and artists.
Image describing the key touchpoints of Circa

Industrial Design

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

Interaction design

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).

Moving images showing the main interactions of Circa

Physical prototype

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.

Picture of the lasercut prototype

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.

Clocks

The different clockfaces Circa. Also the screen Circa returns to when idle.

Alarm

Setting, changing and deleting alarms.

Sleep

To gain sleep insights, as well as finding aids to fall asleep at night.

Music

(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.

Moving image of different interactive explorations of the menu in Circa

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.

The development of the contextual menu in the wireframes

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.

Sketched wireframes for the sleep information

Visual Design

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.

Early versions of the visual design

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

Custom typeface

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.

A display of all the numbers in Clock One

Iconography

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.

A display of all the numbers in Clock One

Clockfaces

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

Current Status

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.