Date: 2019
Role: Principal Product Designer
Role: Principal Product Designer
tl;dr
I designed a smartphone application that enables fitness enthusiasts to create personalized workout routines. Routines can be played back without the user having to interact with the touchscreen. Auditory feedback is used to indicate when the app transitions from one exercise to the next.
Brief
Repstack caters to intrinsically motivated fitness enthusiasts for whom fitness is a way of life. In other words: the fitness routine doesn’t serve any objective, but is the objective itself. Users are well acquainted with technology and exercise types and are overall “fitness savvy”. The aim of the app is to aide its users in keeping fit using workout routines created by the users themselves. The UI/UX design should be convenient to use during (intense) physical exercise. The design language should appeal to all users.
Deliverables
1. Provide a single UX/UI design for Android and iOS smartphone users that adheres to Material Design principles.
2. Provide appropriate UX writing.
3. Provide handoff documentation.
Background
Speaking with a variety of fitness enthusiasts Emkore Limited spotted a gap in the market: a solution catering to users that have an “infinite” fitness goal. Instead of losing an arbitrary amount of weight or being able to run an arbitrary distance, these users already have a well-established fitness routine aimed at the upkeep of their physical (and mental) well-being. Conducting interviews, we learned the following:
• Users with an infinite goal are fitness savvy, thoroughly acquainted with exercise types and have well-established routines.
• Most important feature is the ability to create customized routines with granular control of exercise type, quantity and duration.
• Interaction with a fitness app while exercising needs to be as simple as possible. Playing back a fitness routine needs to be possible without touching the screen.
User Experience
My first consideration was that workout routines consist of 2 “building blocks”:
1. Exercise: the user is doing something
2. Break: the user is doing nothing
Designing the inputs for the exercise building block was challenging considering the wide variety of exercises and types. To avoid excluding exercises we solved for the first by using free text input. As for types, we distinguish 2 basic types of exercises:
1. Repetition based (e.g. 12 push ups)
2. Distance based (e.g. 5 miles)
All blocks also have a time component to them in order to allow the user to automatically “playback” the routine and minimize physical interaction with the app during workout. A bottom app bar and center placed FAB makes it possible to engage the app with 1 hand during workout, if necessary. Once in playback mode, the app uses color as a visual cue to distinguish between exercise or break and 3 auditory beeps to indicate the start of a next block in the routine.
User Interface
Creating a palette for Repstack’s UI, I wanted to use color to amplify the user’s state of mind: yellow shades to represent action (fire), and blue shades to represent rest (water). To further emphasize the difference between rest and exercise I used different line patterns in the background to augment color semantics. Exercise blocks have a background resembling fire, while break block backgrounds look like water. The result is a clean and simple looking UI in which the user can easily distinguish between exercise and break blocks.
With the non-workout routine UI color palette being rather subtle, I used a typeface as well as in-app icons to add some accents to the user interface. For headers, I chose an all-caps typeface: Staatliches. This clean-cut display typeface was inspired by Herbert Bayer’s title lettering on the cover of the first Bauhaus exhibition catalog. Balancing the boldness of Staatliches, I went with Open Sans for body text. I used FontAwesome Pro Light for in-app icons. Rendering an outlined icon with 100% opacity on top of a filled icon with reduced opacity provided a unique look to in-app icons, adding some playfulness to an otherwise minimalist UI design.
Credit
Jonas Hartmann, Lead Developer