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](/sites/default/files/2024-04/exmpl.jpg)