My second Ironhack challenge: Wireframing a frequently used app

María Alejandra Pérez
3 min readNov 24, 2019

--

I’m an Ironhack student and this is my second go at writing a Medium post. This time it’s for a Wireframing challenge (you can find my first challenge, based on Design Thinking here).

For this Wireframing challenge, I had to pick an app, select a task that can be performed with it and analyze its flow. I chose the Fitbit app, let me first make the disclaimer that I am not into fitness in any type of way, I really do not enjoy exercise and I suck at most (probably all) sports. Nonetheless I know that exercise is good for the body and soul, and I have been trying to use the app more frequently. In the past I have mostly use it to track my sleeping patterns (I am very light sleeper) and to count my steps, but with this challenge I wanted to check the Log Exercise flow, which I can imagine is one of the most used by the more avid Fitbit app users.

I used pen and paper to mock up the different steps the apps guide you through when you want to track your exercise. I went from the login page to the message you get when you stop tracking your exercise routine.

You can see below the flow:

Log exercise flow part 1
Log exercise flow part 2

Let’s now analyze the task flow:

The goal of the user is to register the exercise they are about to perform. The app allows the user to tell when the exercise is staring and when is ending. It is a feature mainly focused on tracking walking or running exercises.

The only recommend requirement to use this task, is that users should have a good GPS signal and when their exercise ends, they should be aware to tell the app to stop tracking their running or walking exercise.

From than information I build my task and subtask diagram:

Task and subtasks digram for the Log exercise flow

From my paper prototype and my task and subtasks diagram I went to Sketch and created Lo-Fi wireframes that I then took to Invision to prototype:

The challenge also gave me the chance to work again with Sketch and Invision, and reminded me that the main thing to keep in mind when using any wireframing or prototyping tool is order. Keeping everything tagged properly with a name, allowed me to maintain clarity and not going crazy by not knowing what each element was.

--

--