Afro Index
UX/UI Design • User Research • Product Design • Front-end Development
Role
Timeline
Product Designer & Developer
Tools
Dec 2025 – Mar 2026
Live Project
Figma, React, TypeScript, Tailwind CSS, Supabase, Canva, Procreate
01. Overview
Afro Index is a web platform I designed and developed to help creatives quickly find accurate Black hairstyles for their work.
This project was built to address a real gap I observed across creative communities: artists want to represent Black hair well, but don’t always know the terms, structure, or how to find references.
What started as a personal frustration quickly revealed itself as a widespread issue. It then became an opportunity to build something meaningful for a broader creative community.
02. Context
Most popular image platforms show Black hairstyles, but rarely organize them.
Common issues:
limited style diversity
no multi-angle references
prioritize aesthetics over accuracy
rely on vague or missing naming
use trend-based tagging instead of structured categorization
scatter information across multiple sources
There is no centralized, culturally informed system for naming and referencing Black hairstyles.
As a result, users often spend more time searching than actually creating.
03. Goal
Design a tool that makes Black hairstyle references:
Searchable: users can find styles by name or keywords
Structured: consistent taxonomy and tagging
Accessible: easy to browse, filter, and understand
Useful in practice: supports real creative workflow
04. Features
Search System
Weighted search logic (exact/partial/related matches)
Supports names, alternative names, and tags
Glossary for finding common term definitions quickly
Filtering
Texture, Length, Protective styles
Designed to refine results without overwhelming users
Structured Data
Clear naming + Alternative names for future searching
Tag-based classification
Style Detail Pages
Multiple reference images
Organized metadata
Clear visual + informational context
Save & Download
Allows users to build personal reference collections
05. Process
Research
I identified problem through my own creative workflow, and frustrations were validated through strong community response post-launch
I initially conducted short user interviews online with key persons: a salon owner, a mobile braider, a digital artist, an animator, and a writer. Based on their feedback, I concluded the following:
Platforms like Pinterest, the Creme of Nature gallery, and TikTok offer inspiration but lack:
Cultural specificity
Clear naming systems
Organized browsing
Multi-angle structure
Insight: Existing resources inspire, but they don’t organize.
Design
After solidifying my user research into clean user stories and defining what problems need focus, I begin initial design ideation. This included:
Deciding whether to pursue a mobile or web-based app
Deciding if user accounts were a now or later feature
After deciding my best bet for MVP 1 would be a web app with no sign-up, I moved on to early design & prototyping:
Creating low-fidelity sketches/wireframes and flows in Figma
Deciding which filters would be the most relevant to the target audience + feasible to implement in the given time frame
Focused on clarity, speed, and scannability
Reduced cognitive load in filtering and navigation
The final design came from multiple rounds of idea generation and revision, choosing the UI that would most benefit the target users: clean, minimal, themed, accessible.
Development
In the research stage, I was looking for the best platform to create the website on. In its very early stages, I made a mock-up on Carrd, but it wasn’t robust enough to scale. I also considered platforms like Squarespace, Wix, and WordPress. In the end, to have more control over the design/build & to develop my coding experience, I chose to create the project from scratch:
Built a full frontend using React + TypeScript, and Vite for the development server
Styled with Tailwind CSS
Integrated Supabase for structured data and storage, and Git workflow for more efficient updates
Designed a scalable CSV file into a database workflow
Turned sourced images into WEBP files for a lighter load
Conclusion
Afro Index began as a sprint, but it revealed how much potential exists in building tools that genuinely center Black culture. With thoughtful UX, community-informed structure, and visual clarity, we can reshape how Black hairstyles are explored, named, and referenced.
This is only the beginning! It’s been heartening to see this resource continually grow with community feedback, and the overwhelming worldwide response has proven its need in the creative world. I’m excited to keep building tools that help Black culture flourish. 💛
A feature on the Afro Index proect from Essence - Girls United.
A user's (@cream_cereal) post about Afro Index on Twitter/X garnering 1M + views after sharing the project on their page.
Olivia Hancock's LinkedIn newsletter 'The Hue Report' featuring Afro Index.
Tumblr post about Afro Index that went viral the day it was posted, spreading through the artists & writers creative community.