Surrey Online Services

reimagining service delivery online for citizens

Surrey Online Services (previously known as MySurrey Portal) is a platform that offers online government services to serve the City of Surrey citizens. The platform houses service types such as payments, registrations, applications, renewals, and requests. It also has an account system for citizens to login using a single credential to view, track, and access city services.

I co-lead the design direction of the product, as well as helped translate the vision of digitizing analog intakes and business processes for citizens and employees. I was involved with the conceptualization phase to the launch phase and heavily on the landing page to ensure bringing credibility to government services.

surrey online services multi devices mockup


How might we provide a unified online platform to simplify the lives of citizens and employees at the City of Surrey?


With the demand of digital transformation, a platform was built to house all of the City’s online services in one place so that citizens can find a service they need easier and utilize a single login access to interact with the City.


Service categorizations.

There are currently two methods of categorizing services under a “guest state,” while more services are undergoing digital transformation, user experience updates, and linking to a single account. In the future, after a citizen login, there would be tailored categorizations, such as ways to represent ones that are often used. All services are shown on the landing page for users to quickly scroll through and find a service they want. For power users, a shortcut is provided under the search with services categorized by types. For all services that are linked to an account, they are grouped in one section, while others are grouped in a generalized section.

surrey online services categorizations animation on desktop

Visual communication.

To help citizens understand the different services available and how to interact with the platform, a few supporting elements help with communication. First, an icon is present alongside each service to describe visually what the service is for and there is a short description below each service title for further description. Toasts, banners, modals, and animations are also present at certain points of time to communicate important information that citizens should be aware of.

surrey online services visual communictaion animation on desktopsurrey online services icon patterns and groupings
surrey online services old service forms analysis

Unifying service languages across devices.

Since many of the services were initially created in silos by different departments using different systems, they all looked and behaved differently, which caused confusion and credibility. I then developed a design system to bring seamless patterns that can be scaled so that citizens can have a cohesive experience across all of City of Surrey government services.

surrey online services ui examples on desktopsurrey online services ui examples on tabletsurrey online services ui examples on phonesurrey online services design system


The City of Surrey is one of the largest cities in Metro Vancouver with an ever growing population and the need to put more government services online. As a result, the amount of services and transactions were getting more difficult to find and manage. This provided the team a chance to initiate digital transformation and restructure workflows to control city service offerings and transactions with citizens.

surrey online services city hall building


To verify the demand of needing to build an entire platform, heuristic evaluation was done on the original webpage and individual services. The intention was to find usability problems and identifying opportunities to present the evidence to upper management for buy-in.

surrey online services old webpage analysis
surrey online services old service forms analysis
surrey online services old service dashboard page analysissurrey online services old service application page analysis

After getting approval, an affinity mapping exercise was done to organize service offerings and find ways to tailored to different user needs. Someone who does business with the City would most likely interact with services differently than a regular citizen.

surrey online services affinity diagram exercisesurrey online services types

Lastly, before heading to the production phase, I lead a Design Thinking workshop to learn more about the different types of citizens at the City. I invited various domain experts across the City departments to help build personas and customer journey maps for the internal team to make reference upon decision making. The outcome was creations of 4 high level personas including a homeowner who resides in the City, a developer/builder, a business owner, and a visitor.

surrey online services design thinking workshop session


Based on the insights gathered in the research phase, a few key findings were noted to guide the design phase.

1. Citizens (majority are immigrants with an English level of grade 5 and have low technical competency) are overwhelmed and unable to find specific government services they need online, which results in the frustration to travel to or call City Hall.

2. Citizens are not well-informed on their statuses whether making an application, registration, payment, or reporting with the City.

3. Each City service requires a different credential to login and view content, which causes cognitive overhead.

4. City clerks are spending valuable time handling in-person intakes, unnecessary phone calls, and many other manual processes.

surrey online services customer types


Once the basic goals and requirements were gathered, the team began to sketch ideas and flows of how the entire platform can be envisioned. Afterwards, the sketches were translated into wireframes to test the structure and basic interactions, followed by creating high fidelity mockups for further usability testing and Beta implementation.

surrey online services initial conceptual platform flowsurrey online services initial platform components
surrey online services version A wireframes on desktopsurrey online services version B wireframes on desktop
surrey online services version C wireframes on desktopsurrey online services version D wireframes on desktop

To expand service offerings from a single webpage to an entire platform, ideas were explored. The initial proposal consisted of having services grouped by actions and colours. There was also an emphasis on using a dropdown to find a particular service. The descriptions of the service are also hidden within a button.

After the beta release, feedback was collected both internally and externally to make improvements. It was first overwhelming to have different colours to categorize services. Using the actions of register, pay/buy, apply/renew, report/request, and view was also confusing as different people have different mental models. Also the more information “i” icon was ambiguous and many did not know it can be clicked on to view a description of the service.

surrey online services initial mockup on desktopsurrey online services beta landing page on desktop


1. Over 2 years since the initial release of the account feature, users have increased from 450 to 350 000. To get more citizens on board, more services are to be linked to a single account, have more promotional material, and kiosks at City Hall can be installed for those who are less tech savvy.

2. Overall, 69% of citizens are satisfied with using the service platforms. Among those who are unsatisfied, many services are still in need of updating to a digitized format to allow communication between the City and citizens to shorten the customer journeys, while a segment of outliers are simply unhappy with the need to make payments to the City.

surrey online services walkthrough animation on desktop