Project Overview

Problem:

While the BHF brand enjoys high awareness and its website possesses strong visual appeal, critical underlying issues in information architecture and taxonomy created heavy user friction during essential tasks like volunteering or signing up for events. 

Solution:

Design recommendations to avoid information architecture blindspots and to match users mental model of labels to improve user experience.

Context

Evaluating Interactive Systems Module (Master's in Human-Computer Interaction & Design (HCID) at City St. George’s University).

Methodologies:

Mixed methods including Pre-User Interviews, 5s/15s Impression Tests, First Click Tests, Think-Aloud protocols, Affinity Mapping, and Rainbow Spreadsheets. 

Tools Used:

UXtweak (for heatmaps, clickmaps, and SUS logging) and Miro (for affinity mapping). 

Sample Size:

7 participants (inclusive of a pilot study), ensuring a 99% problem discovery rate for the target population.

Key Insights & Breakdown

Quantitative Performance Metrics

The study evaluated macro-level perceived usability alongside micro-level task difficulties using the System Usability Scale (SUS) and Single Ease Questions (SEQ).

Outcome

Success Points

Excellent Visual Signifiers:

The red colour choices provided superb contrast. The distinct red "Donate" button successfully guided 85.71% of participants directly to their destination. 

Effective Micro-Imagery:

Small icon images placed across the homepage acted as excellent mental anchors, dramatically boosting findability. 

Core Friction Points

Information Architecture Blind Spots:

100% of participants failed to successfully distinguish between the "Volunteer", "Fundraise", and "Events" sections of the main menu. This caused intensive "pogo-sticking" behavior where users bounced back and forth between navigation pathways. 

Mental Model & Labeling Mismatches:

On specific event registration pages, the standard "Sign Up" button was replaced with a button labeled "I have my own place". This lacked contextual affordance and led to user irritation and a trial-and-error cycle. 

Competing Homepage Elements:

During first-click testing for institutional information, user clicks were heavily scattered across multiple ambiguous options ("Who we are", "What we do", "Discover more"). This resulted in an unacceptably low post-click confidence rating of 28.6% for some cohorts. 

Design Recommendations

Taxonomy:

Implement sub-descriptions under primary navigation tags. For example, enrich the "Fundraise" tab with supporting text like "Fundraising activities" and "Fundraising near you" to boost overall information scent. 

Affordance & State-Handling Fixes:

Replace ambiguous jargon like "I have my own place" with descriptive, standard action buttons. Filter out sold-out events automatically or explicitly flag them with visual "Sold Out" tags prior to selection so users do not waste time attempting to register. 

Critical Evaluation & Reflection

Success:

Combining macro metrics (SUS) with micro metrics (SEQ) proved incredibly effective. It allowed the project to demonstrate that a platform can feel visually appealing and score highly overall, while still hiding critical functional dead-ends that trap users during core conversion paths. 

Challenges:

During Task 1 testing ("buy something old"), a slight mismatch existed between the scenario text and the actual e-commerce categorisation ("wedding accessories" vs "wedding gifts"). While data was extracted cleanly from later stages to prevent skewed metrics, establishing stronger data validation during pilot testing would have insured truer baseline ecological validity.