Safesite
Enterprise · Safety Tech · Design Systems
Company
Safesite
Role
Senior Product Designer, Design Systems
Timeline
Oct. 2021 — Oct. 2022
Deliverable
Beacon Design System + Platform Redesign
Team
Product Lead · 6 Engineers · Safety Compliance

Enterprise Safety Design System — Redesigning Internal Compliance Platforms

Safesite's legacy tools were fragmented, making safety an afterthought rather than a workflow. In partnership with product and engineering, I led an ambitious redesign of core safety workflows and built their first design system — the Beacon Design System — from the ground up.

With Product Lead · Engineering (6) · Safety Compliance
Scroll
Key Outcomes
−30% Design-to-Dev Handoff

Beacon Design System reduced handoff time by 30% through aligned component naming and interaction documentation.

+22% Task Completion Rate

Improved critical safety workflows increasing task completion rate for safety managers in the field.

15+ Field Interviews

Shadowing sessions with safety managers and site supervisors on construction sites, agricultural fields and warehouses.

0→1 Beacon Design System

First design system in Safesite's history — replacing 3 disparate calendar styles and inconsistent data tables.

01 — Discovery
01

Two objectives.
One clear north star.

From the start of the project, we were clear on two primary objectives: optimize the app's functionality and usability to meet and surpass internal tooling; and to shift the conversation from safety being an afterthought to being part of everyone's daily workflow — not just safety managers.

Research
Define
Ideate
Prototype
Test
Beta Release

When I joined Safesite, my first instinct was to open the product and use it. What I found was a product with good bones. Core flows and ideas were sound but lacked cohesion. Buttons behaved differently across screens, spacing felt arbitrary, and patterns that should've felt familiar kept surprising me in the wrong ways.

The product felt post-MVP with lots of features shipped fast to scale quickly. Every feature made sense on its own but didn't fit well within the larger system. But before I drew a single component, I wanted to understand the people using it.

Key Insight

Inconsistent UI is a design problem. But whether or not those inconsistencies were actually hurting people is a question for research.

⚠ 3 different button styles ⚠ Inconsistent radii ⚠ Divergent color system
Safesite legacy platform — fragmented UI with inconsistent patterns, three disparate visual languagesDiscovery audit · 2021
02 — Field Research
02

A day in the life of a safety manager

We took the research to where the product actually lived — construction sites, agricultural fields, and warehouses. Over 15+ field interviews and shadowing sessions with safety managers and site supervisors, one thing became immediately clear: customers had almost no time.

A safety manager's day is relentless. They're moving between active zones, managing workers, responding to hazards and trying to document everything in real time. The app wasn't a primary tool they sat down with. It was something they reached for to log with the little spare time afforded to them.

"This reframe changed everything. We weren't designing for users with time to think. We were designing for someone spending only minutes in the office."

Every extra tap, every extra moment of confusion, every inconsistent pattern wasn't just friction. In a safety-critical environment, it was a liability.

03 — Synthesis
03

Beyond personas — behavioral archetypes

I synthesized qual. field data and stakeholder interviews to move beyond personas into Behavioral Archetypes. By clustering users based on their technical proficiency and psychological triggers, I identified the distinct mental models interacting with the platform.

This mapping allowed us to design a unified interface that accommodates dense data for experts while providing frictionless entry points for less technical users, reducing cognitive load and increasing reporting accuracy.

Archetype 01

The Safety Advocate

High-frequency user, deeply invested in safety outcomes. Needs speed and surface-level access to incident reporting without digging through nested menus.

Archetype 02

The Compliance Monitor

Data accuracy and risk mitigation. Needs dense information displays, audit trails, and reliable export — tolerates complexity for precision.

Archetype 03

The Camp Follower

Compliant but resistant. Uses the tool because they must. Every extra step is a reason to skip logging. Frictionless entry is critical for this user.

Archetype 04

The Tech Wizard

Power user, often in IT or operations. Manages configurations and integrations. Needs admin controls without sacrificing daily-use simplicity for others.

I also conducted a lateral research audit of dense data platforms — from fintech dashboards to logistics management tools — identifying transferable patterns that balanced information density with clarity.

04 — Information Architecture
04

Rethinking IA — hub-and-spoke

To transition Safesite from a single utility tool to a complete internal platform, I redesigned the Information Architecture to support layered workflows. By auditing the existing fragmented structure, I identified that core compliance tasks were buried under deep navigational layers.

I reorganized the hierarchy into a "Hub-and-Spoke" model, ensuring that high priority actions (like Incident Reporting and Inspections) remained top level, while administrative governance lived in secondary layers.

Architecture Decision

This new IA provided the structural foundation for the Beacon Design System, allowing the platform to scale from a few core features to an enterprise-grade suite without increasing user cognitive load.

BEFORE — Deep nesting ⚠ 4+ taps to reach core actions AFTER — Hub-and-Spoke HOME CAMPAIGNS PERSONNEL REPORTS ANALYTICS Overview Open Haz. & Inc Leaderboard ✓ Core actions always 1 tap away
Information Architecture — Before (deep nesting) vs. After (Hub-and-Spoke model)FigJam · 2021
05 — Wireframes
05

Solving "data fatigue"

I designed these layouts to transform raw, overwhelming data into at-a-glance insights. By using clean charts and categorized modules, I made sure stakeholders could see progress without needing a manual to interpret the screen.

These wireframes weren't one-offs — they were the DNA for a scalable design system. I built these components to be modular, ensuring that as Safesite grows, the design language remains consistent and easy for developers to implement.

I also validated the wireframes in the real world — taking low-fidelity prototypes to actual safety managers and foremen. One of my favorite features looked beautiful in Figma but failed miserably when put in front of end-users. They didn't need flashy. They needed functional.

Wireframes — Analytics dashboard solving "data fatigue" through categorized modules and at-a-glance charts
06 — Beacon Design System
06

Screen-first, then system

I realized that building a design system before designing the pages was a recipe for scope creep. I shifted strategy: design the core screens first to find the heart of the product, then extract those patterns to build the Beacon Design System.

This wasn't just a UI kit — it was a scalable language designed to fix years of fragmentation. I unified the experience by replacing three disparate calendar styles and inconsistent data tables with a single, robust component library in Figma.

For handoff, I moved beyond just sharing Figma links. I provided a blueprint of the why behind the what — aligning component names with the codebase, providing clear interaction documentation, and involving developers early in the exploration phase.

Beacon — Color Tokens
color.action.primary
#d94f2b
color.surface.nav
#1e2a3a
color.status.success
#2d9e4a
color.status.warning
#f4c430
color.surface.background
#f8f8f6
color.border.default
#e5e5e5
Handoff Philosophy

I treated the engineering team as my primary internal users. I involved developers early in exploration, sharing risky trendy designs to gauge technical feasibility before a single line of code was written. The best designs are the ones that actually get built.

Before
A
After — Beacon Design System
Overview Projects Groups Settings FOR-WC-0000267-0 A Excellent Monthly Organization Score Month Org Score Employees Engagement March 2022 A 10 15 (7.5%) March 2021 B 10 15 (7.5%)
Before (fragmented legacy UI) → After (Beacon Design System — unified, data-clear, task-oriented)Safesite · 2021–2022
07 — Reflections

What I carried forward

01

Field research changes everything

Sitting at a desk reading analytics told me what users weren't doing. Going to construction sites told me why. You cannot design for someone spending three minutes in the office without spending a day in their shoes first.

02

Screen-first, then system

Building a design system before understanding the product is a recipe for scope creep. Design the core screens to find the heart of the product — then extract the patterns. The system emerges; it's not imposed.

03

Engineers are your best design partners

Involving developers early — sharing the risky, trendy concepts before they became specs — saved weeks of rework. The goal isn't to protect the design; it's to build the right thing. The best handoffs start at exploration, not delivery.

See more work
worth building

Bamboo Case Study Back to all work