HCDE 418: IMA Class Registration Redesign
Four times a year, in addition to academic classes, members of the University of Washington (UW) community can choose to enroll in quarter-long fitness classes at the UW gym, also known as the Intramural Activities Building (IMA). The registration process is done on a website which unfortunately, is not designed intuitively or responsively, to the point where I gave up searching for classes on my phone after a couple of tries.
When our professor in HCDE 418: User Experience Design asked us to find a UW tool or system which could be improved and redesigned, the IMA website immediately popped into my mind. I knew this would be a quick project, with major deliverables every few days, so I felt this was a good candidate due to its small scope.
When my professor approved the project, I got to work sketching new design ideas. On the desktop, my biggest problem was that if you wanted to explore a specific category, the website took you to a new page with no links back to the other categories. While the default view displayed all classes, if I only wanted to view two or three categories, the lack of links required repeated clicking of the browser’s “back” button.
On mobile, having to use the “back” button was still a problem, but to make matters worse, the links were tiny and packed close together and the list of classes responded to “swipe” motions on a touchscreen. Instead of speeding up my browsing, the swipe feature ended up navigating away from information I needed while I was trying to zoom in or out to click links and read text.
For my sketches, I came up with various designs using tabs, buttons, embedded stacked menus, and changed the placements for certain information. I also wondered if perhaps a simple “browse” feature might be less useful to some than another method of finding classes, such as a fitness quiz, so I added some designs to that effect.
When we came to class to show our sketches to classmates, feedback was positive on my changes, but I was given little guidance aside from questions about the fitness quiz, so I took that idea out for my paper prototypes.
When I showed my paper prototypes to classmates, once again, I was given little in the way of criticism. I was told by some classmates that they had never used the IMA website, and for those that had, I was given a suggestion to add a “search by schedule” feature.
Because of my limited feedback in class, I made almost no changes to my paper prototypes before running my field test. However, when I ran the field test, I decided to prepare my participants in advance by asking them to navigate to the IMA webpage on their phones and browse around while I ran each person through the desktop version.
I had four participants altogether, only one of whom was a UW student. I chose them because of close proximity to me, and because anyone can take an IMA class (provided they are willing to pay a membership fee in addition to a class fee), I did not feel that limiting my test pool to UW students was necessary.
Because of the primer with visiting the site, I got more enthusiastic feedback on my designs this time. The frustrations I encountered with the IMA website were also noticed by my participants and they agreed that there was a need to change the layout, particularly for mobile. At this point, I only had one prototype for mobile — a stacked class list embedded in a stacked category list, so that everything would be easy to view and click without zooming and swiping. Everyone agreed that it would be a huge improvement.
On the desktop version, I had several prototypes — one which looked like the mobile version, using stacked lists, and another with large buttons as categories, not stacked. Lastly, I had one which looked very similar to the current version, but with tabs on the side of the class list, instead of small links.
Overall, my participants leaned towards the tabbed list, feeling that the large buttons used in mobile felt unnatural on a large screen. Although one participant argued that the site was fine in its current form, if I just made sure links were on every page, others said they liked the tabs, especially if they could activate more than one category at a time.
My last step in this project was to build a wireframe, which I did in Axure, using the tabbed version of the desktop view and the stacked version of the mobile view, as those options had gotten the best feedback. I made sure the ability to choose multiple categories was enabled on mobile view, though I opted for a “pressed button” look rather than checkboxes, as suggested.
Although I enjoyed discussing my design with others and iterating on them, I did feel discouraged as I got to the end of my wireframe and noticed how much it looked like some of my sketches in week 1. Toni had been adamant that a good design process should produce significant changes in our design, which mine did not. I did my best to follow advice and go with designs others approved of, but I feel like I should have chosen a more ambitious project, where I could be more creative with my designs. Instead, I was asking my audience to share their feelings on buttons versus links — a topic which few can be enthusiastic about.
If I were to continue with this project, I would probably begin building at this point, as the changes would greatly improve the IMA registration experience and feedback has been positive to neutral on this design.
