Iron Bank

UX Design, UI Design, UX Research

Dates

5/2022 - 6/2023

My Role

Associate UX/UI Designer

Team

Senior UI/UX Designer
Scrum Master
4 Front End Developers
4 Back End Developers
PM

The Product

Platform One’s Iron Bank is the DoD repository of digitally signed, binary container images that have been hardened for DoD-wide use across classifications.

The Challenge

Iron Bank users were often met with jarring inconsistencies and two separate experiences across VAT (Vulnerability Assessment Tool) and IBFE (Iron Bank Front End), as well as an outdated UI with no way to provide feedback.

The Solution

Create a scalable design system and redesign of Iron Bank’s user facing experiences, with the ability to accommodate Iron Bank as it grows, better incorporate VAT and IBFE, and seamlessly integrate planned features such as a dashboard, notifications, and favorites.

Understanding the User

User Pain Points

1. Lack of Integration

VAT and IBFE act as two separate tools rather than one integrated app

2. Situational Awareness

Users need to spend time looking for and synthesizing the information they logged in to consume

3. UI Presentation

Information can be difficult to process due to lack of symbols or odd colored text, and new features are not introduced well

4. Feedback

There is no way to provide feedback or request features, and Iron Bank did not carry out user studies in the past

Personas

User Research

Study

Dashboard (situational awareness)

Methodology

Multiple choice + short answer survey + user interviews (conducted via Zoom) to determine what information users prioritize viewing upon login

Insights

Users prioritize:
+ Saved or favorited images
+ Announcements or things that have changed or been updated
+ Quickly search for containers without additional clicks
+ Ability to view new containers
+ Vat status of images
+ Status of open issues and who is working them

Notifications (situational awareness)

Unmoderated, remote prototype testing + multiple choice + short answer to determine the usability of notifications (Useberry)

+ 65% of users found notifications to be useful or very useful for situational awareness
+ Users need a simple way to quickly add notifications for an image directly from the image catalog

VAT severity color scheme (accessibility, disconnect, design system)

Preference test + short answer to determine users' ideal color scale (Useberry)

+ A red, orange, yellow, green color scale for levels of severity represented the best balance between universality, accessibility, and continuity

Design System

Because IBFE and VAT were built on two separate code bases (React and Bootstrap), we wanted a design system that could easily be customized and give a seamless look and feel across the two applications. We chose MDB (Material Design for Bootstrap), and I customized the entire design system to chosen light and dark mode color schemes, as well as designed dozens of custom components.

Designing the Re-theme

Select Paper Wireframes

Solutions to Pain Points

1. Increased integration between VAT and IBFE

+ One design system used for both applications - reuse of as many components and styes as possible
+ Images in each app link directly to each other

2. Increase situational awareness

+ Ability to save a list of “favorite” images in both applications
+ Ability to subscribe to notifications for an image in both applications
+ Added a customizable dashboard landing page for both applications

3. Improved UI Presentation

+ Increase in text + text alternatives for faster information processing (symbols for Findings Verified, ABC, and ORA, percent findings verified chart, addition of “opens in new tab” symbols, additional icons where logical
+ Walkthrough of new features to decrease onboarding time
+ Customized light and dark modes
+ Focus on creative responsive and adaptive designs compatible with mobile devices

4. Increased User Feedback

+ First VAT/IBFE user studies carried out; survey and prototype testing utilized Useberry [I created the UI of the prototype being tested but the rest of the UI below belongs to Useberry]
+ For MVP, feedback form link added to IBFE navbar and on a tab on the Help & Support page; feedback form will also be integrated into dashboard

Before & After (Current Development)

The left images show Iron Bank prior to any design work; the right images are current development with MVP designs and some post-MVP designs

Home

Image Catalog

Image Detail

Favorites

Going Forward

Takeaways

Impact

One of our main goals was to bring awareness to user testing at Iron Bank and put usability at the forefront of Iron Bank's design process. We successfully carried out 4 formal user studies and usability tests, and were able to communicate with users on an informal basis as well while developing new features, interactions, and UI elements.

Future Work

Iron Bank's long term plan is to continue bringing VAT and IBFE closer together in style and functional use. The main issue with merging the applications onto one platform is that they’re built on different code bases, thus it’s imperative to continue seeking creative design solutions to better integrate these applications and make them as user-friendly as possible.