In 2023 we rebranded Viversum, as part of a Hummingbird Project, received new Backend while got rebranded for all frontends.
When the Backend had to be replaced, we had to make sure it provides all the essential functionality for the business. Then I had to come up with a strategy to rebrand the existing app platform, while the web needed to be completely rebranded in order to achieve consistency across all front ends.
Brand Strategy:
The brand goals defined by the Content team were clear – modernise the brand, bring more inclusion, should feel more personalised, which inevitable to bring younger customers. “Just a few weeks ago, we revealed the brand’s new look and narrative that undoubtedly resonates with both, loyal customers, and newcomers alike.”
Together with the Content team we defined the main brand colors. Then for the apps I defined the new color library which was meeting the requirements coming from the existing app multi brand. Then for the web, as part of Hummingbird Project, we already simplified the other brands’ colors, so that we could apply the library from the Viversum App to the Viversum web.
And here’s the initially provided brand colors, which went under some slight adjusting to make sure they fit in with the technical requirements:
Visual Identity:
First the general logo had to transform:
Therefore the app icon transformation looked like this:
Here’s how the color library transformation looked like:
The text styles also received an update to the new brand font – Figtree. In order to preserve the multi brand on the existing app, and to simplify the development work, I just transformed all existing text styles to the new style with a “algorithmic” approach.. It wasn’t as simple as it sounds, because the old brand was using 2 font styles:
- Merriweather, which is relatively thick serf text style, mainly used for titles. – the transformation here could not be literal, as the Figtree font family is slimmer, so instructions were “replace the font family, and choose the bolder version. Example if Nav Bar Title was Merriwheader 20 Regular, then transform to Figtree 20, Medium.
- Open Sans, which is regular sans serif, used for UI elements, like buttons and descriptions. – literal replacement of the font here was possible.
So in the end here’s how the text library looked like, with several small remarks for the developers, to potentially optimise:
User Experience Design Transformations:
- icons
- buttons
Input fields transition:
User Profile Screen transition:
Design Principles:
- Explain the design principles. Discuss how the new design aligns with the app’s goals and user needs.
Challenges and Solutions:
- Discuss any challenges or obstacles during the rebranding project and how I addressed them.
Results and Impact:
- Include metrics or KPIs that demonstrate the impact of the new branding on user engagement, retention, or other relevant metrics.
Team Collaboration:
- Highlight collaboration with other team members, developers, or project managers, emphasising how the rebranding project was a cross-functional effort.
Conclusion and Reflection:
- Summarize the success of the rebranding project and how it achieved its goals. Reflect on what you learned from the experience.