Life Course Centre
As a research organisation, The Life Course Centre (LCC) is committed to tracking and understanding the experiences of Australians facing disadvantage in their daily lives. It is administered by the Institute of Social Science Research at the University of Queensland and are an Australian Research Council (ARC) Centre of Excellence. For the launch of its new research centre, backed by a fresh round of funding from the federal government, the Life Course Centre was looking for a new website that encouraged better networking and enriched the exploration of research.
Brief
Life Course Centre wanted a new website to represent their global expertise in social-science research and the transformative impact it has on social change.
The goals of the website were:
- research is accessible and discoverable
- content management is flexible and efficient (CMS)
- research experts and events are discoverable and easy to engage with
- it’s easy to learn about the centre, and stay up to date.
Empathise
Stakeholder interviews
Interviews with stakeholders and internal team members provided understanding into the project’s landscape. It helped gather context and history around the website and organistion, identify organisational goals, align for a shared vision and increased buy-in and communication across teams.
Data analysis
Using existing Google Analytics across the original website, data provided insight into user pathways and sessions.
Key findings were:
- High bounce rate across mobile devices: site might not be optimised for small screens.
- High drop-off rate occurring from home page: site might not be meeting users’ expectations or needs.
- Organic search and direct links are most common acquisition points: users have either likely been referred to LCC or are already aware of it.
- Highest page views are Home, Research pages, and News: opportunities to increase engagement for events and research experts.
User feedback
Feedback was gathered from internal users (staff) and connected members (researchers) through open-ended questions relating to pain points, visual design, information architecture, and content readability.
Key findings were:
- site dead-ends
- confusing navigation
- usability issues
- accessibility issues
- wordy paragraphs affect readability
- weak filtering options.
Define
User personas
Based on data analysis and stakeholder interviews, we conducted internal workshops to determine lightweight key user personas that would create alignment and direction for the website.
This process included mapping:
- light demographics (age, occupation, etc.)
- technological literacy
- estimated ideal session times
- member status (within the centre)
- user needs.
Competitive usability evaluation
Though LCC does not have direct competitors (since they aren’t revenue based), an analysis of other ARC Centres of Excellence and similar organisations within the research space, provided insights into messaging, visual design, content structure, and terminology.
Key findings revealed positive experiences:
Key findings also revealed opportunities:
User flows
User flows clarified user intentions for tasks like finding research, learning more about the centre, or finding researchers to collaborate with. These flows helped describe the ideal set of steps and included granular details of pages, interactions, and information to represent the wholistic user experience.
Information architecture
The original website IA was mapped visually and, based on earlier insights in the project, we flagged key improvement opportunities, such as:
- Restructure navigation to include new organisational requirements and improve UX.
- Use filters instead of pages to contain similar workflows without reloading.
- Add new data and content to increase engagement.
- Update taxonomy and categorisation to improve UX and discoverability.
- Connect areas of the site to improve UX and engagement (reduce drop-off).
These opportunities then informed a new IA that defined page, content and functionality relationships. It provided a clearer understanding of intended user behaviour and informed the design of navigational elements and page layouts.
Template hierarchy
To design experiences that were feasible within the restraints of a WordPress framework (without significant development overtime), the hierarchy of template files was mapped that reflected elements of the IA. This early development planning improved efficiency between the design and development phases to help meet tight timelines for project launch.
Ideate
Wireframes
Before the design phase, low-fi wireframes were created to evaluate concepts for structure, content frame, and navigation. It also proved as a crucial step for stakeholder buy-in, and as a roadmap for the design of components and patterns.
Visual design concepts
To explore a range of styles, we created three unique visual UI concepts with consistent content. This further improved stakeholder buy-in and streamlined the design process with an agreed vision of the website.
Implement
UI design
With an agreed design concept, structured wireframes, and previous user insights, the new website was designed for both post type pages (dynamic content) and content pages (static content). A lightweight component and pattern library was created to streamline design (and development), and create consistency throughout the website.
Hi-fi prototype
High-fidelity prototypes were created to bridge the gap between design and development, test animations and usability, and get alignment within the team. It was a key process in the project before development to prove the function of the site, and reduce the likelihood of scope change.
<div class="filter_form">
<div class="post-filters">
<?php
$post_type = array( 'publications', 'working_papers' );
$posts = get_posts(
array(
'post_type' => $post_type,
'posts_per_page' => -1,
'fields' => 'ids',
)
);
$taxonomies = get_object_taxonomies( $post_type, 'objects' );
foreach( $taxonomies as $taxonomy ) :
if( $terms = get_terms( array(
'taxonomy' => $taxonomy->name,
'orderby' => 'name',
'object_ids' => $posts,
) ) ) :
?>
<div class="filter_wrapper">
<button type="button" class="filter-button"><span class="active"></span>
<?php echo $taxonomy->labels->name; ?>
</button>
<div class="filter-list">
<div class="header">
<h3><?php echo $taxonomy->labels->name; ?></h3>
<i data-feather="x"></i>
</div>
<?php
foreach ( $terms as $term ) :
$count = get_term_post_count_by_type($term, $taxonomy->name, $post_type);
if( $count > 0 ) :
?>
<label>
<input
type="checkbox"
name="<?php echo $taxonomy->name . '[]'; ?>"
value="<?php echo $term->slug; ?>"
class="checkbox <?php echo $term->slug; ?>"
/>
<span class="checkmark"></span>
<?php echo $term->name; ?>
<?php //echo '(' . $count . ')'; ?>
</label>
<?php
endif;
endforeach;
?>
</div>
</div>
<?php
endif;
endforeach;
?>
<button type="button" class="clear">Clear</button>
<input type="hidden" name="action" value="pubfilter">
<span class="overlay"></span>
</div>
Front-end development
The website was developed with HTML, CSS, JQuery and PHP to create a custom WordPress theme for LCC. Solid foundational development was not only key to usability and function on the front-end of the site, but also had a strong impact on content administrators for CMS usability. CMS navigation and settings design was crucial for workflow flexibility and efficiency, and the aim was to significantly reduce CMS onboarding. With the addition of the WordPress block editor, which allowed for custom layouts and content flexibility, styling code had to be highly-adaptive and structured so content editors could not adversely affect visual design.
Outcomes
Coinciding with the new centre launch in March 2022, the website went live, aiming to enhance user experience to make research and research experts more discoverable and engaging.
Key achievements:
- 154% increase in total users
- 161% increase in total sessions
- 200% increase in session duration
- 28% decrease in bounce rates
- >600% increase in Members page views
Key learnings
Navigation & IA testing
While navigation was designed using familiar patterns, competitive evaluation, user feedback, and analytics insights, usability testing the information architecture could have given valuable insight and impacted UX decision. With greater access to participants and more time, tree testing navigation would have been a valuable method to validate alignment with user mental models. With tasks like finding a journal article about a specific topic, a researcher from a specific discipline, or where to submit working papers, we could have ensured information architecture was appropriately structured to reduce pain points and increase engagement.
Moderated user research
While we utilised insights from users through analytics, open-ended surveys, and third-party observations through stakeholder interviews, this information lacked depth and had potential bias. With less time constraints, to further explore user motivations, moderated interviews could have filled those gaps and revealed biased assumptions so decisions were more aligned to users’ needs.
Expansion of design system
Though a component library and template hierarchy were mapped at early stages of the project, a deeper exploration of the design system and particular design patterns could have improved efficiency for both the design and development phases. Especially the complexity between different components and their contextual relationship in various patterns could have mitigated styling inconsistencies and created a more flexible, user-friendly experience for content administrators.