Traffic Camera Footage Request

Product Design
Project Overview
Designed a web application for people to request footage from Surrey’s 300+ traffic cameras. This helps residents, insurers and lawyers make more informed decisions before purchasing footage from the city. We put the request transaction online, included preview images of footage and improved the map experience.
My Contributions
Product Designer
User Testing
City of Surrey
Product Designer
2018 - 2019
I designed this new web application to replace a simple form and dated traffic map. Bringing this service online is one of the important steps for the City to provide easy, user friendly experiences to our residents. This service is also used by ICBC, insurers and law firms to request traffic camera footage online.

Location and Responsive Map

The location and date needed to be on the same page as the image preview so users can toggle between location, date, time and images (showing in 15 minute intervals). The map also needed enough space so users could interact with the map toggles. The final design responds well to all screen sizes and both the side bar and map have enough space so users can interact with it comfortably.

Mobile Map Constraints

The mobile map has a side arrow on the left side of the screen to view the side bar. If users miss this tapping on "next" brings up the bar for them to fill out details.

This app was the first to have updated map features with zoom, find my location, pinch and zoom, dropped pin location and nearby points of interest.

Account Flows

An important feature of this app was having different features for verified account types. In this flow, business accounts are created for them and on their first log-in their account is linked to the invoice feature which gives them the option to pay or to be invoiced.

The pay now and invoice feature is only available to verified accounts. Otherwise the business requires payment for all requests.

Image Preview

Desktop view
Mobile view in the side tab

Each black camera icon opens up one of the 400+ cameras in the City, when someone gets into an accident or requires footage from one of these intersections in Surrey, they can look here to see if there is footage they can request.

The image preview shows 15 minute snapshots of the camera view so users requesting the footage can make an informed decision before requesting footage. These snapshots go back 30 days and provide a general idea of camera angle, availability (cameras can go offline) and other factors to the customer.

Reflections

This application was the first with full map controls with a side bar. Each element on this page could affect each other so it took a lot of back and forth with my developer to work through the best and most user friendly experience. This project made me appreciate all the hard work that goes into great map experiences.

Other Work

Explore my other work

Report a Problem Redesign
Product Design