Just One Button: 5217

Brief: In Spring 2016, developer Francisco Franco and I set out to build an ultimately simple, minimal productivity timer called 5217. Guided by a post from the Muse, we created an app that tracks what the post calls the ideal productivity cycle - 52 minutes of work followed by a generous 17-minute break. Wanting to create a design study, a useful app that was more than just another timer, we set out to reduce the interface to its bare minimum components, creating a refined experience, carefully minimized color palette, and experimental but delightful design features.


 

The minimum

I always advocate the minimum - taking things away from a design is one of my favorite pastimes, reducing interactions, actions, and elements until an experience or illustration is just its essence. Removing things in a way that keeps the user comfortable and on a clear, successful path.

In 5217 we accomplished this by not adding anything from the very start. In fact we started with just this screen and one button and one TextView.

The text shows the number of minutes left, either in the work period (blue) or rest period (white). The button begins the cycle. In the rest period, it changes to allow the user to share their progress for the day.

The ellipsis icon opens a popover menu for settings or information, and the reset icon stops the cycle and resets the count up to 52.

IAL_Art-08.png

 

Palette procedure

The palette is really just three colors - white, blue, and electric green, the latter two being pulled from my Cosmic palette, originally published on the Dadapixel blog in June 2015. We wanted the palette to be saturated and eye-catching without being too distracting as you fall into the groove of working, in case you leave the display on for the full cycle.

IAL_Art-22.png

To help accomplish this goal, the interface transitions gradually as shown above, with the green FAB receding into a subtle blinking light and the bright blue background melting away to white. The text likewise transitions to blue, with the rest screen ending at a white canvas with blue lettering that's distinct, calming, and encouraging with random messages sprinkled in to boost your mood during your break.


 

Experimental design features

5217 stands out from most other apps, not only for its absolutely minimal interface, but for its experimental touches. Probably the most notable is that 5217 themes Android's system UI and visibly elevates it above the canvas.

IAL_Art-20.png

Google's material design spec notes that the system UI rests above all other elements, virtually painted on the back of the display glass. So it's always elevated, but not typically in a visible way (though some apps like Google Keep and Play Music do expose this elevation).

To keep the screen feeling like it was cut from one big sheet, we gave the system bars the same color as the canvas, but since they technically don't belong to the app, we visibly elevated them for subtle visual separation. We received mixed feedback on this decision, but ultimately it's one of the things that makes the app most distinct, and the feedback is an indicator that the experiment was a worthwhile one.

Another subtle touch the settings interface. Rather than resorting to a full-screen activity for settings, we opted for a modal interface. This was another feature designed to make the interface feel as bare and light as possible - we have just a few settings, and to make the interface feel even less intimidating, we changed the title to "options," a word that sounds more inviting and less technical than "settings." It's a very small consideration, but one that I think ultimately contributes something positive to the app's experience.

5217 is polished but not finished, and continues to evolve. Check it out on the Play Store to stay up to date.


 

I.

Work ✏️

II.

Podcast 📻

III.

Elsewhere 🎙️

UIUXLiam Spradlin