UO Needs a Mobile Site

Posted on September 05, 2011

With the increasing smartphone web usage we have been experiencing in the last years, it has become increasingly important to provide optimized web experiences for mobile devices. Articles like Luke Wroblewski’s The Mobile App User Experience and Jakob Nielsen’s Defer Secondary Content When Writing for Mobile Users  argue that web browsing on mobile devices is a much more focused experience than that of desktop web browsing.

That’s why I was curious to see how the University of Oregon’s website mobile experience could be improved. The current site contains a number of elements that make it cluttered when viewed from a mobile device. The homepage contains four navigational elements, an image banner and the main content area with news and other aside content. With the limited space in a mobile device, a mobile site should prioritize what content is displayed first to improve user experience. As a regular user of this site I took a stab at identifying the content that’s most important to users and present it in a mobile-friendly way.

When thinking of use cases for a mobile university site, most people accessing it could be new or prospective students trying to find their way through campus, current students wanting to sign up for a class or looking for a professor’s office, or visitors looking for a specific building or event. Other actions such as donating or reading news may not be as important as the ones listed above in the mobile context. When asking a former student visiting campus to give me her quick thoughts on the current site on a mobile device, she mentioned it was too cluttered and that it was inconvenient to have to zoom (via a pinch gesture) in order to complete any action.

Based on this, I designed a quick working prototype of what a potential mobile version of UO’s site could look like. For this experiment, I only focused on the homepage and also preserved most of the original style (although I don’t completely agree with some of the design decisions made).

I began by identifying and prioritizing the content areas on the page and then wireframed the mobile experience.

  • UO site content areas.

  • Primary navigation on the UO mobile site prototype.

  • Search on the UO mobile site prototype.

I arranged the two more important navigational elements right below the logo and made search a prominent button. I also moved news and other secondary content to the bottom of the page, giving priority to more important links such as the campus map, the academic calendar, and the class schedule. I used CSS Media Queries to style the site in a mobile-friendly way and used some JavaScript to solve some markup problems and improve the user experience.

I want to stress that this is just a prototype to see what’s possible with the site’s current information architecture and content. There’s definitely a lot of room for improvement in this prototype but it could be a good starting point for the design of mobile experience for the entire UO site. Furthermore, this was designed with a lot of assumptions in terms of users and what tasks are most important for them. If the University of Oregon decides to design a mobile version of their website, the content hierarchy should be based on usability testing and user interviews to identify key personas to inform the design process.

http://youtu.be/vyR_WXTvCjA

Update: After posting this article, Tim Christie from the University of Oregon left a comment below letting me know that the UO does have a mobile site at http://m.uoregon.edu. I had a quick look at it on my iPhone and the site remains mobile-friendly up until a couple of levels deep into the site. After that, the site goes back to its desktop layout. However, Tim mentioned the UO team will be focusing more on this in the next year so we should be seeing improvements in this area.