AI-driven workout app improvements

Typography

With a variety of use cases, taking control of typography across the whole product was a challenging task. Process of discovery itself took a while, but with a responsive development team it was easy to focus on key parts of the problem:

  • Too many naming conventions, resulting in discrepancies between what’s in Figma and what’s on GitHub

  • No legible library with clear hierarchy

  • Multiple files and incomplete libraries

What resulted was a single, clean file with a hierarchy anyone can understand:

  • Base - which consisted of headlines used throughout the app, body, labels and caption text

  • UI - which was created specifically for component-specific use, like buttons, navigation etc.

  • Forms - one system for all forms!

  • Workout - with typography used for Workout Experience, clear and legible for the user

  • TV - just like above, but for second screen experience

  • RTF (Rich Text Format) - which was used to take control of 3rd party tools utilised throughout the app, such as Contentful

Pause screen

During a workout using Hero app, the user needs to be able to pause, skip, and leave the experience in a clear, and intuitive manner, ideally with an easy learning curve.

Thus, together with Head of Product, we embarked on a journey of creating the most successful pause screen we could.

Result was something of a hybrid between Netflix and Youtube, where user can utilise their existing experience with pausing and skipping, which in testing proved to be the best solution.

More materials from my time at Hero available upon request.