Wireframing
The Challenge
My task was to create a wireframe version of the user flow of a chosen app based on screenshots or high-fidelity prototype screens of such app. My final product should be a 5 screens’ interactive prototype built in Figma.
Although it was supposed to be a mid-fi prototype I came up with a whole design. I had this app idea in mind for quite a while and when I practiced in Figma it was obvious to use it anyway.
Methodology
At first I decided for the app Strava. It is a very nice app to record sessions and share those with other members in the community. It owns a lot of features for pros and amateurs and provides sports like cycling, running, swimming or yoga.
Since I am using the app but not all of its functions I wanted to create the same app structure and user flow but for cycling only and without the community aspect. Its simply for recording and evaluating stats for yourself.
User Flow
The user flow was supposed to be quite easy. From Log in over to the home page, followed by starting &ending a recording session and an alert callout at the very end.
UI Design Elements
You can find the following elements all over the application:
Buttons, Text fields, Info Boxes, Notifications, Pop Ups, Call to action, Icons, counters, to name just the important ones.
Wireframe
Please find my version of the Wireframe below. Due to the fact that I like to draw, it was much fun to work with the visual note taking technique.
Task Analysis
As you might spotted in my visual note already, the task analysis is based on simple facts. As mentioned before the app is supposed to be used by semi-amateur cyclists and provide stats only. Handling and recording should be intuative and easy to use. As a plus, a modern and stylish visual design is much appreciated.
Prototype
As I mentioned in the beginning the prototype was supposed to be simpler. Despite this fact I really hope that you like it.
Conclusion
Also this challenge gave me a lot of fun and I have learned and gained knowledge and experience.
