NIBS

ProjNet  - Dashboard

ProjNet - National Institute of Building Sciences

Client

National Institute of Building and Sciences NIBS

Platform

Figma

Role

Lead UX Designer

Focus

UX Research, Accessibility, Design Systems, Branding

Overview

ProjNet is a secure, web-based platform used by multiple federal agencies to manage construction submittals, RFIs, and design reviews. Over time, the system became outdated, its workflows fragmented, its interface inconsistent, and several key features had stopped functioning as intended.

My role as Lead UX Designer was to modernize the platform’s user experience, enhance accessibility, and establish a design system that could scale across future modules.


The Challenge

How do you transform a legacy government platform used daily by contractors, engineers, and reviewers without disrupting mission-critical workflows?

Our goals were clear:

  • Simplify complex, technical workflows

  • Improve usability and accessibility (WCAG + ADA compliance)

  • Create a scalable, modular design system

  • Build user trust through collaboration and transparency

Approach

The modernization strategy was grounded in human-centered design. We adopted the U.S. Web Design System (USWDS) as the visual and accessibility foundation. Through research, workshops, iterative design, and continuous stakeholder engagement, I designed a new UX framework on a modern platform that would support scalability and long-term maintenance.

Results Preview

The final design delivered an accessible, visually cohesive platform that reduced user confusion, improved navigation, and streamlined workflows. The project laid the groundwork for future modules and a fully integrated design system.

Optimizing Sitemaps

Optimizing the ProjNet sitemap was key to reducing unnecessary clicks and simplifying user workflows. By mapping every page and pathway, I identified redundancies and confusing routes that slowed users down. Restructuring the sitemap into a cleaner, role-based hierarchy consolidated functions, removed outdated steps, and shortened key task flows. The result was a more efficient, intuitive experience and a clearer blueprint for both design and development.


The Process

The design process followed a structured, iterative approach to ensure user involvement and continuous validation.

Phase 1: Discovery and Alignment
We began with stakeholder workshops and technical audits to identify pain points and establish priorities. A comprehensive sitemap was developed to visualize every page, feature, and workflow. This provided clarity across teams and exposed redundant or outdated functionality that was slowing the system.

Phase 2: Framework and Standards
Leveraging the USWDS, I developed a scalable design library that unified visual elements, typography, and accessibility components. This ensured that all modules adhered to the same standards, reducing inconsistencies and speeding up developer handoff.

Phase 3: Iterative Collaboration
Each sprint included four design review cycles to maintain transparency and alignment:

  1. Internal reviews for UX consistency

  2. Client reviews for strategic validation

  3. User workshops for real-world feedback

  4. Developer reviews for technical feasibility

This rhythm helped maintain momentum and minimized rework across disciplines.

application dashboard

The Research

Our research combined stakeholder interviews, usability analysis, and task observation to uncover inefficiencies in the current system.

Objectives

  • Understand user workflows and daily challenges

  • Identify outdated or redundant features

  • Define accessibility and compliance gaps

ProjNet’s New Visual Voice

Revamping the ProjNet branding was an essential part of modernizing the platform. I standardized the logo, color palette, and font family to create a cohesive visual identity that felt both contemporary and trustworthy. By unifying these core brand elements, we eliminated inconsistencies across modules and touchpoints, strengthened user confidence, and established a clear foundation for future design work. This updated branding also aligned with USWDS principles, ensuring accessibility while giving the platform a polished, professional presence.

Methodologies

  • Stakeholder interviews to gather business goals and constraints

  • Contextual inquiry with HelpDesk operators to observe real user struggles

  • Feature inventory and task analysis to map frequency and priority of use

Key Insights

  • Users spent excessive time locating frequently used sub-applications

  • Critical workflows were buried under legacy navigation

  • Accessibility issues affected efficiency for assistive technology users

  • Redundant modules created confusion and technical debt

These findings shaped the foundation for redesigning the information architecture and prioritizing features that had the greatest impact on productivity.

The Design Iterations

Research insights informed the creation of a modernized structure that emphasized usability, clarity, and accessibility.

Information Architecture and Site Mapping
The full platform sitemap exposed duplicate features and underused modules. By restructuring the hierarchy, we simplified navigation and clarified relationships between tools. This blueprint became a shared artifact that guided development and design alignment.

Prototyping and User Workshops
Interactive prototypes were created in Figma and tested in hands-on workshops. Initially, users were skeptical about the redesign. However, as they explored prototypes and shared real frustrations, they became engaged contributors.
Participants surfaced critical usability gaps that had gone unnoticed and offered insights that directly shaped the interface design.

Accessibility and Visual Design
Adapting the U.S. Web Design System ensured compliance with Section 508 and WCAG standards. The design introduced clear typography, accessible color contrast, and component consistency that made navigation more intuitive for all users.

Usability Testing and Iteration
Each testing round informed design refinements. Internal teams validated component consistency, while external users confirmed improved workflow efficiency. The continuous iteration process maintained alignment with both user and business needs.

Results and Next Steps

Results

  • Reduced complexity by consolidating redundant workflows

  • Enhanced navigation clarity through a reorganized information architecture

  • Improved accessibility and consistency using USWDS standards

  • Strengthened collaboration between UX, product, and engineering through structured design reviews

  • Boosted user engagement and ownership through co-creation workshops

Visual Outcomes

  • Redesigned dashboard and key sub-application interfaces

  • Modular design system library supporting rapid updates

  • Scalable architecture ready for future enhancements

Next Steps

  • Extend the design system to additional modules

  • Conduct longitudinal usability studies to track post-launch performance

  • Integrate analytics for ongoing user behavior insights

  • Continue refining accessibility compliance as standards evolve

Conclusion

ProjNet's modernization was not simply a redesign, it was a transformation of how users, developers, and stakeholders interacted with the system. By focusing on research-driven insights, structured collaborations, and accessible design, we delivered a platform that is both functional and future-ready. This project reinforced the pwer of co-creation and the importance of giving users a voice in transforming the tools they depend on every day.

Create a free website with Framer, the website builder loved by startups, designers and agencies.