A half page width cover photo for Mobile Maps on the MySurrey Portal.

Fire Information Request

An online service for Surrey residents to request Fire Department related information - such as structure fires, vehicle fires, vehicle accidents and more on the MySurrey Portal.

I am the sole designer on this project. I worked closely with a business analyst and the Surrey Fire Department during the discovery phase. We had meetings to understand their needs, and the needs of the end users as well as the limitations in our internal business processes and applications. My role ranged from sketches, to mockups in Sketch, Invision Prototypes and conveying the designs in Zeplin to the development team.

My perspective was the front-end user/citizen and her focus was on the backend processes and staff working with the incoming information. Together our solution provides the best experience for both user groups.

ROLE:

  • User Experience Designer
  • Interface Designer
  • User Researcher

FIELD:

Feature Design

YEAR:

Feb 2019

DISCOVERY

The project began as Surrey Information Request, which would have been a one stop shop for all types of information requests that citizens would make. However as the business analyst and I delved deeper we realized we had to separate each request type into its own category because of constraints of business processes within the City.

Fire related incidents happen every week, from vehicle fires to structure fires the Fire Department may be called to handle a situation. The portal is currently where all online services are housed at the City of Surrey, and putting information requests for fire incidents online was the next step for us.

OPPORTUNITY ★

I started this project from this pdf form and created an online experience for people who would like a report on a fire incident that occurred in Surrey.

SOLUTION ★

Fire Information Requests will be available online with online payment as a web application for insurance adjusters and citizens to request information more easily accessible and to alleviate work on city staff.

The introduction page for Fire Information Request
An interface design of all campign groups in grid form.

Mobile Map

A redesigned full page mobile map to remove two finger scrolling that makes pinpointing the exact address or location easier and more intuitive to do.

The old design for this page was scrollable and the map had a two finger scrolling overlay. The only items below the map were the back and next buttons and the footer. This new design incoporates it in drawers above and below the map, which is the most important interaction on this page and is simply a matter of identifying hierarchy.

Calendar Drop Down

A redesigned calendar drop down with a year selector, along with the usual and month picker. The design is cleaner and will be used as the new calendar component across the portal.

A interface design of the campaign page.
An interface design of all campign groups in grid form.

Authorization Forms

Authorization forms are required if someone is requesting private information about someone else. The solution for this was a simple 'yes' 'no' question with different information on each selection. If they choose 'yes' a form upload is required, if 'no' they can proceed but the business wants to call to confirm their identity for legal reasons.

PROCESS

Collaboration

Collaborating with business analysts to understand backend requirements and current business processes and areas of improvement. Working with developers for feasibility in some feature designs. Working with QA to walk through edge cases and scenarios. Bringing it back to my design team to work through use cases, designs and following our current design language.

A interface design of the campaign page.

CHALLENGES

Finding a balance of good UX and time/budget was probably the biggest challenge for this entire project. When I came up with a feature, for example the redesign of the full page mobile maps, I needed to talk to the developers for complexity and amount of time to build. After this I needed to convince my product manager (I have partial ownership as well) that we should be doing this. At the end of the day, a win for me is when a feature is well thought out for the potential user.

OTHER WORK

Explore some of my other work.

SONDER

SONDER, an app designed to connect those who are affected by cancer with tattoo artists through the medium of tattoos.

After interviewing tattoo artists and those affected by cancer we saw a need for cancer patients to express and empower themselves during and after surgery and to be connected to caring artists. Sonder is an app that meets the needs of both cancer patients and caring tattoo artists.

ROLE:

  • Interface Prototyping
  • User Researcher
  • Videographer
View Project

FIELD:

App Design

YEAR:

Aug 2016

Sonder App Landing Screen on a white iPad.