The MySurrey Portal web-application allows anyone to perform any transactions provided by the City of Surrey all in one place.

Tools Used:

Sketch, Axure, InVision, Illustrator, Photoshop, Zeplin, HTML/CSS, Github

Skills:

UX/UI Design, Visual Design, Prototyping, Wireframing, QA Testing, Minor Front-end Developer

https://my.surrey.ca/

My Contribution:

Helped launched the first inital phase of the MySurrey Portal
Lead designer to create mockups and prototypes for 5 new online services

Building Records Search, Fire Safety Plan, FOI, Parking Ticket, IRIS Camera Registry

Assisted in the front-end development with styling and simple components
Designed the SSO Account Management component

Fire Safety Plan App

Problem:

Submitting a fire safety plan has only been done in-person and at one location.

Solution:

A digital service allowing users (mainly engineers and fire safety companies) to submit their plans online for review when a building is being constructed and when it is built.

My Role:

Lead designer creating mockups, prototyping and assisting with the front-end development. I also helped with being a QA by testing the app in different devices and checking if the development meets the requirements and if it functions correctly.

The UX team, the Business Analyst, and I first met with the Fire Chief discussed about the current situation with fire safety plan submissions. It was all done in-person which was very inconvenient for the engineers and contractors.

Value the web-application provided

Allows users (contractors and engineers) to submit all their documents online rather than needing to drive to one specific location.
Provides sample documents that need to be submitted for specific situations the user selects.
Taps into the database of all approved Fire Safety Companies therefore making it easier for the clerks to know if the plans are legitamite.
Ability to pay the fee through Moneris and can be linked to the same file it has been submitted for.

In order to keep myself on the right flow, I drew myself a flow of how a user would submit their documents. Please note: The flow towards the side was the initial requirements. However it has changed and the fire department has requested all documents to be submitted online if possible.

Also, to make it easier for myself and the developers to visualize the flow of each situation, I quickly designed a diagram to easily represent each state.

Final Screens:

Building Records Search

Problem:

To redesign the Building Records Search website to create a better experience for lawyers and realtors who use the site the most.

Solution:

A smart and responsive web-application that users can make request from any device conveniently and quickly.

My Role:

Lead designer creating mockups, prototyping and assisting with the front-end development. I also had the opportunity to be a Business Analyst to speak with the client and gather the requirements for the project. I tested the app in different devices and checking if the development meets the requirements and if it functions correctly.

Being part of the UX Team, we were tasked to redesign one of the services provided by the Planning & Development department for the initial launch of the MySurrey Portal. The Building Records Search is a service provided by the city where anyone can request for information about a single-family home or a multi-family home building that’s listed. The requirements provided by the business was flexible, however the service had to be responsive and everything that is provided on the current application has to be in the redesign one.

Process:

We first approached this project by discussing with the Business to get a sense of the common issues they have heard from the feedback of the customers.

Old Design:

Feedback from previous users:

The service is
not responsive
. This makes it difficult and
time consuming
for the end users to make these requests while on site.
The service usually
only worked on Internet Explorer
. Some issues occur when using other browsers such as Chrome or Firefox.
Users don’t notice the option to add multiple address.
This results in the user needing to go through the entire process again.

Issues I noticed:

The service is
not responsive
. The interface is set to only one screen size.
While looking up an address, the
street number is not filtered
and the user would need to zoom-in then scroll through all the street names.
Selecting the products is difficult with the checkboxes.
No validation
shown to the user till they press the “Next” button to see what they did correctly or missed.
In the
payment process, it opens up a new window
to Moneris’ page.
Deleting an address was confusing.
The user would need to check the address they want to delete but the box is hidden in the top left corner.

Final Design:

We divided the service into
steps
for the user to
concentrate on each main step individually
instead of being swamped by a bunch of information at once.
The main address search the user would be looking up is smart enough to
filter through a database
to bring up addresses based on what the user types.
Each product is a
button
so no matter how small the screen is, it’s
easy to select
the product they want for the address.
In the
payment page is iFramed
so the user is still in the same screen even though it’s still Moneris that is handling the credit card information and payment.