Full Project Work
Creating a Design System is not an overnight task. It is also never truly finished due to its ever-evolving nature and the need for ongoing maintenance. We knew that in order to design a solid and efficient Design System we needed a cross-functional collaboration. That’s why our team consisted of UX/UI Designers, Developers, and Marketing.
A design system not only impacts your design team but also everyone in your organization. This helps to speed up processes, improves customer experience, and eliminates inconsistencies. This also applied to our brand voice guidelines. Whether you are talking to an internal or external audience, you will have the tool and insights to create a message according to Applaudo’s brand personality.
Create a strategy for a new product
Define an MVP scope
Unify components for four different products
UI/UX Designers: Boosting work speed, construction of wireframes, mockups, and the prototyping of ideas faster and easier.
Developers: Faster and less tedious work, more consistency across products, and a standard base from where to work.
Product Owners: Ideas converted into testable prototypes faster. A well-defined guideline from where to get a source of inspiration.
QA Engineers: Testing of the design system’s individual components will be pre-approved and only its integration with the system will have to be revised.
Marketers: Consistent messages across multiple communication channels.
Everyone: Practically everyone can benefit from a more structured way to create and develop ideas into action.
We started off by understanding what we had in front with a UI Audit, carefully inspecting internal and external products to identify what could be reused and what could be improved from these products in order to adopt a Design System that fits their needs. In parallel with this, we ran a survey within the previous product teams to gather their feedback about the overall process and pain points to solve.
These insights allowed us to define priorities for our MVP and start building the first part of Clapp: The Figma UI Kit. This included reusable styles and components to be reused by other designers and speed up their process.
Having a solid library aimed at designers, we moved on to the bridge between design and development teams: the documentation. We were able to tackle the most important components of the Design System with a detailed overview of each component’s states, anatomy, usage, and best practices, but also includes a robust set of brand voice guidelines that can be used by anyone on the team.
All in all, the hard work paid off and now we have a single source of truth for any internal or external product in our future ahead.
Design Principles to guide us
Extensive Figma UI Kit
Detailed and easy to use documentation
"We were growing fast and it wasn't easy to keep branding consistency across our products. Clapp won't only do that, but will also enable us to keep our branding identity and brand voice aligned for every new Applaudo project, streamlining our in-house processes with quality and a single source of truth."
Head of Marketing