Consumer Research + Website Design Strategy,

Redefining how residents engage with the City of San Diego.

The City of San Diego turned to Hopscotch Labs to uncover citizens’ and visitors’ real motivations and needs for the City’s website. With 1.5 million residents and 20 million annual visitors, we utilized rigorous discovery methods to capture insights across the community and drive towards a website strategy that would reflect the City’s unique and diverse audience.
Our website strategy and wireframes were turned into the beautiful layouts still being used today. The design firm for the project, Elevator, provided us materials to test the new branding, navigation changes, and the alpha and beta sites. This usability testing incorporated extensive community outreach to maximize resident voices. The project was undertaken in an iterative and agile fashion, the first of its kind for the City, ensuring the best possible outcome for all stakeholders.
In undertaking the website redesign, Mayor Faulconer’s goal was to visibly and tangibly show the changes happening in city government, and to improve resident engagement with City services, departments, resources, and data.
Client: City of San Diego
Project: webportal
Average monthly unique visitors: 1.7 million
Cost: $650,000 (Budgeted at $1.3 Million)
• Design research
• Website design strategy
• Community engagement
• Informal + formal interviews
• Survey
• Website analytics analysis
• Heuristic analysis
• Brand user testing
• Website usability testing
• Content strategy workshop
• Information architecture
• Wireframing + UX
Discovery Research:
  • • Conducted informal interviews in all 9 City council districts and surrounding communities
  • • Conducted 10 formal interviews of staff and residents
  • • Survey reached 40,000 people
  • • Website task analytics compared to three other cities

The Challenge and Struggles of the Website

Where to begin is always a challenge. With the City’s website, 15 years of content had accumulated, plumped up by departments using it for document storage and third party apps, the site presented many challenges to people using it, including:
  • Firewall-based civic engagement, as a result, it didn’t happen on the website forcing residents to go in person to meetings, or not comment at all.
  • Jargon and unorganized content left people cold; because the website felt hard to use, people would procrastinate or call to get their questions answered and tasks completed. This used up valuable staff time.
  • The website did not reflect San Diego’s values, lifestyle or people. The content, design, and tone of the website were a poor reflection of what San Diegans value and expect of the City.
  • Ultimately, the website gave neither Residents nor Staff reason to stay.
We discovered why residents turn to the City of San Diego’s website. They are looking to accomplish a personal or a city task, which are tactical or exploratory. They want San Diego’s website to be a tool to draw businesses and tourists, and a resource tool for their needs.
Resident’s primary goals were to use the site as a:
  • Tool to create interest in the City
  • Tool to accomplish City-based or owned tasks
  • Source for neighborhood information

Website Analysis

The website analysis included a website metrics comparative studies of three other city websites (Boston, Fort Worth, and Raleigh); and an analysis of’s information architecture (IA) against best in class IA.

How Hopscotch Labs took action to revamp the City of San Diego website:

With the research done, we set out to define the website strategy and approach to content. The document laid out recommendations for content, including search and structuring results, department-based jargon, and public interest items. Three years later, these documents are still in use and changing the way departments relate to each other and manage their online content.
The follow is from the Website Strategy, specifically the approach to content and user experience.
The approach for San Diego’s website:

The website is a resource tool for residents to access and take advantage of all that the City of San Diego has to offer. The website needs to enable task completion and empower residents to participate in conversations important to the city, while also drawing economic opportunities to San Diego.

A: Tactical: Get it Done
Support immediate action and long-term planning.
B. Exploration:
Support learning and active engagement with the City and its amenities.
Task completion
Help me track my issue.
Hear me/show me you’re listening.
Help me stay on the site.
Event Awareness
Help residents know and be part of what’s going on in San Diego—showcases initiatives and engagement.
Help (support) residents and website users plan.
Help users know San Diego.
San Diego Safety
Help residents protect their home, and family.
Help residents know what to do in an emergency.
Alert residents to major accidents or traffic jams that impede their travel.
Residents want to be engaged. Frustration stems from poorly executed communication tools that impede or hinder their ability to access content and participate in important conversations.
Barriers to satisfactory civic engagement:
  1. 3rd Party pop-up legal notices, ie. ‘You’re leaving the City website’.
  2. Non-functional search results.
  3. Content: disorganization and jargon render content useless.
  4. Lack of translation and minimal ADA support.
  5. Department-siloed tasks and content.
  6. Forced sign-in to participate.
Navigation Strategy
Allow users to peel back the layers to dig as little or as much as they want. Enable content and search that allows multiple entry points and engagement modes.
Today > This Month > This Year
Chunked Topical > Process Steps > Deep Dive
User Permissions
Continuous Use > Irregular Use > Single Use
Wireframes (Homepage pictured here)
Evaluative research: 
  • • Logo and design testing
  • • Information architecture usability testing
  • • Alpha and Beta website usability testing

The Site is Getting Results.

The City of San Diego website placed 2nd in the Center for Digital Government’s Best of the Web Awards for the City Portal category.!
On the Project Plan: 

“Cyd and I looked at the project plan together and we are totally happy with it. We do wonder if we can use this as a model or best practice for other cities in the Code for America network. I’m just impressed with your organizational and execution skills.”

—Jeff Johnson, Code for America, Past Brigade Captain, San Diego
On the Research Report (Phase 1): 

“Just wanted to say that you and your team did an incredible job on the research draft.  Really impressive work.” 

—R. Vazquez, Project Manager
On the IA Report (Phase 2): 

“Read the IA report.  Spot on.  It got me hyped up last night.” 

—R. Vazquez, Project Manager
On the IA Report (Phase 2): 

“I read it last night too. Really good stuff. I like how Kris’ team got away from the basic Residents, Business, Visitors layout that I see everywhere.” 

—J. Freeman, Design Lead
On the IA Report (Phase 2): 

“It’s amazing to have this information, thank you. I think it totally exceeds my own expectations.” 

—M. Irons, Design Manager
On the IA Report (Phase 2): 

“I didn’t realize it was going to be such a deep dive. Super helpful.” 

—Jeff Johnson, Code for America, Past Brigade Captain, San Diego

Is Your Website Ready for Results, Too? Book your free consultation to see if this is the right fit for getting your website redesign launched.

App Experience
App User Experience