Design system for new visual identity

When getting a new visual identity it is my experience, that most thoughts and examples are made with marketing in mind. How posts on social media should look. Print material. Video ads etc. Design elements that look good on a fixed Instagram posts or posters, but can’t be used on responsive websites, where the users screen size and dimensions are never fixed.

This can make it difficult to translate a visual identity to a website - especially if the graphic elements have very strict usage guidelines. Even typography can be an issue. Eye catching text on a poster is different from readable text on a website. 

When I got approached for this task, those were exactly some of the concerns involved. It all looks good, but how can they use it when they don’t have the luxury of fixed dimensions and when no two pages or components have the same content?

UX audit and using graphical elememts to enhance

FitnessX is a chain of gyms, with a special focus on equipment, team exercises and “training buddies” - where one subscription allows two people to train at a discount.

With that in mind, my focus turned to the gym pages, the purchase flow and options, as well as team booking through the app. I looked at these pages and functionality through a UX lens. Simplifying components. Removing clutter. Defining a clear visual hierarchy. Performing a standard heuristic evaluation. Mapping out user journeys.

Then I turned to the visual guidelines and identified the key ares to focus on: Typography, colour and how to utilise the key graphical elements - and most importantly, how not to use them.