Matt Wright - ADP Next Gen HCM

ADP Next Gen HCM Experience is an interactive demonstration of a multi-platform SaaS product.

This project was completed at Malka Media with Mike Mahon as Creative Director, Eric Williams as Art Director, John Hull as developer, Etan Nechin as copywriter, and myself as lead designer.

Live site at https://adp.malkamedia.com

Wireframing

When I was onboarded for this project, it had been going back and forth between Malka Media and ADP for a few months, with nothing concrete set in place. There were rough designs at the time, but we felt it'd be best to pull the project back to the drawing board and put together wireframes for the welcome experience.

Low fidelity wireframes/design directions for the landing page.

Flow

In tandem with wireframe development, I created a flow/sitemap for the website—removing unnecessary components and stripping the experience back to make the core features stand out. We landed on a very simple and clear direction and this helped to unite the agency and client perspective.

Restructured site map.

Content Management System (CMS)

A CMS would be a critical component for the future of the experience, eliminating the need for an agency contract every time the site was to be updated or a feature added. I modeled the CMS system after the macOS Finder window. The clear nested hierarchy lended itself well to fine-grain content manipulation as well as surveying the broader scope of the content within the experience.

Wireframe Stage:

Content Management System wireframes.

After building out the medium fidelity prototype, we decided on using the native Wordpress CMS, as the time saved would allow us to focus more energy on the front end development experience.

Medium Fidelity:

Medium fidelity Content Management System designs.

Content Management System interaction.

Landing Page Design Exploration

The design for the landing page needed to conform to ADP brand guidelines, be consistent with an existing site, and feel like a modern SaaS platform. The client wanted to feel sleek and modern, while straying away from overly organic shapes.

Low Fidelity landing page design explorations.

Experience Design Exploration

In these explorations, I began thinking about how a user would track progress through the many steps (or clicks) that comprise a feature, the three to four features inside of each module, and the five modules. We implemented an expanding sidebar navigation to navigate at the module-level and a progress indicator along the bottom of the site to see the feature-level progress.

Low Fidelity Experience design explorations.

Medium Fidelity Landing Page and Experience

We created an organic shape with a low shadow in the background that could "hold" a computer or phone in place, while providing space for text to be clearly read. Behind the organic shape is a dynamic gradient background that ties this site to the existing Flow of Work site.

Medium Fidelity landing page, welcome page, and example of an expanded screen.

Final Landing Page and Experience Design

For the final design, I tweaked the text sizes to make it more dynamic, created consistent CTA and interactive element styles, and built out a scalable style guide for button states, page states, and text styles.

Landing Page.

Welcome Page. Prior to the experience starting and after the Landing Page, the user is prompted to provide some personal information and customize the experience for their industry. The placement of this form gives the user incentive to stay in the experience instead of being overwhelmed with options on the Landing Page.

Welcome Page.

Welcome Page with expanded sidebar navigation.

Screen with Phone-based feature.

Motion Design

The motion for this experience needed to be fluid and snappy. Many of the transitions between pages could be disorienting for the user, so it was important to make sure the user never lost context of what type of device they were looking at.

Landing page transitioning into the beginning of the experience.

Side menu while viewing a computer-based feature.

Side menu while viewing a phone-based feature.