reimagining service delivery online for citizens


Product Design, Service Design


User Experience Designer, User Researcher, User Interface Designer


Sketch, InVision, Axure, Adobe Illustrator, Adobe Photoshop

MySurrey Portal is a digital service platform that aims to serve the citizens of City of Surrey (located in British Columbia, Canada) by acting as a digital front counter. As a User Experience Designer, I helped translate the vision of a one-stop shop digital government from a physical service delivery to online.

mysurrey portal mockup animation
mysurrey portal mockup mobile image


This project began with the problem of an ever growing list of the City’s online services, which led to difficulty in way finding the service a citizen need.


I was brought in to first run through a series of analysis and identify issues of user flows and user needs prior to formalizing a project. This included gathering and understanding transactional data, as well as conducting heuristic evaluations on existing webpages and the interface of existing services. Comparisons were done to inform upper management about user pain points. online services image

Too much text that does not speak to citizen’s natural language.

No consistency and standards to cue citizens on their tasks.

It is not efficient to use due to lack of hierarchy in content and actions on task.

old parking online service heuristic evaluation old parking online service heuristic evaluation
old business licence online service heuristic evaluation old business licence online service heuristic evaluation


After going through an affinity mapping exercise with my teammate, we discovered that there are many types of transactional services. However, they were all grouped together on a single page, with no filter options or content specifically tailored to accommodate the large range of customers. Therefore, customers often got overwhelmed online and would rather complete their transaction through other channels (such as by phone or in-person) because different customers come to the City to interact on different tasks.

city of surrey user type and interactions diagram online service classifications


As a result, a product strategy had to be developed to deliver the success of MySurrey Portal to accommodate an expanding city. The vision is to create a single account across all of City of Surrey services because a citizen only requires one credential.

3 high level goals specified are:

1. Reduce the amount of manual intakes (phone/in-person).
2. Increase the amount of users online.
3. Increase customer satisfaction.

Initiatives to meet the goals are:

1. Enhance way finding
2. Mobile-first
3. Improve UI
4. Consolidating services
5. Focus on accessibility

By keeping in mind the vision, goals, and initiatives, it drove the first piece of work to create relevant categories and placing relevant services into them to enhance the customer experience upon landing on the page of service delivery. Doing so would also help tailor filtered content to the right customers.

city service types


After gathering information and have a basic understanding of the problem, user groups and needs, I sketched out various concepts to present to upper management to get approval for the project. The wireframes and user flows below demonstrate the initial idea of a portal platform by utilizing a dashboard format for citizens to have a personalize experience.

mysurrey portal wireframes mysurrel portal user flow


For the final product, I lead the visual direction. By having a dropdown filter and large buttons with simple icons and text-titles, it allows less proficient users to easily access the type of service they need. The reason is that many of the City citizens only have an education level of grade 5. After iterations, mockups were created for development.

mysurrey portal mockup


Besides designing the framework for MySurrey Portal, I also lead designs for the Community Care Licence Inspection service and Parking Bylaw Notice service. Here, I helped the various departments streamline their business process to help citizens get their tasks done quicker online without the need to to come to City Hall. All services can be accessed across multiple platforms.

community care licence inspection desktop mockups community care licence inspection mobile mockups parking bylaw notice desktop mockups parking bylaw notice mobile mockups


To execute this product, I work with diverse team members including User Experience Designers, Graphic Designers, Communication Strategists, Quality Assurance, Developers, Business Analysts, Security, and other stakeholders using the agile process to ensure smooth deliverables.

The portal has now been released for two year, but the design cycle has just begun. More services are being added and redesigned, where improvements are happening on a quarterly-basis. Throughout the iteration process, I also facilitate workshops to enhance interactive data gathering sessions, as well as conduct user research to better understand our stakeholders’ business and user needs. MySurrey Portal currently acts under a guest version, while a Single Sign On component would be added shortly.

mysurrey portal workshop
back to top arrow