OBBI: Bias
Mapping Tool.
A web-based product that enables cross-functional teams to map internal demographics against target audiences, fostering data-driven conversations about bias without relying on subjective blame.
Facilitating objective conversations around bias.
OBBI started from a difficult question: How can we map unconscious bias in a way that feels objective, actionable, and safe rather than judgmental?
My role was to translate behavioral research and domain expert feedback into a functional product strategy, defining the end-to-end UX flow, design system, and testing protocols.
Pivoting from subjective bias to data-driven gaps.
Initially scoped as an HR assessment tool, generative research and stakeholder interviews revealed that measuring bias directly often causes users to feel labeled, shutting down productive dialogue immediately.
Research Insight
Teams require psychological safety to discuss bias without feeling personally attacked.
Design Goal
Structure the tool entirely around objective metrics and approachable visual data.
After auditing existing mental models like Harvard's IAT and various HR playbooks, I advocated for a strategic pivot: moving toward a metrics-based gap analysis. By comparing internal team composition against target audience data, we framed gaps as neutral, objective conversation starters.
Designing for psychological safety.
During the ideation phase, I developed low-fidelity concepts for both a scenario-based interaction and a metrics-based gap analysis. While usability testing showed high engagement for scenarios, business stakeholders aligned on the metrics approach for its scalability and objectivity.
I defined the core information architecture for OBBI. The visual design language prioritized psychological safety, utilizing a low-stress UI to present sensitive data without inducing defensiveness.
Contextual Copy
Data results required clear contextual explanations, avoiding raw, intimidating numbers.
Low Cognitive Load
The interface utilized soft color palettes and ample whitespace to support reflection.
Readable Data
Standard bar charts were implemented over complex circular graphs to ensure immediate comprehension.
Cross-functional handoff and technical alignment.
I partnered directly with frontend developers to ensure design decisions aligned with technical constraints. We managed sprint cycles using GitLab issues and structured user stories.
Leveraging my technical background, I contributed directly to the React codebase, building core UI components and ensuring the visual fidelity matched the Figma prototypes.
Validating the Visuals
I structured a testing plan to review the visual design and charting methods with HR professionals and design experts. This feedback loop led to simplified data inputs, increased whitespace, and a cleaner overall structural hierarchy.
- Bar charts proved significantly easier to scan than circular data visualizations.
- Utilizing broad age ranges reduced friction compared to requesting exact ages.
- Users explicitly requested plain-text summaries to accompany the data points.
Driving actionable reflection through design.
This project reinforced the importance of balancing behavioral ethics with product strategy. Successfully navigating a major scope pivot, I delivered respectful data visualizations and collaborated directly with engineering to ship an accessible, non-intimidating user experience.