Catalog Management System

The Challenge

cdm spreadsheets

A large government agency was using spreadsheets to evaluate thousands of cyber security tools and services in vendor catalogs. Every quarter, each catalog required extensive technical and pricing reviews as well as multiple approvals across multiple organizations.

Our cross-functional Agile team was asked to automate and streamline the costly, time-consuming manual processes for reviewing, updating, and publishing catalogs.

Information Architecture

I started by exploring the main user stories, then began sketching rough flows in order to define key experiences that would best enable users to accomplish their objectives. These sketches ultimately became formal user flows that provided the structure and navigation for the entire user interface.

cdm flow cdm flow complex

HTML Prototypes

After mapping out the application structure and the discrete tasks that users would perform, I focused on headers, footers, content areas, and the relationships between page sections. My goal was to create engaging page layouts and well-thought-out user interactions.

In accordance with Agile best practices for incorporating UX into rapid implementation cycles, I went directly from sketches to interactive, "just-in-time" HTML prototypes that facilitated frequent, well-informed feedback and enabled me to easily explore design options.

I selected Bootstrap as the HTML/CSS/JS framework because its flexible grid-based structure ensured that screens would be optimized for both desktop and mobile devices. Developers welcomed the fully reusable code that I provided.

progressive disclosure
Progressive disclosure techniques were well-suited for sequencing information and managing complex, multi-step tasks.
autocomplete
jQuery autocomplete widgets helped users quickly find and select options in pre-populated lists.

Agile at Work: Showing and Telling

Because Agile is all about experimentation and collaboration, I frequently tested my designs with users and stakeholders to find out what what worked and what needed to change. I also worked closely with developers to determine what UX/UI techniques could realistically be used, such as searchable dropdowns and inline editing.

The Agile iterative process was particularly helpful in finding the best design solution for the complex task of making catalog updates. My carefully considered layout contained all of the required functionality, but users were still confused about what they were were supposed to do. After several refinments I designed a solution that significantly improved usability and better addressed users' needs.

Early Iteration

early iteration example

Final Iteration

final iteration example