Outdo: Design Breakdown

Replacing pencil-and-paper at the gym

Pitch

Walk into a gym on any day of the week, and you can find a number of regulars tracking their workouts via the ancient pencil-and-paper method. Given that most of them do, in fact, have their mobile devices right in their pockets, you may wonder why these devices don’t get used for tracking purposes.

Being regular gym-goers ourselves, the problem became apparent to us after failing to find a proper pencil-and-paper type of tracker app. The apps that were available to track workouts were bogged down with features. Features that did not focus on workout logging, but rather centered around extras, such as customizing a workout, sharing a workout, having a workout created for you, getting in contact with an e-trainer, and so on. The number of steps to jot down a workout became more time-consuming than doing the exercises themselves.

Goal

An ideal gym tracking app to replace pencil-and-paper would need to do the following:

• Track the exercises you do today.
• See those results the next time you’re at the gym.

Use Cases

• Go to the gym, begin a workout, track your sets.
• Track reps x weight.
• Track time.
• Track custom exercises.
• See previous results for an exercise.
• Spend minimal time doing any of the above.

Breakdown

Our key irritant with other apps and thus motivator for our own became centered around that last point: spending as little time jotting down our workout. This meant cutting down the number of screens accessible at any given time.

We narrowed it down to two screens: one for an overall workout list, and another for exercises and exercise data. The majority of the app would revolve around the second screen — the exercise screen.

Exercise Screen

• A vertical list allows for no cap on number of exercises.
• New exercises are added to the end, and can be rearranged fluidly.
• Allow enough space horizontally to fit long-name exercises.
• Easy readability of exercise names by reading along the left margin.
• Ability to scroll through extended log data horizontally, separate of the exercise name, keeping the associated exercise name visible.
• Autocomplete for common exercises

Exercise Input

• Custom keyboard designed to allow for all common characters used for workouts
• Freedom of notation. By allowing log entries to be stored as strings, users are free to choose among many logging styles, such as “10/20", “10x20", “10 lbs x 20", or “20 x 10 lbs”.
• History: past results are visible in the same view as your current day.
• Double tapping a cell with a previous day’s result will auto-fill the cell with the previous day’s data.

Calendar

• A small scrollable calendar at the top provides easy access to previous dates. Common use cases require viewing at most one or two days’ data.
• Users are not restricted to entering data to the current day and can add data for previous days easily.
• Days that have logged data are visually differentiated from those that do not.

Workouts Screen

• Once the majority of functionality was covered by the exercise screen, only support for multiple workouts remained.
• A simple gradient list-view was created.
• Dates on the right would show the date of the last workout.
• Swiping a workout row left/right would allow for editing or deleting a workout, respectively.
• Workouts can also be rearranged.
• Tapping a row takes you to the respective exercise screen.

Programming Language

Haxe and the Lime/OpenFL framework were used to create an application which could run natively on both iOS and Android platforms. It allowed for a fast frame rate of 60fps, a custom interface and the handling of local storage painlessly. Previous experience with the Haxe language and its write-once-and-deploy to native Android and iOS capabilities also contributed to our decision.

Obstacles

Poor native UI support

An OpenFL bug was discovered for iPhone where hitting the iOS dictation on the native keyboard would crash the app due to a graphics bug.

Solution: We (temporarily) opted for a custom keyboard for workout names and exercise terms.

Flat-design is hard to sell on Screenshots Alone

The design may look quite basic in static screenshots.

Solution: We created an interactive webpage at outdoworkout.com to better convey all the benefits of Outdo. We are currently developing a video to better display the sleek colors, interactions and animations.

Conclusion

We hope you enjoyed reading our design breakdown. You can check out the final product Outdo at http://outdoworkout.com/

And if you are a regular gym-goer yourself, or know of someone who is, we’d love to hear feedback!

Danny Yaroslavski is the co-founder of Outdo as well as the CEO of Lightbot. This piece was written and edited in collaboration with fellow Outdo co-founder Dalya Gershtein.