Client: Kounta
Description: Scaling design production
Role: Lead Growth Designer
Services: Visual Design | UI & UX Design
When I joined Kountas growth squad back in 2019, we didn’t have many brand systems or processes in place. The role required quick, iterative design and development on a regular basis. So, the front end dev in my squad and myself decided to build a UI kit to help support and scale our production.
In some cases, we had to explore new designs and solutions to help provide ourselves with everything we needed to successfully implement a brand design system. This system would work across all of our digital channels like emails, our website and other growth led projects. It also allowed us to easily scale production by outsourcing and growing our team of designers and developers.
Building a system of modules to help establish consistency across our website.
With so many designed landing pages and iterations based on learnings & performance, I needed a way to view assets as a library to help make designing wireframes easier and quicker to produce.
Each time I designed new assets, I would make sure they were documented and scalable. I then could build them out as components in Figma so that our dev team could access specs, images and other necessary information.
Documentation is critical when scaling production.
Building a UI kit from scratch meant that I could help define some details that would help us move forward quicker. This meant that I had to document these decisions and make sure they were created in a way that any dev team would be able to easily understand and reference the documentation when necessary.
This was a time consuming job, but it was one of the more rewarding as it meant less reliance on me to explain details like text justification, scale and colour systems etc.
The UI kit was missing something that would help tie it back to the brand.
With the fundamental UI components already built in Figma, it was time to focus on including our core brand elements to create a brand system.
Starting with simple components like colours, icons and CTA’s and working my way through more complex systems like shadows. Having these details all in Figma libraries also meant that when it came time to optimising and updating, it was a simple task of updating the library files so that every designer would be working with the most up-to-date assets.
Designing pages in Figma was real simple!
With all of the UI components built into Figma libraries, designing pages was super easy and fast. There’s a Figma preview below of a product page wireframe that was built using the Kounta UI components.