Ironhack Prework: Challenge 2
Wireframing a Task for Strava Running App
Reverse Engineering an App
As part of Ironhack’s Prework challenge to break down an app of my choice down to its core UI elements, I’ve decided to show the task flow of the Strava running app when performing a workout. To show this visually, I created the wireframes version of this task flow.
What are wireframes?
Wireframes are essentially a simple visual representation of how an application’s flow, weather being a mobile app or a website, is created using the most important UI elements. They represent the bare skeleton of the app’s functionality and aim to communicate its structure of your task flow.
Why are they important?
The reason designers use wire frames before creating the final hi-fidelity prototype is that wire frames quickly communicate the structure of your app’s functionality, and they let you focus on the UI (user interface) important elements. Because you only want to show what matters, anything that is not relevant is basically represented by a schematic that ultimately won’t add more clutter to your design.
For more insights about wireframing, I recommend reading the following article by the Interaction-Design Foundation below.
Why I chose Strava
As an avid runner, having run for over two decades now, with the onset of digital activity trackers, I’ve been using numerous apps to track my turns and display my activity metrics. For runners and cyclists, Strava a San Francisco-based tech company that focuses on tracking human exercise with social networking features, it has become the go-to-app to for these sports.
The Task Flow
As with many exercise trackers, Strava is no different in that it uses the smartphone’s technology of GPS and motion tracking to calculate your workout’s performance. For running this means pace, distance covered, and relative effort, if you are wearing a heart rate monitor.
When it comes to doing the workout, the app makes it effortless to start and go. All you have to do is to hit the “Record” button which takes you to the map screen where you’ll choose your activity (e.g., running, cycling) and then hit the start button.
To make this experience as seamless as possible, it really only takes a few steps to complete the task of doing, in my case, a run.
Steps involved:
- Activate the workout function by hitting “Record” button
- Choose your workout type while app locates you on the map via GPS functionality
- Start your workout
- Stop your workout
- Finish your workout to complete your activity
- Enter your workout’s key information (e.g., title your run)
- Save your workout and find it in your activity feed.
Lo-Fidelity Paper Wireframes
User Interface Elements Inventory
After my interaction flow using lo-fi paper wireframes, I’ve continued with the real fun stuff of reverse engineering the Strava App’s screens to create one wireframe in mid-quality per screen. To achieve that, I’ve decided to first take an inventory on all the key elements that I’m seeing to aid in the process of selecting the right wireframe elements to display.
Example inventory elements for the user interface include: Buttons, menus, input fields, links, maps, and other items for key functionality. Below is an example of an inventory I took from one screen.
Wireframe Kit
Thanks to a wireframe kit, it is easier to design the UI elements for the individual wireframes. That way you don’t have to start from scratch. Luckily, the design community offers many wireframe kits out there that include the most common elements for a wireframe. I’ve opted to use in part, Ironhack’s Figma wireframe kit for my iPhone 12.
Figma is a vector graphics editor and prototyping tool which is primarily web-based that many UX/UI designer use in order design, prototype, and collaborate with their team.
Wireframes of Strava App
Below are the six screens I turned into digital wire frames. Up next, I used Figma to create a prototype and add interactions to it.
Interactive Prototype
For the prototype, please click on the window below. Again the task flow is that of a runner recording a working, stopping the activity, finishing the activity, edit some details and save. Try it out. :)
Conclusion
Overall, I really enjoyed this challenge, as it showed me what visual elements make up an app and how these elements determine the user flow. By inventorying all the UI elements, it informed me ahead of time what I will need to find inside the wireframe kit to get started. The nice thing about the tool Figma is that I can re-use elements, so don’t have to start from scratch when designing from screen to screen.
I’ve also enjoyed the speed at which you can quickly check out the kinematics of your app by turning your wireframes into a digital prototype and test it yourself.
As far as running goes, I will be logging in many more miles these next months, as I am training for another marathon coming up soon. I will be using the Strava app, of course, but I will enjoy the benefit of using my Garmin Forerunner smartwatch to automatically sync the workout to my app.
