All case studies

Mobile & UI Reset for Paylocity

A fast-growing product suite with mobile debt, inconsistent UI, fragmented patterns, and no shared system was in need of reimagining

My Roles

Product Design

Mobile Design

Systems Design

UI Design

Design Visioning

Most small business teams aren’t sitting at a desk all day, so HCM tools need to work just as well on a phone as they do on a computer. And if they can look good too…now we're cooking.

Challenges

Providing a Living Breathing Doc Site

Text

Objectives

Text

Outcomes

Reaping What We Sowed

Over three years, the Uptake Design System grew from a simple UI kit and sticker sheet into a robust, living ecosystem. It expanded into a comprehensive documentation site and cross-functional effort uniting code, interaction patterns, UI components, guidelines, and visual standards. Designed to evolve with the product suite, the system supported continuous iteration and integration across teams.

A C H I E V E M E N T S

Friendly Community: Fostered a flexible and friendly team that integrated feedback and contributions from the entire company
Scalable branded UI: Consistent design across light/dark themes and multiple products
Developer efficiency: Centralized documentation with reusable components for Vue, Angular, and React
Reduced design & tech debt: Built-in scalability, accessibility, and system guardrails from the start
Faster product delivery: Frontloaded foundational UI patterns to free teams for higher-impact work
Lower onboarding & support costs: Standardized patterns improved usability and reduced training time
Accelerated sales cycles: Mature, consistent UI increased customer confidence and adoption

Cross-industry adoption: Successfully deployed across rail, wind, construction, and mining products
Industrial data visualization patterns: Time-series charts, threshold bands, status badges, histograms, sparklines
Design tokens & theming: Systemized color, spacing, ornamentation, and typography
Accessibility standards: WCAG-compliant patterns tailored for severity/safety/state industrial environments
Clear documentation & governance: Usage guidelines, content patterns, RFCs, and versioning workflows for Design and Product
Quality assurance automation: Visual regression testing for system reliability and consistency

H U R D L E S

Real-world testing reveals the truth. Applying the system to real scenarios exposed gaps and helped embed industry expertise into UX and data science.
Not every good component fits the system. Even when guidelines are followed, some designs still require rethinking to work at a system level.
Design systems require saying no. Avoiding bespoke features protects long-term consistency, even when it’s tempting to build something new.
Designing for diverse roles is challenging. We built flexible experiences that support users ranging from executives to field technicians.
Accessible data visualization takes iteration. Balancing clarity, usability, and accessibility requires careful design.
Data tables are deceptively complex. When designed well they disappear into the workflow—but getting there takes significant effort.

Documentation isn’t always enough. Even with thorough docs, interpretation could be vast—ongoing guidance and education from the design system team was essential.
AI needs transparency to build trust. Adoption improved when recommendations were contextual and explainable.
Early UX involvement matters. Engaging UX from sales through deployment improved adoption and implementation success.
Context beats completeness. Users didn’t want to see everything—interfaces worked best when tailored to role and task.
Design for the real environment. Our software is sometimes used on an iPad, outside, in bright sunlight—so field conditions and safety constraints had to shape the design.

Customer Personas

I N T E R N A L

Interaction Designers

Todd is an interaction Designer who is new to the Design System. His current project requires batch actions on a large data table. He would like to quickly access documentation and visuals for what the capabilities and patterns are for the current Analytic Data Table.

Visual Designers

Front-End Engineers

Product Manager

E X T E R N A L

Platform User

APM (Asset Performance Manager)

My Role

What should it look like and why?

I was an early member of the Design System team, helping shape the initial visual vision for both the system and its documentation platform. As a Staff Visual Designer, I led visual design efforts across more than 40 UI components, partnering closely with engineering, our Staff IxD Designer, and Accessibility specialists to deliver scalable, high-quality solutions.

My work spanned research and discovery, defining component patterns, crafting pixel-precise UI, and conducting visual QA to ensure consistency and usability across the system. As the team evolved, I expanded into a more product-oriented role, helping guide priorities, influence roadmap decisions, and define the long-term strategy for adoption and external contributions.

Discovery & Foundations

Building a Plane While in Flight

Quickly establishing our visual language, process, primitives and tokens was a beautiful and messy process. We tried a lot of things and had to redo them.

Building a Plane While in Flight

Quickly establishing our visual language, process, primitives and tokens was a beautiful and messy process. We tried a lot of things and had to redo them.

Tokens for Theming

Documentation Site

T H E G U I D E

The documentation site was created as an internal resource through close collaboration with product owners, developers, and designers. It provides essential guidance—including design principles, best practices, accessibility standards, templates, and code—to support consistent product development.

Serving as a centralized hub, the site enables developers to access reusable components through Vue, Angular, and React libraries, helping teams build efficiently while reducing technical debt.

Expanding to:

Elements

UI elements serve as the foundational building blocks that comprise all our user interfaces. These elements include basic HTML elements like buttons, forms, checkboxes, and others that can’t be broken down any further without ceasing to be functional. Elements demonstrate all our base styles at a glance.

Components

Patterns

Patterns are complex groups of components and/or elements that define a process within an interface. Building up from components to more elaborate patterns provides designers and developers with an important sense of context. Patterns demonstrate those smaller, simpler components in action and can be used again and again. For example, an account creation pattern can consist of dissimilar elements and components, such as a company logo, input fields, and buttons.

Visual Language

Navigation

Templates

Templates are page-level objects that place groups components into a layout and articulate the design’s underlying content structure. Templates are concrete and provide context to these relatively abstract elements and components. By defining a page’s skeleton we’re able to create a system that can account for a variety of dynamic content, all while providing needed guardrails for the types of content that populate certain design patterns.