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.
Samuel Loveland 