Information architecture and website redesign
for Macquarie University student portal
PROJECT OVERVIEW
Macquarie University’s (MQ) current student portal has received complaints from students due to its disorganised content and dysfunctional navigation.
I was part of a website transformation project to improve the user experience on students.mq.edu.au to enhance engagement between MQ current students and the Students team.
Team of three
Company
Duration
1 x Lead UX/UI designer
2 x UX/UI designers (myself included)
blueegg - UX Design agency
June - September 2020
The challenge
MQ uses a student portal site (students.mq.edu.au) which was built many years ago without written guidelines. Therefore, it became a clunky and unintuitive site that failed to deliver value to current MQ students as a platform for useful and critical information around studying and university life.
Our high-level goals were to:
-
Examine the current student website usage and user experience
-
Revise information architecture (IA)
-
Enhance content discoverability
-
Improve overall student portal experience.
My role
-
Problem discovery
My role was to analyse findings provided by the client and conduct remote stakeholder workshops to understand business pain points and goals.
-
User research
I created a user research plan, managed interview schedules with the student groups, facilitated user interviews and usability tests using remote research tools, Lookback, Zoom and Otter.ai.
-
Analysis and report
I synthesised the research findings using Dovetail - an online research synthesis tool - and presented them to the client, MQ Students team, and 20 other stakeholders. The report included task completion results and key insights from the user research.
-
I.A. revision
I defined the problems in the current I.A. and came up with various solutions to apply, such as relocate, consolidate and design variation. I also conducted a tree test in Optimal Workshop to ensure the revised I.A. would resonate with the MQ current students.
-
Site template redesign
I conducted a remote students co-design workshop to align with the students’ expectations and designed a homepage mock-up that reflects the workshop findings for usability tests. I also led a collaboration with the MQ digital design team to create current student website templates.
DETAILS
How did the process look like?
DISCOVERY
Project kick-off
Our first step was to discuss the student portal with the client to better understand the portal’s current status from a business point of view and set the right direction for user research. Through the kick-off meeting, we identified:
The client’s pain points:
-
Complete disconnect from the main MQ site (mq.edu.au)
-
Clunkiness hinders users’ ability to complete important tasks such as enrolling and finding orientation date
-
Content is poorly made and disorganised
-
Long and ineffective navigation.
The client’s expectations:
-
Better sourced and created content across the portal
-
A complete transformation of the mega navigation
-
Integration of the Global Experience Macquarie (GEM) design system.
Next steps:
-
Confirm primary personas from MQ
-
MQ to provide: Hot jar, Qualtrix survey, Sketch files of UI/UX kits
-
Continue reviewing the current I.A.
-
Reviewing GEM design system components.
DISCOVERY
Current research data review
We conducted an initial review of the existing qualitative data from Qualtrix and Google Analytics provided by the MQ student team. It helped us define the primary purposes of the student site, commonly searched terms and their main pain points. We also identified and compared how the COVID-19 situation had affected those answers. While reviewing the data, we conducted a student website sitemap and GEM components audit to gain a holistic understanding of the situation. (Click the images below to see details)
DISCOVERY
Stakeholder workshop
After identifying key user groups, their behaviour and common flows, we developed a user research plan that included general and task questions to better understand the current MQ student portal experience.
We then facilitated a remote stakeholder workshop to introduce the research plan and encouraged the client and broader stakeholder group to contribute to it. The workshop was a crucial milestone for the project to ensure business alignment and collaboration prior to starting research.
RESEARCH
user testing and interviews
To better understand the causes of students’ problems with using the current student portal and possible solutions, we facilitated 25 interviews on Zoom and Lookback and stored all the insights in Otter.ai. We have collaborated with MQ for student recruitment and identified five distinctive user groups who most use the current student portal:
-
5 x postgraduates students
-
5 x 1st-year domestic students
-
5 x 1st-year international students
-
5 x 3rd-year domestic students
-
5 x 3rd-year international students
The interview guide consisted of general and persona specific questions, university experience, website experience. We asked students to find general and persona-specific information using the current student portal during task questions.
RESEARCH
Research synthesis
We synthesised the insights from the 25 user interviews using Dovetail software and uncovered the following problem areas. (Click the images below to see details)
Key findings
DEFINE
How Might We
The ‘How Might We’ format was a perfect design thinking exercise to help us transform our defined problems into opportunities.
For current MQ students:
DEVELOP - 1ST ROUND
What we found so far
-
User interview
-
Unclear website transition
-
Overwhelming and unintuitive mega navigation
-
-
Card sort
-
Five recurring groups
-
So we did
-
Consolidated/removed, relabelled and relocated menus in the I.A.
-
Consolidation: menus that were not distinctive enough for students were consolidated with sections that contain similar information
-
Removal: menus that were outdated or no longer adding value for students were removed during the content audit with the project team at MQ
-
Relabel: menu labels identified as confusing or lacking context were tested then relabelled to align with the content within the menu, e.g. ‘O-Zone’ to ‘Online learning.’
-
Relocation: Essential and often sought information such as Careers and Finances was surfaced to the top-level navigation to allow quick and easy access. Other information that was confusing to find was also relocated.
-
-
Revised the mega navigation to be scannable and functional
-
Third level items that were lengthy and deterred students from reading through the content were condensed and choices were limited to a maximum of 10 items.
-
-
Indicated ‘Student home’ clearly
-
As a way to navigate back to the student home page when they navigated away from it, we included a 'Student home' button in the top navigation.
-
VALIDATION - 1ST ROUND
Tree test
-
Avoiding overlap and relocating a few menus
-
The first round of the tree test was conducted with the draft I.A. to provide insight on where students expected to find them and their effectiveness. We found students were still confused and found a few menus overlapped, such as News and Events, so these items were highlighted for further testing.
-
Student workshops
-
Validation of uncertain label changes we made
-
We used Miro to conduct student workshops to test how well labels align with student language. Students were asked to generate labels for several pages and ideate suitable content under the labels that had been identified as ambiguous in user interviews. We considered the outcomes of both workshops to determine the final label to sit in the I.A.
-
Subsequent activities conducted during the student workshops for content ideation and homepage co-design.
-
Content prioritisation
-
We had a task in the student workshops to determine content hierarchy where we provided six categories to understand what students wanted to see from these areas. These had previously been identified as content gaps or underserved users in MQ. The results helped us to determine which pages to surface on the website, what to bring onto the homepage or to forward for future creation.
-
-
Homepage co-design
-
We invited students to design their ideal homepage in groups for the final activity. We provided students with the various design elements they can utilise and post-it notes to annotate why they chose them.
We found that MQ news, events, important dates and student experience aligned with our research results as they were interested in keeping updated on current events and the social calendar at MQ. This was followed by updating COVID and MQ socials as well as having AskMQ available for support when in need.
This task helped us understand the content priority and allowed students to influence content hierarchy through discussion and annotations.
-
DEVELOP - 2ND ROUND
What we found so far
-
Tree test:
-
Avoiding overlap and relocating a few menus
-
-
Student workshop:
-
Labels that the students recommended
-
High priority content for students across the personas
-
Ideal homepage with content hierarchy
-
So we did
-
Revised I.A. further
-
Wireframed homepages with prioritised content
-
I restructured the home page after identifying what content was important to students across the groups. I then wire-framed and prototyped two concepts of the homepage to test - Concept A (left) and Concept B (right), which were based on findings from user interviews and student workshops. Between the two concepts, there were differences in features, sections, content and information hierarchy. (Click to see full images.)
-
VALIDATION - 2ND ROUND
Tree test - again!
-
The 2nd round of tree test with the revised I.A.
-
Another tree testing was conducted to validate our changes in the I.A. or glean if there were more suitable locations for items. Special consideration was originally sitting under Study – however, most students expected to find it under Support as a result of the test.
-
Usability tests
-
Fine-tuning content hierarchy and getting a final design direction
-
Five usability tests were conducted with students with the two different homepage designs as well as reiterated I.A.
We asked a series of questions to get students’ thoughts and feelings around how it looked and how they expected certain features to work. This helped us gauge what information was useful and where we could improve.
After seeing both designs, they made comparisons or identified parts of the concepts they preferred, which gave us good direction in the final design and determined the content hierarchy.
-
Design alignment
-
Aligning new design with GEM design system
-
I strictly followed the GEM design system when iterating the design with the tests’ findings, so the interaction and interface designs of the MQ current student portal are consistent and align with other Macquarie branded sites. I also led weekly design sprints for four weeks as a collaboration with the MQ digital design team was required.
-
DELIVER
Recommended I.A.
EXPERIENCE & ADMIN to FINANCE & CAREER
DELIVER
Recommended designs
-
Level 0: Homepage (click the images to see the full designs)
-
The clear heading indicates the current location which is Students portal
-
Most sought out information was presented within the ‘Information for:’ and ‘Quicklinks’ section, which is higher in the page hierarchy to help students understand the value of the student portal. Specific information for international and ATSI students was also relocated to the relevant section and surfaced in more prominent locations on the homepage and other pages
-
Utilised a design component for Notices and Events to engage users and limit the number of notices shown
-
The information students most looked for on the homepage - Academic dates, Student Clubs and MQ social - was added utilising the GEM components to maximise engagement with students.
-
Level 1: Study
-
Introduced different sized banner to provide distinctions between different levels of pages to help identify the current location on the site
-
Welcome text and a video were added to give students context of the page overview
-
Course information presented in an image card component to draw students’ attention to the most important content on the page
-
Information of lower priority presented with icons and texts to quickly introduce the content while not taking focus from the main content (course information).
Level 2: Academic support
Outcomes
-
I.A. was entirely restructured
-
Current MQ students validated the revised I.A. to be functional and useful through tree tests
-
Compatibility with GEM design system was assessed and design variations were made up to the third level pages
-
Content discoverability and findability was improved and validated by the students through the user tests.
Up next
As blueegg’s engagement with MQ concluded, we made a few recommendations for them to continue working on:
-
Other level 1 pages to be mocked-up (Support, Careers, and Finance)
-
Full sitemap to be formed and more in-depth content to be assessed
-
Content redevelopment and recreation is required
-
New site build
-
Site and content roles and responsibilities to be established
-
Content strategy and site management plan to be created.