Consumer Research + Website Design Strategy, SanDiego.gov
Redefining how residents engage with the City of San Diego.
Before
After
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.
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.
Client: City of San Diego
Project: Sandiego.gov webportal
Average monthly unique visitors: 1.7 million
Cost: $650,000 (Budgeted at $1.3 Million)
Services:
• 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
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
Discovery Research:
The initial discovery research, lasting two months included both qualitative and quantitative research throughout the City’s 9 council districts and included residents, tourists, city staff, and businesses.
- Informal interviews across 5 days and with 3 teams within all 9 City council districts and surrounding communities
- 10 Formal interviews of staff and residents
- Survey reached 40,000 people
Website Analytics
The website analysis included a website metrics comparative studies of three other city websites (Boston, Fort Worth, and Raleigh) against San Diego’s data; and an analysis of sandiego.gov’s information architecture (IA) against best in class IA.
Evaluative research:
During design development we ran multiple usability and evaluative tests with residents to help refine the designs and derisk the project. Activities included:
- Logo and design testing
- Information architecture usability testing
- Alpha and Beta website usability testing
During the process we were able to stop the City from adopting a logo that tested poorly with both City youth and seniors. Our research informed the general design (color, fonts, images), and the UX frameworks (filters, search outcomes, map features) that were put into place.
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 following is from the Website Strategy, specifically the approach to content and user experience.
The approach for San Diego’s website:
The SanDiego.gov 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.
Design Criteria: Focus all design elements on user modes
THERE ARE 2 USER MODES:
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.
Business Criteria: Increase resident awareness of website content
DRIVE AWARENESS BY PRIORITIZING RESIDENT NEEDS
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.
Design Criteria: Remove deadends and barriers to civic engagement
REMOVE OR ELIMINATE BARRIERS TO ENGAGEMENT
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:
- 3rd Party pop-up legal notices, ie. ‘You’re leaving the City website’.
- Non-functional search results.
- Content: disorganization and jargon render content useless.
- Lack of translation and minimal ADA support.
- Department-siloed tasks and content.
- Forced sign-in to participate.
Navigation Strategy
Design Criteria: Improve content targeting
LAYER INFORMATION FOR EASIER TARGETING
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.
Time
Today > This Month > This Year
Information
Chunked Topical > Process Steps > Deep Dive
User Permissions
Continuous Use > Irregular Use > Single Use
Wireframes (Homepage pictured here)
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. http://www.govtech.com/
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.”
On the IA Report (Phase 2):
“Read the IA report. Spot on. It got me hyped up last night.”
On the IA Report (Phase 2):
“I didn’t realize it was going to be such a deep dive. Super helpful.”
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.”
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.”
On the IA Report (Phase 2):
“It’s amazing to have this information, thank you. I think it totally exceeds my own expectations.”
