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.

Children’s Author J Scott Savage

Working with J Scott Savage was a pleasure, and an exciting opportunity. For one, I’ve crossed palms with him a few times at various writing events. My wife is also a great fan of his books and recommends them to anyone who will listen.

Scott had the foresight to hire Seth Graham to create beautiful illustrations that convey the fantastic sense of adventure Scott depicts in his books and his mannerisms.

Seth’s Art

Feeling that the artwork needed an opportunity to be viewed without interruption, I designed a tall transparent footer to give viewers a chance to soak in the art:

 

 

Design and Layout

I cannot take credit for the art, but it was so great to design the layout, develop the responsive behavior for, and wire up a website that had such fun and inspiring artwork.

Naturally, I developed the site to be responsive to screen size:

Screenshot of tablet view
Tablet view
Screenshot of Phone View
Phone View

With a Hide-able Menu:

Screenshot of Menu at Phone Size
Menu

And with typography that is both easy-to-read, and slightly whimsical:

Alegreya and Alegreya Sans from Google Fonts

Technology Used

  • The front end was done by hand using the SASS pre-compiler.
  • The back end was a re-skinning of WordPress’s Twenty Fourteen.

Feel free to check out J Scott Savage’s live site to inspect the code yourself.

BYU-Idaho’s Responsive Prototype

During my internship at BYU-Idaho, I had the opportunity to proactively design solutions to solve usability problems for our site. Of course, implementation was another matter. This is where I learned the valuable lesson of prototypes:

Prototypes are a quick and effective way to demonstrate the possibilities to stakeholders. It shows them what we already know is possible. In a very practical way, it takes a lot of the pressure off.

I turned my focus to helping the school make it’s forward-facing web presence responsive and mobile-friendly. Here are some screenshots of the prototype:

Phone Width

 

Tablet Width

Service Map

This was a wishlist item for my boss: A map of all campus services which users could utilize to find anything and everything that campus had to offer, both on and offline. I mocked up this prototype in Angular as a proof of concept:

Analytics

Responsive wasn’t the only goal of our prototype: we also wanted to improve the effectiveness of our navigation in the header and footer. To this effect, we ran reports on the most visited pages and presented the information in an effort to persuade stakeholders to change our navigation methods.

We weren’t quite able to convince them to nix the “Letter from the President”, but we did get them to bury it in a menu somewhere rather than having it as the first link in the header.

User Experience

My reason for focusing on the Responsive Prototype was to best facilitate an improvement of the User Experience for our main audience: the students. In addition to the design and development that went into this prototype, I headed some on-campus Usability Testing – small, simple, and cheap tests that would give us qualitative data on what our users were going through. I modeled this testing on Steve Krug’s book Rocket Surgery Made Easy.

Technology

On top of my part-time experience tutoring for writing and web development, I was a mentor for student employees on the Web team at University Communications. Because I knew I would be moving on, I wanted to leave the students with tools they could easily use to pick up and maintain these projects.

For this reason, I used Bootstrap as the base for the prototype, and hosted it on Github. Since we were customizing bootstrap, we wanted to keep the LESS modules separated, and so we managed the build using Grunt.

This required our student employees to begin gaining familiarity with the command line, git workflow, and css pre-processors.

Edit 11/4/2015: If you visit BYU-Idaho’s live web page as of today, you can see quite a bit of my code is currently in use at the production level.