At J.J. Keller & Associates, I led the development the DataSense Design System, streamlining development workflows by 36% across 50+ report pages.
Year
Feb 2020 to Feb 2022
Role
Lead UX/UI Designer, Design Systems Specialist
Main Contributions
UI Kit & Visual Language Development, Design System Management, Component Library Creation, Cross-functional Collaboration, Developer Handoff & Documentation
Team
Product Managers, Lead Engineers, UX Designer, & Business Analysts
Overview
JJ Keller's DataSense platform was experiencing rapid growth across 7 service lines, but development teams were hitting critical bottlenecks: 3-day custom development cycles for each report and fragmented user experiences. I led the creation of the DataSense Design System—a comprehensive foundation that unified 4 development teams under UI standards and transformed both development efficiency and UX across 78 reports.
Building the UI Kit & Visual Design Standards
Foundation & Design Principles
Building a scalable system meant establishing comprehensive visual design standards anchored by JJ Keller's refreshed brand guidelines. I created a systematic approach to the Gotham typography hierarchy, color palette spanning primary blues to functional reds, and consistent spacing patterns.
Atoms & Molecules
I built the component library systematically, starting with atoms - buttons, form controls, typography, and icons - each designed with multiple states and properties in Figma. These evolved into molecules like dropdown menus, tab systems, and input field combinations that teams could reliably implement across any product area.
Organisms & Layouts
The organism level brought everything together into complex navigation systems, data tables, and modal dialogs. These combined with responsive page templates and layout structures that provided complete, production-ready solutions teams could confidently deploy across different service lines.
Solving Development Bottlenecks
Reports Template System
The reports area became my proving ground—this was where the 3-day development bottleneck was killing momentum. I created comprehensive page templates with standardized form layouts, spacing patterns, and validation states that developers could implement as flexible, reusable components. Through weekly pairing sessions with engineering, we refined these templates to handle everything from simple driver reports to complex compliance tracking, transforming custom development into half-day configuration work.
Navigation System Redesign
When user research revealed "clunky navigation" was slowing task completion, I applied systematic design thinking to redesign the entire navigation architecture. I created consistent interaction patterns, unified visual hierarchy, and responsive behavior across all touchpoints. The modular approach meant navigation components could be reused while maintaining intuitive feel across different service lines.
Implementation & Partnership
Developer Collaboration
I established weekly pairing sessions with senior engineers, tackling React Material UI implementation and Storybook documentation standards. These collaborative workshops ensured every component could be built and maintained at scale, creating a shared language both designers and developers could speak fluently.
Business Impact
The DataSense Design System transformed how JJ Keller built digital products:
83%
Faster Development (3 days ? 0.5 days) on 78 Report Pages
20.47%
Reusable Components Adopted Across 4 Development Teams
32.44%