OBBI: Bias
Mapping Tool.
A web app that helps teams compare themselves with their target audience and spot possible gaps in a clear, data-driven way without blaming individuals.
Discussing bias without the blame.
OBBI started from a difficult question: How can unconscious bias be mapped in a way that feels objective, approachable, and useful rather than judgmental?
My role was to translate sensitive psychological research and expert feedback into a working product concept, defining the UX flow, the visual design language, and the testing approach.
From unconscious bias to objective gaps.
The project initially started as an HR unconscious bias tool. However, through interviews with HR professionals and a psychology expert, our team quickly learned that bias is highly sensitive to measure directly. It often makes users feel labeled or judged, immediately shutting down productive conversation.
Research Insight
People need a safe way to discuss bias without feeling personally attacked or labeled.
Design Goal
Make the tool metric-based, objective, approachable, and easy to understand.
We researched existing tools (like Harvard's IAT and bias interrupter playbooks) and made a massive pivot: shifting toward a metrics-based approach that simply compares a team's makeup with its target audience, highlighting gaps as neutral conversation starters.
Designing a calm tool for a sensitive topic.
During ideation, we explored two main concepts: a scenario-based game and a metrics-based gap analysis. While users enjoyed the scenarios, stakeholders ultimately preferred the metrics concept because it felt more objective and scalable.
I helped reshape the direction into OBBI: a web app that compares team and audience data, then explains possible gaps in plain language. The visual design needed to feel friendly and non-judgmental.
Plain Language
Results required clear contextual explanations, not just raw numbers.
Low Pressure
The interface used soft colors and ample whitespace to support reflection, not blame.
Readable Data
Bar charts were chosen over complex circular charts to make differences easier to understand.
Aligning design with development architecture.
I worked closely with two software developers to ensure the design remained aligned with the technical architecture. We used user stories, GitLab issues, and weekly check-ins to track sprint progress.
I also stepped into the code, implementing a small React demo modal component used during presentations, which allowed me to apply my UI decisions directly in the codebase.
Testing the Visuals
I created a testing plan to review the visual design and charting methods with HR professionals, students, and design experts. This feedback loop led to simpler data inputs, more whitespace, and a calmer overall structure.
- Bar charts proved vastly easier to read than circular charts.
- Using age ranges felt more comfortable for users than asking for exact ages.
- Users explicitly requested plain-text explanations alongside the data visualizations.
Turning data gaps into team reflection.
This project was a masterclass in learning how to balance research, ethics, design, and development within a single product. I learned how to handle a major project scope pivot, design respectful data visualizations, and collaborate directly with developers while keeping the end-user experience simple and un-intimidating.