Designing principles for San Francisco’s City website

In my last post, I talked about how my team at the SF Digital Services gathered public perceptions through a big user research project. What we learned fed directly into the visual design of the new City website.

My team and I approached design for the website in two parts: how it functions and how it looks. Visual design and interaction design are, of course, inseparable. Both come together to create the overall experience. But separating the project this way allowed us to focus on one thing at a time, and apply different design skills more effectively.

For the identity of the City website, we worked with the team at Wolff Olins San Francisco office. To help them understand our needs and goals, we synthesized the research into 5 principles.

These principles were written after deep analysis of what we heard from the public. While the user research project provided extensive and nuanced findings, we had to reduce it down to key principles. High-level goals help structure difficult design decisions, and now serve as evaluation criteria.

1. Represent the diversity of the city.

San Francisco can’t be represented by a single neighborhood, type of person, or culture. Diverse is the top word that City staff and members of the public use to describe what they like about our their city.

2. Celebrate our unique culture and progressive values.

San Franciscans are proud of our personality and forward-thinking that sets us apart from other cities.

3. Be accessible and inclusive for all people.

We want to set the standard for delivering excellent experiences to people from any culture, language, education, disability, technological capability, mode of accessing the internet, socioeconomic status, location, or other characteristic. Everyone should feel like this website was made for them.

4. Reflect that the website is easy to use, efficient and reliable.

Before users even interact with us, the visual design sets expectations for how functional our services will be. Many people already have negative perceptions of government that need to be overcome. At the same time, they need to be assured that this is a legitimate website they can trust.

5. Be flexible for the variety of services and content we offer.

The City’s identity must flex to be appropriate to a huge breadth of services. City services range from:

• happy occasions (getting married) or serious (help if you’re being evicted)
• engaging (visit a park) or transactional (fill out a permit application)
• complex (open a business) or simple (pay a parking ticket)

The new look for San Francisco’s website started with these principles. After months of work and iteration, the biggest building blocks are in place but we’re still adjusting the details. We’re stress-testing the new visual styles by applying them to different webpages and scenarios, sharing them with the public, and evaluating the feedback against our principles.

Having clear principles based on public input created a strong base to come back to. They align the team on what we want to achieve, and keep it front-of-mind. The design process is rarely straightforward, but it helps to have a north star to revisit when things get cloudy.