acs+and+p20.png

SSA.gov Field office locator

Scroll

Challenge

The office locator needed to accommodate a wide range of user journeys. Some users start at the office locator looking for a location they can access in-person service. Other users find it mid-process—perhaps after discovering they can’t complete their task online. Still others reach it at the end of their journey, when selecting an office during an appointment scheduling interaction, or looking up directions to the office they are scheduled to visit. Any office locator design had to work in all of these contexts, and provide users clear and immediate access to important office details.

Significant constraints shaped this project. Budget limitations ruled out third-party mapping tools like Google Maps or Mapbox. Internal infrastructure took nearly a year to stand up a usable instance of ArcGIS. Consequently, we had to create a fully functional MVP without a map at all.

Another critical challenge was how to contend with communicating about "Card Service Centers.” A card service center are specialized offices that only handle enumeration-related tasks (like issuing or updating Social Security cards). These centers often confuse users, especially because offices that are near card service centers will not handle enumeration related tasks that are reserved for the local card service center. To compound this issue, even though there are only a handful of card service centers and adjacent non-card service centers nation wide, they are all located in areas that by design have the highest population density. So millions of users will have to navigate deciding between card or non-card service centers. Our design needed to account for this complexity in a way that was both accurate and user-friendly.

current state wire flow

Current state wire flow

Decoupled office locator flow

Decoupled office locator flow

Early card center wire flow

Early card center wire flow

 

Solution

We designed a lightweight, responsive interaction centered around a single search interface. The search screen also served as the results page, listing local offices as a vertical stack of distance-sorted cards. Each card displayed basic office info such as distance and hours, a clear visual tag to indicate if Card Service Center (or if it did not handle card services,) and quick access links for directions and detailed office information.

The contextual FAQ was used to help users understand what card service centers were, what they did and what they did not handle, and what it meant when an office did not handle card services.

Clicking through to an office detail page provided additional guidance: address, hours, contact info, specific office alerts, and a short, plain-language explanation about card-related services where applicable. Users could also launch the “Schedule Appointment” flow directly from the detail page. This interaction included a brief questionaire to determine the task type, allowing offices to match appointments with appropriate resources and service capacity.

While the MVP did not include a map-based UI, we designed the locator architecture to accommodate a future integration with ArcGIS. This will eventually allow users to switch between spatial and list-based search methods.

 

Learnings

Even without the visual convenience of a map, we learned that clear information architecture, mobile-first design, and precise task guidance can deliver a solid user experience. By structuring office info into modular cards and using visual tags for office types, we mitigated confusion and helped users move confidently through a critical step in their interaction with SSA.

Designing around the complexity of Card Centers taught us the value of contextual guidance. We couldn't eliminate complexity—but we could acknowledge it, explain it, and help users make the right decisions before they ever set foot in a field office. This approach was intended to prevent misdirected visits and reduced strain on staff, and improve outcomes for everyone involved.


Wireframes and Prototyping

Below is an example of a large data table that I needed to preserve in a responsive web format. All of the images on this page are from wireframes I built using Cushman & Wakefield’s current website as a starting point. The full width view entirely re-creates a current webpage, and the tablet and mobile views are entirely my design. They were built to carry through design language and UI while maintaining a seamless responsive experience.

Early proposed wire flow

Early proposed wire flow

 
Early wireframes

Early wireframes

user flow self service from google

user flow self service from google

MVP Wireflow

MVP Wireflow

 

Below are larger views of the wireframes in order of breakpoint: desktop to tablet to mobile

Office detail re-skin

Office detail re-skin

Self service to office visit flow

Self service to office visit flow

Wire flow options

Wire flow options

Full Desktop Wireframe

Full Desktop Wireframe

 
 

Wireframes and Prototyping

Below is an example of a large data table that I needed to preserve in a responsive web format. All of the images on this page are from wireframes I built using Cushman & Wakefield’s current website as a starting point. The full width view entirely re-creates a current webpage, and the tablet and mobile views are entirely my design. They were built to carry through design language and UI while maintaining a seamless responsive experience.

P20_Journey+Map_Rasmane+small.jpg
 
Web1920+–+1crop.png
Column Detail

Column Detail

Submarket Row Detail

Submarket Row Detail

 

Below are larger views of the wireframes in order of breakpoint: desktop to tablet to mobile

Full Desktop Wireframe

Full Desktop Wireframe

Full Tablet Wireframe

Full Tablet Wireframe

Android+Mobile+–+4+crop.png
Android+Mobile+–+5+crop.png