Clapp

Capabilities

Web Development

UX/UI Design

Engagement

Full Project Work

Technologies

Figma

Project Overview

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.

CHALLENGES

Create a strategy for a new product

Define an MVP scope

Unify components for four different products

Audience

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.

Approach

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.

RESULTS

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."

Daniela Bonet

Head of Marketing

We’re here for you.

Let’s do something together!

Current Time

sal

Calle La Reforma, C.C Plaza San Benito, local 1-3 San Salvador, SV

Current Time

tx

C701 Brazos Street. Suite #1600 Austin, TX 78701, US

Current Time

nc

128 S Tryon St, 21st Floor Charlotte, NC 28202

Current Time

chi

Cerro Colorado 5030, of. 309 Las Condes, Santiago de Chile, CL