Paylocity Mobile Design System

Creating a responsive foundation across iOS, Android, and Windows

Product: Paylocity Mobile
Role: Lead UX Designer
Company: Paylocity
Timeline: 1.5 years
Team: UX Design, Product, Engineering, Research
Contributions: UX Design System · Responsive Design · Native Applications · Mobile UX
Platforms: iOS · Android · Windows

Overview

Paylocity’s mobile experience needed to provide a consistent product experience across iOS, Android, and Windowswhile still feeling native to each platform. I led the UX design for the mobile platform, establishing a reusable design system that brought consistency to navigation, typography, color, touch interactions, components, and responsive layouts.The goal wasn't to make every platform identical. It was to create a shared design language with enough flexibility to work naturally within each operating system.

The Problem

Designing one mobile experience for multiple operating systems introduced a fundamental problem:

How do you create a consistent product experience without fighting the conventions of each platform?

Each operating system had its own:

• Navigation patterns

• Typography and font metrics

• Screen dimensions and sizing

• Native controls

• Keyboard behavior

• Calendar and date controls

• Popups and dialogs

• Menus and contextual actions

• Touch targets and interaction patterns

For example, Android used a left-side navigation menu, while Windows Phone introduced different left- and right-side navigation behaviors.

Simply duplicating the same interface across platforms created inconsistencies and usability problems.

The design system needed to establish what should remain consistent and what should adapt.

My Role

I was responsible for the UX design of the mobile platform and the development of a common design foundation across the supported operating systems.

My contributions

• Defining the mobile UX architecture

• Establishing cross-platform design patterns

• Designing reusable components

• Defining responsive behaviors

• Establishing typography and color standards

• Resolving platform-specific UX differences

• Designing touch interactions and controls

• Working with development teams to translate patterns into native applications

• Maintaining consistency across the product experience

The work required balancing design consistency, native behavior, technical constraints, and usability.

Design

One System. Multiple Platforms.

The design system was built around a simple principle:

I separated the system into two layers.

Shared UX Foundation

These elements established the Paylocity experience across platforms:

• Information architecture

• Content hierarchy

• Color

• Typography principles

• Spacing

• Visual hierarchy

• Component behavior

• Interaction patterns

• Accessibility

• Product terminology

Platform Adaptation

These elements were allowed to adapt to the operating system:

• Navigation

• Native controls

• Keyboard behavior

• Date and calendar controls

• Dialogs

• Menus

• System interactions

• Platform-specific gestures

This approach gave the product a recognizable visual and interaction language while allowing each application to feel at home on its native platform.

Responsive Design

The system was designed around responsive behavior rather than fixed screen layouts.

Components needed to work across different:

• Screen sizes

• Orientations

• Resolutions

• Operating systems

• Touch environments

Instead of designing individual screens for every device, I established rules for how layouts should behave.

Content > Components > Layout > Platform

This allowed the same UX patterns to scale across devices while reducing the need to reinvent solutions for every screen size.

Design System Foundations

Color

A defined color system created consistency across the applications.

Color was used to establish:

• Primary actions

• Navigation states

• Selected states

• Alerts

• Errors

• Success

• Informational messaging

• Disabled states

The system also considered contrast and accessibility, ensuring important actions and information remained readable across different devices and lighting conditions.

Typography

Typography presented a unique challenge because each platform had its own native font characteristics and rendering behavior.

Rather than relying exclusively on a single fixed type specification, the system established a typographic hierarchy that could adapt to the platform.

The hierarchy defined:

• Page titles

• Section headers

• Body copy

• Labels

• Form fields

• Navigation

• Supporting information

• Error and status messaging

This maintained consistent information hierarchy even when the underlying native typography differed.

Touch

Mobile interaction required designing for fingers rather than cursors.

The system established touch-friendly interaction patterns for:

• Buttons

• Form fields

• Lists

• Navigation

• Selection controls

• Toggles

• Swipe interactions

• Menus

Controls were designed with appropriate touch targets and sufficient spacing to reduce accidental selections.

Component Library

The component library created a shared vocabulary for the product.

Core components included:

• Buttons

• Navigation bars

• Tab navigation

• Side navigation

• Forms

• Text fields

• Dropdowns

• Checkboxes

• Radio buttons

• Toggles

• Date and calendar controls

• Lists

• Cards

• Dialogs

• Popups

• Alerts

• Status indicators

• Loading states

Each component included behavior and interaction rules—not simply visual specifications.

For example, a form field needed to account for:

Default > Focus > Keyboard > Input > Validation > Error > Success

This shifted the design system from a collection of visual assets into a reusable UX framework.

Native vs. Consistent

One of the most important design decisions was determining when to use a custom Paylocity pattern versus a native operating-system control.

Use the shared system when:

• The interaction represented a core Paylocity workflow

• Visual consistency was important

• The behavior was common across platforms

Use native controls when:

• The operating system provided a familiar interaction

• Users expected standard system behavior

• The control interacted directly with system functionality

• Native behavior improved usability

This was particularly important for keyboards, calendars, dialogs, menus, and navigation.

The result was a system that felt consistent without feeling artificially transplanted from another platform.

Navigation

Navigation was one of the biggest cross-platform challenges.

Rather than forcing a single navigation structure onto every application, I established common information architecture while allowing the interaction model to adapt.

The system accounted for:

iOS
Native navigation and hierarchical screen transitions.

Android
Left-side navigation and Android interaction conventions.

Windows
Platform-specific navigation patterns, including left- and right-side slide interactions.

The underlying content structure remained consistent while the mechanics of navigation adapted to the platform.

Designing for Scale

The value of the design system extended beyond individual screens.

A reusable system allowed designers and developers to:

• Start from established patterns

• Reduce duplicated design work

• Create new features faster

• Maintain visual consistency

• Reduce UX inconsistencies

• Simplify design-to-development handoff

• Adapt features across multiple platforms

Instead of solving the same problem repeatedly, the team could solve it once and reuse the solution.

Outcome

The design system established a common UX foundation for Paylocity's mobile applications across iOS, Android, and Windows.

More importantly, it created a framework for making future product decisions.

The system provided:

Consistency
A recognizable Paylocity experience across platforms.

Flexibility
Patterns could adapt to native operating-system conventions.

Scalability
Reusable components supported new features and screens.

Efficiency
Designers and developers could build from established patterns rather than starting from scratch.

Better UX
Native behaviors were preserved where they improved usability.

Takeaway

The most important lesson was that a successful multi-platform design system isn't about making every screen look the same.

It's about creating shared principles, reusable components, and consistent UX patterns while understanding when the platform should influence the experience.

This project reflects my approach to design systems: build a strong foundation, establish clear rules, and give designers enough flexibility to solve the unique problems of the product and platform.