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
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
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
Myself (UX and UI Design)
Development (outside agency)
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.
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
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 Elements
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.
To distinguish key city services from browsable editorial content, I gave them a distinct graphic treatment, using icons, color and gradient circles.
PARKS & REC
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
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.
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.
• 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