UBC UX Lab

Exam Resources Redesign

I joined UX Lab during my final year at the University of British Columbia. UX Lab is a team of UX researchers under UBC Student Communication Services tasked with running user research and testing to enhance the user experience of UBC’s digital services.

Client
UBC
Project Type
User Research
Prototyping
UI Design
Project Year
2019
Deliverables
High-fidelity Prototype
UX Research Report
Website Redesign

The Current Exam Page

The exam page serves the purpose of redirecting users to the appropriate subpages depending on their needs or issues. It includes:

  • Quick links on the right to help users directly find their information
  • Hyperlinks to the various subpages
  • Final exam schedule button
  • Exam periods for upcoming semesters
  • Related info section at the bottom

From a quick glance, a number of things stand out such as the amount of text used, the proclivity for hyperlinks over buttons, as well as the use of undefined terms such as “Standing Deferred” and “Exam Policies & Cancellations”.

Research

For our user testing, we had a total of 16 participants from a variety of year levels, faculties, and backgrounds including graduate students and international students. Because the UBC support sites mainly serve students, we decided it would be appropriate to only test this user group.

User Testing

Questionnaire

We developed an online questionnaire that asked students to rank a set of exam related categories by importance. We used this information to help us narrow down the categories and topics users found most necessary.

Scenario Test

For our user testing, we implemented a scenario test to see what users would do given a prompt. We used a scenario test because we wanted to study how students were navigating the pages and arriving at their respective solutions.

Additionally, we asked them to verbalize their thoughts and feelings as well as some follow-up questions regarding what they found helpful or what could be improved upon.

Analysis

Using an Affinity Diagram, we took each of our data recordings of user feedback and responses from the testing sessions and put them onto a virtual sticky board. From this, we grouped together the responses based on themes that emerged, putting together things that seemed similar then labelling the respective categories by issue and area of concern such as the design & layout, quality of information, and general comments about the interface.

Research Findings

Through our research, we were able to uncover a couple of issues and pain points needed to be addressed, as well as some things that users found helpful or beneficial.

What Worked

  • The pages covered the necessary exam topics and/or categories. Everything was relevant
  • Many people commented on how things looked ‘clickable’, expressing what drew their attention and the actionable items they were aware of
  • The subpages had a lot of information that were relevant to different cases or useful for a variety of scenarios
  • The two most requested exam-related information, Final Exam Schedules and Exam Period Dates, were displayed prominently and made easily accessible to users

Outstanding Issues/Pain Points

  • Users kept having to go back and forth between the subpages and the main exam page
  • 43.75% of participants said they found it frustrating that they kept going around in circles trying to find the appropriate information for their concern
  • The terminology was confusing and sometimes ambiguous as to what the difference was: terms such as standing deferred, supplemental, academic concessions, academic accommodations, and hardships or cancellations all stood for different things but it is unclear where one would find information specifically for rescheduling an exam
  • Users were unsure what to do in the scenario given (“You have an exam today, but are super sick with the flu. Use the exam page to find out what to do next”). Users didn’t know whether they should try to reschedule their final exam or simply find ways to cope with their illness. Some students were more worried about their exams than their own wellness! This could be a cause for concern because it suggests students prioritized their exams and grades over their own health
  • Many wished that there was a clearer step-by-step guide on how to deal with exam related issues, such as who to contact or which pages to navigate to, instead of having to determine for themselves which information was appropriate to their situation

Final Redesign

Based on our findings, we developed a high-fidelity prototype redesign of the exam page. We came up with five new features to address the issues presented to us by our users.

Autocomplete Search Bar

To address the looping issues users had during scenario tests, we implemented an autocomplete/suggested search bar to start students off in the right direction. This feature would help overcome issues with the terminology by allowing users to describe their own situation instead of having to figure out which terms or pages applied to their issue.

Main Categories Section

We designed the categorical icons section to be front and center to grab the users’ attention. We utilized the ‘clickable’ or actionable aspect of icons and buttons as most users cited this to be very helpful as it decreased the amount of reading needed. Furthermore, by narrowing down the number of categories based on the ranking test results, users can find their relevant information much more quickly and easily.

Redesigned Exam Period Table

We decided to redesign the Final Exam Period Table to increase its prominence and reflect the degree of importance users reported on the ranking test. Using UBC’s new visual identity, we redesigned the table with a brighter blue and optimized the text sizing and spacing to increase the readability of the text. Additionally, we overlaid the information onto a white background to further highlight this feature and draw the attention of users. The added visual contrast also helps separate this section from the other parts of the page.

Dedicated Contact Section

From the scenario tests, many users inquired about being able to physically talk to someone on the phone to help resolve their issue. Yet, with the current exam page, there was no immediate way for users to get the appropriate contact information. We implemented a dedicated ‘Contact Us’ section to help users quickly get the contact information they need to get in touch with the appropriate person for their issue.

Emergency Situations Page

The Emergency Situations Page came as a suggestion from two users regarding unforeseen exam conflicts. Empathizing with the stress of having to deal with an emergency while worrying about a final exam inspired us to create this page. We focused on letting students know to prioritize their emergency over their academics and assured them that their exam can be always be rescheduled. To simplify the already stressful process, we designated a two-step action plan in the “What to do in the event of an emergency” section. We also included a Weather Emergencies section with a live status update of the campus and an Unforeseen Circumstances section for more specific examples of unforeseen/non-medical emergencies.

Exams Page Redesign Demo

Lessons and Takeaways

Working with my partner and UX coordinator, I learned to work with my team towards a shared goal, all while picking up as much as I could about UI/UX design. While conducting user tests, I learned how to interact with participants in a professional and respectable manner to create a comfortable atmosphere and eliminate any experiment bias.

My project partner and I faced many unforeseen obstacles throughout the project, including issues we uncoverd during pilot testing, conflicts with scheduling research and testing, and making sure all our design decisions were sound and user-centered.

All of this, we did to ensure no stone was left unturned in our mission to report on the necessary changes that would eventually have an impact on our fellow students.

What I learned

  • Be flexible and adaptable, anything can happen
  • Great teamwork means communicating and fully committing
  • Always be prepared to take on more responsibility, it’s always worth it in the end
  • Never assume. User feedback will always be more accurate and representative of the actual needs of the users
  • Don’t be afraid to probe users for more information or to clarify their statements