To & Fro • Design System – Gregory Padilla

Building consistency at scale

Problem

Small inconsistencies in a service can negatively impact the overall perception of a company or product. As the company grew, establishing standard design guidelines became crucial for maintaining a consistent user experience.

goal

We needed to create a design system to ensure consistency and organization, enabling us to scale efficiently in the future. A solid design system for To & Fro will maintain consistency across all design components, build trust with users, and allow for efficient implementation of design changes.

Solution: Modular design system

alignment

Align teams by providing a more structured and guided approach to development. 90% of the app now relies on reusable components.

speed

Accelerate our design and development process: with a ready-made library and patterns, teams can create and test layouts much more quickly.

Improve brand perception and trust

Enhance brand perception and user trust by delivering consistent experiences that cater to everyone, helping users achieve their goals.

Promote accessibility

Promote accessibility and inclusion in our products by integrating these principles into our component libraries, both in design and code repositories.

Build trust and ensure consistency by creating a design system for a new travel startup.

II. Research

What is To & Fro?

background

To & Fro is an innovative travel planning tool designed to streamline the collaborative trip-building process for travelers. This platform not only emphasizes the communal aspect of travel but also offers a "shareable card" for detailed trip documentation. It aims to create an inclusive travel community that allows users to discover destination insights from trusted sources, share and collect comprehensive itineraries, and organize trips with groups. To & Fro's core values include an obsession with detail, fostering curiosity, promoting personal ownership, addressing edge cases, and preserving the authenticity of travel destinations.

A new challenge

where do we begin?

This was my first experience building and maintaining a design system. With no prior background, I had to dive into best practices, draw inspiration from industry-leading design systems, and explore Figma's component capabilities to get up to speed.

Exploration and inspiration

review existing Design systems

Researching industry-leading design systems like IBM’s Carbon, Google's Material, Atlassian, Salesforce Lightning, and other design systems provided us valuable best practices, guidelines, and tools to apply to our own design system.

We began by mapping out all of our components, from simplest to most complex, and decided on optimal guidelines for design and implementation.

Refer to brand Style and personality

We drew from the brand style and personality we developed for our website to ensure a consistent experience from web to mobile app. This foundation put us in the right mindset for building our design system, leveraging our strong and distinct visual identity.

III. Final designs

Design direction

mapping components

We began by mapping out all of our components, from simplest to most complex, and decided on optimal guidelines for design and implementation.

foundations

Object agnostic definitions such as typography, colors, logos, icons, grids and spacing, and shadows, blurs and textures.

Buttons

All the various button types such as primary, secondary, filled, outline, text, payment, social etc.

forms

Building blocks for forms: search, input field, checkbox, radio button, switches, dropdown etc.

overlays

Elements that appear over the screen such as hints and tool tips.

A generic system architecture

optimizing for flexibility

Given the app's constant evolution, our secondary goal for the design system was to create a flexible architecture that could easily adapt to future changes. Collaborating with our product manager, we established a generic structure for the system by breaking down all elements into their most atomic forms. Key elements such as typography styles, colors, inputs, and buttons were designed to be context-independent.

For instance, we used generic names for typography styles, like "heading" instead of "card-heading."

This decision was crucial to the success of our design system. Using a centralized method of control simplified communication between cross-functional teams, and most importantly, allowed us to make changes effortlessly.

Similarly, our color palette was divided into system colors with various tints. This approach provided the flexibility we needed while being scalable for future expansion. If we ever want to change the main color of the app, we can do it in one place, instantly updating it across all components.

A system within a system

ease and efficiency

After defining a foundational system for colors, typography, and spacing, we focused on basic elements like buttons, inputs, and forms, as these serve as the building blocks for more complex components and flows.

With these basic rules established, creating new components became straightforward. Each new component came with its own guidelines, specifications, and behavior, building on the principles set by the existing components.

Using a button as an example, we applied our typography styles for the text, our color system to define colors for each state, and spacing presets to ensure scalability for various text lengths.

documentation

High-quality component documentation is essential for an effective library, enabling everyone to make consistent decisions quickly and efficiently. Our goal was to create detailed documentation that supports every aspect of our design system, ensuring it is organized, consistent, and easy to use.

Here, we introduce an input field with the following details: component description, construction, states, behavior, best practices, and examples of the component in various contexts to demonstrate the application of design patterns in real products and specific use cases.

The future

an ongoing project

We estimate that over 90% of the app as of now is built using components from the design system, with the remaining custom components being unique and not reused by other teams. This demonstrates the system's effectiveness in enhancing both development speed and consistency across all teams.

The design system is an ongoing project where we continually iterate, adapt, and learn.

Creating a design system for the To & Fro mobile app

I. Project overview