Back to work

01 Compunet · Product Design & Strategy

Civic.

End-to-end redesign of a 25-year-old platform that manages the entire lifecycle of fines and ticket books.

Civic — redesigned platform, modular search and resultsCivic — platform
Role
Product Designer & Strategist
Team
Consulting team + frontend & backend dev
Discipline
Product Design
Status
Ongoing

01 Context

Civic is a software designed to manage the entire lifecycle of fines and ticket books — the booklets used for issuing fines. It was developed 25 years ago and has been maintained over time to comply with traffic-law regulations.

A local police department can manage the entire station, its personnel, fines, payments, photographic evidence, document management and API integrations with external services. Within the client's team, I was involved as a Product Designer and Product Strategist.

02 Role

I supported the project as a Product Designer, part of a consulting team alongside a frontend and a backend developer. I independently interfaced with the client's entire team and all stakeholders, including the owner of the commissioning company.

03 Challenges

Complexity and scale

The software is huge. Modules range from managing personnel and fines to handling payments, photographic evidence, document management and API integrations. The search fields alone are over 700, spread across 45 screens and 13 modules.

Inconsistent design

Features were added over time without a unified design guideline, resulting in inconsistent behaviors and patterns.

Lack of documentation

No documentation existed for developers, nor manuals for users, and the project lacked a proactive roadmap. Each stakeholder had its own vision for the product's future.

Limited UX expertise & time

The client team lacked UX knowledge, requiring parallel training. The initial 3-month timeline required prioritizing foundational elements like information architecture so developers could proceed efficiently.

Service blueprint, user journey and component documentationBlueprint, journey & documentation
Service blueprint, user journey and component documentation.

04 Activities

Analysis

  • Mapped stakeholders' desired outcomes, roadmaps and concerns; created a research plan.
  • Ran workshops with operators to map the daily experience of Civic users.
  • 40+ hours of interviews with expert users to understand business logic and highway-code dynamics, mapping the service with a blueprint.
  • Independently studied the software and mapped all elements, patterns, standards and conventions.

Design

  • Proposed key templates encapsulating the most common patterns as reusable "building blocks," so migrating functions became as simple as selecting the right pattern.
  • Translated Civic's industry-specific conventions into a browser-oriented language, ensuring accessibility and up-to-date patterns.
  • Defined a design system by adapting the PrimeNG library to the client's tone of voice and branding.

Strategic support

  • Helped define the product roadmap — tools and methods to redefine scope, prioritize the backlog and establish a collaborative framework (Scrum adapted to the team).
Modular UI components and navigation structureModular components & navigation
Modular UI components and navigation structure.

05 Outcome

The modular design was successfully implemented: pages open clean, showing only the search module, then dynamically compose themselves by adding widgets based on the user's task progress — enhancing focus and efficiency.

We introduced the ability to save personalized layouts based on recurring activities and roles, creating widget presets that instantly load the optimal interface and significantly reduce preparation time.

  • New patterns recognized as fast and functional by Civic's specialized operators.
  • A new AI-ready information architecture — far more horizontal and searchable.
  • Guidelines established for designing new screens in the future.

06 Key learnings

  • In environments without a design culture, both the content and the way it's communicated matter. Non-design professionals aren't always used to discussing a product they've invested 25 years in.
  • Always look at the glass as half full: even if a screen is inaccessible or outdated, the business logic and operational flow might still be excellent.