Usability Case Study — Boston University Website
For this Ironhack pre-work; usability case study, I chose to examine the website of Boston University, because I saw it as a great challenge for myself and because, in my opinion, the website has a lot to improve when it comes to the UX.
As this case study is performed for learning purposes and for practicing and improving the set of skills that are important in the design thinking approach, the study is done by interviewing, observing and analyzing the behavior of only one user. So, the results of this study can’t be used as a real reference of the user experience of the website, but more as an interesting insight for future development and discussion.
In order to find out what are the main pain-points the users confront when using the website, I needed to run a little test on the website with a real user. I also made the test myself before making it with the user, as I wanted to get a better idea of the usability of the website and the possible pain-points there might be. The user I chose for this test is a CTO with an important background as a full-stack developer, so I hoped to get some really good insights (which I did).
The usability test was short and simple and contained only three small tasks. In order to get the best view on page usability, there were two rules applied: 1. the user can’t leave the page once the test has started 2. the user can’t use the search bar of the website to search for content.
And these were the tasks for the user:
- Describe the first impression of the website after 7 seconds in a short sentence or with a few adjectives.
- Go through the navigation and tell what he/she thinks about it.
- Find the following “items”:
- The university mascot
- If the university offers Arabic as a foreign language
- The nearest airport to the university
I have to say that the task number 3 took much more time than I would have thought it would. I challenge you all to try to find the items mentioned above and clock the time you take to find them! For the user, it took 4 min 15 sec to find if the university offers Arabic, 5 min to find the nearest airport and even as long as 11 min 50 sec to find the university mascot.
The first impression of the website is antique and old, which is definitely not a good one for a university offering academic studies in 2019... The user considered that the website looks like it hasn’t been updated in a long time because the design is not modern at all.
The user considered that the navigation of the website is horrible, super bad. He felt lost because almost every section of the website is like a separate website that has a different layout and the navigation bar and also the options within them change completely. The user went to pages from where he didn’t know how to get back to the front page. Some returned him to the front page when he clicked the university logo in the upper left corner, but in some pages, the logo was not visible. In those pages that didn’t have the logo, the only way the user was able to return to the front page was by deleting the URL path.
The user’s overall opinion was, that the website is quite chaotic. He also commented, that maybe if he were a student in the university, he would get used to the navigation, but the image of the university according to the page navigation is not good and it could even prevent him to apply to go to study there if there were other options available.
Main usability observations through task 3: Finding “items” from the website
The task to find the university mascot, Arabic studies and the nearest airport sounded easy, but at least in this website it sure didn’t feel like it. The main feelings I could sense from the user during the performance of this task were frustration and annoyance, which are feelings no one wants to transmit through their website.
I’ll give you a few examples from the test that led the user to feel frustrated and annoyed:
The mascot is usually related to university campus life and athletics in the US. Yet, the user was not able to find any information or pictures that would show him the mascot when he was going through the sections “Campus Life Overview”, “Campus Life Athletics” and “About Overview”. He even tried to watch some videos about the university basketball team, hoping to see the mascot in it (unfortunately he didn’t).
Finally, the user found the mascot from the following path: Campus Life -> Athletics -> Related Links ->Terrier Athletics and this is what he saw:
Note! I did this task myself before asking the user to do it and I also relate the mascots to the university athletics, so I tried to search for it in the sports section. It took also for me a lot of time, and finally, I found a person dressed up as the mascot in a picture standing in the audience. I tried to find the picture again the next day, but I couldn’t find it.
The search for the Arabic course was a bit easier, which was a positive thing because the academic offering is one of the most (if not the most) important information the university website is expected to offer for its visitors. However, the user took his time to find it in the Academics section because he was trying to find courses, instead of degree programs. When he finally found the Arabic as a minor program (I had given him the permission to use the CTRL + F search function), he commented that the print of the academic offering site is a way too small and there is too much information together. It is not easy for the eye to find the searched word there. Also, the color contrasts don’t make much sense, as the eye is more focused on the blue text than then grey one because the blue color pops up more.
When the user started to look for the nearest airport, I noticed that he was already tired of the searching after the first two items. As he had already seen that he couldn’t find a clear information page about the university, he went straight to looking for a map (which he found on the bottom of the front page in the bottom navigation bar). He found the airport by looking manually from the map, but it didn’t happen so fast, as the predetermined map only showed a very small, close shot, of the city.
The user needed to zoom out (which by the way wasn’t easy either, as the page cuts the (-) button of the map and it is not completely visible) and he found the airport only when the map was zoomed out enough to it to show the symbol of the airport (=an airplane). The user commented that he was looking for the airplane symbol instead of the word “airport” because he could see that all the schools, museums, shops, etc. were marked with a symbol and in Google maps airports as well have their symbol to facilitate the recognition.
Main findings and pain-points
After the test and writing down all the observations gotten from it, I started to look for the main pain-points of the website. When I combined all the comments of the user with everything I noticed about his actions during the tasks, it was clear that the main pain-point of the site is definitely the page navigation and the information architecture. The second one is that the website is not uniform, which really confuses the user and makes him/her question about the confidentiality of the page.
The main problem being the navigation and accessibility to the information, I wanted to focus on that and try to come up with an idea to solve it. The final goal is, of course, to unify the website in a way, that any user (new, habitual, etc.) can navigate throughout the page and find the needed information without long search times, frustration, confusions, etc.
After understanding the main pain-point and the focus of my redesign suggestions for the website, I started to gather up some ideas. I knew, that the first step I should take is to understand what information does the website actually offer and would there be a better way to restructure the information architecture so that it would be easier and more logical for the user to find the information he/she is looking for. As this case study is done for learning purposes, I decided to focus only on the front page of the site, through what further restructuring could be done.
So, I gathered all the pieces of information from the first page and divided them into different sections. Then I used the yellow marker to point out the most important information that should be always visible for the user, no matter where they are navigation. (* “SoMe links” means Social Media links)
I wanted to structure the information in the site in a more recognizable way so that the users could intuitively find the information. Here are some ideas I had:
- Make the main navigation bar fixed (includes the drop-down list)
- Make the bottom navigation options fixed and stick to the essential ones
- Make the logo fixed AND clickable ->always leads to the front page
- Add the basic information of the University next to the bottom page logo
- Take into account the “top searches” (They should be added to the navigation bar as information sections as what they really represent is information that the users are looking for, but cannot find without the help of the search bar)
- Add “Events” section below the news section on the front page to show the campus activities etc.
Below you can see the paper prototypes I created.
Comments & Contemplation
I got to say, that I really enjoyed making this usability case study. I found it really interesting to observe the user and notice that I was capable to point out some real pain-points and try to find a design-based solution to them.
This again motivated me to improve my prototyping skills because I am yet not able to express my thoughts and ideas on paper as good as I picture them in my mind. That is also partly because I have always had a “problem” with my handwriting and drawing; my hands don’t keep up the rhythm of my idea flow and I am a lazy user of the eraser haha (my elementary school teacher once even bought me an eraser because she had a hard time understanding my essays because of the overwriting I practiced).
If you did the usability test, how long did it took for you to find the different “items”? I am curious to know!