Burlington pier

The City of Burlington

Complete redesign of a municipal website, UI and UX testing.

At the City of Burlington, improvements to web technology had been made incrementally. Over time, this resulted in a very outdated and disjointed user experience.

With more than two-thirds of Burlington residents and businesses surveyed saying they preferred to carry out interactions with the City online, it was time for the City to listen and respond with a newly designed website. The project called for a site that was intuitive, accessible, scalable, and responsive.


Client

The City of Burlington

Role

Design & Development

Timeframe

2014–2015

Principles

Alignment, Balance, Colour theory, Contrast, Emphasis, Grids, Hierarchy, Negative space, Page layout, Pattern, Proximity, Repetition, Rhythm, Rule of thirds, Typography, White space

Skills

Brand development, Digital design, Digital signage, Email design, Logo design, Print design, Signage, UI+UX design, Wayfinding, Web design


The Approach

1) Empathize. Research the User Needs

A series of Customer Journey Mapping sessions were run to gain a deeper understanding of the challenges users faced with the current website. It was important to experience the site as our users would. To facilitate this approach, a set of personas were created to represent web visitors.

2) Define. Construct Point of View Based on User Needs

Browsing behaviour information, feedback acquired over time, and a comprehensive review of website analytics allowed us to bring clarity to the perceived website challenges. With the user’s perspective top-of-mind, we were able to develop balanced, well thought-out hypotheses.

3) Ideate. Challenge Assumptions and Create Ideas

Through a series of online and in-person sitemapping workshops, the information architecture for the website began to evolve. Brainstorming occurred at all levels of the organization. Strategic decision-making led to insightful action items that brought true value to the redesign project.

4) Prototype. Build Representation of Ideas

This stage involved sketching, wireframing, and mockups of potential solutions. Ideas were transformed into product. It was essential to work closely with the development team to ensure the design was technically feasible.

City of Burlington wireframe by Cam Stevens

5) Test. Observe and Collect Feedback

A/B concepts were tested during user experience workshops with residents, businesses, and internal stakeholders. A critical success factor was the ability to be agile, adapting when necessary, to enhance the overall user experience.

City of Burlington heatmap by Cam Stevens

Outcome

This project delivered an award-winning website and transformed the City’s web-based services to meet the program goals of building a customer-first service delivery model.

City of Burlington web design by Cam Stevens

Website navigation focus group

Sitemapping Workshop
Participants were led through a user-focused design exercise to establish the information architecture for the new website.

Website navigation focus group

UX Workshop
Several prototypes were presented to user groups to gather feedback. Actionable insights paved the way for design refinements and improved user experience.

City of Burlington Hermes award

Success!
After months of research, design, testing and building the site was launched. My design won numerous awards for Best Goverment Site Design

Going Mobile

Responsive web design for The City of Burlington was essential. Previous to this, Burlington’s website was not mobile-friendly and the navigation was not intuitive.

City of Burlington site design by Cam Stevens

City of Burlington site design by Cam Stevens

City of Burlington site design by Cam Stevens

City of Burlington site design by Cam Stevens

Typography

Verb was chosen as the typeface for the website. It is a workhorse of a font and is also used in all print projects at the city.

City of Burlington typography

City of Burlington typography