Sidney Wiredu
← Back to Portfolio

GSA Digital Experience Site Design

  • GSA
  • 2020

Case Study Overview

Client: U.S. General Services Administration (GSA) - Federal Acquisition Service (FAS)

Platform: Public Website and Authenticated User Dashboard

Timeline: Multi-phase UX modernization

My Role: Senior UI/UX Designer & Front-End Developer

Tools Used: Figma, Adobe XD, Adobe Photoshop, HTML5, CSS3, JavaScript, Angular, Bootstrap, USWDS, WCAG/Section 508 Tools

Project Summary:

The GSA FAS Digital Experience (DX) initiative focused on redesigning how government buyers and vendors interact with federal acquisition tools. The platform supports purchasing, market research, contract tools, historical pricing, IT Schedule 70, and secure user workflows. The goal was to transform a fragmented legacy experience into a modern, intuitive, and accessible digital service ecosystem.

The Challenge

Before the redesign, users faced:

  • Complex navigation across multiple acquisition tools
  • Inconsistent UI patterns between public tools and authenticated dashboards
  • Steep learning curve for first-time government buyers and vendors
  • Poor mobile usability
  • Accessibility gaps affecting keyboard and assistive technology users
  • High cognitive load when navigating procurement workflows

The platform had to serve multiple personas:

  • Federal acquisition professionals
  • Contracting officers
  • Vendors and industry partners
  • First-time users unfamiliar with government procurement

The challenge was simplifying an inherently complex federal ecosystem without sacrificing compliance, security, or functionality.

Goals & Objectives

  • Simplify federal acquisition workflows
  • Improve tool discoverability and navigation
  • Create a unified design system across public and private tools
  • Ensure full WCAG 2.1 / Section 508 accessibility compliance
  • Enhance mobile-first responsiveness
  • Improve task efficiency for buyers and vendors
  • Provide real-time dashboard visibility for active procurements

UX Research Process

Research Methods Used:

  • Stakeholder interviews with contracting officers and program managers
  • User journey mapping
  • Comparative analysis of legacy GSA tools
  • Accessibility audits
  • Content usability reviews

Key UX Insights:

  • Users needed clearer “Buy vs Sell” pathways
  • Terminology caused confusion (acquisition jargon)
  • Search and filtering were critical pain points
  • Users wanted centralized access to tools without jumping between systems

These findings drove role-based navigation and task-driven design decisions.

Information Architecture

The IA strategy centered on decision-first navigation:

  • “I Want to Buy” vs. “I Want to Sell” entry points
  • Centralized Acquisition Tools Hub
  • “Where Do I Start?” onboarding modules
  • Tool grouping by lifecycle stage:
    • Requirements Definition
    • Market Research
    • Solicitation
    • Award
    • Contract Management
    • Closeout

For authenticated users, dashboards organized:

  • Active procurements
  • Pending tasks
  • Saved resources
  • User directories
  • Follow-up reminders

Wireframes & Ideation

Low and mid-fidelity wireframes explored:

  • Homepage search-centric layouts
  • Decision-based entry flows
  • Modular content card systems
  • Tool discovery grids
  • Dashboard data visualization layouts

Multiple layout iterations were tested to reduce visual clutter and decision fatigue.

Visual Design & UI System

The visual system emphasized:

  • Clean federal branding aligned with GSA standards
  • Strong visual hierarchy for critical actions
  • High-contrast color system for accessibility
  • Consistent iconography for tools and features
  • Modular component-based design
  • Scalable grid system

The UI system supported:

  • Public discovery tools
  • Secure, data-heavy dashboards
  • Multi-role workflows

Prototypes & Interaction Design

Interactive prototypes were built to validate:

  • Global search behavior
  • Dashboard task interactions
  • Procurement list management
  • Notification and reminder flows
  • Glossary overlays and contextual help

Micro-interactions were designed to guide users through complex procurement steps without overwhelming them.

Front-End Development

On the development side, I contributed to:

  • Responsive UI implementation using HTML5, CSS3, and Bootstrap
  • Angular-based dynamic user interfaces
  • Component-based dashboard architecture
  • Search and filtering UI logic
  • Cross-browser and cross-device optimization
  • Integration with secure federal APIs

The experience was optimized for:

  • Desktop field operations
  • Tablet use in government facilities
  • Mobile access for on-the-go decision-makers

Accessibility Enhancements (WCAG / Section 508)

Accessibility was built directly into the design system:

  • Keyboard-only navigation support
  • Proper ARIA landmark roles
  • Accessible form labels and validation
  • Screen reader-friendly navigation
  • High-contrast color compliance
  • Focus-state visibility
  • Accessible data tables

Accessibility was treated as a core feature, not an afterthought.

Usability Testing

Testing included:

  • Moderated task-based testing with contracting officers
  • Vendor usability walk-throughs
  • Accessibility validation testing
  • Iterative design revisions based on feedback

Results showed:

  • Faster discovery of acquisition tools
  • Reduced time to complete procurement tasks
  • Improved confidence for first-time users

Final Solution

The final experience delivered:

  • A modern public acquisition gateway
  • Unified buying and selling workflows
  • A centralized tools-first discovery model
  • A fully-featured secure dashboard
  • Integrated contextual glossary assistance
  • End-to-end responsive behavior

The platform now functions as a single, intelligent acquisition ecosystem.

Impact & Outcomes

  • Reduced learning curve for new acquisition users
  • Improved tool discoverability
  • Faster procurement task completion
  • Increased accessibility compliance scores
  • Improved engagement across desktop and mobile
  • Streamlined workflow visibility for internal users

Lessons Learned

  • Federal UX requires merging compliance with simplicity
  • Language clarity is as important as visual clarity
  • Dashboards must prioritize task urgency, not just data density
  • Accessibility must guide design from concept to deployment

My Contribution

  • Led UX strategy and interaction design
  • Created wireframes and high-fidelity UI designs
  • Built responsive front-end components
  • Designed dashboard UX workflows
  • Implemented accessibility remediation
  • Collaborated with federal stakeholders, engineers, and product owners

Final Thoughts

The GSA FAS Digital Experience project demonstrates the ability to simplify some of the most complex digital ecosystems in government. By uniting UX research, accessibility compliance, front-end development, and federal compliance, the platform now delivers a streamlined, secure, and human-centered procurement experience.

This case study reflects my experience in:

  • Enterprise UX
  • Federal digital modernization
  • Dashboard and workflow design
  • Accessible front-end architecture