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.

Roles I Played: Visual/UI Designer, Business Analyst, Quality Assurance, minor Front-end Developer

Tools Used: Illustrator, Axure RP, Photoshop

Link: https://my.surrey.ca/building-records-search

 

My Contribution to this Project:

I was the design lead for this particular service. I would be the one meeting with the Business to confirm everything we were designing met their requirements and they were satisfied with all the changes made. I also collaborated with the developers in creating the best user experience with simple but fast interaction for the end users.

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.

 

Common feedback from users of the previous online service were:

  • The service is not responsive. This makes it difficult and time consuming for the end users who are lawyers and realtor to make these requests while on site. The lawyer or realtor would need to wait till they get back to the office to make the request.
  • The service usually only works 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. The end clerks that see these transactions then notice multiple requests with one user.

Issues we noticed from experiencing the site ourselves:

  • 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.
responsive-showcase-brs-coverresponsive-showcase-brs-cover