Current Students’ website,
homepage & navigation redesign
University of Surrey
Brief
Research the current homepage and navigation using analytics and quantitative student feedback to back up choices.
Take the research collected and apply the findings to the new design, considering both stakeholders requests as well as the users needs.
Skills
UX research
UX design
Design system
UI design
Project Goals
Find out how many users are engaging with news & events.
Find out how people use the homepage
Find out what type of content students use most on the website
Find out what content they would like to see. Use research to improve this
Improve the students experience on the homepage from what it is now
Find out how people are using the navigation, and improve it if needed.
Find out if people know what the hubs are, and the services available. Use finding to improve this. (the navigation had MySurrey hubs in the menu title originally, so it would affect how people interact with it)
Challenges
Not enough time or resources in the project for user testing after the design went live. I used analytics afterwards instead.
Couldn’t do guerrilla testing properly due to not enough students available (exam time)
DISCOVER - Interviews and conversations
The new current students’ website was launched in Feb 2019.
Post launch (June 2019), the homepage and navigation needed evaluating and refining.
Internal comms stakeholders needed to find out how the site was being used. Stakeholders also had requirements for developing the content on the homepage (see project goals above).
DISCOVER - Research approach
I needed to do a combination of both behavioral and attitudinal to get a clear unbiased picture of what users say they want, and what users actually do.
Research methods: I chose to do online and offline questionnaires, guerrilla testing and web analytics. The questionnaires had both quantitative and qualitative types of questions.
DISCOVER /DEFINE - Looking at the Analytics
Background info:
We cannot use the bounce metric. When person goes from the homepage to a hub URL, it looks like a bounce when it it’s not. This is because the UX agency chose to build multiple separate microsite URLs (named ‘hubs’ linked to the homepage) in the IA. This causes a problem with the analytics.
I decided to look at exit rate instead, because exits are recorded when people leave a page, the page’s exit rate indicates how often visitors exited from it after visiting any number of other pages on the site in the same session (events and news are part of the main current students’ URL so this is ok)
The Hubs areas: Accommodation, Employment and careers, Wellbeing, IT, Study, Library, Employability, Campus life, Exams and assessments, Research, Visas and immigration, Money, Policies.
Key findings for 90 days March -June 2019:
The top 10 page views over 90 days were not news or events based.
Over all exit rate was in the 70% range (bad, depending if they found the information they needed. It would be bad for an e-commerce site)
EventsAvg. time on page - 25-30 seconds range (bad)
Unique pages views - People aren’t using events dedicated pages much, less than 1%
News
Avg. time on page - 25-30 seconds range (bad)
Unique pages views - People aren’t using news dedicated pages much - nearly 6% of all users
Homepage
Avg. time on page - 25-30 seconds range (bad)
Unique pages views - over 1/3 of all users - 39% of all users
The pages used the most over a 90 days period are in the IT Hub , Library Hub and Study Hub.
Device usage
Nearly 3/4 of sessions were by desktop (90 day period) . Most of our users use desktop
Just under 1/4 of sessions were by mobile (90 day period)
Less than 1/10 sessions were by tablet (90 day period)
DISCOVER /DEFINE - Quantitive questions from questionnaires
Below is a summary of the answers from the quantitative questions from the questionnaire done at the Hive (student support centre) and online questionnaires sent out via social media. The group size was 42 people.
64% Majority of students who use MySurrey are 1st and and 2nd year students.
50% are active users
Nearly 25% want simpler navigation
33% in both surveys would like,‘more info about student services’
31% want to see more about news/events (and 22% in the Hive study). This is backed up by avg. time on page 25-30 seconds (homepage).
40% don’t know what Hubs are (and 42% in the Hive study). This means there is a fundamental problem with the term ‘Hubs’ as part of the navigation.
DEFINE - Qualitative questions from questionnaires
Affinity diagram
Below: I did an affinity diagram with qualitative comments from the questionnaire. The results are summarised on this graph.
Analytics page views says news and events aren’t the main priority for students (hubs/student services information pages are , according to the data).
However, the qualitative research suggests students say they interested in seeing more news and events content. There may be a problem with the way the homepage is presenting the news and events. The students also want to see more relevant types of consumable content.
Bubble diagram
42 Comments showing the frequency of student goals , quantitative clustering qualitative comments
Below: For the Bubble diagram, I used the online tool Reframer, part of the Optimal Workshops suite of online UX solutions. All the comments are typed into the platform and tagged in your named categories. The quantity of named tags is displayed in a visual data format like this Bubble diagram.
What Direction Should We Take With This?
More usable and useful content
More findable pages in the navigation, and content on homepage, improve navigation IA structure
Improve accessibility to not just the homepage, but overall site
A more simple, clean (less busy, easy to read) design for the homepage to present content
CREATE - Wireframes
These are the wireframes that were created from the UX research. The Student poll had to come out due to not enough time in the project to deliver this component in time. It will be added at a later date.
These wireframes use a 1200px responsive grid , for bootstrap 4.
From the research, we identified issues:
“Frustrated with the navigation, would like quicker access to more common journeys ”
“Re-name the hubs something more intuitive”
The images below (taken from the wireframe) are the solutions I came up with for these issues.
CREATE - Design system changes
My Solution
I adapted the typefaces to work in the design system for the current students’ website and the app. The extra bold headings styles needed to have more flexibility due to not being legible at smaller sizes/also problems using with large amounts of text online.
Proxima Nova font family was used for headings and body text, because it was easy to read for dyslexic students (the Slab serif fonts are illegible to dyslectic students). Accessibility is a priority at the University. However, Universities’ need to pass Web Content Accessibility Guidelines (WCAG) 2
Level AA Conformance by law, as of September 2019.
The solution: Create override classes. I got this idea from the GOV.UK design system
This was adapted June -September 2019, after launch in Feb 2019
CREATE - UI designs
These are the UI redesign solution for the homepage and navigation
The Ui Sketch files use a 1200px responsive grid (20px gutter), for bootstrap 4.
TEST - Analytics after second release
(Comparing Mar-Jun 2019 / Oct-Dec 2019 / Dec-Mar 2020)
Since the second release in September 2019, I have collected the data from Google Analytics to compare.
The top 10 page views over 90 days (e.g. IT , the Hive student service pg ,money pages).
News or events based are still not in the top 10, However Avg. time on page has kept increasing, and it is in the acceptable, even good range now.This means that people could be reading the news and events on the homepage if they are spending close to 3 mins avg time on page.
The homepage has 25% of all traffic, and comes first 1 Oct 2019-29 Dec 2019 and stays 25% Dec-mar 2020. The other top 9 pages are still information pages within the hubs /service areas.
New users (whole site)
Went up over 130% in Dec-Mar 2020 (175k) Jun - Mar 2019 (139K) and went down Oct - Dec 2019 (near Christmas has an effect).Unique page views (whole site)
Went up 222% (nearly 432K vs 134k) from Dec - March 2020 compared to Oct-Dec 2019The pattern of Direct, referral, organic traffic has stayed the same
Overall exit range (whole site)
Early 30% range Dec - Mar 2020 (good)
Homepage
Avg. time on page - just under 2min Oct - Dec2019 and just nearly 3min range Dec - Mar 2020 (good)
Unique pages views - over of all users go from the 134k range vs 43k range then back up to 132k range. This seems to do with time of year. Mar -Jun vs Oct - Dec vs Dec - Mar.
Homepage : returning visitors
30% range Dec2019 - Mar 2020
Homepage New users :
Just over 30% range Dec2019-Mar 2020
RESULTS - Key improvements
Dec-Mar 2020, Good results:
Avg. time on page, just under 3 mins (homepage)
Overall exit range (whole site) early 30% range,
Unique page views (whole site) went up 222%
The feed back from stakeholders was good. They felt that I had successfully achieved their goals, as well as balancing the students needs. I did have to comprise regarding the UX in some areas. I had more comms components that I would have preferred ( e.g I would have less CTAs competing for attention , see Hick’s Law ) .
See more examples and case studies:
For more choices, please continue to browse my portfolio or use the navigation below.