Overview: The Mayor's Office of Contracts and Services in New York City (MOCS) uses the PASSPort system to optimize their procurement process. Over 70,000 active users across vendors, city agencies, and the public use this platform daily. After applying a human-centered design approach to understand their needs we discovered the underlying problem with the existing platform was too many disparate systems. Our recommendation was a single unified experience where the users could access all the modules they needed for their day-today work. This included rebuilding the document vault module (now dubbed PASSPort Vault) that was previously only available to HHS agencies, into this platform.
We engaged the client stakeholders and select users in a workshop to understand what they liked about the legacy vault functionality, what could be improved, and what we wanted to add from industry leading competitor products. Document vault is essentially Google Drive for the cities documents — users needed to upload files, add metadata, manage folder structure, share files with other organizations, archive unneeded files (but not delete), view documents sent to them, search for specific documents by a variety of criteria, and most importantly link these documents to various procurements, proposals, and RFPs.
The updated vault is built using the framework Liferay which uses the established design system Lexicon (based off of clay and bootstrap). To optimize build we used the base Lexicon design system and customized it for our needs, documenting any custom changes to the out-of-the-box functionality or UI to speed up development and ensure a consistent look and feel, including any net new components. MOCS also had established branding guidelines but we needed to make them more robust to align to the needs of this and future modules. This included expanding the color palette and defining logomarks for all the modules under this unified platform umbrella.
Over eight weeks we had twice weekly design sessions with the client to iterate on the functional design and identify edge cases so we could align on the final design for build. In addition to the design system we delivered dev ready mockups for all features and edge cases as well as documentation outlining the function for every interaction. The added value of human centered design improved the final product by making the end users actions transparent, accessible, and usable — the three experience pillars we identified during phase 1.
My role: I was the design lead for the unified platform and document vault, responsible for unifying the visual style and facilitating client working sessions to align on final deliverables. I managed the team of 5 designers tasked with establishing the design system, mocking up, prototyping, demoing, and documenting the functionality. I helped solve user driven problems that arose through build and testing, always advocating for the needs of the end users.
Product design lead: Dave Portanova
/
Creative Direction: David Kim
/
UX Design: Mel Liu, Rachel Covert, Bridget Wu, Kate Clawson
/
Tech Architect: Eklovya Mani
/
Product: Kevin Lee
final designs (multiple viewports)
current state feature analysis and requirements gathering workshop
