Using Adobe XD I created an interactive interface design concept for an iPhone GPS sports mapping application called 'Run Mapper Pro'. The purpose of the application is to record statistics on workouts for users to use both in real time during a workout and to have data to study after. I aimed to create a home page with features useful to motivate and give real time feedback to a user during a workout, including the heart rate monitor that is connected to a smart watch. The user is able to customise the look of the app by uploading their own images for each page. The link symbol connects to a Bluetooth sports watch to record heart rate and synchronize data to the application. Navigation has been designed to create a simple and intuitive experience.
an iphone with an app called run mapper pro

Photo of boy running by Admiral General M. on Pexels

When designing the RunMapper logo for the app, I considered that running is all about the journey and the time it takes. I decided to incorporate elements to reflect this, such as the tracking line connecting R to M, and the stretching of the U. The key values and words I came up with were: heart, health, happiness and connection. I used the heart symbol wherever possible in my designs for the whole app, and found it a fitting container to house the PRO typography.
Heart
Health
Happiness
Connection

Check out the interactivity by clicking above

Back to Top