The Mercer Pocket Pro project kicked off with a day-long collaborative workshop designed to help us flesh out our collective assumptions about the platform’s end-users. We developed a set of personas for users on both the client and vendor sides of the marketplace platform. We also mapped the journey of those users through the various touchpoints of the experience as they sought to complete various tasks.

An example of a User Journey Map. Here, we’re considering the steps involved with an initial Client/HR Pro consultation on the MPP platform…The typos were left in for posterity…

Different designers use Journey Maps for different reasons. For me, they provide the best outcome from creating Journey Maps is to reveal the important touchpoints that a user will encounter as they move from one end of a task to the other. In this way, we start to get a sense of how the system architecture will need to be designed in order to accommodate the pathways between those touchpoints.

This interaction flow diagram is one of dozed that I mapped out in the system structure page of the project. This diagram describes how HR Pros register an account and submit themselves for access to the platform. Each of the blue nodes in this diagram indicates where the process is further described in its own flow diagram.

For me, mapping the flow of a system is an important step in understanding how I’m going to organize the interactive spaces throughout an experience. This is often a moment that brings clarity into how many screens will need to be designed and how they will be interconnected.

This annotated wireframe describes the default state of the home dashboard for HR Pros on the platform. One of the central concerns we heard from potential early adopters was around the ability to easily manage their time. We designed this dashboard to bring their schedule front and center upon login.

We learned from our discovery interviews with target end-users that the ability to schedule an initial consultation was going to be an essential ingredient in trust-building on a brand new hiring platform, even one created by Mercer. This wireframe describes how people are able to schedule an initial meeting with an HR Pro before deciding to hire them.

We used UXPin for our interactive prototypes in addition to wireframes. This made it easier to centralize all of the design deliverables as well as the feedback that informed our revisions.

We uncovered a compelling mobile use-case during discovery. This was something that the product team at Mercer has initially overlooked in their project scope. This caused us to realign the priority for designs that were optimized for mobile and desktop use.

It was important that MPP look and feel was inline with the larger Mercer branding. We took our visual design inspiration from their brand style guide. However, we also wanted the interface to have its own, more up-start visual identity. We did this by leveraging Mercer’s secondary and tertiary brand colors in lieu of their primary (more corporate) dark blue.

As with many projects, the aim of the visual design was for it to be clean, simple, and modern.

For us, that was articulated through a flat design combined with good use of spacing, simple geometric shapes, a limited color palette, contrast, clarity, and an “only-what’s-needed” focus.