CC Electrical Services

Overview

CC Electrical Services is a role-based web app for a real electrical business — covering public services, projects, and admin workflows. This case study focuses on the UX: clarifying multi-user journeys, structuring the IA, and redesigning the UI around a reusable component system. The full-stack build is covered separately on Work.

Problem & Opportunity

The product already worked — services, projects, and admin tools existed — but the experience didn’t feel like one system. Screens were inconsistent, roles weren’t clearly reflected in the UI, and denser admin workflows were harder to scan and trust. The opportunity was to redesign around clearer journeys and a reusable component set, without throwing away a functioning product.

Discovery & Requirements

Before redesigning screens, I mapped who the product serves and what each role needs to do. That meant clarifying entities (services, projects, users), permission boundaries, and the densest admin jobs — so IA and UI decisions stayed tied to real workflows, not just visual polish.

Information Architecture

I organised the product around the main objects people actually use — services, projects, and users — then separated public and admin surfaces so permissions and tasks stay clear. The sitemap below shows how those areas connect before any screen redesign.

Flows & interaction design

I focused on the journeys that carry the most risk and complexity — finding and requesting services, reviewing projects, and moving through permission-aware admin tasks. Each flow was sketched as a sequence first, then refined so role, state, and next action stay obvious on every step.

Design system in product

Once the IA and flows were clear, consistency mattered more than one-off screens. I applied a shared set of patterns — cards, navigation, alerts, and modals — so public and admin surfaces felt like one product. The foundations live on AC Design System; this section shows how those pieces showed up in CCES.

UI redesign

With structure and patterns in place, I redesigned key screens for clearer hierarchy, stronger scanning, and consistent components. The before state shows the functional but uneven UI; the after state shows the same jobs expressed through the shared system.

Outcome

The redesign made CCES feel like one product instead of a set of disconnected screens — clearer journeys, shared UI patterns, and a stronger handoff into build.

Biggest lesson: lock structure and roles before polishing pixels — the design system only pays off once the product model is clear.