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.
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.
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.
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.
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.
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.
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.
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.
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.
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.