Exercise it! User Usability Report.
This Medium post is part of a series about the pre-work for a UX-UI Bootcamp I am taking at Ironhack, Barcelona.
The final UX exercise in the pre-work is to run a user test and do a Usability Report from it. We were asked to detect the main pain points in a USA University website. Analyze it, and propose some solution. In this Medium post, we will review the whole exercise process as a Case Study. The university I choose was the USC (University of Southern California).
About the University
The USC is the first private research university in California, located in downtown Los Angeles since the late XIX century. It is a traditional and prestigious institution. It awards more than 130 undergraduate degrees in humanities, letters, Arts, Social Sciences, Physical and Natural sciences, Engineering, Business, Medicine and Pharmaceuticals. As every large establishment has a very complex structure.
They want I review his own site, to be sure foreign students find online the information they are interested in. We need they can find the following information:
- The school mascot.
- If the school offers foreign language instruction for Arabic
- The nearest airport to the school
Personas
I needed to understand the targeted user. Who are the foreign students will visit the website? So I made the next user archetype:
Demographic
28-year-olds, male, single. With a career degree from his country of origin.
Behaviors
- Likes to meet new people to dive on new cultures.
- Enjoy studying and incorporating new knowledge.
Needs and goals
- Travel and live in a first world country.
- Continue studying and avoid working.
- Improve his professional career.
- Meet new people with similar interests.
Initial Observations
The first impression is not positive. Like other university sites, USC has a very diverse amount of information, with organizational criteria difficult to understand a prior.
On the home has a news section and offers live cameras from the campus (that don’t work!). It seems to be intended for current students of the institution, and other types of users are being relegated.
Has a popular links’ menu hidden at the top, and if you are not a regular user you will not find it. Likewise, these hidden menu are clearly for the students: Has links to the email, the library, the academic calendar or the schedule of classes.
Has another menu, more institutional. But navigating the site if you do not belong to the university is more complex.
Usability Testing
I set a guerilla testing with a friend that match the targeted user, Martin. He is Argentinian, living in Barcelona. Has a Degree, and he recently did a Master, so he was looking information online about the first world university. I asked him to complete the 3 tasks.
The results were more frustrating than I expected. He was well predisposed. But the test extended more than twice the stipulated time (30min). Finally, he told: “These sites are hateful! In the end, you have to send an email to the institution, and go to know when they respond.”
The school mascot
At first glance, he didn’t find it. He didn’t know in what category this information should be, and started looking inside the “Sports” section. Then in “Community”. But nothing, the information didn’t appear. In some pages, the students were mentioned as “Trojans.” He suspects it could be related to the college mascot, but he didn’t be sure: The mascots are usually animals or some dummy puppet.
As he didn’t find the answer, Martín used other strategies. He searched if the university had merchandising (The mascots commonly appear on the t-shirts). He was also attentive if he could saw it on any picture (if a video appeared he didn’t play it. “I can’t waste so much time”, he said). Finally, he went to the “History” section. The incorporation of the mascot should be an important fact to mention in the university timeline. And he found something; in the late ’40s, a dog called “George Tirebiter I” served as the Mascot. He knew that wasn’t the answer. His conclusion: or the Mascot is not important to the college, or that beautiful puppy was the only mascot they had.
The answer is that the Mascot is important for USC. If we google it, we find its own page within the site. Only It’s difficult to find it through its navigation. The mascot is “The Trojans”, a soldier from ancient Greece with armor and a sword. But none of the information Martin found helped him clarify that “The Trojans” was the answer. “I don’t have # $% 8 idea which is their mascot” was his conclusion.
The school offers foreign language instruction for Arabic?
This task was the most time-consuming. He found so much information that it was difficult to find just what he wanted. Martin asked to have less information so it is easier to read. Each site opened another new site, equal or more complex than the previous one, each one with its own navigation system: Each menu was very similar to the previous one visually, but they were different in content. Sometimes the sites opened in new tabs, and sometimes not. After looking for a time, He gots lost, and he didn’t know how to return to a previous page. To found the answer, he followed the following route through 3 different sites:
It took a lot of time, but in the end, he found the answer within the career’s information: USC does not offer foreign language instruction for Arabic. They offer English and give Toefl exam. But Arabic isn’t included.
PS: After I Found and redesign the solution, during I wrote this article, I searched by myself “Arabic USC” on google and I realized that Martín failed this task because the school offers Arab language.
The nearest airport to the school.
Instinctively he went to the footer of the main site. There was the information about the two Campus: The name with contact phone and a link that said “MAP”. He clicked it:
The site displays a personalized google map. On a sidebar, a menu suggests nearby locations of interest sorted by category. These suggestions were pre-loaded by the university itself. On the top has a search input to find more quickly between these suggestions. The problem is that airports were not included in the suggested locations.
Martin never knew the city of Los Angeles. He extended the map to look by himself, but he didn’t know where the airport where. Is a personalized map, so it doesn’t have all the google maps options, which usually includes the location of the airports.
His last solution was to manually search on Google maps in the new tab. But when he wanted to copy the Campus address he got another surprise. Can’t find the address written anywhere.
Finally, he closed the USC website, opened google maps, and searched for all the information there. While he found the nearest airport (LAX) it wasn’t on the University site. He was unable to complete this task.
Pain Points
The main pain point is the navigation inside the site. How we help our user to find quickly the answer they need with the big amount of information they have. The navigation was a problem for the two first tasks.
Other problems we have to solve are:
- Low presence of “The Trojans” on photos.
- Include the Campus Adress and the nearest airport.
- Site difficult to read for not current students.
Findings and Redesign solution
The solution must improve the navigation through the site. But is not so easy. Universities have a hierarchy that must be respected, they are academics and must offer a large volume of information. Simplify all the content and merge all the relative web pages in only one are extremely complex change to do. It’s not justified in order to improve navigation.
By having each college or section on his own independent site, its logic that each site maintains a different menu content. But what is necessary is to help the user to know where it is located. For that, I propose the next design of a “breadcrumb”. All sites related to the main site of USC must have the same style and above it a breadcrumb (or secondary menu) that allows us to see where we are located in relation to the previous site from which we came.
On the other hand, we must accept that the user’s journey on the site will be complex and it can’t be avoided. But adding a shortcut for the laziest users is a good option. For that, I propose to give more emphasis to the search input so that the user can quickly search for the page he wants by keywords. The input now exists, only that in this redesign we will increase the hierarchy:
The third (and last) thing I propose to redesign is the map page. This page is basically a map with recommendations for students. I add mobility information and Campus directions. Instead of an embedded personalized, I add a link to see that information on Google maps. In this way, the user can make queries from the google map’s web on desktop and from the google map’s app on mobile. This option is more comfortable, and without losing all the additional services that google maps can offer to the user.
In the end, the presence of “The Trojans” and the “design focused on non-students” don’t have a solution reflected in their own redesign. They have lower priority and its problem is partly resolved by the redesigns presented above.
— Want to know more about my UX-UI Bootcamp experience at Ironhack?Keep reading about the next exercise ⏩, or the previous one ⏪.
