University course pages

The Goal

Improve applications and conversions on over 600 course sign-up pages by redesigning the page layout and content. Ensure that the pages are optimized for any screen size and that clients can find desired information easily.

The Challenge

The course sign-up pages are the most important part of the University’s online presence. Recruitment for courses is key to the University’s success, as it is the main source of income. Each existing page looked slightly different, with no coherent template. Generally, the sign-up pages were very text-heavy and contained a lot of mandatory information required by UK Consumer Law.

Creating a page design that balanced the needs of stakeholders was challenging. It involved marrying the needs of the academics in charge of each course and the marketing team responsible for recruiting students, while ensuring the design met the needs of the users.

Discovery

Requirements Gathering

Gathering requirements was a lengthy process involving many teams across the organization and, for the first time, input from potential students. Along with one-on-one interviews, I ran interactive workshops where stakeholders (course leaders, heads of department and marketing) built a course page using post-it notes.

Usability Benchmarking

Performed benchmarking usability tests on our site and competitors' sites for key tasks. I enlisted the help of Periscopics, a reputable firm, to carry out the tests. This exercise allowed me to see how the University compared to its competitors and gather ideas for improving our user journey.

Industry Comparison

To identify trends in course pages across competitor universities, I compared the layout, user journey, and content quality of course pages. I focused on the simplest user journey to course pages: Home page, course search/finder, and the course page itself. If I liked a particular site’s design, I explored more pages to find standout features that improved the user experience.

With this information, I identified trends in:

• Design
• Layout
• Information shown
• Information architecture
• Functionality

Design

Sketches

With such a complex design, I started sketching possible layouts. This was the best way to generate many ideas quickly and flush out those the stakeholders didn’t like. I concentrated on basic hierarchy, layout, and content, informed by stakeholder interviews, competitor research, and user testing.

Low Fidelity Wireframes

Once stakeholders were happy with the sketches, I moved to digital wireframes using Axure RP. This step allowed me to refine the layout and start adding real content, bringing the design to life. These wireframes paved the way for user validation.

Validation

Usability Testing

Before introducing major brand elements, I validated the layout and labeling. I wrote a test containing 15 tasks based on personas developed before the redesign. I also created a script to enlist facilitators from the web team to help with testing.

To get input from real prospective students, I conducted guerrilla testing at a fair attended by 16-17 year olds. The testing focused on key tasks informed by our personas. The results were very positive, with most users completing all tasks easily. Only minor changes were needed for headings and tab design.

Additional User Research

Focus Group

To ensure comprehensive research, I set up a focus group with international students. This informal workshop provided insights into how international students use our website, what information they need, and the importance of each piece of information. We used open card sorting to determine what information they needed about a course and the University, and grouped the cards by relevance and priority (MuSCo: must, should, could).

Discussion

Using post-it notes as prompts, I asked additional questions to gather missing information or insights. At the end of the session, students freely discussed frustrations with the website and application process, which I recorded and passed on to relevant departments.

End Result

A flexible, mobile-optimized template that allows the University to market their courses to prospective students. The content has been validated to meet prospective students' needs, helping them choose a course.

NOTE: Although the design has evoled over the years the foundation of the work is still based on my research and initial designs.

Current course pages

• University of Westminster Architectue BA Hons course page >

Overall Outcomes

Feedback

Even after early usability tests, I wanted to ensure the final release met user needs. I ran surveys, feedback sessions, and used Hotjar to assess the new design’s impact. The feedback from prospective and incoming students was overwhelmingly positive, with some stating that the course page was the reason they chose to apply to the University.

Increase in Conversions

The new design needed to convert prospective students during the busiest time of the year, Clearing.

Clearing is a way for universities to fill any remaining spaces for the new academic year. Conversions on full-time undergraduate course pages over the 'Clearing' period (1 July – 6 September, comparing 2016 to 2017 data) showed significant increases: