Introducing the new generation running app – with this approach PUMA fired the starting pistol for a sophisticated and innovative design which had to be built from scratch. With PUMATRAC runners should be inspired and challenge themselves to reach their next milestone.

Wireframes

iOS App

User Flow

iOS App

Strategy & Concept

Reframing a running experience required various discovery and conception phases, detailed research, different user experience solutions and countless scribbled wireframes. A first thought of processing into a gamification direction was discarded soon – a minimalistic, straight forward approach made it definite.

For example all basic elements needed for starting a run can be found on the startscreen of the app. By tapping the run button the next workout starts immediately which spares users to navigate through run related settings.

UI & Interactions

iOS App

Milestones

Concept

One core challenge were the PUMATRAC Milestones. Little badges that can be achieved in various situations related to a run. A framework that works for multiple purposes had to be created.

Rough sketches outlined the design process before refining each of them digitally.

The digital environment

In addition to the PUMATRAC mobile app, the whole digital environment surrounding the app had to be built.

A responsive website to promote the app, a user backend to login and see runs online, a visually appealing content management system for the PUMA team and various social network items were on the list.

The user backend and content management system were done very cleanly whereas the promotional app had much more visual value. Both were built to extend at any point to emphasise new features.

Wireframes

Web App

UI Design

Promo Page

Client: Puma

Agency: LOOP New Media