Created a visual design language, UI, and design patterns for the Smart Compliance platform
My Role & Responsibilities
I was the lead on all the visual design and interaction design for Smart Compliance. Designers on my team participated in regular design reviews and critiques, which helped me refine and improve the design. I provisioned and implemented Abstract for the team.
Context & Problem
We were developing a new product and platform that required a new visual design and supporting design patterns. Our goal was to deliver a modern user interface.
The Work
Starting with ADP’s Global Styleguide for typefaces and colors, I created a new visual design language. This included design patterns and components, as well as a centralized asset repository with version control to improve team efficiency.
Outcome & Results
I launched a tested and validated visual design, creating a new, modern, and usable interface. I also deployed a centralized, version-controlled design system to streamline workflows for designers and developers.
The Problem
We were developing a new product that required a modern, cohesive visual design to support its functionality and user experience. The existing visual design system for previous products was outdated, inconsistent, and unsuitable for the needs of the new platform. To address this, I needed to design an entirely new visual design language, complete with a design system and reusable components, to ensure the platform met both user expectations and business goals.
The Work
While working on the Smart Compliance Platform, we required a new visual design language and patterns. The design had to be easily recognizable as an ADP product and support several new interaction concepts not present in other ADP products.
Smart Compliance needed to display and manage much more data than ADP’s consumer or employee facing products, so the designs had to accommodate this complexity. I incorporated the corporate typeface and color palette but applied them differently to suit the specific needs of our customers and the Smart Compliance interaction model.
A Dashboard for Work to Get Done
The landing page underwent several visual design iterations before we achieved the right balance of visual hierarchy. The final design clearly communicated what needed to be done, for which domain, and the priority of each task.
Testing and Iteration
From user research, we learned that early iterations focused solely on activity did not provide enough context to be meaningful. We also found that combining a process-focused title with related activities added sufficient context to drive usage and adoption of the landing page.
Additionally, we learned that increasing the granularity of in-progress items made the interface more useful for users. Users also wanted quick access to information about completed items, not just those in progress.
Data Density, Clarity, and Filtering
In addition to the landing page, the bulk of customer tasks were completed in the ‘Workspace’ view for each service. Each workspace could contain thousands of records. As a result, search and filtering became the primary design and interaction focus, enabling customers to quickly narrow results and find the records they needed.
Centralized Files and Version Control
One of my main goals for this project was to establish these designs and patterns as a trusted, centralized source of truth. This allowed the entire team, including developers working on coded components, to easily access and use them.
The team used Sketch exclusively for design work, but file management and version control had become issues. To solve this and improve team efficiency, I launched a pilot program at ADP using Abstract-a tool that integrates with Sketch to provide a centralized, version-controlled repository for Sketch files and assets related to Smart Compliance’s visual design and patterns.
Getting Abstract approved and provisioned within ADP was a valuable learning experience. I navigated multiple layers of corporate finance, security, and other departments to make the tool available for the team.
Outcome & Results
The new Smart Compliance platform initially lacked a visual design language or standard patterns to support its use cases and interaction models. My design work addressed this gap by creating a comprehensive visual design language and defining patterns specifically for Smart Compliance.
Equally important, I streamlined the deployment and management of designs, assets, and patterns in Sketch by implementing Abstract for centralized repository access, version control, and file management.
- Launched a tested and validated visual design creating a new, modern, and usable interface.
- A single, modern, and accessible design system for the teams to use to build Smart Compliance.
- Centralized assets in Sketch managed through Abstract.
- The team could easily see, share, clone, and merge each other’s files, eliminating the problem of files being isolated on individual computers.
Hindsight & Reflections
Looking back on this project, the biggest challenges were not in creating the designs and patterns, but in ensuring that files were centralized and version-controlled for the team. There needed to be a single source of truth that designers and developers could access
Learning how to achieve this with Abstract, and then working through ADP’s internal channels to get Abstract approved and deployed, was by far the most challenging part. Reflecting on that experience makes me appreciate even more what Figma offers today.