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.
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
Certain screens, like this one required the user to have a lot of moving pieces when editing content.
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.
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?
Some forms were long and tedious. Perhaps it would be better to break them up into steps which would be easier for the user?
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
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
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
The developers I work with have started actually developing some of the system based on my wireframes, Bootstrap template selections and photoshop prototypes.