Fusion Design System

Geofusion is a leading provider of location intelligence solutions that empower businesses to make data-driven decisions by leveraging geospatial insights since 1996. The company offers a range of products designed to help organizations optimize their operations, marketing strategies, and customer engagement through the analysis of location-based data.

2023: Me showing some UI for the stakeholders at Geofusion headquarters in São Paulo.

In 2023 I joined the company to be the product designer responsible for the innovation area and run more comprehensive projects that impacted all of the company’s products, such as the Design System.

Main Tasks

In the project, I led the initiative to develop the company’s first design system from scratch together with 3 other product designers.

1. Research and Discovery: Don’t reinvent the wheel

For our research, we only did desk research on other design systems (benchmark) and strategic and tactical alignment with company leaders, mainly all those who would be directly impacted by the Design System, such as PMs, POs, Tech Leads and developers.

Benchmark: Learning from the best

The findings of our research revealed a diverse array of design systems, each with its unique strengths and characteristics. Among the most notable contenders were:

1. Material Design (Google)
2. Carbon Design System (IBM)
3. Spectrum Design System (Adobe)
4. Ant Design (Alibaba)
5. Tailwind CSS (Open Source)
6. Lightning Design System (Salesforce)
7. Human Interface Guidelines (Apple)

Main Learnings

Throughout our research journey, we uncovered common themes and best practices that contribute to the success of these design systems:

• User-Centric Approach: The most popular design systems prioritize user needs and experiences, striving to create intuitive, accessible, and inclusive interfaces that delight users and drive engagement.
• Cross-Platform Compatibility: With the proliferation of devices and platforms, design systems that offer seamless experiences across web, mobile, and desktop environments gain a competitive edge, enabling companies to reach a broader audience and maintain consistency across touchpoints.
• Collaboration and Community: Design systems thrive on collaboration and community engagement, leveraging the collective wisdom and contributions of designers, developers, and other stakeholders to evolve and improve over time.
• Documentation and Education: Comprehensive documentation and educational resources are essential for the successful adoption and implementation of design systems, empowering teams to understand, utilize, and extend the system effectively.

2. Scope and Objetives: Design System as a Product, not a Project

The company believed that implementing a design system would be a valuable strategy because we could obtain the following benefits:

3. Creating Design Principles, Tokens and Components

Design Principles

After our learnings, we developed three core principles: Consistent, Simple, and Flexible, that serve as the foundation for creating intuitive and impactful user experiences. These principles emphasize the importance of maintaining consistency between design and code, prioritizing clarity and ease of use, and fostering adaptability to diverse scenarios.

1. Consistent: What’s in code is in design

• This principle emphasizes the importance of maintaining consistency between the design and development phases of a project. It ensures that what is specified in the design is accurately reflected in the code, and vice versa.
• In practice, this means establishing a seamless workflow between designers and developers, with clear communication channels and tools to bridge the gap between design mockups and implementation.
• By adhering to this principle, teams can avoid discrepancies and discrepancies between design intentions and the final product, leading to a more cohesive and polished user experience.

2. Simple: Clarity in Complexity

• The principle of simplicity advocates for clarity and ease of use in design solutions. It emphasizes the removal of unnecessary complexity and clutter to create intuitive and straightforward experiences for users.
• In design, simplicity can be achieved through clean layouts, clear navigation, and minimalistic aesthetics. It involves prioritizing essential elements and removing extraneous features that may confuse or overwhelm users.
• By embracing simplicity, designers can enhance usability, reduce cognitive load, and foster a sense of clarity and focus in the user experience.

3. Flexible: Adaptable for Every Scenario

• Flexibility in design refers to the ability of a system or interface to adapt to different contexts, devices, and user needs. It involves creating components and layouts that can accommodate various use cases and scenarios without sacrificing functionality or coherence.
• A flexible design system provides designers and developers with the tools and guidelines to create adaptable and responsive interfaces that can scale and evolve over time.
• This principle encourages modular and reusable design components, as well as guidelines for responsive design techniques such as fluid layouts, media queries, and breakpoints.
• By prioritizing flexibility, design systems can empower teams to create versatile and future-proof solutions that can withstand changing requirements and technological advancements.

Global Tokens: Few tokens to rule them all

Design tokens are individual values that represent design properties in a design system, such as colors, font sizes, and spacing. They are defined once and can be reused across multiple components and projects, ensuring visual consistency across the platform.

By using design tokens, our developers and designers can work together more efficiently and consistently, reducing the need to constantly redefine design properties.

• Line Height
• Font Size
• Border Radius
• Border Width
• Opacity
• Shadow
• Spacing
• Spacing Inset (Padding)
• Motion Tokens

Brand Tokens: What changes between products

Brand Tokens encapsulate key brand attributes, such as colors and typography, providing a cohesive framework that guides the visual representation of our products. By embedding Brand Tokens within the broader Global Tokens ecosystem, we establish a unified brand language that permeates every aspect of the user experience.

Base Components: Those who are indivisible

They are the smallest parts of our interfaces like a button, a checkbox or a title. They are strongly present in our Core libraries, but nothing prevents a Base Component from also appearing in a team library.

We list these components below as essential for starting work. They would be built and revised over time:

4. Documentation

We have structured our design system documentation into 5 major chapters:

Final Documentation

The final documentation was delivered with a total of 58 well-curated and illustrated pages for everyone in the company. The document would be revised as necessary.

Read the Documentation

The documentation was originally created within Figma but created in a format that was easily exported to PDF. We did it this way on purpose so that it could be used as a bedside book for any consultation.