FINAL MAIN MODULE PAGE
LOGIN (SPLASH) PAGE FINAL
ORIGINAL CASE REPORTING MODULE (LEFT) VS. REDESIGNED CASE REPORTING MODULE (RIGHT)
EXAMPLE OF THE FRAMEWORK CREATED IN HTML (LEFT) AND THE RESULTING LOOK AND FEEL (RIGHT)
EXAMPLE ORIGINAL MODULE SELECTION PAGE (LEFT) VS REDESIGNED MODULE SELECTION PAGE (RIGHT)
SFMIS to ACTION- STEP 1: Hey New Guy…..
Upon arriving at the Air Force Security Forces Center (AFSFC) I was shown a USER INTERFACE for a program called ACTION which was being “envisioned” as the replacement for the then-current program called SFMIS. SFMIS was the main program used by the U.S. Air Force Security Forces (The Air Force Police, SWAT, and K-9 Teams) to manage cases, offenders, service member weapons proficiency, etc.
The UI that I was presented with was created by my predecessor and the executives wanted to utilize it because it appealed to them. I, personally, wasn’t a fan of the design, but frankly….. anything looked better than what they had at the time.
SFMIS to ACTION- STEP 2: UI/UX
After looking over the template for the interface, the icons, and overall style, I decided that I could make some improvements upon what I had been given. Careful not to ruffle any feathers, I began to redesign portions of the interface, giving it a cleaner look. Additionally, I took into consideration the input of the Air Force Security Forces Members who worked with me. What features and FUNCTIONALITY would they like to see implemented? They had used the system in the field and they were the TARGET AUDIENCE. This proved useful as I was never given a REQUIREMENTS MATRIX and at the rate we were going it was doubtful that we would do any real USER TESTING. I was approached by an executive who asked me if I could build a prototype in Adobe Fireworks with the changes that I had made. At that time I recommended the Air Force purchase a license for Axure RP and began to design the prototype using a 30 day trial.
SFMIS to ACTION- STEP 3: Prototyping……
After designing a few pages in Axure RP I presented the PROTOTYPE to the executive, who was very happy with the evolution of the design. He then asked for the creation of 5 separate modules within the prototype. I built the prototype and from there the executive had me conduct demonstrations for other executive personnel, who were excited about the possibilities.
It is important that I make clear that I advised the executive that this was just a prototype…….it didn’t actually have the functionality. He countered by telling me that when the original IPhone was demonstrated to the masses it wasn’t functional either.
SFMIS to ACTION- STEP 4: Uh….you can’t do that.
As I was performing my regular duties as a graphic designer, I was informed that we would be implementing the new user interface, which I had designed, into the EXISTING database and we would be having a demo in the very near future. I explained that the HTML and CSS files that are generated in an Axure preview will not work properly if copied straight into the database, they would ACTUALLY have to build these pages from scratch- but they had the UI and Prototype to go to for a reference as far as the look, feel, and functionality were concerned.
But the developers tried to copy the Axure preview HTML and CSS files over anyway……….
Which brings us to:
SFMIS to ACTION- STEP 5: Front End Development
Realizing that what I had explained to them was true, it became clear they needed assistance with building the database. They asked if I could style pages for them,………which turned into me building a template/framework for the modules. Upon delivery of the templates the developers still could not make their pages look like those in the prototype (they didn’t know HTML or CSS well enough), so…….from there I was asked to start specifically building each page using the IDs that already existed, as the entry fields are dynamically generated. During this time, I took the initiative and changed the style of the icons to better fit the overall theme. By this time the upper management had confidence in my design abilities and were excited about that change as well. I couldn’t let something go with my seal of approval that didn’t meet or at least approach my expectations….especially if that product is potentially going to be in use by the U.S. Air Force for the next 10-15 years.
And that is the story of how I became the Front End Dev at the Air Force Security Forces Center. I had to explain the difference between Graphic Design, User Interface Design, and Front End Development multiple times throughout this entire process…..
In summary, I redesigned the User Interface, built the Prototype, and ending up being the lead Front End Developer for this database which is being implemented.
They weren’t lying in school when they said we may wear many hats…….
*UPDATE*- Due to time management issues the database was released and cut down to three modules..... which can be seen as the cover image.