UO Needs a Mobile Site

With the increasing smart­phone web usage we have been expe­ri­encing in the last years, it has become increas­ingly important to provide opti­mized web expe­ri­ences 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 expe­rience than that of desktop web browsing.

That’s why I was curious to see how the University of Oregon’s website mobile expe­rience could be improved. The current site contains a number of elements that make it clut­tered when viewed from a mobile device. The homepage contains four navi­ga­tional 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 prior­itize what content is displayed first to improve user expe­rience. As a regular user of this site I took a stab at iden­ti­fying the content that’s most important to users and present it in a mobile-friendly way.

The UO website viewed on the iPhone.

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 clut­tered and that it was incon­ve­nient 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 exper­iment, 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 deci­sions made).

UO mobile site prototype.

I began by iden­ti­fying and prior­i­tizing the content areas on the page and then wire­framed the mobile experience.

I arranged the two more important navi­ga­tional 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 infor­mation archi­tecture and content. There’s defi­nitely a lot of room for improvement in this prototype but it could be a good starting point for the design of mobile expe­rience for the entire UO site. Furthermore, this was designed with a lot of assump­tions 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 hier­archy should be based on usability testing and user inter­views to identify key personas to inform the design process.

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 improve­ments in this area.