Implementing a Cross-Functional Design System for ClearGov

Tools

Unify a diverse portfolio of local government budgeting software, enhance user experience, and streamline design & development.

My Role

Mid-Level UX Designer. Collaborated closely with the Senior UX Designer to design, plan, build prototypes, and test the new design system.

Tools

Figma, Adobe Illustrator, Zoom, Slack, Trello, Jira, Google Sheets

Impact

Unified User Experience: Streamlined interfaces across all products ensure ease of use and familiarity for diverse user groups.
Enhanced Efficiency: Design and development cycles have shrunk significantly due to a shared design language and component library.
Improved Collaboration: Designers, developers, and product managers now work seamlessly together, fostered by a common design language and understanding.
Accessibility for All: User-centered principles and accessibility guidelines guarantee everyone can navigate ClearGov's software with ease.
Scalability and Adaptability: The design system is built to accommodate future growth and evolving needs, ensuring its continued relevance.

Overview

When I joined ClearGov, a leader in local government budgeting software, I encountered a fragmented landscape of products. Each aimed to empower efficient budgeting, but design inconsistency caused confusion and slowed processes. Development cycles extended significantly, and maintaining brand consistency became increasingly challenging.
Recognizing the need for a more unified approach, I collaborated with the Senior UX Designer to initiate the ClearGov Design System project. This case study outlines how we teamed up to create and implement a system that unified ClearGov's software, improved user experience, and streamlined design and development workflows. Our ultimate goal was to empower local governments with user-friendly tools, making budgeting clearer and more accessible.

Understanding the Problem

Interfaces across different products felt like mismatched puzzle pieces – inconsistent buttons, varying typography, and navigation pathways that frustrated even the most seasoned budget analysts. ClearGov needed a design system, a cohesive framework to harmonize its diverse products and elevate the user experience.

Beyond user experience disconnects, expanding to new cities and towns made maintaining a consistent brand identity increasingly difficult. This clash between consistency and flexibility was a significant design challenge.

The problem extended beyond aesthetics. It was about efficiency, communication, and empowering local governments with user-friendly tools to manage their most valuable resource – budget dollars. I was excited to tackle this design challenge alongside the Senior UX Designer, connecting isolated products, improving workflows, and ensuring that every mayor, finance director, and citizen using ClearGov had a clear and consistent experience.

Users and Audience

Municipal Government Officials: Mayors, city managers, finance directors, and decision-makers within local governments using ClearGov's products to improve budgeting and financial transparency.
Financial Analysts: Professionals analyzing financial data within local governments, relying on ClearGov's tools to access and interpret budgeting and financial information.
Designers and Developers: In-house and external designers and developers maintaining and enhancing ClearGov's software products.
Citizens and Taxpayers: Individuals using ClearGov's public-facing tools to understand how their tax dollars are allocated and spent.

Scope

  • Product Range: Cover all ClearGov products, ensuring consistency in user interfaces, branding, and user experience.
  • UI Components: Include a comprehensive library of UI components – buttons, forms, typography, icons, charts, and other design elements.
  • Design Guidelines: Provide clear and detailed design guidelines addressing typography, color schemes, spacing, layout, and other visual aspects.
  • Responsive Design: Ensure the design system accommodates responsive design principles for seamless performance on various devices and screen sizes.
  • Accessibility: Integrate accessibility principles and guidelines to ensure usability for individuals with disabilities.
  • Interactions and Animations: Define interactions and animations to enhance the user experience while maintaining consistency.
  • Figma UI Kit: Develop a Figma UI kit with design assets and components for easy collaboration.
  • Documentation: Create comprehensive documentation including design rationale, component usage guidelines, and examples for easy team adoption.

Constraints

  • Resource Limitations: Tight timelines, budgets, and team capacity required efficient prioritization and iterative development.
  • Technology Stack: Aligning the design system with existing software frameworks demanded technical adaptability.
  • Stakeholder Alignment: Gaining buy-in from senior management, developers, and designers required effective communication and demonstration of value.
  • Legacy Systems: Integrating with older products with different design principles posed challenges.
  • Evolving Design Trends: Continuous iteration and adaptability were crucial to keep the design system relevant.

Process

Creating a design system for ClearGov was an exciting journey that began when I joined the team. At the time, the company was rapidly expanding its product offerings, and there was a pressing need for a consistent design system to streamline the design and development process. With only one other designer focusing on various UX design tasks, there had been limited bandwidth to dedicate to creating a design system.

Phase 1: Laying the Foundation

Partnering with the Senior UX Designer, we dove deep into existing designs, unearthing inconsistencies. We mapped out the system's scope, ensuring it embraced both past and future products.
Then, we built a foundational Figma UI kit, housing essential design elements – buttons, forms, typography – the building blocks of our design language.

Phase 2: Crafting the Components

With the groundwork laid, we embarked on a meticulous component development process. We prioritized components based on usage and importance, meticulously designing each one like a master jeweler crafting a precious gem. Every button, form, and icon was documented in comprehensive Figma files, organized with the precision of a cartographer's map. Transparency was our mantra – each component had a detailed narrative, explaining its purpose, variations, and even quirks, all accessible through our shared UI library.

Phase 3: Refining for Usability

The design system wasn't a static monument; it was a living, breathing entity. We continuously sought feedback from designers, developers, and product managers, conducting usability testing like rigorous quality control checks. Based on this feedback, we iterated on components and guidelines, shaping the system like a sculptor molding clay. It was a constant conversation, a feedback loop that ensured the system remained relevant and user-centric.

Phase 4: Scaling for Growth

ClearGov continued to grow, and so did our design system. New components were added, existing ones evolved to meet changing needs. It was like adding new floors to a skyscraper, maintaining the core structure while expanding the view. Maintaining the system's relevance became an ongoing mission, integrated into our workflow to ensure its continued vibrancy.

Outcomes and Learnings

The ClearGov Design System has demonstrably improved our software's usability, efficiency, and accessibility. It has also fostered a culture of collaboration and user-centered design within the company. Here are some of the outcomes and learnings:

Outcomes

  • Unified User Experience: Consistent design across all products felt cohesive and familiar, reducing user confusion and boosting confidence.
  • Streamlined Workflows: Design and development cycles shrunk, replaced by efficiency and a shared design language.
  • Improved Collaboration: Designers, developers, and product managers spoke the same language, fostering collaboration and understanding.
  • Faster Onboarding: New team members navigated the design landscape with ease, thanks to the comprehensive Figma UI kit and documentation.
  • Accessibility for All: User-centered design principles and accessibility guidelines ensured everyone could navigate ClearGov's software with ease.
  • User-Centered Design: Prioritizing user needs resulted in more intuitive and user-friendly products across the company's portfolio.

Learnings

  • Early is Best: Implementing a design system early prevents inconsistencies from becoming deeply ingrained.
  • Continuous Iteration: User feedback and ongoing refinement are crucial for keeping the system relevant and evolving.
  • Communication is King: Open communication among all teams is essential for successful design system adoption.
  • Collaboration Conquers All: The design system's success hinged on the collective effort of designers, developers, product managers, and even users.

Conclusion

The ClearGov Design System is more than just a UI library; it's a collaboration engine that fuels design consistency, usability, and accessibility. It's not static, but constantly evolving through a feedback loop involving designers, developers, product managers, and users. This collective effort ensures the system remains relevant, efficient, and empowering for diverse user groups across ClearGov's software portfolio.
Personally, this project solidified my belief in the transformative power of design systems. It taught me the value of early implementation, continuous iteration, and unwavering collaboration. These principles now guide my approach, and I'm excited to see how the ClearGov Design System continues to evolve and empower users, driving a brighter financial future for local governments, one intuitive interaction at a time. As ClearGov expands its reach and impact, the design system will serve as a scalable foundation, ensuring a consistent and user-friendly experience for all.