Client Profile Case Study

Background - A user story

Let's imagine that you work in payroll. You're using SmartCompliance, ADP's cloud-based payroll system, and everything is going fine. Now, let's imagine that your company merged with another company. Your former company, previously named, "Good Company" is now named "Very Good Company." Sounds great right? You're excited about the merger and you're busy updating everything in your system with your new company name and address. However, as you go to update your company's name on SmartCompliance, you notice something funny. You notice there’s no access to your company’s profile.

When you go to the admin section of SmartCompliance, you notice that the only thing you can do is view your company's users and permissions. That's kind of helpful, but that's not what you're trying to do right now. What you're trying to do is update your company name and address, but you can't seem to find anywhere to do that.

Example: SmartCompliance's Admin page. Users were only able to view and edit their users. There was no view of a user's company profile or service settings.

Frustrated, you call your ADP representative. Unfortunately, you get put on hold, but you don't have time to wait, so you hang up and email ADP. After a day or two, you get an email back. The representative says they can help you and you work with them, writing back and forth to get your company details updated. After a few days, everything is done. You're happy now, but the experience was frustrating. What should have been a simple task took days to complete. As you pack up for the weekend, you wonder if there was a better way to do this.

Imagining a better way to do this

The story above is pretty representative of the then current state of SmartCompliance's admin page. At the time, the administration settings only allowed users to view and update users profiles and permissions; views of a client's profile information or service settings were non-existent. Even though updates to a client's settings were rare, they were urgent when needed.

My role in this was to create that 'better way to do this.' I had the simple goal of creating an easy way for clients to view and edit their company settings.

A screenshot of a presentation deck explaining the problem with the current SmartCompliance admin space.

Goals

◦ Create a way for clients to easily view their company's profile and service settings.
◦ Ensure that the newly designed experience could be expanded upon by each service.

Getting to know the admin space

I was new to the admin space, but I knew it was a place that needed some love. I took a little bit of time to get to know how it worked and what it was used for.

The interaction pattern was simple. It operated using one of SmartCompliance’s core page templates called a workspace.

The workspace was divided into two main segments, a navigation row and a table. The navigation items opened up a new page and the table's rows opened up a drawers that slid in from the right.
‍
As I played more with the admin workspace, I wasn't sold that it was the best solution for an administration settings page. In fact, I found it kind of awkward.

Example: SmartCompliance's Admin "slider" or drawer. It was one of SmartCompliance's basic components and used throughout the system.

Examples images of wireframes exploring different layouts for the admin page.

Example: Some quick wireframes exploring different layouts for the admin page.

I checked out how other products were laying out their admin sections and quickly sketched out a few different layouts that I thought might work.

One layout that looked decent in wireframes was one with a left navigation. It provided a focus area to display settings and had a familiar navigation system that would make finding other services easy. However, it didn't feel as successful as it could be. One of the things that kept standing out to me was that it didn't really fit with SmartCompliance. I kept wondering if I could do something better that would fit with SmartCompliance's style and still keep the left-nav's properties of ease of navigation and simple focus.

Example: SmartCompliance's admin page with a left-nav. This provided easy settings traversal, but didn't really fit the style of SmartCompliance

As I explored options, I took another look at SmartCompliance's home page. I wondered if there were any design cues that I could play with to bring more consistency across the platform. One of the things I liked about the home page were the task cards. They acted as both content and navigation. It's an idea that I wanted to bring to the admin page.

Example: SmartCompliance's home page. The home page displays cards that act as entry points for tasks that needed to be done on SmartCompliance. I used that design cue to inform design decisions for the creation of the admin page.

What resulted was interesting. It kept consistency with the home page and kept navigation simple. And, depending on a user's permission level, we could easily hide any service or setting that they weren't allowed to view.

Example: The admin page with cards

I continued to explore the card design idea and grouped similar cards together into larger ones, giving the page a little more organization.

Example image of a new layout for the admin page of SmartCompliance.

Learning about services and their settings

As I was exploring the layout of the admin page, I was also investigating what our services and general settings were. I needed to ensure that whatever I made was reusable and scalable so that each of the service teams would be able to simply plug in their settings in without worrying about compatibility. From what I learned, our service settings were fairly simple and went well with the card designs I was exploring.

An example image displaying how deep each service setting of SmartCompliance goes. The service settings levels are not deep.

An example of cards showing different edit settings.

Above - Service diagrams I made that represented the level of depth each service had along with their basic settings. Below - Examples of cards in their edit states. I tried to capture each type of setting that each service had.

With things looking promising, I reached out to our UXR and to get schedule some tests. Our test participants were from companies with an employee base of 50 and 5000. All participants were using ADP payroll systems and were one-on-one interviews followed by usability tests.

Test Results and Outcome

We got some good information from the tests. All the participants found that editing information was an intuitive and easy process. We also found out that some terms we were using were initially confusing, ones that we could modify or add explainers to.

Another interesting piece of information was that some participants were worried about how easy changing settings could be. It seemed like we needed to employ some safeguards or friction into the design to slow down the process. They did appreciate being able to view and edit settings, but wanted to make sure that there were precautions taken by the system so that accidental changes were guarded against.

I took in the feedback, updated my screens, and got the updates into production! With these updates, we were able to reduce the number of client calls and Siebel cases related to client profile changes by 13% and reduced the number of hours our account managers had to spend on client profile and service setting matters.

My Responsibilities

My Team

Wanna listen to something?