Sydney university courses

In late 2015 Sydney Universities' website had been re-launched, but had almost no functionality with just a basic search with text & image content. Students looking for courses were lost and bewildered by terminology 

MY ROLE
I was responsible for the experience strategy, user research, design and user testing for the responsive site. I lead the UX work, producing all major deliverables and presenting these to the client between December 2015 and June 2016. I worked alongside 4 others who were part-time on the project: a Project Manager, Business Analyst, Visual Designer and a PhD student who created career and course mapping
Desktop and mobile designs were delivered. This project is an example of where the optimum user experience designs lead to a new Database design.
THE ORIGINAL SITE
Sydney courses has 1.5 million hits per year
 
Issues included: 
  • Thousands of search results with no context
  • Offering of 750 courses and 6000 course units
  • Course entry requirements, fees, funding and application processes have complex rules and content existed for all situations on many pages, and was undecipherable
  • Inconsistent course pages with bad data and processes
  • Lack of multi-year course data
  • Users unable to de-code the Universities language or products
  • Course fees not shown
This is just a small selection of the issues identified and solved both from original brief and found in user research

The old site below shows that the search term 'Engineering' results in 4,843 results displayed over many pages.

The 1st result is a 'course study area' called 'engineering' and then a random course 'Bachelor of Engineering Honours (Civil)' followed by hundreds of pages of unsorted, unfilterable results.

So how do you show 750 course options easily on 1 search results page?

The old site and database used many terms, none of which the University staff could define for me. For example, one of the old course search pages used 21 Areas of Study.  21 items does not lend itself well to user interfaces either. Examples of terms in use, were:
  • Study area
  • Subject area
  • Academic discipline
  • Field of study
  • Field of research
  • Area of Interest
  • Area of Study
  • Field of education
After much analysis, I cut these down to the definable and useful:
  • Area of Interest x 7         (This went up to 10 in 2017)
  • Course level x 6      
The combined selection of these would restrict course options to manageable options in the interface
THE NEW SEARCH RESULTS
From the homepage search the user is taken to the search results page, where their country is detected, and appropriate search results and other relevant settings are applied*
The brown bar slides on to tell the user that their personal situation is being taken into account and offers the chance to change the setting
*An international student will pay around 4 times as much for a course, will have completely different entry requirements, and funding options, and different application process for example
The red filters then show the user a possible 7 'Areas of interest and 7 course levels, with the option to cut down further by keyword 
As the user clicks, the results are dynamically updated. As the student progresses, the simple view can be changed to the compare view for extra details and comparison
The student can now easily see the course options in context. Even when all 7 areas of interest are shown in the Bachelor course level, only 66 boxes are shown, therefore all viewed on the page together. 
The 'Course' view is shown here, however using the 4 tabs on the left allows the student to view by Majors, Careers or Units of Study. Any of these can be added to the personal prospectus
The search results page shown all in one section is below
On mouseover of any of the courses, it's variants are shown along with courses each can be combined with, the ability to add it to a personalised prospectus or view full course details 
Note that the full design has not yet been implemented

But so far I've shown you a tiny portion of the design, so I'll now explain my approach...

  • BUSINESS RESEARCH
  • USER RESEARCH
  • WIREFRAMING / CLICKABLE PROTOTYPES
  • USER TESTING AND WIREFRAME UPDATE
  • VISUAL DESIGN UX REVIEW
  • BUILD UX REVIEW
For example in the User Research stage, I did 16 x 1 hour interviews with a variety of student types.
These interviews were screen and audio recorded, transcribed and user insights were extracted for inclusion into designs
To see details of all the stages involved and results, request a password for:
NEW DESIGN FEATURES
World firsts
  • Homepage search bar
  • Search results page
  • Course page, Major page, Unit of study page
  • Separate Research Course Page
  • Personalised 'My prospectus' with edit, share, email, print
  • Country detection to inform personalisation
  • Personalisation to display course information according to student situation
  • An about courses and glossary page to orient students
  • Several features throughout the site to explain course levels
  • An inspiration page for each area of interest and for SEO
  • Explore by interests and careers tool
  • Pathway diagram pages for example to show the course route to becoming a Doctor and all options along the way
  • 'Study > Find a course' main navigation page allowing students to find a course for example 'by course duration' or any other search type
  • Research Project search results by project or supervisor
  • Course Builder, to help students find units within a course they like and assist in choosing a course
  • Ask a question & live chat
  • Graduate destinations pages
  • International students page with personalisation
  • Prostpectus side-bar
  • Recommendations for Scholarships search and study abroad and exchange pages
DESIGN IMPROVEMENTS
For example, this is one of the old course pages.  Students had great difficulty just finding the entry requirement which is one of the first things each student usually looks for
If you actually try to read this page in the mind of a student you will realise that there are many confusing terms, plenty that is not relevant on a course page (e.g. 'what is a Major' - this kind of copy was actually inserted into individual course database fields again and again.
OLD SITE
The new design (note this is a wireframe and not a final visual design) has consistent blocks for information so that it can be easily found, and course pages can be compared.
 
The ATAR entry requirement for example, is a large number in the RHS column. The column shows all the things most students wanted to know in order i.e. the entry requirement, then duration, fee, funding options, and how to apply. 
The black box with field entry in this page is 'best-guessed' from the location the user is browsing from. The answers in these fields affect all the other information on this page i.e. IT IS PERSONALISED TO THE USERS SITUATION.
This approach removes most of the user confusion and frustration
EXAMPLE OF USER INSIGHT APPLIED TO DESIGN
 
TH95-TH98 (blue circles above) In the old site pages, there was lots of confusion around University Terminology and Process. The University is not ‘speaking to it’s audience’ but instead speaking to itself. Titles such as ‘HECS-HELP’ (a type of course funding) were lost in hundreds of content pages not indicating who this content is relevant to (Only domestic students). The new design detects the user type and displays content which is relevant to them, giving explanations of terms along the way.

Every single design decision in the wireframes can be backed up by stakeholder interviews, user interviews and / or business process. Pick anything at random and ask for the decision process behind it!

PROJECT MOMENTS

A wall of visual designs towards the end of the project (Desktop only shown).  From left clockwise, the BA, Visual Designer and PhD Student in my team

I asked the BA to find out and illustrate in a workshop how a University Course is built, to inform the interface for my 'Build a course' page. 

Some results of the interests and career to course mapping that the PhD student delivered.  I created the structures for the data.

3 lines = 3 phases of UX templates, top line priority to be built first. I advised the Project Manager on this

END TO END UX
While potential students are still at school, they are given a University admissions workbook which is supposed to help them choose a course.
The book has a few sections, one section asks the student to list their interests, then to list careers which might match them - despite not having a list of careers or definitions of them in the book or any way to map interests or school subjects to Careers.
The next section asks them to identify courses which match the careers, again, with no lists or mapping which the student could use.
That's why I created a careers tool to map interests, school subjects and careers to courses and the PhD student filled in the data, and also created the career Pathway diagrams which are so sorely missing from the early experiences for school children. Career pathways for example show all the courses needed to become a dentist and where along the way you can stop and become a dental hygienist instead, along with further study to support additional income for USYD.
So when a child comes to the Sydney University site, throughout they will see the calls to action 'Unsure?' or 'Explore your interests and careers to find the right course'
The above shows less than 10% of this project. For the full picture, please read the research document and click through the wireframes.
 
You will need to request the password: