01 — Role
The only designer. No system to inherit.
I owned the experience from concept through delivery — the only designer on the project. The product had never had a system to build from, so before designing new screens, I built one: a role-based type scale, a color logic mapped to the resource taxonomy, named and reusable styles for spacing and shadow.
I worked hand-in-hand with engineering on implementation and accessibility, and directly with all eight resource groups to confirm the foundation held up against eight different sets of requirements.
02 — Problem
Finding something nearby shouldn’t be this hard.
People searching the directory weren’t browsing a product — they were trying to find a church, a practitioner, a nurse, somewhere in the world, often during a moment that mattered to them. The legacy experience made that harder than it needed to be.
A sortable table demanded an exact match: no “near me,” no predictive search, no way to just start typing and see what’s close. There was nothing to look at either — no map, no visual sense of where anything was relative to you. Finding a resource meant scanning rows of text and hoping you typed the right thing, with no feedback and no geography to orient you. For a directory whose entire purpose was helping people find something near them, that was the core failure.
03 — Early Ideation
Where should people enter the product?
Before any design work started, a cross-functional team ran a design sprint to answer the question the whole product turned on: how should users enter the directory? Three models were on the table.
The Map model led with a full world map and pins, giving users an immediate sense of the church’s global community before searching. The Split model combined map and search on the landing page, letting users choose their entry point. The Find Us model led with information about the resources themselves, putting context before geography.
Each had real tradeoffs. The map was visually powerful and conveyed global scale, but risked overwhelming users who already knew what they were looking for. The resource-first approach was grounded and informative, but removed the one thing a location-based product could show that a table never could: where everything actually is.
We landed on the Map model. The visual weight of seeing a world of pins before you search turned out to do something no other entry point could — it told users immediately that this was bigger and more global than the old table had ever suggested.
04 — Building the Foundation
Rules before screens.
Figma didn’t have Variables yet, so I relied on Text and Color Styles to maintain consistency. I built a role-based type scale instead of arbitrary sizes, a color logic mapped directly to the eight resource categories, and named, reusable styles for shadows and spacing.
That foundation let me move fast afterward. Every new screen applied an existing rule instead of forcing a new decision.
05 — Building on It
The system absorbed it.
With the foundation in place, I built the experience itself: map pins and clustering, predictive keyword and location search, a full filter system with shared and group-specific facets, profile pages for every resource type.
Nothing required inventing a new pattern partway through. The system absorbed it.
06 — Reconciling Eight Requirements
Extend the system, don’t fork it.
Each resource group had different needs. Nurses needed availability fields. Teachers needed a “currently teaching” status. Churches needed service schedules. Because the foundation was consistent from the start, accommodating those differences meant extending the system rather than forking into eight separate experiences.
07 — Accessibility
WCAG AA, throughout.
I partnered with engineering on a full accessibility pass: color contrast across the category palette, a defined keyboard focus order, screen reader interaction patterns. The result meets WCAG 2.0 AA throughout.
08 — Usability Testing
Real users, working environment.
We tested in a working dev environment with new and existing users. The landing page and basic search were intuitive. The map gave people a clear sense that the church’s resources are global.
Cluster pins showing multiple category colors got confusing once filters were applied, so I simplified the cluster treatment. The stacked gray-pin pattern for overlapping markers wasn’t intuitive, so I redesigned it. Broad location searches could return technically correct but unhelpfully distant results, which shaped how I handled scale in location search.
09 — Outcome
The foundation held.
The new Directory shipped two months ahead of schedule. Feedback from the field was strongly positive. Customer service reported a noticeable drop in directory-related complaints. The foundation held across all eight resource groups without forking into separate systems, and held fast enough to beat the timeline despite the groundwork required upfront.
Reflection
There was no system to inherit here. Just an old, static product and a blank slate underneath it. The real work was building the foundation first, then trusting it to absorb everything that came after. Find a product with no system. Build the rules before building the screens. This was the first project of its kind at the organization, and it opened the door for more systems-focused work across other teams.