Surrey Design System

Project Overview
I documented and consolidated the MySurrey digital services into the first phase of a design system. When complete, this will help designers, developers and vendors have one source of truth for our product design from colours and typography to components and patterns.
My Contributions
Designer
Phase 1: consolidation. We wanted to consolidate the basic and most used components to act as a base for our design system. The design team was already using Traffic Camera Footage as the main source of truth when designing applications. So it was necessary to create a design system for us and the wider team to use.

Design System Link: https://surrey.invisionapp.com/dsm/city-of-surrey/surrey-design-system
City of Surrey
Designer
2021 - Present

Phase 1: Consolidation

The first step we defined for our design system is to consolidate our years of designs into what it is now. We picked the apps we naturally referred to and pulled designs from it.

Inventory

We started by pulling from Traffic Camera Footage , Fire Information Request, Single Family Dwelling Permit, Large Item Pickup and MySurrey Accounts.

I broke each component down into Name, Component, States, Errors, Errors for required fields, Notes

For components that are a part of Patterns, this was further broken down into Patterns, Pattern behaviours, and Notes.

This helped me see an overview of basic components within one application and its patterns.

Organization & InVision DSM

After the inventory I went through to pick repeated components or components we regularly pulled from in our design work. I organized these into categories and uploaded them once they were ready.

Foundations

The foundations section includes colours, and iconography, this provides a basic overview of our look and feel and is especially helpful for vendors to onboard into our design language.


Next Steps

The next steps for our design system is to work on consistency across our designs, as well as meeting with Surrey.ca stakeholders to discuss next steps in Online Services designs compared to Surrey.ca branding (the larger Surrey.ca website was recently redesigned by a vendor). All this before we can work on redesigning and improvement of the components, patterns as well as involving developers.

Other Work

Explore my other work

Traffic Camera Footage Request
Product Design