top of page
Project overview

UQ Researchers is the organisation's most frequently used research-related website. First developed in 2013, the website had minimal ongoing development for many years. As a result, the website no longer meets the latest design standards for UQ's web presence and fails to deliver an optimal user experience in line with best practices.

Under the One UQ web roadmap initiative and within the constraints of budget limitations, the established scope of the project is to revamp the website by implementing frontend enhancements to transform the overall user experience.

Role

UX discovery, UX design, Data analysis, UI design

What is researchers.uq.edu.au

UQ Researchers is an important website that is critical to meeting business objectives especially for the DVCRI - Deputy Vice-Chancellor (Research & Innovation). Unlike other UQ sites, Researchers is a repository application with a front-end web interface.

In essence, it is UQ's equivalent to Google, designed to help people find researchers.

Helping the business to understand the problems

As part of the initial project kickoff, I worked on a UX discovery pack to support the business and project team in understanding and visualising the issues of the existing website. I conducted a site analysis from various aspects, including heuristics, information architecture (IA), content, as well as identifying future opportunities.

This was curated and presented to the project team to facilitate project managers and business analysts in understanding the scope and timelines. The main issues identified for UQ Researchers were low usability and accessibility, lack of responsiveness, and poor navigation.

Method: UX discovery + Competitor analysis + Heuristic evaluation + IA analysis

Researchers analysis.jpg
Researchers analysis3.jpg
Researchers analysis2.jpg
Problems 

An outdated user experience, characterised by limited functionality and unappealing user interfaces, diminishing the currency and credibility of the site.

Information not organised in the most intuitive way and poor navigation causing problems in way finding, making it difficult to retrieve information.

Misalignment with the web presence of One UQ, including inconsistencies in colours and typography, resulting in low accessibility and failure to meet some WCAG guidelines.

Group 24.png
Current state and competitor usability testing

Based on an extensive competitor analysis, we have identified UTS and UniMelb as our strongest competitors in terms of website performance. Working in collaboration with the UX lead and UX researchers, I helped to develop an initial test plan for usability testing on our website and competitor sites.

We wanted to gather primary insights from users with varying needs to gain an objective and holistic understanding of UQ's user experience in comparison to that of our competitors.

Method: Qualitative research

Discovery testing.jpg
High level insights

UQ site performed poorly with participants, it was described as chunky and dated. The current functionality was deemed quite limiting, with key information not being highlighted, resulting in a suboptimal search experience for finding a researcher.

Competitor sites received higher ratings from users for better interfaces and other unique features that collectively contributed to seamless and modern experience.

Data-driven approach

Given that it has been a decade since UQ Researchers was developed, there are many features and functionality that is either broken or perceived as useless and must be removed to free up the screen real estate. In order to effectively convince the product owner and stakeholders, I must ensure my design decisions can be supported by qualitative or quantitative evidences.

To set the design up for success, I produced a thorough analysis of a Hotjar site survey for UQ Researchers and liaised with a team member from Customer Analytics to delve deep into the GA data.

 

This added a secondary lens to our research, providing additional insights.

Method: Quantitative researchHotjar site survey +  Google Analytics

Hotjar.png
GA 1.png
Triangulation mindset
Demo.png

I triangulated primary and secondary data, along with best practices throughout the design process to help me determine what to keep, remove or relocate.

Such mindset allowed us to get our stakeholders onboard with the designs, as the changes were based on objective evidence rather than intuition.

Data as success metrics

As part of the benchmarking process, I continued to examine the GA data and identified the following metrics to help the team measure the success of the redesign and anticipate its 'ROI'.

Method: Metrics monitoring

GA.png
Expected 'ROI's

Increase in mobile users from the improvements of mobile experience

Increase in overall page views and average time on page, modernised look and feel will foster better user engagement.

Increase in new and returning visitors. With uplifted meta tags, the site will receive higher SEO ranking.

Decrease in bounce rate and exiting on landing page.

The design process

Following the recommendation from our UX lead, the design process started at the profile level, with each individual profile consisting of several tabs containing diverse content. Such reverse engineering approach was highly effective for this project, as delving into the inner-core actually provided us with clarity on the outer-shell.

Design process.png
Constraints
Constraint visualisation2.png

Due to the limited governance on the back-end, researcher profiles have significant inconsistencies depending on the amount of information entered in the system. I worked with such constraint and created wireframes for profiles with different levels of completeness to ensure the redesign could accommodate all use cases.

While it was frustrating to know that some inherent usability issues required back-end solution, I was challenged to be strategic and creative to deliver an enhanced website that could mitigate back-end flaws using front-end controls.

Iterating the designs

In light of the myriad feedback from users, I identified areas and features that were feasible within the scope of this project and iterated the designs to address lingering pain points. 

Simplifying the browse by experience

The iterated design presents a simplified look achieved by removing data visualisation, which received contentious feedback from users and stakeholders. Furthermore, the interaction has been relocated to the homepage, further consolidating the design and avoiding the introduction of unnecessary pages.

Iteration 1.png

Cohesive search result page

The confusion caused by having two separate search result pages for different search methods during testing has been resolved by unifying the result page and enhancing the filters with a tagged view, indicating the different searching experiences.

Iteration 2.png

Validation testing outcome

Overall, the design was positively received by all users. Students and media users in particular expressed the new profile page is much more readable and provides key information at a glance.​

Design iterations were made to further optimize the experience, ranging from enhancing the user flow to label changes, all executed with precision and reasoning in line with best practices.

UI handover

To ensure a smooth transition from design to development, I carefully documented the design specifications, including user flows, logic, and various scenarios, for the development team.

 

Additionally, I provided comprehensive annotations to clarify design decisions and interactions, outlining the relationship between the backend and frontend for all components.

I thoroughly enjoyed this process of debriefing the developers on the design and providing ongoing QA support to enable a seamless handover and a successful execution of the envisioned UI.

UI process.png

Prepping for development

Collaborated with UI lead and developers to understand development costs, timeframes, and ways to optimise them through design tradeoffs.

Reviewed existing design system and identified reusable components from the new components to support the quoting process from vendor.

Conducted accessibility check on all components to ensure their compatibility with WCAG standards and accessibility on both web and mobile platforms.

Final design

Homepage

Less is more. The key approach to modernising the interfaces is to reduce noise by removing features that are not being used and are not critical to users. Retiring some of the features was a bold move, but nonetheless a logical move supported by strong user insights and analytics

Homepage.png

Browse by fields of research

In addition to the conventional and primary search by keyword experience, I introduced an alternative search by tag functionality to bring an interactive dimension to the design.

Showcasing the research area taxonomy in a visual way guides users to narrow down the options and helps them identify specific research areas within the taxonomy.

Listing page.png

Profile page

The redesigned profile page addressed pain points related to clustering information that lacked visual hierarchy and impeded users' ability to scan through the content with ease.

The new profile page introduces additional UI components to organise information in a more consumable manner for end users, emphasising a modern look and feel, and incorporating collapsible elements for an improved viewing experience.

Overview

Profile page.png

Works

Works.png

Funding

Funding.png

Supervision and Media (new tabs)

Supervision and media.png
Mobile design as a forethought than an afterthought

Redesigning the mobile experience was one of the key improvements promised by this project. I was committed to creating a design that offered a highly consistent user experience across both web and mobile platforms, in line with best practices. 

Mobile design.png
More projects
Cover 2.png
Storydogs without shadow.png
bottom of page