Front-end live style system

Here's how I made UI resources that fit the Oxfordshire County Council's style and guidelines.

OCCLSS home page
OCCLSS home page

About Oxfordshire County Council

Oxfordshire County Council is a local authority committed to delivering exceptional services throughout the county. The council sought a solution to ensure uniformity across all digital platforms, encompassing consistent design aesthetics and functionality. Managing a main portal along with various services posed a challenge in maintaining coherence.

What they needed

Oxfordshire County Council wanted to make sure all their digital platforms looked the same and follow the same digital principles. They needed a single set of design rules, patterns and standards that everyone could follow. With a main portal and different services to manage, keeping everything consistent was tough.

What I did for them

Recognizing the importance of living style guides in modern web development, I proposed the creation of the Oxfordshire County Council Living Style System (OCCLSS).

OCCLSS serves as a comprehensive resource for adhering to OCC design principles and digital standards. I designed OCCLSS to be modular and easily expandable.

OCCLSS was implemented through a GitHub repository, where all necessary files are stored, and a dedicated front end (occlss.oxfordshire.gov.uk) for user-friendly documentation. This setup allowed internal and external service providers to access necessary design elements seamlessly.

OCCLSS includes documentation and a CSS/HTML framework designed with Responsive Design, Accessibility, Performance Optimization, Collaboration, and Expandability in mind. I use the BEM methodology to ensure clarity for Front End developers, allowing easy expansion of design patterns without conflicts. Additionally, I organize the style file structure to optimize browser render time.

Results

With OCCLSS in place, Oxfordshire County Council now offers open-access resources for understanding design patterns and principles. Third-party applications have successfully integrated OCC design standards into their products, resulting in a more cohesive digital landscape across the county.

OCCLSS implementation example
OCCLSS implementation example