Student Printing webpages

A UX case study

One of the top 3 IT-related tasks for UofG students is to print and scan documents.

The online guides on how to do this were hard to find, and difficult to read on small mobile screens, leaving the 1 in 5 students who visited them this way baffled as they stood by the printers trying to figure out what to do.

The UofG UX project team worked with the IT Helpdesk to improve these webpages and empower more students to print and scan unaided.

A heatmap of the top three tiles on the new Student Printing landing page, showing clicks concentrated towards the top left of the page

This was a data-driven redesign, where we used a combination of research and testing methods to inform our work. We restructured and relocated the pages, simplifying user journeys and making key instructions more accessible.

We'll complete our assessment of the changes in Winter 2018, by when we expect to see a reduction in the number of students contacting the IT Helpdesk with printing problems, a reduction in convoluted user journeys within the website, and happier, more confident students around the printers.

Step 1: Stakeholder interview

We started with a very broad brief to 'make improvements to the IT Services website'. Faced with more than 300 pages in 40 sections, we needed a way to focus our attention to best serve our users, so we consulted the people who spend the most time with those users: the staff of the IT Helpdesk.

They told us the top 3 things students come to them for help with are forgotten passwords, software purchasing, and printing. We'd already flagged up the Student Printing pages as some of most viewed on the IT Services site - they get 6.5% of all IT Services pageviews - so we asked for more info on this topic.

Insights

  1. There was low awareness of the print credit kiosks in the Library where students can top up using cash.
  2. Even as regular users of the site, Helpdesk staff often struggled to find the right info to advise students.
  3. Many of the instructions on the 'How to...' page were buried in a complex PDF that was difficult to read on a PC screen, and impossible on a mobile.

A baffling extract from the PDF instructions for the Library printers, annotated with lots of question marks

Step 2: Web analytics

Next we looked more deeply into the web analytics, to see if the numbers backed up the experiences described by the Helpdesk staff. As much as the numbers and trends, we looked for evidence of awkward or confusing user journeys, and places where poor information architecture or content was getting in the way of students being able to print and scan.

We reviewed Google Analytics reports (GA) from September 2017 to April 2018, and Hotjar heatmaps and session recordings from January to April 2018. The examples linked below are representative of many similar recordings.

Insights

  1. 20% of clicks on the landing page were on the PullPrint logo and the intro paragraph, which were not links, presumably resulting in confusion or frustration (see HotJar heatmap)
  2. The second most popular set of links on the landing page - those on how to set up to print from your laptop - were way down the page, making students scroll and scan to find what they needed (see HotJar heatmap)
  3. The printing pages being nested within the 'Student Computer Clusters' section was confusing the user journey (see Hotjar session recording; GA Content Drilldown)
  4. A quarter of traffic was arriving via the Library website's link to the 'How to...' page, but many users actually wanted content that was on the landing page or other sub-pages (Hotjar session recording; GA Navigation Summary)
  5. 20% of visitors to the mobile-unfriendly and PDF-laden 'How to...' page were on mobile devices (GA Device Category) 

Step 3: Build a prototype

With our research insights in mind, we drafted a new set of webpages, focussing on the content we knew students needed and used. By keeping things simple, we were able to put almost all of this content directly on the landing page, bringing the total number of pages down from 6 to 4, and making it easier for students to find key info.

We structured the landing page to put the most popular content first.

And of course we got rid of that PDF. With the Helpdesk's help, we wrote simpler, clearer 'How to...' guides.

Step 4: Guerrilla testing

We put the prototype pages on an iPad and took them to the Library to test with students. We approached students who were waiting near the printers on Level 3, and asked them to work through 4 scenarios representing typical tasks.

At the same time we ran an online 'chalkmark' study for 3 of the tasks, where we record the first place a user clicks when trying to complete a task.

15 students took part in the guerilla test, and 9 completed the chalkmark study.

We rated each student's level of success on each task: 1=User could not perform task, 2=User could perform task but with some struggles, and 3=User performed task quickly and with no trouble.

 Task scenarioAverage score (out of 3)
1 You’ve written an essay on an Apple laptop and you want to print it from the laptop. Find out how to do that. 2.55
2 You follow the instructions and it still doesn’t work. What do you do now?

2.64

3 When you get to the printer you see that you have no credits left. What do you do about this?

2.64

4 You have a paper copy of a diagram from a lecture you want to save to your computer. Find out how to do that. 2.67

All tasks scored well enough for us to go ahead and launch the pages.

For the weakest performing task - find Mac set up instructions - we reviewed the guerrilla tester's notes. She had spotted that some students were getting confused between 'Apple' and 'Mac'. This is something we will look into across the whole IT Services website, to improve clarity.

Step 5: Launch

We launched the new Student Printing pages on 16 May 2018. We split them out of the Student Computer Clusters section and gave them their own URL, to improve both their findability and the navigation between the pages.

We worked with the Library to update their links to the new landing page. We also set up a rewrite to make sure anyone using any other old links would automatically come to the new landing page.

Side-by-side heatmaps of the old and new Student Printing landing page, showing improvements in the findability of the most popular content

What next?

The new Student Printing pages launched just as we were going into the quietest time of year for the IT Helpdesk and website. As such, we won't be able to gauge the full impact of the changes for a while yet, though we can see from the new heatmap that the page structure is performing much better: there are far fewer wasted clicks, and the all hotspots are near the top of the page.

We know from Google Analytics that October and November are by far the busiest months for the IT website, so during that period we intend to:

  • Carry out another round of guerilla testing
  • Carry out a round of moderated usability testing
  • Review the IT Helpdesk's stats on the number and types of support calls they get from students about printing

We're also considering making some very short videos - perhaps even some animated gifs - to demonstrate how to complete basic tasks on the printers.