We are seeking strategic partners interested in designing and implementing a comprehensive design system to integrate with Experience Builder for Drupal CMS. The goal for this initiative is to create a modern and versatile design system that provides designers and front-end developers tools to accelerate their adoption of Drupal as their digital platform, by enabling them to easily adapt it to their own brand. This design system will enable content marketers to efficiently build landing pages and campaigns, allowing them to execute cohesive marketing strategies while maintaining the brand integrity.

In order to meet these needs, the design system should feature both primitive components (e.g., heading, button, quote, etc.) as well as section components (e.g, hero, slider, navigation, etc.) built using the primitive components. Content creators would be primarily using section components for creating content. Default section components showcase how the design system can be utilized in a real site. Primitive components provide designers and front-end developers flexibility to use the design system for use cases that are not supported by the built-in sections.

Scope of work

Partners are encouraged to apply for either the Design Scope, the Implementation Scope, or both. A partner will be selected for each scope, with the option for a single partner to be awarded both. We welcome applicants with expertise in one area who wish to specialize, as well as those who are equipped to handle the complete lifecycle of the design system, from initial design to full technical implementation and integration.

As a reference on how a design system can be integrated with Experience Builder, and how to structure it, the Starshot Demo Design System was developed to feature a range of components using Single Directory Components.

Design scope

The selected partner’s design responsibilities include:

Design system creation

  • Development of a Figma-based system: Create a comprehensive design system in Figma that includes a library of reusable components, patterns, and design guidelines tailored to the provided use cases and content strategy. Figma will serve as the single source of truth to streamline collaboration, enhance agility, support stakeholder engagement, and facilitate user-tested interactive prototypes. 
  • User-centric aesthetics and accessibility: Design for a modern look and feel that adheres to usability principles and serves diverse markets while ensuring accessibility across various devices.

Research, testing and validation

  • Insight gathering and validation: Conduct research to gather insights, validate design decisions, and ensure the system meets user expectations.
  • Iterative design testing: Implement user testing phases to refine design components based on feedback, ensuring they align with marketing needs, usability, and aesthetic standards.

Alignment with Drupal values

Ensure the design system reflects Drupal’s core values by incorporating inclusive, user-centered practices, such as meeting WCAG 2.1 AA standards and including diverse representation in resource imagery (if applicable).

Documentation and guidelines

Provide clear documentation and design guidelines to facilitate understanding and smooth adoption of the design system, serving as a reference for future design systems.

Expected ongoing involvement

It is expected for the design team to collaborate closely with the development team to define best practices for integrating the design system into Experience Builder and Drupal. See the 'Timeline' section below for the expected time commitment for this initiative.

Implementation scope

The selected partner’s implementation responsibilities include:

Technical implementation and integration

  • Translation of designs to code: Work with the development team to implement Figma designs as responsive, accessible, and reusable code components based on Single Directory Components. Since we are intending to use it in a low-code / no-code environment we expect to not depend on runtime dependencies such as Sass or PostCSS. We also expect to release the design system with GPLv2 license.
  • Integration with Experience Builder: Establish seamless integration processes and ensure the design system components function optimally within the Experience Builder environment, collaborating closely both with the design and Experience Builder teams.
  • Community leadership and contributor collaboration: Demonstrate experience in leading diverse groups of contributors and facilitate collaboration with Drupal community members, encouraging knowledge sharing, contribution, and adherence to Drupal’s standards and best practices.
  • Usage of modern technologies and best practices, such as CSS custom properties, container queries
  • Adherence to Drupal core browser requirements
  • Documentation for each component

Maintenance and documentation for developers

Provide detailed documentation, including code usage examples, configuration guidance, and integration best practices to facilitate smooth implementation.

Ongoing involvement and post-release support

A plan for post-release support and iterative improvements based on evolving needs and technological advancements is not required but will strengthen the proposals.

Contribution Credit Award

In return for leading the Design System track, the partner(s) will receive special benefits and rewards from the Drupal Association including: 

  • Contribution credit equal to: 50 credits per FTE-work-week-equivalent on top of organically earned issue credits
  • Featured as a track sponsor at events such as upcoming DrupalCons
  • Featured as a track sponsor in digital materials about the Starshot Initiative
  • First-right-of-refusal to sponsor public documentation about the Design System

Ideal partner profile

  • Proven experience in designing design systems for web applications.
  • Previous involvement with the Drupal community, with a demonstrated ability to lead collaboratively.
  • Strong understanding of user experience principles and accessibility standards.
  • Ability to work effectively with cross-functional teams.
  • A portfolio showcasing previous work in design systems and real-world integrations.

Timeline

We will announce the selected proposal the week of 16 December. The project must begin no later than January 2025 with two key dates: an alpha release at DrupalCon Atlanta (24-27 March) and the stable release in Q3 2025 in coordination with the Experience Builder release.

  • For design, we anticipate a timeline of four months for the intensive design work starting in January. We expect substantial collaboration with the implementation team starting February and March, with ongoing work to evolve and adjust the design system until Q3 2025.
  • Development will start with the architectural definition in coordination with the Experience Builder team early January and the implementation starting in February, and will extend over several months. We are expecting to release a stable version by Q3 2025, with some pre-releases before that for feedback.

Submission Details

Interested partners should submit the following by 6 December 2024:

  • A clear indication for which of the parts the proposal is submitted: design, development or both.
  • A brief proposal outlining their approach to the project.
  • Relevant case studies or examples of previous design systems developed.

We will host a webinar for interested partners to ask questions on 19 November at 15:00 UTC. The session will be recorded and published for all who cannot attend.

Questions and answers

We hosted a question and answer session about this brief on the 19th of November 2024. Check out the recording below:

Contact Information

Any questions not answered above and in the session? Email Lauri Timmanee (lauri.timmanee@acquia.com) and Cristina Chumillas (cristina.chumillas@lullabot.com).

We're accepting submissions via this form. We look forward to exploring potential collaborations to elevate our digital offerings!