amp is connected fitness startup that is developing a product for adaptive strength training. Their fitness hardware has a minimal set of physical controls to operate, with an iOS app thats intended to pair with the hardware to provide users with the full workout experience.
As a contract designer, I worked on the iOS app, specifically focusing on the in-workout user experience. I worked with the lead product manager, who defined product requirements and the physical training subject matter expert, who I collaborated with to take workout best practices and concepts and turning them into insights that influenced the user experience throughout the user journey.
The amp Home Gym is a smart, connected device that uses an IOS app as its main interface. I was tasked with designing the In-Workout experience, which included the Workout UI and menu, the Up Next/Rest UI, and the Movement List.
This flow had a few important user requirements: including showing exercise information clearly and quickly from a few feet away, intuitively allowing the user to see upcoming exercises and to pause or skip parts of their workout. From a business standpoint, we wanted to utilize best practices of gamification to create an experience that was fun and rewarding, to evoke a sense of accomplishment and progress.
I designed the full experience for workouts. I was inspired by other kinds of experiences that were primarily for viewing with minimal, quick interactions: GPS apps and video/music players. Like a video player, tapping anywhere on the screen brings up a simple set of controls to control your workout, tapping again hides the controls. Like a GPS, the main screen is minimal on UI and controls, showing just key pieces of information for easily parsing at a glance.
After we determined that the UI should be information-forward, I explored a range of different visual styles for information, controls, and surfaces. The client already had a brand font that they wanted to use for the UI, but I still had to established iconography, UI accents, a design system for hierarchy.
The Workout UI had a few key pieces of information that needed to be quickly understood by the user: the number of reps, the number of sets, the name of movement, set weight, and resistance mode.
There were two main user interactions: tapping on the screen to bring up the Menu and swiping down from the top to show the Movement List. There are also two minor interactions: tapping on the weight indicator to change the weight and tapping on the mode label to change the type of resistance.
Because there were multiple UIs that appeared from the Workout UI, we created a UI paradigm that spatially explained all the different UIs: a panel slides from top and another panel slides from bottom. I explored different menu hierarchies that prioritized various menu options. I also explored using key color to disambiguate tappable controls with just informational labels.
The Rest UI appears between different exercises in a workout and serves two purposes: to show the amount of time the user has to rest in between exercises and to show the user any adjustments they need to make to the workout device for the next exercise. This was one of the opportunities I identified for being a more playful and branded moment in the design of the app.
Animations play an important part of this user experience, especially since most of the screen is so motion-heavy. I created the following Figma prototypes to understand the UI transitions of key parts of the experience. The first prototype explores how the various UI surfaces appear on top of the Workout screen. The second prototype is an interaction idea I had for changing weights: we wanted to encourage users to increment their weight by 5 lbs but also give them the flexibility to increment more precisely by 1lb.