Project Overview:

Role:

UX/UI Researcher, Information Architect, & Frontend Developer

Context:

Msc Human-Computer Interaction Design (HCID) — Dual Module Project (Information Architecture & Web Development)

Tools Used:

Figma, UXtweak, HTML/CSS/JS (Web Development)

Scope:

End-to-end UX research, Information Architecture (IA), wireframing, usability testing, and frontend website development.

Problem & Market Gap:

Existing competitor platforms in the afro-textured hair space (e.g., Pakcosmetics, Afrohaircandy) disproportionately prioritise e-commerce and selling products. As a result, they fail to adequately educate users on fundamental hair care concepts like hair types, routines, and porosity.

The Goal:

Build an educational-first platform that simplifies complex domain concepts for everyday users, recommending resources rather than pushing transactional sales.

Key Insights & Breakdown:

Card sorting:

Conducted remotely with 9 participants to understand their mental models and categorisation preferences.

Key Finding:

Participants preferred specific, non-vague classifications, directly informing the site's structural map to maximise findability and discoverability.

Tree testing:

Issue Identified:

Testing revealed significant user friction with specialised hair terminology.

Solution:

Introduced a contextual glossary search bar as a core utility navigation element.

Impact:

Directness improved from 50% to 86%, with 57% of first clicks utilising the glossary feature.

User journey:

Journey mapping focused on user pain points.

Insight:

Users struggled to locate hair professionals with experience relevant to their specific hair needs.

Established…

• 4 primary paths

• 3 global navigation routes (Hair Knowledge, Hair Texture, Services)

• A global search feature.

• Added a faceted search system for booking hair care consultation services, matching users directly with professionals possessing relevant hair-type expertise.

Outcome:

Design & prototyping

Figma wireframing:

Designed low-to-mid fidelity wireframes focusing on strict visual hierarchy and UI consistency

Navigation

• Horizontal main menu

• Drop-down sub-menus

• Vertical left-sidebar faceted filtering

• Breadcrumb trails.

  
  

Micro-interactions:

• Underlined active navigation labels

• Pagination

• Post search result counts to maintain user orientation.

Branding:

• Designed an AI-assisted logo based on the concept of an Afro, serving as the clickable Home navigation element.

Usability testing & First Click Testing:

Tested wireframes with 8 participants using ⁠UXTweak first-click analysis.

Insight:

Identified a task confusion outlier where the term "overview" caused a participant to click the footer rather than "About Us". This highlighted the need for clearer copy and synonym choice in future iterations.

Outcome:

Boosted navigation directness by 36% (50% —> 86%) via targeted search utility additions.

Web Development Implementation

Successfully translated the research-backed Information Architecture into a fully functional, custom-coded frontend website.

Scope:

Built the frontend application utilising a streamlined version of the Information Architecture to balance usability, performance, and clear navigation flow.

Critical Evaluation & Reflection:

Successes

• Successfully validated structural changes with quantitative metrics, turning a major usability bottleneck (terminology friction) into a core navigation strength via the glossary tool.

• Successfully executed a dual-module requirement by directly translating conceptual research and Figma layouts into functional HTML/CSS/JS code.

Challenges

• Maintaining full fidelity of a comprehensive Information Architecture within a simplified student web development scope required balancing technical feasibility with core user experience principles.