Acquia Design System

Built a design system to optimize scalability and adaptability to meet the requirements of an evolving product suite.

Role

```
Design
```
```
Development
```
```
Accessibility
```

Tools

```
Figma
```
```
Storybook
```
```
Jira + ASANA
```

```
CSS
```
```
Bootstrap
```
```
Javascript
```

Technologies

Research & Discovery

Background: Two visually distinct clouds existed: our core Drupal Hosting Cloud and the envisioned Marketing Cloud, representing multiple acquired companies merging into a single product. Initially, these products were considered as one seamless suite, each offering very different experiences in terms of navigation and CRUD-based architectures.

Our original design system revolved around Dashkit but faced challenges in scalability to meet the diverse needs of our product suite. It suffered from inconsistencies in spacing, pattern usage, and visual elements, with an excess of components serving similar purposes but applied inconsistently across different products.

Goal: The project aimed to create a cohesive and adaptable design system that unified the core Drupal Hosting Cloud and the Marketing Cloud, ensuring a consistent user experience and visual language across the suite while prioritizing accessibility standards to make the products usable for everyone.

Before: Separate products with different design experiences

Before: Cloud Classic

Design Process

Iterative Process: The design approach evolved iteratively based on continuous feedback loops and development cycles, allowing us to refine and improve the user experience and interface elements. For instance, we focused on complex pages to assess how our components functioned together, identifying areas for improvement such as intuitively ordering command wells and creating patterns for filter buttons and toggle states to enhance usability.

Once a component was finished, it transitioned to the final design system file as a Figma master component with detailed annotations. Additionally, every completed component marked as "dev ready" in Asana triggered a notification in Slack, informing the engineering team of its readiness. Each Asana ticket included links to the exploratory file page and the frame in the final design system file for easy reference.

Tools: We maintained two Figma files for this project: one for exploratory work and another for finalized component deliverables usable by designers and engineers. Each component underwent stages of research, exploration, refinement, and development readiness, which were tracked in both our Asana board and the Figma exploration file.

Collaboration: UX designers, product managers, and the engineering team worked closely together to ensure alignment on designs and priorities throughout the design process.

Visual Design & Usability

Usability Testing: We recruited 12 internal users to participate in the study, and their familiarity ranged from Cloud Platform products to marketing products. Each participant was presented with a different set of design concepts, including our current visual refresh designs.

Our study aimed to investigate the following aspects:

Scannability: Did the contrast change enhance the user's ability to quickly gather information?
Wayfinding: How efficiently could users navigate through the page?
Recall: Could users remember key elements of the page after navigating away?

Each participant engaged in a product identity exercise to gauge their perception of the design concepts. They were provided with a set of adjectives and tasked with placing them on the screens that resonated most with them.

During the analysis, we observed that screens with a lighter color palette and more compact layouts performed well in terms of user engagement and ease of navigation. This suggests that using softer colors and a condensed design approach can contribute to a positive user experience by maintaining clarity and visual appeal while conserving space.

Additionally, prioritizing contrast ratios between text and background colors further enhances accessibility, ensuring an inclusive design that meets WCAG accessibility standards.

After: The typography and application colors were updated to ensure the page's focus remains on the core task canvas, allowing users to scan quickly without needing to adjust to background and text contrast.

After: One integrated experience

After: Cloud visual refresh

Development

As the developer for this project, I played a pivotal role in translating Figma designs into functional components using Storybook. This process involved taking the finalized designs from Figma and converting them into reusable and interactive UI components that could be seamlessly integrated into our development environment.

Using Storybook as our component library and documentation tool, I created a library of UI components based on the design system established in Figma. This library not only served as a repository for our components but also provided a platform for developers to preview, test, and interact with each component in isolation.

The development phase included tasks such as writing HTML, CSS, and JavaScript code to bring the designs to life, ensuring responsiveness across various devices, and optimizing performance for a smooth user experience. I also worked closely with the design team to address any design-to-code discrepancies and ensure that the final implementation matched the intended visual and interactive elements.

By converting Figma designs into functional components with Storybook, we streamlined the development process, fostered collaboration between design and development teams, and maintained consistency and accuracy throughout the product's UI. This approach not only accelerated the development timeline but also facilitated easier maintenance and updates as the project evolved.

Conclusion

Achievments: We successfully merged three distinct products into one cohesive suite, enhancing cross-product visibility and aligning with business objectives. The establishment of a modern visual language and a flexible design system not only improved usability but also laid the foundation for scalability and adaptability to future needs. Our collaborative efforts between UX, product, and engineering teams resulted in a seamless user experience, supported by a well-documented component library in Storybook.

This project not only met its design goals but also exceeded expectations by delivering a unified, user-friendly, and visually appealing product suite that met the evolving demands of our users and business stakeholders.

Next Steps: Moving forward, our next steps involve prioritizing accessibility enhancements and updating documentation to ensure a seamless user experience:

Enhancing Accessibility Features: We will focus on improving accessibility features such as keyboard navigation, and screen reader compatibility.
Updating Documentation: Our team will update the design system documentation to reflect the latest changes and additions. This includes documenting accessibility best practices, guidelines for creating accessible components, and providing resources for designers and developers to ensure compliance with accessibility standards.

By prioritizing these initiatives, we are committed to creating an accessible and user-friendly experience for all users while ensuring that our design system remains up-to-date and well-documented for efficient collaboration and development.