https://kaveh.design/wp-content/uploads/2021/05/MySurrey_Online_Services.mp4

MySurrey Online Services Program + Surrey Design System

Product Design + UX Strategy

Live >

Project Info

Context
Context

Risk & Challenges

Research

Value Proposition

1. MySurrey online services program

2. Online Services Landing Page

3. Pattern Library and Surrey Design System

4. New online services

Continuous Improvement

Takeaway

A core framework, new apps and a design system

[2015 to 2021]

Role: User Experience / User Interface Designer
Client: City of Surrey various departments
End-User: Surrey citizens, businesses, and land developers
Stakeholders: Surrey Digital Advisory Group (Senior Managers), Digital services manager, Web team, IT Architects, business analysts, In-house developers, In-house designers
Activities: Strategy briefing and presentation, Design Workshop, Sketching, Wireframing, Prototyping, Rapid usability testing

The challenge of consistency within a complex system

The city of Surrey has been offering online services for many years. In 2015 (when I started as the User Experience designer), there was an obvious need to review the online services and improve them to the industry standards. The offered services were mostly COTS products with a limited amount of customizability. The user interfaces of the online products were not aligned, and most web apps were not responsive. These facts were impacting the brand experience negatively. The Digital Services team initiated the MySurrey Program as a holistic online service offering to support the city’s vision of excellence in service delivery.

A typical online service app in 2015

Identified risks and challenges

No existing UI pattern and component library
Designing and building products in-house was a new concept for the municipality.
Various backend and frontend systems, each with different UI elements
No established design and build process in place

From the ground up

I was responsible for designing and conducting different research types and workshops with the city staff to gather insight and provide recommendations on the MySurrey program direction.

Service Ecosystem & Personas: Understanding the Online services ecosystem and creating primary personas through rounds of interviews and workshops involving staff from various departments
Brand discovery: Reviewing the history of the city of Surrey’s brand evolution and understanding its future direction
Competitive analysis: Studying the precedents from other municipalities and government institutions to evaluate the state of the city of Surrey digital services in comparison

Ideation workshop to create personas and customer journeys

Laying out the foundation in four themes

To create foundations for MySurrey Online Services, I helped my team prioritize the values of the new product:

A MySurrey platform as a central hub to deliver online services with a similar pattern to increase consistency with a vision of having an account, getting personalized notifications and access to the history of interactions with the city

Early wireframe of MySurrey dashboard – Investigating different forms and flows

The responsive design approach for all the new products and focusing on the preferred devices based on the nature of the service (mobile-first vs. desktop-first)

Investigating different layouts on different screen size

A new Surrey Pattern Library to evolve and eventually become a Design System to minimize the design debt and increase the efficiency in the design process

MySurrey program pattern library after a few iterations in 2018

Product areas:

Since the foundation of the digital services team in 2015, I primarily focused on four main areas:

Designing and improving the MySurrey program
Working on a new landing page for online services and a personalized dashboard to track the submitted applications
Collaborating on the creation of the design library and creating road maps for the Surrey Design System Online services page
Collaborating on designing new online services and assuring the consistency between different designers working on separate projects

MySurrey; A central hub

During the first few years of my work in the city, I focused on shaping and creating a new online services experience through the MySurrey program and creating scalable information architecture and product flow. To get buy-in from multiple stakeholders, we held several workshops and strategy briefings and presentations with various business units. The outcome was a roadmap for MySurrey as a central hub for online services with envisioned features of having an account with the city, accessing the history and status of the applications in one place, and receiving relevant and personalized information.

ideating on History of transaction in the layour

Enhancing the navigation

I worked on the information architecture and designing a new landing page to have all the online services in one place and provide better navigation through categorizing the services, taxonomy and search capability. The goal was to make it easy and fast for our users to find the service they are looking for.

The latest stand alone landing page before migrating content to the Surrey.ca

Brick by brick

I collaborated with other UX/UI designers and the city’s graphic designers to create foundation pieces to establish a pattern library. We ran a few ideations and brainstorming workshops to decide on the colours, typography and most common components. In 2020, this pattern library evolved to the first version of the Surrey Design System.

Pattern Library – Pre-migration to the design system

Consistency in action

Since 2015 I have been directly and indirectly involved in designing and building more than 15 products. I have constantly been working on writing design briefs and helping the team to clarify the requirements. To ensure consistency between all the designers, I have facilitated feedback sessions within the design team. Feedback sessions have been essential to ensure the constant relationship between our design system and the proposed products.

I have also participated in multiple usability testing sessions either for evaluating existing products or testing the proposed solutions.

Usability testing Session – Setup for Parking Ticket Application

Design, Test, Build, Feedback, Redesign

Since the launch of the very first version of the MySurrey online services program, I have been working on improvement of different aspects of it:

UI & Interaction Improvements; based on the customer and business units’ feedback and the evolving nature of online services, in collaboration with other designers and developers, we have designed and released multiple versions of MySurrey Online Services to keep them relevant and user friendly. This approach meant a few retro-design projects to refactor the legacy application.
Over time, I created product alignment between MySurrey Online Services and other digital services offered by the city, mainly focusing on the relationship between the surrey.ca website and the online services.
By initiating and releasing the first version of the Surrey Design System, I have been helping the internal team to keep the component library updated and identify the potentials to grow the design system.

Focusing on Value!

Working on a group of closely tied products has shown me unique challenges and the value of consistency. I have found that focusing on delivering real value is an excellent way of not forgetting the vision, principles and goals in the chaos of all the small features listed that overloads the backlog over time.