Project overview
Insurance agencies operate across a complex hierarchy — admins, agents, and sub-agents all need different views of the same data. The legacy system at 834 Labs was a patchwork of disconnected tools: separate portals for contracting, production tracking, and agent management, none of which talked to each other. The result was duplicated data entry, missed contracting deadlines, and an onboarding process so painful it was losing agents before they ever sold a policy.
I designed MyAdmin360 to unify this chaos into a single, role-aware platform. Every user — from a top-level admin managing hundreds of agents to a brand-new sub-agent checking their first commission statement — gets a tailored experience built from the same underlying design system.
The hardest design challenge wasn’t visual — it was information architecture.
I had to create a permission-aware navigation system where the same interface gracefully scales from a 3-field sub-agent view to a 40-column admin production dashboard, without either user feeling like the tool wasn’t built for them.
Unify fragmented legacy tools
Consolidate contracting, production tracking, commission statements, and agent management into a single platform — eliminating duplicate data entry and cross-portal navigation friction.
Design a 3-tier role-based UX
Create one design system that gracefully serves admins (full data access), agents (team management), and sub-agents (personal production) — without building three separate products.
Reduce contracting friction
Condense the agent contracting workflow from 7 steps to 3, with inline validation, progress indicators, and smart defaults that eliminate redundant form fields.
Build a scalable design system
Architect an Atomic Design-based component library that can absorb new features (commission calculator, compliance tracker) without breaking existing patterns or requiring redesign.
Stakeholder discovery & legacy audit
I spent the first two weeks embedded with the operations team, shadowing admin workflows, documenting every tool they touched, and mapping the existing data flows. The critical insight: 60% of admin time was spent on tasks that existed only because the tools didn’t share data — re-entering agent information, manually reconciling production reports, and chasing contracting status across three different portals.
Information architecture & role mapping
I designed the permission hierarchy first, before any visual work. Each of the three user tiers (Admin, Agent, Sub-Agent) got a tailored navigation structure, dashboard layout, and data scope — but all built from the same base components. This meant I could add a new data module once and have it automatically adapt to all three permission levels.
Design system & component library
I built the design system using Atomic Design principles: atoms (buttons, inputs, badges), molecules (form groups, stat cards, table rows), organisms (dashboard panels, agent profile cards, contracting wizards), and templates (role-specific page layouts). The system included a strict color language for status states and a data-density scale that could shift from summary view to full-detail with a single toggle.
Contracting workflow redesign
The original 7-step contracting process was the biggest pain point. I redesigned it as a 3-step wizard with smart defaults (pre-filling known carrier requirements), inline validation (catching errors before submission), and a real-time status tracker that shows exactly where each contract sits in the approval pipeline. The result: agents can go from “start contracting” to “submitted” in under 5 minutes.
One dashboard, three realities
Admins see the full org. Agents see their downline. Sub-agents see their own numbers. Same underlying component — zero redundant engineering, zero user confusion.
7 steps → 3, with guardrails
Smart defaults pre-fill known carrier requirements. Inline validation catches errors before submission. Real-time status tracking shows exactly where each contract sits — agents go from “start contracting” to “submitted” in under 5 minutes.
Production analytics
Interactive production dashboards with drill-down capability — from org-wide totals to individual agent performance, with filterable date ranges, carrier breakdowns, and export functionality.
Agent hierarchy management
Visual org-chart navigation for managing agent relationships, upline/downline structures, and commission splits — with drag-and-drop reassignment and bulk operations.
Commission statements
Automated commission statement generation with carrier-level detail, adjustable splits, and downloadable PDF exports — replacing the manual spreadsheet process that consumed 8+ hours per month.
Atomic design system
A fully documented component library with 50+ reusable components, consistent status color coding, responsive grid system, and accessibility guidelines — enabling engineering to ship new features without design bottlenecks.
I built this fully functional prototype myself using AI-assisted development — handling the entire front-end from role-aware navigation to the contracting wizard, with no traditional engineering handoff. What typically requires a developer took days, not sprints. It’s live at app.myadmin360.com.
Permission complexity is an IA problem
Designing for three user tiers in one product isn’t about hiding buttons — it’s about creating an information architecture that makes each tier feel like the product was built specifically for them. The navigation, data density, and default views all need to shift with the permission level.
Legacy migration requires empathy
Users who’ve been using broken tools for years develop workarounds they’re emotionally attached to. The redesign had to respect these habits while demonstrating clear, immediate value — not just better design, but fewer clicks to do the same task.
Design systems pay compound interest
The upfront investment in building a comprehensive Atomic Design system meant that every subsequent feature request — commission calculator, compliance tracker, carrier portal — could be designed and shipped in days instead of weeks.
Vibe coding bridges the gap
Using Claude and Gemini to rapidly prototype functional admin tools demonstrated to stakeholders that design thinking and technical execution aren’t separate conversations — they’re the same conversation happening at different fidelities.