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 agency's costly, time-consuming manual processes for reviewing, updating, and publishing catalogs.
I started by creating user personas and defining roles for the main users of the system, then wrote user stories that captured the required functionality. Next I sketched 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.
After mapping out the application structure and the discrete tasks that users would perform, I focused on visual presentation, including 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.
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 useful in finding the best design solution for the complex task of making catalog updates. My carefully considered UI contained all of the required functionality, but users were still confused about what they were were supposed to do. After several refinements I arrived at a solution that significantly improved usability and better addressed users' needs while meeting business goals.
