Hero - Improvements & Prototypes
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.
