Case Study
IdeaProduct DesignPrototype (Framer.js)

Intervals

Challenge

The ultimate act of yak shaving: In order to work out, obviously I wanted a better interval timer than I found on the app store. Something with minimal configuration, and a simple, attractive UI that you can glance at to reorientate yourself when you’re in the middle of burpees.

Hifi designs for each screen

Process

Based on experience with other timers, I wrote some Job Stories to capture the important moments that I felt could be improved:

  • When I’m about to start a HIIT session
    • I want to quickly initiate a clock to time my high and low intervals, with minimal setup
    • and I want to know how many intervals I’m committing to and how long it will take
    • So I can get on with my workout quickly
  • When I’m picking the interval durations and number of sets
    • I want to know how long a workout I’m committing to
    • So I can be sure I’m exercising for neither too long nor too short.
  • When I’m in the middle of an interval
    • I want to clearly see and hear when it ends
    • So I don’t mess up the timing
  • When I’m feeling pushed
    • I want to see how close to the end of the whole session I am
    • So I can feel progress, and know whether to keep pushing myself or ease off

Sketching

Sketches

Sketching out ideas for visualisations, and a rough flow between states and settings.

Flow

Full flow, showing that there will be a main screen and a settings screen, and what you can see/do in each state.

Hi-fi design

Flow

Moving to high fidelity, exploring visualisations and graphical styles

Flow

Finalised design. I decided to make the main screen heavily visually styled, and the settings screen follow the iOS guidelines for familiarity and ease of use.

Prototype

Animated UI mocked up in Framer. Try the interactive version on Framer Cloud.

Outcome

It’s just a prototype for now (though it works great on the phone), but I’m keen to start building it for real to learn more about the iOS ecosystem. I was pleasantly surprised at how the animations add to the fluidity of the interactions, and how easy they were to create in Framer.