Department of State Application Redesign - Better Prepared In a Time of Crisis

 

Challenge: The U.S. Department of State wants to improve the application used to create the Emergency Action Plan (EAP) its staff uses at posts around the world to deal with crises that may arise. The challenges with the existing application include:

  • An out-of-date and non-intuitive user interface

  • EAP content based on a confusing data structure

  • Lack of creation/portability options of filtered and specific output for crisis situations.

Solution: Develop a product that allows personnel, at post and in Washington, a more streamlined means to creating the Emergency Action Plan (EAP), approving EAPs, and consuming EAP content by:​

  • Allowing stakeholders, both at post and in Washington, to effectively communicate and collaborate during the EAP creation process.

  • Ensuring that the proper level of security is maintained for all EAP content.

  • Presenting EAP output to users in a sensible and structured way.

Process: 

Moving Beyond Wireframes

Moving Beyond Wireframes

Most of my work was done in Axure, but I was also tasked with beginning to develop the look and feel of the system. I worked with developers in choosing a Bootstrap template as a starting point and began doing some mockups in Photoshop.

Wireframing Complex UIs

Wireframing Complex UIs

Certain screens, like this one required the user to have a lot of moving pieces when editing content.

Role Based Differences

Role Based Differences

This system had multiple stakeholders, requiring subtle differences in terms of what each could see both in terms of tools and within individual screens.

Thinking Forms

Thinking Forms

The system would require the layout of a number of forms. Here is a segment of a wireframe showing an inline form.

What about long forms?

What about long forms?

Some forms were long and tedious. Perhaps it would be better to break them up into steps which would be easier for the user?

Information Architecture

Information Architecture

Assessing the site search was a chance to practice my information architecture skills, The system required a fairly complex system of facets that had to be thought through.

Iterating Dashboard Wireframes

Iterating Dashboard Wireframes

One of the most challenging modules I designed was the dashboard that users would see when they first came to the site. This required numerous iterations and discussion with product owners.

User Interface Solutions

User Interface Solutions

When faced with a long list in one of the search facets, I did some UI pattern research and worked with developers to create better options

Into Development

Into Development

The developers I work with have started actually developing some of the system based on my wireframes, Bootstrap template selections and photoshop prototypes.

© 2016 by Paul Moser.
 

  • LinkedIn Social Icon
  • Twitter Social Icon
Information Architecture

Assessing the site search was a chance to practice my information architecture skills, The system required a fairly complex system of facets that had to be thought through.