Design Refresh

A refreshed mStable identity

Introduction

Branding in DeFi for any user-facing and developer-facing product is an important but difficult part. This mostly stems from the very young age of the entire industry, the mostly young companies that test for product-market fit and seek to establish a brand in a continuously changing and rapidly evolving industry.

This article describes mStable’s previous approach and the recent changes, what problems we faced, and present the solution. This new refreshed design and branding will mark the beginning of a new era for mStable and be the refreshed face of our new products.

The need for a refreshed identity

The current mStable branding was created at the very beginning of the project’s life. Over time, the mStable brand became outdated and we felt that it was no longer representative of our vision and products. Our team has shifted significantly and did not represent the mStable that was there in the past. As the focus of the Team and the Team itself shifted, so did the mStable brand drifted to a new direction (compare landing page, dApps, and marketing material).

This was due to several reasons, some of which were mentioned previously:

• Products were not user-centered, user research and testing were absent.
• Low brand engagement since the brand does not convey a clear vision and messaging and it is reflected in its visual communication. It tried to convey different things at different times
• Early ventures, especially in DeFi, need to allow for flexibility as a product needs to adapt to the ecosystem

start from what’s important to us

When it comes to a brand, it always starts with the vision and the mission. In our approach, we put these together with our values first and established a strengthened team and processes for an ever-evolving brand.

For our approach several items were essential:

• We embraced a progressive refreshed approach that allows us to continuously evolve
• We don’t destroy and build on ruins rather we improve and reinforce our buildings
• We don’t know what DeFi would be in the next 5–10 years, so we need flexibility
• We leave an open door for community contribution and embrace a Web3 bottom-up approach

Design Process

For starters, a single source of truth about the brand is established: the brand book. This new brand book contains a refined color palette, refined typography, and refined graphic elements such as texture patterns. These refinements are based on the natural evolution of the visuals that were already present but establish guidelines to promote consistency.

Main palette

The work aimed to rebalance the brand upon its dark shades providing more depth with black variants and recalling the gold early stages of the internet. The blue colour has become prominent with the goal of providing a sense of stability and trustworthiness (essential for a finance company). In addition, grey shades have been used to support information and details.

Additional colours

In the past, these colours have been used to characterise products so we thought to be conservative and we worked to rebalance the additional colours making them able to live with the brand being more involved in our ecosystem.

Typography

On typography the old font families Poppins and PT Mono have remained, they are useful providing contemporaneity and utilities for different forms of communications whether they are purely numeric or more targeted for brand messaging. However, we felt the need to enrich the whole set by adding Tenor Sans font that is able to break the rhythm and characterise visuals.

Graphic elements such as texture-patterns

Graphic patterns have been created to provide visual movement, these are elements already used in the past brand language and we thought to keep and grow our libraries. There are two main modules that shape patterns. The first pattern is based on a dot or circle while the second is based on the asterisk. They both can be coloured with primary and additional colours helping visuals characterise the content.

This brand book is the foundation that defines a coherent design language for visual communication. Following this, our new set of banners and POAPs has been used to define a visual concept that creates more consistent designs:

Another example is here in which these guidelines are used for other marketing materials:

Last but not least, this very foundation is used to inform the visual language for the new app which is the portal to our upcoming mStable Meta Vault products.

Conclusion

A brand is ever-evolving to fit closer its narrative, and we will continue to work on brand positioning. This article describes the foundation for the coming products we launch and all visual assets around it.

With this we also want to establish a decentralised brand culture; while the brand guidelines define the outlines, the visual assets with community contributions can continue to evolve it. We are excited to embrace the community’s creativity and welcome you to join us in this decentralised approach.

To support that, we will open-source the visual assets via Figma, we continue to embrace community contribution and supply the visual framework we can all agree on. Following we also continue to embrace user research by involving more members in research sessions, stay tuned for that!