Back to home

Southwark Council Design System

Design System, UX, UI, Figma, LocalGov Drupal

Design System Southwark Council

Role

Senior Product Designer

Timeline

1 month

Responsibilities

  • Design system deliverable
  • Integrating new brand to the system
  • Icon creation
  • Designing for Drupal
  • Expanding desktop to mobile
  • Accessibility

Impact TLDR

Big Blue Door (BBD) developed a Design System in collaboration with Southwark Council for the redevelopment of their site using LocalGov Drupal.

During my time working as a contractor with BBD, I expend 2 weeks helping them to set up and create some of the predefined styles for colours, typography, and spacing, plus optimised auto layout, variables, properties, and variants.

Design System Southwark Council - Service card

Every component was crafted with usability in mind, as well as being 100% WCAG 2.1 level AA compliant.

The Design System is not only an outcome of migrating to a new tool. It provides a comprehensive set of components, patterns, and guidelines designed to streamline the design process and ensure consistency across projects. 

Design System SWC - Components

Milestones

  • Easily customisable.
    Components were created to easily flex to these varied brand use cases.

  • Accessibility baked in.
    Having parity between design and code components. I also ensured that we were building them with accessibility in mind. We tested each component against a set of accessibility requirements (colour contrast, keyboard navigation, theming etc) and ensure that each component was accessible by everyone.

  • Drupal migration.
    Imperative to create all components with LocalGov Drupal guidelines in mind. Following its existing component library adapted to Southwark Council needs.

  • Enhance brand perception.
    Setting up the main goals and needs of the brand. Creating a consistent and high-quality design.

  • Onboarding.
    Introduced Big Blue Door team to some Design System best practices. Aiding them for future projects.
Design System SWC - Buttons
Design System SWC - Forms

Impact

The Design System was not just about transitioning to a new tool but also about refining the design process and improving collaboration.

This design system will be a valuable resource for designers, developers, and public sector professionals looking to create cohesive and user-friendly digital services.

Design System Southwark Council - States

Contributors

  • Eva Vañó Seguí – Senior Product Designer Contract
  • Agata Pilarska – Product Designer BBD
  • Tim Peet – Senior Product Designer BBD
  • Alice Grey – Product Owner BBD
Back To Top