A rebrand for a fitness SaaS platform whose look had stopped matching its ambition: a new mark, a front end designed for their engineers to build, and an animation to introduce it.
MevoLife · Freelance, sole designer on the rebrand, with their engineering team building the site
Brand identity · Art direction · Image selection · Front-end design in Figma · Motion · Social
THE CHALLENGE
MevoLife is an all-in-one SaaS platform for the fitness industry. Coaches, personal trainers, dietitians, nutritionists, gyms and studios run their entire business through it, and their clients get an app at the other end.
The brand had stopped serving them. The aesthetic was dull and dated, and it was not speaking to the audience they were trying to win. For a platform selling energy and transformation to people who sell energy and transformation, looking tired is a problem you cannot argue your way out of.
WHAT I DID
Settled the direction before designing anything.
I worked the aesthetic out in style tiles first: type, colour, imagery and tone side by side, so the direction could be agreed before a single page was laid out. What something should feel like is a different conversation from what it should look like, and having it first saves rerunning the second one.
Built both halves of the business into the mark.
MevoLife serves the fitness side and the health side at once, trainers and gyms alongside dietitians and nutritionists. So the M is drawn as a heartbeat line on a monitor and as a dumbbell in the same stroke. One letter carrying both audiences, which is the strategy rather than a decoration on it.
Chose the imagery against stated criteria.
The photography is selected from stock, and a brand aimed at coaches and trainers fails the moment its pictures look like a stock library. So the selections were made on four things: whether the shot reads as candid rather than posed, the camera angle, what is actually happening in frame, and the energy and emotion it carries. The style tiles are what each one was judged against.
Designed the front end in Figma for their engineers to build.
I designed the site layout in Figma and handed it to their engineering team, who built it. Designing for someone else to build is a different job from designing a page: every state and every breakpoint has to be decided by you rather than resolved by them.
Animated the introduction.
An animated intro, so the brand had a way to introduce itself in motion rather than only on a page.
RESULTS
A new identity, from style tiles through to a mark carrying both sides of the business
An image direction, selected from stock against the style tiles
A redesigned front end, designed in Figma and built by their engineering team
Social banners carrying the same direction
An animated brand introduction
A rebrand is only worth the things made after it. The mark had to hold two audiences in one letter, and the site had to be specified tightly enough that engineers could build it.
Back to the agency, and an identity that came from reading the mood in the building.
View FleishmanHillard 75th Anniversary