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