Redesigning the website for a world-famous bridge

The Project

In 2016 the Golden Gate Bridge, Highway & Transportation District decided that they needed a new website. The District maintains the Golden Gate Bridge — an iconic architectural landmark for the San Francisco Bay Area, and – probably the most photographed bridge in the world — but also operates the Golden Gate Busses and Ferries that service the corridor north of San Francisco. Last year alone, more than 38 million vehicles crossed the Golden Gate Bridge and over 9 million customers rode the transit systems.

The District's old website has not seen an update in years, and has grown organically over time to become cluttered, confusing and visually outdated. To change this the District contracted with FFW to plan, conceptualize and design the foundation for a new website.

As Creative Director and lead on the project, I led all discovery, strategy, UX/UI design and prototyping activities on the project. Besides me, the project team included an additional UI Designer/Prototyper and a Project Manager.

Discovery & Research

The foundation of any successful website redesign project is a thorough understanding of the context it exists in — the digital ecosystem, the users, the challenges and opportunities.

In order to etablish this foundation, we initialized the redesign for the Distric's website with a discovery phase. Over the course of two weeks we conducted four workshops and interviewed more than 25 stakeholders from the District; from the executive management, to personnel from the bridge, bus and ferry departments, to customer service and marketing representatives.

Website Objectives

Our stakeholder interviews and workshops served several purposes. Firstly, they enabled us to uncover key insights about the current pain points and challenges, target audiences and the content and structure of the website. Secondly, they allowed us to guide and align the many internal stakeholders at the District around a set of clear objectives for the project:

• Provide the public with information on the District’s services as efficiently as possible.
• Educate the public about the purpose of the District, and the interconnection of the ferry, bridge and bus services.
• Support visitors looking for information about the Golden Gate Bridge, and explain the history of both the bridge and the District to those interested.
• Accommodate inquiries from the general public, vendors and job seekers looking to engage with the District.

These objectives guided the design work throughout the process.

Mapping Out the User Journeys

A key challenge for redesigning the website was that it needs to service a very diverse group of users; from commuters on the bridge, busses or ferries, to tourists looking for the best spot for selfie with the bridge, to researchers, vendors or potential employees looking for relevant information.

In order ensure a clear prioritization among these audiences, we worked with the stakeholders to rank and divide them into primary and secondary groups. Among the primary audiences were customers for the bridge, busses and ferries, as well as tourists and visitors to the bridge. Among the secondary audiences were researchers, the general public, staff, and potential vendors and employees.

User Journeys

In order to think deliberately about the the key use cases for the website, we asked stakeholders to help map out and prioritize some of the most common scenarios or user journeys on the website. A good technique for quickly mapping out this information is relying on "the Five Ws" — Who, What, When, Where, Why — a well-known research formula borrowed from journalism.

Mapping out these simple user journeys allowed us to start forming a clear picture of both the user needs and the content prioritization for the website. The results were collated into a clear overview for us to reference throughout the design process.

Visual Exploration

An important part of the project was also helping the District to update and modernize the branding and visual style of their website. While the District already had several core brand elements in place, including logo and colors, they did not have a detailed styleguide built out, which gave us a lot of flexibility in defining the new direction.

To get discussions going I ran a 20 Second "Gut" Test with key stakeholders on the project. In the test I showed a series of 15 website front pages for 20 seconds each, and asked people to rank them from 1 (“Strongly dislike website”) to 5 (“Really like website”) based on their first impressions. Following the test we discussed the various websites and rankings, with a focus on navigation, prioritization of content and visual style.

Design concepts

Based on our research and discussions, I spent a week together with the other UI designer on the project, exploring various combinations of fonts and colors, and trying out several different direction for the overall UI system in Sketch.

The Golden Gate Bridge is known for its distinct orange color and art deco style; at once traditional and classical, as well as modern and playful. We tried to capture these distinctive characterics throughout the visual style.

Typography

One example of that was the basic font pairing for the site. In the end we settled on a combination of Chronicle Display, a Transitional style serif font, for headlines and display text, and Gotham for body copy; a combination that in my sense does a good job of mirroring the style:

In-Browser Prototyping

As soon as we settled on the general design direction for the project, we switched over to designing directly in the browser. We built out the rest of the design as a prototype using HTML, SCSS and Javascript.

Designing directly in-browser allows you to not only see your design, but also rapidly test your assumptions and design patterns across screen sizes and devices. This gave us an opportunity to refine the interaction design, as we started to build out some of the key pages.

One such example is the Route Page - a page for showing the schedule for a specific bus route. A key use case for the website is to allow bus customers to easily view and browse bus these schedules, and the experience has to be just as seamless on-the-go from a smartphone, as it is at home in front of a laptop. Designing and displaying complex table data is always a challenge, and we researched several potential design patterns before settling on the final design.

The Result

The end result of the process was a prototype that fully outlines the new concept for the website, including key pages and design patterns. The website not only modernizes and matures the District's online presence, but seeks to create an experience that is much more accessible and engaging for the plethora of different audiences using the site every day.

The prototype was handed over to another agency, responsible for developing the site. During this process, the design changed quite drastically from the prototype.