Clara empowers companies in Latam to operate with financial agility and clarity.
Contribution
Design Direction, Product Design
Team
Katherine DC, Angélica T, Daniela D. Narciso M, Jonathan P.
As the fastest tech unicorn in Latam, Clara quickly proved to be a perfect fit in the Mexican market of corporate spend management. Its success led to expansion into Colombia and Brazil. However, during this rapid growth, features were added to the platform without considering future scalability, consistency, or standardization.
We found ourselves building new UI components and screens from scratch when other teams already had them, and building them inconsistently. We decided that in order to correctly scale our design practice, it was time to design and implement our design system. By doing so our goal was to ship software with more agility and quality.
Shaping new guidelines to boost the potential growth of our brand.
At the same time we realized it was time for our product to have a system to build, our marketing team started to struggle as well with our Brand awareness and recognition. Looking at our acquisition data, we started to see a plateau and slight decline in organic leads. One of the main reasons for this was that our Brand was not as strong as our competitors.
We joined forces with our marketing team to properly define our audience and value proposition as a company, and from this, we built new Brand Guidelines that covered a unified brand positioning, values, tone of voice and all our visual language like colors, typography, icon and visual styles.
Building an efficient user interface without losing our brand expression.
The first step our product design team did was to adapt the brand guidelines, so we could use them to build our foundations that included color palette, typography and layouts. The adaptations we did included correcting colors to ensure enough contrast and adjust type faces according to our platforms.
From these foundations, the team began to build components, document them, get feedback from our engineering and marketing teams and iterate. This was a long process that took around 4 to 6 months, since we audited our platform and listed all the components used, until we finished our figma library with all the components verified and correctly built.
The implementation in our new design master files
Another challenge was how to take the new UI library and update all the design files without breaking them and without stopping the ongoing product delivery roadmap. Our strategy was to keep building the product roadmap while our designers build completely new figma master files. By doing this, we also had the opportunity to implement design files standardization.
This design implementation process took around 2 months, and it was very helpful to adjust some components that once used needed to be improved.
The scope for this migration in UI includes not only our web platform, but our mobile apps as well. Our mobile design team worked very closely to make sure we also had a new design in our apps that was aligned to our new Brand guidelines.
See next project