Internal Application WIN

For the last year I have been working for Washington State L&I on the maintenance team for one of their internal data-entry applications. I have been particularly active in creating a new version of the app for an upcoming release.

Without previous experience working in ASP.Net, I quickly trained myself up in VB.Net and began making contributions to the next version iteration within 6 weeks.

With my training in design, User Experience, and UI Development, I focused on creating ASP controls that implemented Bootstrap, in order to make it easier for the staff ASP programmers to implement code that would also be responsive.

Here is a screenshot of the framework’s upcoming version release:

Before

WIN is an older ASP app developed to run best in IE8. Here is a screenshot of the app as it appeared one year ago:

As an older app, it isn’t responsive:

Bootstrap

Bootstrap was a natural decision in this case, giving the existing developers a good basic design that would also be responsive, with a low barrier to entry:

Developer Documentation

In order to also facilitate the maintenance team, I write and update documentation that will help them use these new controls:

User Experience

I have practiced my training in UX Design by bringing in more white space, making it easier for the user to focus on one thing at a time. I would prefer for the form layout of the pages to be more linear, in order to prevent the user from being overwhelmed with so many options at once: However, the stakeholders felt that we were already making so many changes at once that it was best to stick with a close layout.

I found other ways to add UX improvements to the interface by creating new components that the Business Analysts and Developers can use in the future:

Success Messages

New success messages provide the user with knowledge of the state of the app:

Loading Spinner/Overlay

In a similar way, this Loading Spinner activates on postback events to prevent users clicking buttons repeatedly and getting frustrated:

Sticky Buttons

The button bar follows the user as they scroll down, keeping important command actions readily available while the app is in use:

Hidable Menu

Lastly, the large menu can be collapsed to allow the user to focus on the task at hand:

Technology Used

  • Front end styles managed using the LESS pre-compiler.
  • Styles and scripts heavily rely on Bootstrap as a base.
  • JavaScript extends on jQuery and handled using Require/Almond.
  • Back end managed using VB.Net and the Visual Studio IDE.
Advertisements