Project overview
UQ Researchers is the university'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.
Role
I was involved in the end to end design process, from discovery to handover with support from my lovely UX and UI lead.
.png)
Problem
UQ Experts is UQ's equivalent to Google, designed to help people within and outside the organisation find researchers.
The need of an overhaul for this website stemmed from the One UQ initiative, which aimed to standardise the look and feel of 200 UQ websites. UQ experts with high traffic volume, low accessibility and usability effortlessly became a priority.
Solution
The limited budget for this project meant that the scope was reduced to front end changes only.
While it was frustrating to know that some inherent usability issues required back-end solution, I was challenged to uplift the entire website to deliver an intuitive, accessible and mobile-responsive design with front end technology.
Research
Current state heuristic evaluation
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 Experts were low usability and accessibility, lack of responsiveness, and poor navigation.
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.
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.
Quantitative research
Given that it has been a decade since UQ Experts was first launched, 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 strong evidences.
To set the design up for success, I liaised with our data analyst to delve deep into page traffics using Google Analytics.
Ideation
Defining the design approach
Following the recommendation from our UX lead, the design process started at the profile level, with each individual profile consisting of high density of patterns and content.
This approach allowed us to cast a wide net at the outset, starting with a highly complex page to establish styles and patterns, making it easier to design the simpler screens.
Low-fi wireframes
Following the defined design approach mentioned above, I created low-fi wireframes in FigJam to layout the components. Using simple boxes allowed me to quickly configure page layouts to showcase without being stuck on the nitty gritty of the content.
Design
Profile page
The final profile page consists of five tabs, each encapsulating different types of information about the expert. Despite limited changes in the back end, I collaborated with the design lead to enhance the readability of the profile page using various visual treatments, enabling users to absorb information with minimal cognitive load.
Overview
-
Displayed critical information, 'Availability,' in this tab after learning from user interviews that it is one of the first things users want to know.
-
Highlighted the expert's 'Fields of Research' using the tag component to help users quickly understand their expertise at a glance.
.png)
Works
-
Introduced a high-level work summary container to provide users with a quick understanding of the expert's work to date.
-
Added filter pills with numbers to allow users to switch between different categories.
-
Used a card component with a clear visual hierarchy to display each publication or work; previously, all content was presented in plain HTML style.
-
Implemented pagination functionality to move away from the exhausting infinite scrolling design.
Funding
-
Categorised funding into 'Current Funding' and 'Past Funding' to help users quickly distinguish between recent and dated information. User research revealed that available funding is critical information.
-
Implemented a front-end control to display 4 past fundings by default, helping to manage page length. Insights from user interviews suggested that most users are not particularly interested in past funding.
Supervision
-
Highlighted 'Availability' on the top of the page to enable users to quickly identify if the expert is the right match for them.
-
Front-end control to display 4 containers by default to manage page length.
Media
-
Replaced the 'Available project' tab with a new 'Media tab' to provide a dedicated information hub for media users (one of the key audiences).
-
Added a 'Need Help' section with a contact email to assist media users with further inquiries and prevent dead ends in the user experience.
Search result page
The search results page displays 20 profile listings per page. During the research phase of the project, I noticed that the profile listing cards lacked visual hierarchy and featured text with low accessibility.
The redesign improved how information is presented within the limited screen real estate by using colors, icons, and containers to create a more scannable and breathable layout. Additionally, the profile picture was redesigned into a circular frame to enhance visual focus and ease for the eyes.
Some features were also removed after reviewing data analytics, which clearly showed extremely low usage.
The redesigned search result page presents a more modern and simplified look and feel that:
-
removed low usage features to free up additional screen real estate and reduce the number of unnecessary decision-making points for the users
-
removed broken functionality on the page that caused dead ends and confusion
-
satisfied the user need with minimal distraction and noise whilst enabling them to achieve their search goals effectively.
.png)
Homepage
The strategy for redesigning the homepage revolves around the evergreen design principle of "less is more." I took a bold yet evidence-based approach by removing obsolete and low-usage features.
Through competitor research and in-depth user interviews, we found that most users search by 'keyword' followed by 'field of research.' The numerous other search options in the old design did not align with users' natural search behavior and were, therefore, rarely utilised.
At the bottom of the page, we also added a prominent pathway for experts to update their profiles, addressing a pain point from the old design where experts struggled to find the link. By surfacing this option on the homepage, we hope to encourage experts to actively update their profiles.
.png)
Mobile design
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.
.png)
Developer handover
Logic and spec documentation
In addition to the component handover, which covered the HTML and CSS specs, I also created a backend-focused handover, guided by my UI lead, that detailed how the front-end changes are connected to the backend CMS. I documented the logic and behaviors of the design in different scenarios to ensure a smooth handover process for the developers.
Reflection
This was my first end to end project at UQ and personally one of my favourite UX projects. Working with constraints was a reoccurring theme for this project, which really gave me great exposure to managing design trade-offs. With the support from my UX lead/manager, I was able to methodically balance user and business needs.
Design handover was a new area for me, and this project offered a rare opportunity at UQ, as the design system was typically robust enough to support most projects. I thoroughly enjoyed the process of designing from scratch and collaborating with developers to bring the components to life in the most feasible way.