Redesigning through usability
Prework Final Exercise
Every website and app we come across every day is the result of the effort of a designer or group of designers who, after too much work and consideration, thought that their products were ready to go out online. However, we might find out, long after being out there on the Internet, that the product we deemed (almost) perfect is not as usable as we reckoned. This is why usability tests are so important to help us find possible areas of friction for users in our products and later solve them.
In order to understand how usability case studies were done, I read Peter Petrovics’ story about Runkeeper, published at uxdesign.cc. Now I’m going to tell you mine.
NOTE: this is just an exercise. I haven’t been hired by Oglethorpe University. I just took a look at its website and figure out ways to improve it.
1. The client
Oglethorpe University is a private, liberal arts college in Brookhaven, on the northern edge of Atlanta, Georgia. Originally chartered in 1835, it was named in honour of General James Edward Oglethorpe, founder of the Colony of Georgia.
Oglethorpe University unites a close-knit campus community with big city culture and opportunities. It offers more than 60 academic programs that range from arts (Art and art history, Music) to science (Biology, Chemistry), technology (Computer science), business (Management, Marketing) or languages. It also offers the possibility of creating a customized program, as well as adult degree programs and non-credit language courses.
A usability problem
The university wanted to evaluate the user experience of its website to see if there were some areas that needed to be improved. I was commissioned to conduct a usability test to detect possible areas of friction for users and pain points that would need to be addressed.
In the usability test, the user were asked to complete a series of tasks without leaving the university website and without using the website’s internal search feature. The rules of the test were the following:
- Give the user seven seconds to get a first impression of the website. Ask them to give you a small phrase or a group of adjectives.
- Ask them what they think about the navigation of the site.
- Ask them to find:
1. The school mascot (Task 1)
2. If the school offers foreign language instruction for Arabic (Task 2)
3. The nearest airport to the school (Task 3)
First approach
Before finding a suitable user to perform my usability test, I visited the site to familiarize myself with it and I decided to do the tasks to see what problems might arise beforehand.
The first time I visited Oglethorpe’s site I have to admit that I was a bit stunned: the site didn’t look like I expected a university site to look; it was the kind of web an Scandinavian furniture company would have. I did a quick brainstorm of my thoughts about the website and I gathered some good and bad aspects:
All in all, the website has a modern, simple and apparently functional design but in my opinion is not suitable for the content as it looks rather impersonal.
Once I had analyzed the website I undertook the tasks. Finding all three was relatively easy thanks to the clear sections of the menu bar. However, in the second task the difference between all the formative choices the university offers wasn’t clear for me and in the third one, the sub-section in which I could find a map to look for the airport wasn’t very visible at first glance.
2. Usability Test
After doing a bit of research on the website I was about to test, I committed myself to the task of finding a suitable user for my test. Although every user would do fine, I wanted someone in my age gap (or maybe a little bit older), someone who could find his/her way easily through a website. A user familiarized with university websites would also be much appreciated. I finally chose my friend Sara, who also had some experience designing web pages and was a user of university websites.
Given the impossibility of arranging a face to face interview due to incompatible schedules and the distance between our houses, we arranged an online interview via Skype, in which she would share her screen so that I could see the steps she would be taken to accomplish each one of the tasks. Before starting, I explained her what she would be required to do and let her ask me whatever questions she might have. Then, we started the usability test.
I gave her a few moments to look and superficially explore the website, after which I asked her to gave me her insights and opinions about the website and the navigation of the page:
“It’s a simple and functional website, the design is normal. The upper part of the home page works well (the menu bar is always visible) but the lower part feels obsolete, the images should not be restricted to a size, they should have the width of the page. It lacks affection, it looks cold and standoffish. The website looks as if they are trying to sell you something or as they offer cheap courses. The colour palette isn’t appropriate for a university: red, blue or green would have been a much better choice.”
After jotting down her insights, we moved on to accomplish the tasks:
- Task 1 (less than 20'’): easy to accomplish. A quick glance to the menu made her click on the Athletics section of the menu because she thought that that’s where the school mascot should be. Once on the Athletics page, she saw it immediately as the mascot is perfectly visible.
- Task 2 (20–30'’): relatively easy to accomplish. A quick glance to the menu bar made her click on the Academics section of the menu. Then, on the Academics submenu she clicked on Non-credit & certificate programs, not really sure to know why. Luckily, that led her to the Non-credit language courses where she found out that there were no language instruction for Arabic. It’s worth saying that the user found out a different way to access to the available language courses than the one I had discovered.
- Task 3 (1–2'): this is where problems began. She first clicked on the About section of the menu. Once there, she was unable to find an option that could show her how to get to the university (the option Maps is available on the submenu, but it has so many categories that she missed that one). Then she went back to the home page. After a bit of search, she clicked on the Contact us button, on the upper-right part of the page. There, and although there is a Google Maps window with the location of the university pinned, she kept looking for a written explanation about how to arrive at the university. Only after a while she gave up finding that information and looked at the map, she zoomed on it and located the nearest airport to the university.
After completing all tasks, I thanked her for her effort and finished the interview.
Just like in my previous interview, I experienced some problems when taking notes; this time, besides listening to the interviewee, I had to see where she was clicking, so I couldn’t keep my eyes off the screen while writing, which led to a bunch of messy notes that needed to be written out in order to be legible. I also had difficulties measuring the time of each task (the time showed above is merely illustrative) and setting a date for the interview. This time I felt much more confident while interviewing, so it might be true that practice leads to perfection.
3. Defining the problem
Once the usability test had concluded, I took a moment to look at the data I had gathered. At first sight and looking at the time required to accomplish each task, it was clear that there was a problem with task 3. Besides, in task 2 the user had found a different path to access to language courses than the one I had discovered. I then reviewed the data from the interview and extracted some interesting findings:
- The menu bar is divided into categories clear enough to let the user know which one to choose depending on the information she needs to obtain.
- Once a main category is selected, the information within it is not so clear.
- Inside the main categories there are way too many subcategories that hinder finding the information needed.
- There is information located in 2 (or more in some cases) places inside the website. This means that the information is repeated inside the page and that there are several ways to access to the same information.
- The information given about the courses the university offers is not clear enough. There are various subcategories that list the different options but there isn’t an explanation of the difference between them.
- When looking for the airport, the user was looking for a type of information that wasn’t there. The first impulse of the user was to find “how to get to the university”. And although the user finally found out the information needed to complete the task (the map) she kept on looking for something that would match her mental model of how that information should be displayed.
Pain points
With all of my findings written down, I defined the main pain points my user had experienced when using the website:
- Submenus (and the information within them) aren’t clear enough: the user takes more time to process and determine where she has to click when submenus are involved.
- There isn’t a clear differentiation between the different types of education. She found the language courses by chance.
- The information provided regarding the location of the university doesn’t match the mental model of the user, which leads to spending more time than necessary looking for an information that isn’t there.
A closer look to my pain points made me realize that all of them had something in common: they all involved the information architecture of the website. It was evident that there was a problem in the way the university displayed the information: while the main menu was divided into very specific sections, the information within those sections wasn’t that well structured. That made me think about one of my previous observations about the page: in general the look was modern and simple but there were some parts that looked old fashioned. That might apply to the information as well: the main page was well structured but once you dug deeper, the rest felt like it hadn’t been refurbished.
The 2x2 matrix
In order to determine on which pain point to focus, I created a 2x2 matrix to try to predict the importance of each task for both the user and the university:
With all that information, I decided to focus on trying to solve the pain point associated with task number 3 and I defined my problem statement: to devise a way to display the information related to the location of the university in a way that would be understandable and that would match an average user’s mental mode.
4. Working out a solution
Once the problem was identified, I dug a bit deeper on it. My user looked for the airport information on the places she thought it might be, and it actually was, but it didn’t match her mental model:
I then decided to find out whether the information of her model was available somewhere on the website and, after a long time navigating the website, I was unable to find it. I decided then to Google how to get to Oglethorpe University. I was stunned when amongst the results I saw one that redirected me to Oglethorpe’s site. I had navigated the site for almost an hour and I had been unable to find it. To add insult to injury, the information displayed on that page matched almost perfectly the mental model of my user. Moved by annoyance I was then determined to find the route to that wonderful piece of information that had been concealed from both my user and me. And I found it:
You have to click on Admission, then choose Traditional Undergraduate (if you choose other type of education you’ll never know how to get to Oglethorpe!) and, in the submenu that appears, select Visit campus and then Plan your visit. A piece of cake, isn’t it?
Once I had realised that the information my user wanted to see was available but almost impossible to discover, I started looking at all the places of the website that redirected to or showed me a map: there were four different ones:
- Home page > About > Maps
2. Home page > Contact us
3. Admission > Traditional Undergraduate > Visit campus > Plan your visit (my favourite one)
4. Visitors > Campus maps (a link to route 1 located on the footer of all pages)
My objective then was to unify all the information about the location of the university and how to get there in one place. To do that, I must evaluate all the routes to that information to see whether the one I was interested in fitted there.
- Route 1 was inside the About section, which displayed information about the university itself, about the institution that is, in a propagandistic way; the Maps section showed the Google Maps window alongside campus maps.
- Route 2 displayed contact information: campus address and telephones, office of administration’s address and such.
- Route 3 was inside the Admission section and the subsection included info about how to apply & enter at Oglethorpe, the requirements needed, the student profile, financial aid, etc.
After too much thought, I deemed that the best route for the information was number 2, as it was focused on contact details.
5. Prototyping the final result
I then started sketching some screens, selecting all the information I wanted to include on my new Contact us screen. My purpose was to merge the information already available on that screen with the one displayed on the Plan your visit one. I first considered leaving the Contact screen as it was and adding it a button that linked it to the Getting here page, but I swiftly dismissed that idea because I reckoned that the user would want to see all the important information at a glance.
I then moved on into how to conveniently merge both pages. At that point I also assumed that all routes would need to be modified to avoid displaying the same information several times inside the website. I kept on sketching until I found an idea that might work:
I explored some university websites to see how they displayed the same information and I found that most of them separated how to get to the campus according to the type of transport used. I also found out that the use of icons helped to quickly find the way to arrive that better suited each user. I therefore decided to filter the Getting here information by the type of transport (plane, car and public transport) and to add some icons to clarify it, visually similar to the ones Oglethorpe website already uses.
I decided to rename the page from Contact us to Find us, so that it would be more obvious that not only contact details are shown, but also how to reach Oglethorpe. I’ve also widened the upper yellow bar in order to make the new button more visible.
I’ve made a comparison between the steps a user should take to find the Getting here information before and after the redesign:
I’ve also made some changes to the rest of the pages that included a map to simplify the information: on the footer menu, I’ve added a new line called Getting here, that redirects you to the Find us page. On the Maps screen, I’ve deleted the Google Maps window and left the campus and parking maps as well as the 360 visit; I’ve also added a button to the Find Us page in case users don’t know how to arrive at Oglethorpe. Finally, the Visit campus screen has remained untouched except for its submenu: the Plan your visit option has been removed. You can see the final prototypes below:
6. Conclusion
This has been a long and interesting process, but I’m very happy with the result as I think it has helped clarify a bit the website and it will help new students find out how to conveniently arrive at Oglethorpe. By undertaking this exercise, I have learned some interesting things:
- Not all websites have a good design in terms of usability.
- Testing usability is crucial: not everybody has the same background and what might seem easy for someone might be difficult for others. It is important to conduct usability tests to detect possible pain points in our designs.
- Make sure the information you display in your products matches the mental models your users have, otherwise your user will spend more time than required looking for an information that it is actually there, which will lead to frustration and annoyance.
- Information architecture is key to a good product: information should be correctly structured and not be hidden, duplicated or confusing.
- When designing for websites, pay attention to the fold: the most important information should never be displayed below it; in this way it’s more likely that users will miss it as they will have to scroll in order to see it.
