Project

Description

CivicaPay is a legacy system that came up for redesign to improve its user experience and functionality. The project aimed to modernize the platform, streamline payment processes, and enhance usability for local authorities while maintaining the system's core features.

CivicaPay is a desktop-based payment management system designed for local authorities. It enables efficient collection and management of payments through various channels, offering real-time reporting and data insights to help authorities optimize their payment processes and track key metrics.

UX

USER PERSONA

Sarah Williams

38 / Payment Systems Admin / Westbridge

Sarah at Westbridge City Council, manages payments with the outdated CivicaPay. With 10 years of experience, she needs a more efficient, user-friendly system to improve accuracy, reporting, and real-time tracking.

Mark Green

30 / CSO / Sheffield

Mark Green helps citizens with payment issues using CivicaPay. He needs a more intuitive system for faster payment tracking and dispute resolution. Frustrated with the current system’s delays, he hopes the redesign will improve efficiency and the citizen experience.

UX

Pain points and solution

Pain Point The legacy system design was outdated, lacked modern aesthetics, and was not aligned with the company's new brand design guidelines.

Solution Introduced a refreshed, modern UI to enhance usability and ensure consistency with the updated brand guidelines.

Pain Point The menu was too long and difficult to navigate.

Solution Replaced it with a categorized, collapsible sidebar for better organization and navigation. Added a search bar for the menu, enabling users to easily find options and types through a type-to-search functionality.

Pain Point Information was displayed in an overwhelming and unstructured manner.

Solution The layout was redesigned to segment information into clear sections, reducing cognitive overload. A visual hierarchy with consistent typography and ample white space improved readability, while related data points were grouped logically for faster access and decision-making.

UX

USER Flow

Ui

Typography

Ui

Colors

Ui

Logo Design

Ui

High Fidelity Wireframes

(Prototype unavailable due to NDA)