Luís Perdigão

Project Overview

Cookbook is a design system I created from scratch to unify and modernize the design of a web and app product that had been evolving for over 10 years.

The product’s long history had resulted in a fragmented user experience, inconsistent design patterns, and inefficiencies for the design and development teams.

My goal was to establish a single source of truth that would ensure consistency, streamline collaboration, and make the product scalable for future growth.

As the sole designer on this project, I conducted a thorough audit of the existing UI, collaborated closely with cross-functional teams, and built a reusable component library with comprehensive documentation.

Cookbook was more than just a tool—it became the foundation for a cohesive and efficient design process, aligning the team’s efforts and delivering a better experience for users.

Problem

For over a decade, the web and app product had grown without a unified design strategy, resulting in a fragmented experience for users and inefficiencies for the team.

Inconsistent UI elements and repeated efforts to develop similar components created confusion, slowed down feature development, and made scaling the product increasingly difficult.

Both designers and developers struggled with the lack of a central reference point, leading to misaligned expectations and outcomes. It became clear that the product needed a design system to bring order, efficiency, and consistency.

Solution

To address these challenges, I created Cookbook, a design system built from the ground up to meet the unique needs of the product and team.

The process began with a comprehensive audit of the existing UI, cataloging inconsistencies and identifying the most commonly used patterns. From there, I worked closely with designers, developers, and stakeholders to define a cohesive visual language and establish shared principles for design and development.

Before diving into the components, I laid the groundwork by defining the core foundations of the design system, including grid structure, color palette, spacing, typography...

The core of Cookbook was a robust library of reusable components that worked seamlessly across both web and app platforms.

From simple UI elements - such as buttons - to more intricate structures - like cards -, Cookbook empowered teams to work efficiently and align on best practices, streamlining the design and development process.

Each component was designed with scalability and accessibility in mind, ensuring it could adapt to various use cases while maintaining usability standards.

To support adoption, I led workshops to ensure the system was practical, well-understood, and embraced by the entire team.

Outcome

Cookbook brought immediate and lasting benefits to the product and the team. It unified the look and feel of the user interface, creating a consistent experience across platforms that delighted users.

The design system played a crucial role in streamlining the app team's workflow. At the time, the company was undergoing a major transition, replatforming to Flutter to improve performance and scalability.

The reusable components significantly reduced design and development time, cutting production efforts by and enabling the team to focus on user problems and deliver new features faster than ever before.

Moreover, the system provided a strong foundation for scalability, ensuring that future updates and innovations could be rolled out smoothly.

Perhaps most importantly, Cookbook became a trusted source of truth for the team, fostering better collaboration between designers and developers.

With Cookbook, the team turned complexity into cohesion, building a scalable, efficient, and future-proof design system.

Building a Design System from scratch

Unifying a decade of design across web and app

Date

Platform

Role

Project Overview

Problem

Solution

Outcome

Luís Perdigão

Product Designer

Other projects

Redesigning a main engagement metric

Combining liking and saving in one user action

Designing a personalised experience

For you: a feed to discover content you'll love