Katy Watkins

Back to Portfolio Landing Page

Back Office Redesign

The business was launching a new and improved compensation plan for their direct sales representatives (known as "ambassadors"). The existing back office dashboard and reports (totaling twelve pages) needed updating to reflect this new plan. The plan was finalized at the end of September 2017 with a publicized launch date of January 1, giving us almost three months to complete research, design, development, and testing.

Goals #

The primary goal from the business, given the timeline and resources available, was simply to update the dashboard and existing reports to accommodate the new compensation plan (this would involve adding some new pages as well) and make it as easy to understand as possible. After conducting exploratory user research on the effectiveness of the existing back office, I identified a number of other enhancements we could aim for:

My Role #

I functioned primarily as a project manager & lead designer while also building much of the front-end structure and Rails-based logic for new dashboard screens. I conducted initial user and stakeholder interviews, organized user testing sessions, designed and helped implement new back office pages and updated reports, and coordinated with two developers and a junior designer who were also working on the project. Towards the end, as my time needed to be dedicated more towards implementation, I coordinated with another project manager and the sales team to finish up final user testing, socialization, and QA testing.

This home screen was one of the biggest wins to come from talking with ambassadors as part of my initial research. Previously the main landing page of the back office was their current stats page, which meant they couldn't show anyone how to navigate their back office without showing showing someone their financial details. It wasn't a complaint that we had heard before, but it was clear in talking to them that it was an issue they'd been working around, and it was easy for us to implement. It also enabled us to better integrate important external pages like the training site, use the badge graphics marketing had developed for print materials, and surface time-sensitive information like training videos for the first month.
When we surveyed ambassadors about their usage of the existing back office, the current stats section was the clear winner for most-used section, and we accordingly spent a significant chunk of time ensuring our update continued to work well. The new compensation plan required us to display a lot more numbers than before, but we wanted to keep some of the overall structure from the previous dashboard. Completely overhauling our visual conventions and patterns would have created a lot more problems than it solved. Even the labels went through extensive rework as we saw the dashboard in action in usability sessions. I initially used language like 'current month' and 'next month', but this introduced confusion, so we moved towards specifying the exact month everywhere.
Another big part of this redesign was encouraging ambassadors more with conditional messaging to help them quickly understand how they're doing. We'd always shown them a progress bar, but the missing part of the equation was doing the exact math to tell them how far they had to go. We also introduced iconography and color into the messages to make it clear at a glance when they're doing well.

Results #

We were able to over-deliver. Not only did we hit the primary business objective of accommodating the new plan, we also added a fourth new report to provide much-needed promotion-related information and hit every stretch goal except the internal report enhancements, which were easy to add after the launch.

From a process perspective, we also succeeded in pushing for a rougher, earlier implementation and refined front-end visuals in the browser. This enabled us to begin internal testing a full month before the deadline which was vital to the successful launch.