Design System

UX Case Study: Transforming Engagement HQ with a new and considered Design System.

Introduction

Granicus is a leading provider of cloud-based technology solutions tailored for governmental organizations. Among its products is EngagementHQ, a community engagement platform designed to facilitate focused consultation and feedback collection.

01

Project Overview

The EngagementHQ Design System project aimed to overhaul the platform's user interface (UI) to create a consistent and cohesive design language. As a Senior UX Designer/Researcher and UI Designer, my role was pivotal in defining and implementing a comprehensive design system.

02

Problem Statement

EngagementHQ suffered from a lack of consistency and coherence in its design, with disparate elements and layouts across the platform. The absence of a unified design system led to confusion and inefficiencies for users.

03

Approach

Collaborated closely with the UX Lead to conduct research and establish a base UI kit.

  • Defined the principles and foundations for the design system to ensure consistency and scalability.

  • Wrote comprehensive documentation to guide the design and development process.

  • Researched and designed components aligned with the established design system.

  • Managed and maintained the design system library to ensure adherence to specifications.

04

Biggest Challenge

The primary challenge of implementing the design system was its integration into an existing product with significant design debt. Rolling out updates required meticulous planning and consideration to maintain consistency across all instances. Ensuring accurate scoping of work for the development team was crucial in managing the complexity of the project.

05

Outcomes

Successfully established a robust design system for EngagementHQ, providing a unified visual language and improved user experience.

  • Enhanced efficiency and productivity for designers and developers through standardized components and guidelines.

  • Increased user satisfaction and usability by eliminating inconsistencies and streamlining workflows.

  • Facilitated future scalability and maintenance of the platform by establishing a solid foundation for design and development.

06

Conclusion

The EngagementHQ Design System project exemplifies the transformative impact of a well-executed design system on product consistency, usability, and scalability. By addressing the complexities of design debt and prioritizing cohesion and standardization, we laid the groundwork for a more intuitive and user-centric platform experience.

07

Reflection

Reflecting on the project, it highlighted the importance of collaboration, planning, and meticulous execution in implementing a design system within an established product. The iterative nature of the process required flexibility and adaptability to address evolving requirements and challenges effectively.

08

Next Steps

Moving forward, continuous iteration and refinement of the design system will be essential to accommodate evolving user needs and technological advancements. Collaboration across design, development, and product teams will remain critical in ensuring the ongoing success and relevance of the design system.

09