Looper

  • Aden Blue Stanners

Looper is an app built for runners. It creates laps with the mileage of your choice, so that you can cross the finish line right outside your front door. It is dynamically designed with the user in mind, it has a minimal layout so that the user can start running straight away. I wanted to design the app so that the motivation to go for a run is not lost, you tap three buttons and you are ready to go.

Existing UX/UI Problems in running apps
  • Unable to create laps that are set by the user to their desired mileage.
  • Over crowded UI design creates too many variables. More time is spent in app than is necessary.
  • Dull UX design takes away from the dynamic experience of going for a run.
I wanted the design behind Looper to match the mindset you are in before going for a run. It needed to be dynamic yet simple. I created each button from scratch and added a feature that suggests a mileage for a run so as to take away the users time spent deciding. The user also has the option to set their own distance.
In terms of font, I used Barbatrick for the Looper logo and mileage buttons, I made this choice because of the rapid and fast nature it has.
I wanted to keep the users journey clean and simple, above are the only screens the user will have to go through before they start their run. A few taps and they are ready to go.

The image below shows the custom interactions I created from the loading page to the beginning of the run. The buttons are highlighted when they are pressed so it is confirmed how far you are running. There is no confusion or thinking time involved.
As the map will be the most useful visual aid for Looper, I decided to make a custom one using the Sketch maps plugin. I used neon style colours inspired by the film Tron, the whole film is based around speed and I wanted to convey that.