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 were part of regular design reviews and critiques that helped me refine and improve the design. I did the work to provision and implement Abstract for the team.
Context & Problem
We were developing a new product and platform and needed to create a visual design and design patterns to support the new product and bring a modern user interface to the product.
The Work
Starting from the ADP’s Global Styleguide for typefaces and colors, I created a new Visual Design Language. It Included design patterns and components with a centralized asset repository and version control for team efficiency.
Outcome & Results
Launched a tested and validated visual design, creating a new, modern, and usable interface. 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 needed a new visual design language and patterns. The design needed to be easily recognized as an ADP product and needed to support a number of new interaction concepts that didn’t exist in other ADP products.
Smart Compliance had much more data to display and work with than ADP’s consumer/employee facing products, so the designs needed to account for that. I incorporated the typeface and color palette from the corporate visual design requirements but applied them differently to suite the specific needs of our customers and the interaction model in Smart Compliance.
A Dashboard for Work to Get Done
The landing page went through a number of visual design treatments before finally landing on the right balance of visual hierarchy for the customer that communicated what needed to be done, for what domain, and what priority the task was.
Testing and Iteration
From User Research, we learned that the early iterations that were focused on Activity did not provide enough context to be meaningful. We also learned the combination of focusing the title on a Process plus the Activities added enough context to drive usage and adoption of the landing page.
Additionally, we learned that more granularity to items in work needed to be added to be more useful for Users, and Users wanted quick insight to completed items specifically, not just in-work items.
Data Density, Clarity, and Filtering
In addition to the landing page, a bulk of the work customers needed to accomplish was from the “Workspace” view for each service. The amount of records available in a Workspace could number up towards thousands of records. Search and filtering became the top design and interaction focus of the Workspace so customers could easily narrow down their results to quickly find the record they needed.
Centralized Files and Version Control
One of the biggest goals for me on this project was to have these designs and patterns be a trusted and centralized source of truth that the team, including the developers working on the coded components, could easily access and use.
The team used Sketch exclusively for design work. File management and version control had become an issue. To solve that issue and make the team as efficient as possible, I launched a pilot program in ADP with Abstract, a tool that worked in conjunction with Sketch to provide a centralized , version controlled, repository of the Sketch files and assets that made up the visual design and patterns for Smart Compliance.
The process of getting Abstract approved and provisioned within ADP was a great learning and development experience in navigating the many layers of corporate finance, security, and other departments to get this provisioned and available for the team.
Outcome & Results
The new Smart Compliance platform did not have a Visual Design Language or standard patterns that would support the platform’s use cases and interaction models. The design work I did solved that. I created a Visual Design Language and defined patterns for Smart Compliance.
Almost more importantly, we made deploying and managing the designs, assets, and patterns in Sketch as efficient as possible, I deployed Abstract for a centralized repository, 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. No more files isolated on someone’s individual computer
Hindsight & Reflections
Looking back on this project, the biggest challenges didn’t come from creating the designs and patterns. The largest hurdle was ensuring the files would be centralized and version controlled for the team. There needed to be a source of truth Designers and Developers could pull from.
Learning how to do that with Abstract, then working though the channels in ADP to get Abstract approved and deployed was absolutely the most challenging part. Looking back at that work makes me appreciate even more what Figma does today.