The NYC Mayor’s Office oversees the operations of one of the world’s most complex municipal governments. As part of its commitment to efficiency and transparency, the office sought to digitize its “agency procurement process” guide. This essential resource outlines the 11 steps required for contracts managed in the city’s PASSPort system. The goal was to create a digital tool that agency procurement professionals could easily use to navigate the intricate process, whether following it step-by-step or accessing specific information on demand.
The primary challenge was translating a dense, procedural document into an engaging and user-friendly web experience. The design needed to simplify complexity without sacrificing critical detail.
Our approach centered on creating a clear, intuitive, and visually engaging “roadmap” theme. This concept provided a familiar metaphor for guiding users through a multi-step journey.
1. Roadmap-Themed Design
We designed a clean, graphical interface that visually represented the procurement process as a linear path. Each of the 11 steps was presented as a distinct stop on the roadmap. This visual structure made the entire process glanceable and less intimidating. Users could see where they were in the process at all times, with clear indicators for completed and upcoming steps.
2. Adherence to the Official Style Guide
Working strictly within the NYC Mayor’s Office style guide, we utilized its specified color palette, typography, and logo usage to create a design that was both new and familiar. This ensured the web tool felt authoritative and seamlessly integrated with the city’s existing digital properties.
3. Enhanced User Experience (UX)
The design focused on ease of use. The main roadmap provided a high-level overview, and users could click on any step to expand a section containing detailed information, links to resources, and relevant forms. This layered approach kept the main interface clean while providing depth on demand. This dual functionality allowed users to either follow the roadmap “step-by-step or jump to the sections you need,” directly addressing the core project requirement.
