– Building, maintaining and evolving

design systems.

Role

Owner & contributor

Team

Designer
Frontend Developers

Tools

Figma

Company

Appvestor

– Project overview

Who is Appvestor?

Appvestor, formerly known as Calldorado, is a Danish company focused on mobile app growth and monetization. It offers a revenue-sharing model that funds and manages user acquisition for Android apps, with no upfront costs or loss of ownership. To qualify, publishers must integrate one of Appvestor’s two SDKs, which enable monetization and tracking for campaign performance.

Project beginning

In 2022, development began on My Appvestor, a new platform aimed at serving app publishers. Due to tight deadlines, the initial version was built without the involvement of a product designer. In parallel with the development, another designer created a UI for the platform; however, it was built without a design system or reusable components.

The challenge

As the platform grew, it became clear that the absence of a cohesive design system was negatively impacting both the user experience and the team’s efficiency. Each time a new feature was introduced, components were built from scratch, often duplicating work and resulting in inconsistent styles tailored to individual functionalities. This fragmentation also made it difficult for new designers to contribute effectively.

– The approach

From Audit to Rollout: Building a Consistent Design System

I joined the project in 2023 to provide design direction and bring structure to the platform, guiding the work through the Double Diamond framework: Discover, Define, Develop, and Deliver. My focus was on translating the existing UI into a scalable, reusable design system and refining components to enhance clarity, consistency, and usability.

To achieve this, I led the effort in each phase of the Double Diamond:

  • Discover: Audited and documented all existing components and use cases to uncover gaps and inconsistencies.
  • Define: Synthesized findings into clear requirements and design principles, recreating outdated or inconsistent elements with standardized versions.
  • Develop: Worked closely with Frontend Developers to align the Figma design system with the tools and frameworks they were using. Together, we established a shared naming convention and ensured that components in both design and code reflected the same structure and logic. This alignment improved cross-team collaboration and streamlined handovers.
  • Deliver: Rolled out the new design system, accelerating onboarding for new designers and significantly improving design consistency across the platform.

– Outcome

The design system

As a result of this project, I developed a comprehensive design system consisting of several key elements:

  • Brand guidelines including color palette, typography, logos, and illustrations.
  • Spacing and layout guidelines to ensure visual consistency across all screens.
  • A cohesive icon pack.
  • Defined rules for borders, corner radius, and other UI details.

Alongside the design system, I created a component library where these style guidelines are applied consistently to all UI components. Each component is accompanied by clear, well-documented usage guidelines, detailing how and when to use it to maintain a cohesive and user-friendly interface.

Internal design system

Following the successful rollout of the My Appvestor design system, I extended my focus to Appvestor’s internal platform; a suite of tools and data insights used by employees. Upon assessment, I again identified a lack of a unified design system, resulting in inconsistent visual styles across the platform.

Recognizing the need for standardization, I initiated the development of a design system tailored for the internal platform. Leveraging Bootstrap as the foundational framework, I explored existing Figma libraries compatible with Bootstrap to expedite the process. After evaluating several options, I selected the most suitable library and customized it to align with Appvestor’s branding and the platform’s specific requirements.

Given resource constraints, a complete overhaul of the existing UI was not feasible. Instead, the primary objective was to streamline the design process for future projects, ensuring consistency and efficiency in UI development moving forward.