Love Fonda logo

 

San Francisco Police Department

UI/UX | STRATEGY | USER TESTING | INFORMATION ARCHITECTURE | WIREFRAMES | WEB DESIGN | RESPONSIVE DESIGN

The San Francisco Police Department is an integral part of the community; working side-by-side with local organizations and individuals to address and solve problems. Through an extensive combination of brand and usability exercises, we focused on representing the SFPD as helpful, knowledgeable, easily accessible and protective neighbors.

SFPD homepage design for desktop
Ordinary people doing extraordinary things.

Goals

  • Effective Audience Communication A platform to build trust and transparency and supplement communication with the community. Provide relevant, accurate content in a timely format
  • Messaging and Branding Align messaging and visuals with the SFPD brand. Provide custom visual vision for the main website and individual district stations
  • Easy Website Content Management Utilize Drupal 8 to create an easy-to-use content management experience for SFPD employees and editor’s employees
  • Best-in-Class Experience Create a visually compelling and user-friendly interface that is fully responsive for access on any device
  • User-Focused Structure Provide optimized pathways for task completion while organizing content and information in a logical, easy to navigate structure

User Research

A solid foundation in usability and brand research allowed us to hear from nearly 5,000 voices throughout the community.

Jessica Skewes and I created a usability plan to include 1:1 usability interviews, focus groups, behavioral analysis (heatmaps and user session recordings), surveys (on-site, police station & end-user) and usability testing.

Efforts focused around three core categories:


  • Task Needs Determine which tasks users most need to complete, while ensuring task flows are intuitive and easy-to-use.
  • Content Needs Investigate the most compelling content for all user groups and determine when it is most relevant. Discover and prioritize new content needs.
  • Behavioral Determine typical behavior and challenges users have when using the website. Gain empathy and structure layouts based on urgency for task completion and content.
table outlining who we want to talk to and who we don't want to talk to during user research

Goals & Hypothesis

Goal/Objective Hypothesis: If [action] then [outcome] because [customer need/problem]
Police Interaction, Alternate Services, Non-Police Issues

Educate users via alternate services and contact information so that officers are freed up to focus on more urgent police work.
If we can better understand when and why people interact with SFPD in person and/or call 911 in error then we can consider the best way to address and resolve their frustrations because we want users to feel empowered, while allowing our police force to have time to focus on urgent police work.
Top Actions & Tasks

Solidify task and actions and desired use of those functions
If we can identify the top actions or tasks community members want to use on the site, and HOW they want to use them, then we can structure the site layout to meet those needs because we want users to be able to quickly access in an optimized manner to complete their task.
News & Story information

Solidify community needs on information consumption
If we can understand more fully how and where community members receive news and story (i.e. good happenings) information on incident/case-related updates, then we can make decisions on how we represent and present news and story information in the site because we want users to consider the SFPD a trusted news source.
Content

Discover content needed to support “safety” communication objective (high-level categories include crime prevention, community interaction/conversation, community policing, data visualization, etc.
If we brainstorm and guide discussion on crime prevention content, then we can determine what types of content would be interesting for members because we want to provide safety content within the site experience to create a more engaging and helpful site
Station Landing Pages vs Full Sites

Build a station architecture that best meet content and community needs
If there is not enough valuable content to house in stations SITES then stations will only have a landing page because we need to understand how much and what content should be custom to station sites only
Navigation & Information Architecture

The existing navigational structure and information architecture is not intuitive and is difficult to use.
If we improve the navigation and information architecture then users will be able to complete tasks more easily (ie. finding information, documents, etc.) because the site will be more intuitive and user-friendly.

User Testing

Using a combination of open card sorting and tree testing while thinking aloud, we were able to validate navigational pathways. Using the learnings from those exercises, we revised the IA for greater success in accomplishing our twelve most important tasks.



Task 1: Your car was just broken into and you'd like to file a police report online.

User testing analysis chart


Task 4: You witnessed a crime and want to share that information with the Police without revealing your name or personal information.

User testing analysis chart

Information Architecture

Using a combination of open card sorting and tree testing while thinking aloud, we were able to validate navigational pathways. Using the learnings from those exercises, we revised the IA for greater success in accomplishing our twelve most important tasks.

Omnipresent Links

San Francisco Police Department omnipresent navigation links

Main Navigation

San Francisco Police Department main navigation links

Footer

San Francisco Police Department omnipresent footer links

Complete Sitemap

San Francisco Police Department complete sitemap

Recommendations

Go-To-Resource

  • Clear pathways to information and resources that allow users to self-educate and self-serve
  • Broad range of information on an ever-evolving list of topics and resources (public safety, victim services, research, etc.)
  • Access to urgent, breaking news and ongoing police-related news


Better Feedback to Users

  • Set expectations by providing response times
  • Be transparent with policies, tactics and information (or provide clear pathways to this information)

Build Connections

  • Ability to know and connect with local officers
  • Clearer information on how to contact the SFPD and more varied / modern options for communication channels
  • Greater opportunity for community events


Personalization

  • Quick avenues to customized resources that pertain to unique neighborhood needs
  • Subscription management for news topics and frequency (breaking news, safety updates, neighborhood news, etc.)

Wireframes

Starting with a simple text outline, we were able to collaborate on content hierarchy for a large number of pages within the site. We leveraged 10 templates in total for a variety of layouts throughout the site.



Navigation Dropdown (Search)

San Francisco Police Department wireframe for navigational dropdown for search


Stay Safe

San Francisco Police Department wireframe for Stay Safe page


News

San Francisco Police Department wireframe for News page


Search

San Francisco Police Department wireframe for Search page

Contact and Directory

San Francisco Police Department wireframe for Contact and Directory page


Community

San Francisco Police Department wireframe for Community page


Careers

San Francisco Police Department wireframe for Careers page

Visual Design

Using an atomic design methodology, Kim Murphy and I created a pattern library of atoms, molecules, organisms and templates. Once we defined all possible components, it was quick and easy to create layouts for multiple screen resolutions.



Atoms

San Francisco Police Department visual design atoms


Desktop Designs

San Francisco Police Department visual design for desktop