Bloomberg D.A.P.

Overview

A portal that guides nonprofit leaders through every phase of the program.

UX Strategy Information Architecture Wireframes Design System Visual Design Component Library Developer Handoff

The Bloomberg Digital Accelerator Program sends nonprofit Tech Fellows through a structured, multi-phase journey — learning sessions, document submissions, vendor selection, and implementation. The program had no portal, no design language, and no brief.

Bloomberg Philanthropies and their managing consultant, the Lapine Group, needed a secure, phase-aware web portal that would guide each Fellow through exactly where they were in the program — surfacing the right tasks, resources, and connections at exactly the right time.

I was brought in as the sole UX designer. 90 days later: a full design system, 15+ annotated screens, a React component library, and a design token JSON file — all approved by Bloomberg senior leadership and handed off to dev.

The Client

Bloomberg Philanthropies — one of the largest philanthropic organizations in the world. The DAP invests in nonprofits' digital capabilities, cohort by cohort.

The Ask

Build a centralized, secure portal for Bloomberg Tech Fellows — phase navigation, task guidance, document library, peer directory, and vendor directory. No existing design language. No prior UX.

The Outcome

Full Figma handoff, design token JSON, and React component library approved at the Bloomberg senior leadership level. Developer build targeting April 30, 2026.

Process + Tools

A dream. A powerpoint. No team. Full system.

This project started with a series of working sessions with Dave Ebert at the Lapine Group — no formal document, just conversations about how the program actually ran. From there I shaped the full IA, defined the page inventory, and began wireframing while the content was still being written in parallel.

The design system came next — built from Bloomberg's public brand, elevated for a portal context, and documented in three formats: a Figma file, a machine-readable token JSON, and a React component library ready for WordPress handoff. Bloomberg leadership reviewed the final comps and approved on the first formal presentation.

Discovery & IA

Working sessions with Lapine Group. No brief — UX architecture shaped from conversation. Full page inventory and nav structure defined.

Wireframes

15+ screens covering dashboard, five phase pages, document library, directories, calendar, and event pages. Full team review with Bloomberg stakeholders.

Design System

Color tokens, type scale, spacing, 30+ components — built from scratch and documented in Figma, JSON, and JSX. Every state. Every variant.

Visual Design

Full-fidelity comps across all screens. Iterated through Bloomberg stakeholder feedback rounds with same-day and next-morning turnarounds.

Code Handoff

Annotated Figma file, design token JSON, React component library, written reference doc, and a Loom walkthrough — handed to Chapter 324 for WordPress build.

Selected work.

09 ARTIFACTS

01 · Dashboard

Portal Home · Phase Status · Checklist Widget

02 · Color System

Brand

Chart

Semantic

File Types

Brand · Chart · Semantic · File Types

03 · Dashboard Detail

Phase Navigation · Task Guidance · Right Rail

04 · Wireframes

Discovery · IA · Lo-Fi Screens

05 · Document Support

Supporting Materials · 400+ Files · Search + Filter

06 · Program Calendar

Calendar View · Cohort Key Dates

07 · Phase Architecture

1.0 Define & Submit

2.0 Plan & Select

3.0 Procure & Implement

4.0 Measure & Roadmap

5.0 Alumni

5-Phase Program Structure · IA

08 · Event Detail

Event Page · Registration · Session Info

09 · Type Scale

Page Title 32px · 700

Section Title 22px · 700

Card Title 18px · 700

Body 15px · 400

BUTTON 14px · 600

CAPTION 12px · 700

System Font Stack · 8 Levels

A portal that guides nonprofit leaders through every phase of the program.

A dream. A powerpoint. No team. Full system.

Selected work.

BACK TO THE WORK.