CityFibre

Overview

CityFibre's expansion into providing fibre broadband across the UK required a robust internal portal to manage data and operations efficiently. Initially, the portal closely followed the bold and bright branding of the client-facing website. However, the portal needed a design approach that prioritised clarity, usability, and scalability, given its data-heavy nature and the diverse range of users involved.

"Aligning visual design with functionality is crucial in creating a user experience that is both aesthetically pleasing and highly effective."

The Challenge

The original portal design mirrored the CityFibre website branding, which, while effective for client-facing interactions, didn’t suit the portal’s purpose. The bold colours and typography were visually overwhelming in a data-driven environment. Additionally, the portal needed to cater to multiple teams, necessitating a self-serve, flexible design system that both developers and designers could easily work with.

Solution Concept

The design transformation focused on improving readability, simplifying user choices, and creating a cohesive design system. By shifting from bold typography to simple, clear type, I established a visual hierarchy that made data easier to digest. I also minimised the clutter by grouping related actions and features into customisable dropdowns, reducing the cognitive load on users.

Research & Insights

Extensive research was conducted to understand the needs of the various teams using the portal. Interviews and usability testing revealed that users required a design that didn’t just look good but functioned seamlessly, allowing them to perform tasks efficiently. This led to a focus on common UX patterns, eliminating unnecessary tasks, and avoiding redundant elements that could distract or confuse users.

Design & Development

To support the diverse needs of the portal’s users, I developed a design system with defined variables and styles. This system allowed both developers and designers to easily access and implement consistent design elements, ensuring a uniform user experience across different features and updates. The design system was crafted to be flexible enough to adapt as new features were introduced, making the portal scalable and easy to maintain.

Impact

The CityFibre Portal project demonstrated the importance of aligning design with the functional requirements of the user. By moving away from the bold branding of the client-facing website and instead focusing on a light, clear, and intuitive design, we created a portal that effectively supports the diverse needs of the portal users. This project not only enhanced the usability of the portal but also established a scalable design system that will support CityFibre’s continued growth and innovation.