ERG Data APP UI Redesign Experiment

This exercise was part of a UI/UX workshop I hosted at Gray Loon where each member of our creative team was challenged to take an existing user interface from an app or website, and re-imagine it.

I chose the ERG Data app which is an iOS and Android app that connects to Concept 2 rowing machines via bluetooth and gives the user realtime feedback during their workout.

Roles

• Lead Creative
• Producer

Tools

• Adobe Illustrator
• Adobe After Effects

Before

Following is the current ERG Data app available in the Apple App Store and Google Play store. I find the interface very blocky and uninteresting. Data is spread across several screens, and swiping between screens while rowing is very difficult. I wanted the interface to be more dynamic and visually pleasing as this is what you're looking at for 30-60 minutes while rowing.

Under the terms of the workshop we were allowed to bring sketches in that we had worked on ahead of time, then we had 3 hours to mock up our revised interface and present it to the group. I took inspiration from sport watches such as Garmin and Suunto for the bezel interface. These are common interface designs that your everyday athletes (runners, bikers, etc.) use to keep track of workout progress. I also wanted to show peaks on some of the data feedback as well.

I would typically build out a UI like this in Adobe XD, however I chose to work primarily in Illustrator only for the fact that I wanted to animate the UI to better present how it works and Illustrator project layers import gracefully to Adobe After Effects.

After building the UI in Illustrator, I released all the layers to Sequence and imported to Adobe After Effects where I animated the UI to give the viewer a better sense of it's visual interface as it's being used. This was done with combinations of keyframe and Javascript expression animation.

---