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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Christian Hauptmann

UX/UI Designer from Berlin. Working as a Solution Designer at A EINS Digital Innovation GmbH. Please see my Portfolio here: www.christian-hauptmann.de