Design with a German Spin! Curious. Compassionate. Thorough.
 
SFport Homepage Bay Bridge.png

Website / site architecture / uX / Ui / Visual Design

San Francisco Port | Website

This was an extremely fun as well as especially challenging project. In 2019, we were awarded the contract to redesign the Port website with our partners at Bonner Communications. 

The previous website was barely usable, hard to understand, and visually undeveloped. In our research we sought out what users and internal stakeholders really expected from their website and what their business goals were.

Our starting point - The original website:

 
 
 
 

The Strategy

Getting Buy-In from Stakeholders

We interviewed 60+ people overall spanning each department of the Port, the businesses hosted on Port property that drive a great portion of their revenue, and end-users we intercepted on the 7.5-mile waterfront from the Aquatic Park to India Basin, all on Port property.

This gave us the foundation on which we designed the site architecture.

 
 
San Francisco Port Home Page Crab Season with image of crab fishers  unloading their boat.
 

Pandemic Sized Challenges

Double Trouble

Usually we work with a development team early on in the process, but in this case there hadn’t been a budget allocated for that yet. 

Additionally the world faced COVID, which had arrived when the site development began, so priorities dramatically shifted. 

Therefore, the full extent of our design and research is not reflected in the final outcome of the site, though the core idea of highlighting the Port property through a central map with which the visitor can navigate still stands.


 
 
 

Opportunities

The Future 

The lack of pressure on the businesses and agencies is understandable in light of the COIVD crisis that hit during development, which made promoting stores, restaurants, and the cruise ship business less relevant. Also, it was hard to ask struggling business owners to do one more thing in their ‘spare-time’.

As an enterprise agency, driving more business to the Port is of utmost importance, but everything took a backseat to the Pandemic.

Regardless, the website contains an enormous amount of information - over 8,000 pages - about ferries, shops, restaurants, offices, the Ferry Building, Pier 39, cargo shipping, harbors and berthings, the historic piers, a resilience program to counter sea-level rise, Alcatraz Tours, and the cruise ship industry, on top of all of the day to day business an international Port has to manage. The site is used by a huge variety of user types for all sorts of tasks, including bus routes, parking tickets, trip planning, infrastructure project information, and parking regulations.

 

 

SFPort-SlowClap-photo01.jpeg
 

Ultimate

Goal

We design a highly visual website that turns the Port into the destination it is.

The directives we distilled from the interviews were:

  1. Drive Revenue through hosted businesses and other fees

  2. Show Quality & Diversity of staff and guests

  3. Engage Community to become part of the Port

  4. Always depict Land and Sea in combination

The new website preserved most of the major directions we determined, using beautiful hero images to promote their destination and marketing initiatives and show diverse images of land and sea while utilizing the logo colors throughout the site. An interactive open-source map is front and center to showcase the expanse of the Port property and allows the user to quickly find destinations.

The next step will be to motivate the businesses and partner agencies to update their information in Openstreetmap.org to make the map truly useful and a valuable asset to visitors and owners.