FinTech — SaaS

Yaydoo Design System: +40% Productivity in 3 Months

Design system for Yaydoo. Organized 6+ products with brand and usability inconsistencies. Built Grill Design System with engineering team.

Impact: +40% productivity
Timeline: MVP in 30 days

Grill Design System by Yaydoo — the design-system library that unified 6+ Yaydoo fintech products, shown as a Figma file alongside live invitation email, payment reminder and calendar components

Grill Design System was born out of the need to organize 6+ products from Yaydoo's portfolio into a single, consistent brand and product experience.

Challenge

Optimize product development times

Having 6+ products, MVPs and business ideas with a growing team of 50 to 150 people is a big challenge to maintain consistency as a brand and final product. Considering that the design team was just created, how to support all products at the same time?

I want to grow as Yaydoo

Results

+40% productivity increase in engineering squads.
Uniformity on 6+ products.
+35% conversion rate from Marketing.

The team

4 developers
1 product designer by Comandos
2 UX/UI Designers

Grill Design System in use — Yaydoo Figma library powering invitation emails, payment reminder frequency and admin UI across the product suite

Adventure

Understanding the Yaydoo context

Eight logo variations across seven Yaydoo B2B SaaS products — porCobrar, Vendorplace, Fcard and YAYDOO shipping — the brand inconsistency the Grill Design System was built to fix before the Series B and the eventual Paystand acquisition.

Getting ready: Where are we? and What will we need?

We quickly realized that Yaydoo had a great brand and product inconsistency that was reflected in the User Interface of their products. In addition to identifying these inconsistencies, we detected the lack of clear User Personas and Proto-Persona. Considering that their workforce grew +140% in less than 7 months, we knew we had to act quickly to grow conversion, product usability and brand consistency.

Seeing the mountain

Where do we start?

After putting our neurons to work, we identified 3 opportunities that help us make a quick impact.

We are recognized by our users: : Do you know who Yaydoo is? Do you recognize their products?
Leads acquisition: : Do customers who use several Yaydoo solutions, such as porCobrar and Buyer, feel that they are part of a suite?
Internal Social Selling: : How do we get the product + engineering squads to adopt the Grill Design System? How do we involve the Marketing team? How will we positively impact the Quarter's OKRs?

STEP 01

Start with branding unification

We brought together Business, Marketing and Product in a single squad with a single goal: a unified brand under a single management. This was immediately reflected in a +15% increase in traffic and leads for Yaydoo products.

This was the result of 3 weeks of work with a dedicated team. We redesigned the company's narrative and began to translate it into Grill Design System, where Product and Marketing were already starting to show brand and communication uniformity.

STEP 02

The first steps of Design System for Product

Whenever we have to start a Design System from scratch we start with fonts, buttons, icons and inputs. This is the natural way to start positively affecting products and day-to-day implementations.

Grill Design System text-field library for Yaydoo — Inputs, Password and Select variants with chip groups, validation states and helper-text rules across all products

Key points of Grill Design System: first we validate with users in prototypes of the products. Once we validate that they have the correct behavior, we turn them into components.

Understanding the routine of external and internal users — product, engineering and marketing — was key to develop everything necessary. Everything revolves around making stakeholders aware of the importance of this system, developers adopting it as a habit and Marketing aligning all visual communication. It's not easy, but we like challenges.

Grill Design System typography hierarchy for Yaydoo — Display, Heading, Titles, Paragraph and Components styles with Desktop and Mobile behavior rules

Making top

A result that is measured in productivity

In 6 months we redesigned the entire Yaydoo product experience. Sprint after sprint we managed to increase usability and adoption of the products. We invested 3 weeks in a branding redesign which helped us align as a team.

Yaydoo finance-manager Proto-Persona — Julio Rodríguez, 27, Jefe de finanzas in Mexico City, with behaviours, attitudes, frustrations and motivations mapped for Grill Design System decisions — Julio Rodríguez — the finance-manager Proto-Persona Grill Design System was shaped around.

Grill Design System email anatomy — Vendorplace / Buyer invitation email documented atom-by-atom with content insets, radii, image sizes, font styles and button variants for engineering implementation — Atomic-design spec for every email — each atom, molecule and component documented for engineering.

Detailed anatomy of each atom, molecule and component.
Productivity: : +35% productivity in front-end development was the direct result of implementing this design system.
Social Selling: : +22% optimization of our users' time in job-to-be-done processes.

Measured in productivity, adoption and JTBD optimization

+35% productivity: Front-end development shipped faster after adopting Grill Design System.
6+ products unified: A single brand and design language across the Yaydoo suite.
+22% JTBD optimization: Users completed their job-to-be-done flows in meaningfully less time.