Design System: Portal Information Architecture

Project Areas:
User Testing, Moderated Tree Testing, Information Architecture, Wireframing, HiFi Prototyping

Then & Now

During the creation of the MVP component library of the design system, it was widely understood that the content that enabled the usage and understanding of the system was important for implementing teams. However, we had relied on initial design decisions and communication with project sponsor team members to establish the portal site’s information architecture and navigation structure. Our goal was to vet our assumptions, receive feedback on redesign direction, and explore real world use of the system by teams in other organizations.

Today, the design system is continuing to use the same architecture updated during this round of testing, while adding additional definitions around implementing for accessibility.

Approach & Role

Embracing the concept of ‘lead from the front’, I joined our research team to develop first-hand knowledge of how the product I had led was being used in the wild. In this engagement, I worked directly on the deliverables used in testing, and to define the portal site’s information architecture. I participated in all user testing sessions by rotating between an active role of testing moderator, and a semi-passive role of notetaker. After testing wrapped up, I led the effort to define guidance documentation and maps.

The design system’s usage footprint had expanded outside of the project areas it was originally intended to support, and we did not know how well it was serving the needs of those teams.

Exploration & Discovery

  • User Goals
  • Site Navigability
  • Content Relevance

Identify Themes & Focus Areas

Lead Design and Execution

  • User Testing
  • HiFi Prototype
  • Content Guide
  • Content Matrix

Output

Created a framework to lead discovery and reinvested learnings into information architecture deliverables.

depiction of a tree test script

Tree Test Script

  • For understanding how users navigate to a variety of end-goals.

    • Image showing a high fidelity prototype of PatientOne

    Navigation HiFi Prototype

  • Used for tree testing assumptions about navigation structure and site architecture.

    • Dpeiction of a content guide

    Content Guide

  • Established to define architecture and suggested layouts based on content context.

    • Team Output

    The team used the outputs from research and discovery to establish a content matrix and page designs using the information architecture established.

    Depiction of a content matrix document

    Content Matrix

  • Guide which describes all content contained within the portal site.
  • Helpful for organization of content with in Contentful CMS.
  • Updated when large structural changes are considered.

    • Image showing the Design System home page

    Home Page Layout/Architecture

  • Designed for easy access to content waypoints most sought after by users.
  • Easy entry to the design deliverables based on context of channels.

    • Image showing the portal site's navigation

    Portal Navigation

  • Content organized primarily by persona of users (designers vs developers).
  • Components listed alphabetically for easy scanning/sorting/finding.
  • Top level nav features all items indicated as most important to users.