Rapid Prototyping to Modernize NRC Systems

The Nuclear Regulatory Commission turned to STSI to modernize it’s mission-critical applications supporting the reactor inspection process. This important business process was supported by a number of at-risk legacy systems on platforms such as PowerBuilder.

The modernization program had previously been started and stalled. The STSI team sought to deliver a first rate system, but also had to win credibility with a set of stakeholders that had seen many meetings, but little in the way of concrete results.

Starting with Pictures

Team STSI brought in user experience design and other “design thinking” techniques. Instead of diving into documentation, we executed a highly facilitated vision workshop to define what would make a great product that would have a real impact on the day-to-day business process. From there, we jumped straight into prototyping.

nrc-mockup

Example early-stage mockup of an inspection system

As we captured user stories and requirements, we captured them in a wiki-style repository, updating stories and acceptance criteria as they matured – alongside the system design. We also captured key data elements and business rules in a similar fashion. The mockup-based approach worked well. Users could see something, making it much easier to envision a system, especially as compared to just reading and talking about requirements. The picture was worth a thousand words, quite literally.

Shift to Prototypes

However, we began to run into some communication friction as we introduced some interactive concepts and innovative ideas. The mockups helped, but didn’t tell the whole story. After a few iterations of mockups, we shifted to interactive HTML/JavaScript prototypes. (This is similar to the approach laid out in Sketching with code: protosketching by 18F.)

proto

An early-stage interactive prototype

We did retain some lessons from wireframe prototypes. If you look closely at the above image, the fonts are handwriting-like, similar to a mockup. This achieves the same purpose in both cases – users focus on the functionality instead of nit-picking visual design such as spacing, colors, etc. But this is not a mockup, it is an interactive AngularJS application backed by a JSON data structure.

This approach worked great. Not only were we able to communicate richer concepts of interaction, but it actually didn’t take more time to create the prototypes over the mockups. Mockups are very quick to start, but do require a level of maintenance and rework, particularly when illustrating a larger flow. With the prototypes, we could take advantage of working with real code, reusing components and content.

Taking it Further – Interactive Feedback

The prototypes were a great communication tool, and great at eliciting feedback. Although live feedback and discussions are critical, we then added another component: offline review and feedback. With each iteration, we would send out a prototype link to stakeholders and give them a day to review it on their own. We build a feedback widget, placed at the bottom of each page, that captured comments on each page.

Example of an interactive feedback pane

Example of an interactive feedback pane

As a result, we could synthesize feedback before a group discussion. The larger stakeholder discussion was then far more productive, as we could quickly summarize and move past the areas of obvious agreement, and spend valuable discussion time on more involved or ambiguous issues.