SimpleTimer: Stopwatch and timer app

A personal UI design project for SimpleTimer, a minimal iPhone stopwatch and timer app inspired by the circular design of a hair product. Covers concept sketching, minimal UI design and a landing page.

SimpleTimer iphone app featured

Inspiration can come from anywhere

I originally got the idea for SimpleTimer by looking at the design on a hair product and thinking I could adapt those circles into something completely different.

Hair product with circular design that inspired the SimpleTimer app concept

Quick sketches and concepts

I challenged myself to come up with as many different concepts and variations within 10 minutes. From there I refined a few and chose the design I thought had the most potential to push further.

Quick pencil sketches exploring timer app concepts and circular UI variations

From idea to execution

When I first had the idea to use elements from the hair product design I had no idea how it would turn out. By timeboxing yourself to 30 minutes to test an idea, you can explore different directions without wasting too much time.

SimpleTimer app showing progression from early concept sketch to final screen design

Design with the absolute minimum

I was looking through the App Store for a simple timer but couldn’t find anything that did exactly what I wanted, so I decided to design one myself. On this screen you rotate the hour and minute sliders to where you want them and press start. Simple.

SimpleTimer iPhone app default screen showing hour and minute rotation sliders
SimpleTimer iPhone app set screen showing timer ready to start

Remove all unnecessary elements

When the timer is running, the hour and minute sliders disappear as they are no longer needed and to prevent accidental interaction. Minimal design is challenging — you have to keep asking yourself “Is this element really needed?”

SimpleTimer iPhone app running screen with sliders hidden during countdown
SimpleTimer iPhone app done screen showing timer completion state

Simple landing page

I created a landing page to help promote the app and hopefully increase downloads. No logo, no navigation, no footer. Just the app.

SimpleTimer app minimal landing page design with no navigation or footer

Final design

Here’s a quick mockup of how the final design looks on an Apple watch and iPhone. I find by providing clients photorealistic mockups in context it helps them to visualize with how the finished product will look.

SimpleTimer app final design mockup on apple watch
SimpleTimer app final design mockup on iPhone

Let's collaborate

If this sounds like the way you like to work, get in contact to tell me a little about yourself and your project and I'd be happy to help. Send me an email at hello@richmcnabb.com.