Helping Burbank residents and visitors seamlessly access the information they need

Burbank.gov is where City of Burbank residents go to access all information and services provided by the city. Everything from building permits, to trash pick-up, to parks and recreation information lives on this site. Tourists and visitors also use the site to find travel information and recommendations. 

My Role: UX and UI Design

Client: UX Design Collective (agency) and The City of Burbank

The Problem

There were many problems with the Burbank site. To begin with, it was cluttered, had no discernable organizational hierarchy, and the prominence of the different functions did not match their level of importance. From a design perspective, the site looked old and out of date. We also spoke to users, content creators, and administrators of the site, to hear their views on the user experience.

Before: Original Burbank.gov homepage

  • Overwhelming amount of content

  • Users often can't find what they're looking for, or it takes a long time 

  • Search function doesn't work well; users use Google to search the site

  • Site organization is not clear

  • Page is hard to scan

  • Text is too dense 

  • Info is often out of date

  • Promoted content is often not the most important content

Users said:

Site administrators and content creators said:

  • All departments reported that updating the site is time consuming and difficult

  • There are a limited number of templates and modules to meet their needs

  • Preview is not accurate

  • Citizens are directed to many different departments and people

  • Since content creators are not designers, they need examples and guidance or automation

The Team

  • Myself (UX and UI Design)

  • Product Owner

  • Project Manager

  • Development (outside agency)

The Goal

The goal was to create a more modern looking site that conveyed the vitality of the city, while providing easy access to the wide range of information, tasks, and services contained within the site.

1. Wireframes

Iterative Cycle

Throughout the design process, we had bi-weekly check-ins representatives from each Burbank government department (Information Technology, Parks & Rec, etc) who would look closely at the layout to make sure that it would be able to accommodate the unique programming and content needs of their department. These meetings provided valuable feedback which we could then incorporate into the design cycle.

Get Feedback from Burbank Content Creators

Design Wireframes

2. Visual Design

The look and feel of the site was steered by Burbank's new logo and branding, which relied heavily on gradients, and triangular elements, or "Play" buttons. However I wanted to make sure that the site felt open and airy, so it was important that these branding elements served to support, not overwhelm the functionality

Improved Search function is now front and center

Large hero image of Burbank sets an open, airy tone for the site

All services and links to services are grouped into one central area, and differentiated from other content through the use of graphic treatment, including icons, gradients and color.

Top 5 services are surfaced on home page

 

Featured content is now grouped together, centralized, and given a consistent design treatment

The Burbank Homepage, and any other pages that are not department-specific, use a consistent, recognizable palette

Burbank's visual branding is implemented in a way that is distinctive, but doesn't overpower the site navigation and functionality

3. Design System

To build a design system for the site, I followed the principle that different types of information needed to be graphically differentiated so as to make the pages more "scannable." A user shouldn't have to read dense text to find where they need to go. A prime example of this was the use of icons within a gradient circle to denote links to key services.

Icons

To distinguish key city services from browsable editorial content, I gave them a distinct graphic treatment, using icons, color and gradient circles.

PARKS & REC

HOME

As seen on mobile

" The colors are so soothing"

In other areas of the site, icons were used as a way to for the user to quickly locate different departments.

" I love the photo

of Burbank"

Color System

Burbank Main Palette

The main palette, based on the Burbank Logo, was used to signify global navigation and elements.

Examples of 3 Department-Specific Palettes

Any content or navigation that pertained to a specific department was denoted with a department-specific palette. 

3. Hi-Fidelity Prototype

I created a hi-fidelity prototype in Figma in order to get a sense of how the interactions and flow of the site would feel to a user. We used the prototype for internal testing, and eventually for user testing.

User Testing

We conducted one-on-one user testing with 17 Burbank residents over Zoom. We assigned one of five main user personas to each of the subjects, and then asked them to complete a set of tasks specific to that persona. We observed them as they tried to complete each task, and asked them to narrate their experience as it was happening. After the tasks had been completed, we asked them follow-up questions, which prompted them to go into more detail about their experience navigating the prototype. 

Feedback & Insights

The feedback we received from Burbank users was very positive. They loved the feel of the site, and found it very easy to navigate. However the user testing was still very informative in terms of alerting us to some fine-tuning that still needed to be done. Some of the suggested revisions:

 

• Make everything smaller so that there is more content visible on first load

• Move utility nav closer to main nav

• Make it clear that top-level nav items, and not just their sub-items, are clickable​

• Make the link to "All Services" more prominent

• Apply departmental color coding to the calendar items

These were all valuable pieces of feedback. After user testing was complete, I incorporated the findings into the final product.

Burbank Citizens...

 

•  Loved the new look of the site

•  Found it much easier to find what they were looking for

•  Felt the site gave a more accurate representation of Burbank

•  Discovered services they had not known about

•  Said they were much more likely than before to use the site regularly

The site is currently in development, and will launch in December, 2020