For the second challenge of the UX UI Design Course, I had to create a wireframe from an app I am familiar with and prototype it.
Wireframes give a simple visual representation of how the flow of the app or website will be. It aims to be simple, not minding the aestethics, with just enough details to get the idea of the app. The goal here is to create the skeleton of a chosen interface.
In this case I chose the Adidas Running app because I am a jogger and I frequently use this app to track my runnings and recently I decided to spice up my runs with some new challenges offered by the app. The app is quite simply designed with essential informations but I wanted to understand more the structure of it. I chose to do a flow of enrolling to a challenge.
Fitness apps are mainly used to track your workouts, learn about fitness and food but nowadays they tend to be motivational and community apps with sections dedicated to challenges and “social networking” with friends and fitness pals.
I wanted to understand the flow of joining a challenge group on the app and share with you my experience!
Wireframing at first
First of all, I created all of the wireframes, keeping in mind that I would have to connect all of the screens and prototype them later.
Once the wireframes done, I prototyped it using Figma and created a visual flow of how the screens work.
The UI elements :
- Icon button
- Progress bar
- Share buttons
- Pop up
To see my prototype on Figma, click here
Steps of the process
This prototype starts at the stage the user already has an account. Opening the app, the homepage is where the action starts. When clicking on the “community” button in the icon menu it brings the user to the “Community” page with different sections. The one we’re focusing on is the “Challenges” section. After clicking on the first challenge proposed you have a description of the process to achieve it if you scroll down and a button to join the chosen challenge.
Considering I’ve run 2 times this week, I decided to check how far I am from my 30km goal! So, when I pressed the go back icon on my phone menu, I can see now my progress bar increased. Ouch, 14.6km… not yet!
But still, I’m proud of this achievement and I decided to share it with my friends. So I clicked on the “Share your progress” button to have a recap of my achievement, I clicked on share at the right top corner. A pop up appears with different social networks’ options to share my progress.
There are still a few days left before the end the challenge, so wish me luck!
Thank you for reading this article :)