Image of people in motion in escalators in public space.

Precise Fit Dashboard Updates

Image
Image of SHL Precise Fit Application on different devices.

 

Precise Fit is a software as a service application that helps organizations assess job candidates during the hiring process by use of online tools. Although only involved up to the wireframing process of the application revamp, following are explorations of a future hiring manager experience.

 

Image
Desktop screen displays showing specific hiring campaign in light and dark mode.

Desktop display of hiring campaign in light and dark modes. For readability and concise communication, a monochromatic color palette is utilized. This helps busy hiring managers focus on the content—not distracting presentation—to aid rapid cognition.

Image
Mobile screen displays showing various screen displays in light and dark mode.

Although the core user base for Precise Fit will be normally accessing the application via desktop applications, a mobile-first approach was taken for the explorations. Here, various screen displays in light and dark mode are shown.

Image
Precise Fit landing page layouts (desktop) showing various data visualization and filter options.

Consistency of content and wayfinding are evident in the landing page for Precise Fit. In these views, the default collapsed filter view (left) is compared to the expanded view (right). This functionality is collapsed by default in order to cut interface clutter. Since comparing geographic reach of various campaigns would be difficult to conceptualize on map overlays, Gaussian distributions are utilized to allow quick comparisons. The hero visualization shows multiple options—and highlights the complexity of data displayed.

Image
Information architecture diagram for future simplified state of Precise Fit application.

To gain a deeper understanding of the application, an information architecture review was undertaken, to uncover organizational challenges. A revised future state of the application structure is shown here, cutting many duplicative elements.

Image
High-level user flow digram for managers showing hiring process status reporting.

In undertaking a user-centric approach to the redesign, the tasks of a busy hiring manager are mapped in this high-level view.

Image
Detailed user/screen flow digram for managers showing hiring process status reporting.

Here, the hiring manager’s journey is further mapped, taking into the account the tasks and challenges in greater detail. Thumbnail blocks are used to focus on content flow, not styling.

Image
Wireframe iterations for revised dashboard, showing different visualization formats.

The hiring manager’s needs are beginning to be addressed in these wireframe iterations. At this point, the existing layout elements are being utilized, but patterns are emerging that will inform the evolution and updating of the application.

Image
User intent mapping for application stage view in Precise Fit, with annotations.

User intent mapping for the application dashboard. Here, user needs and intents are mapped to content areas. This informs the content strategy and hierarchy, highlighting what elements need prominence, and the context in which they do so.

Image
Annotated application layouts demonstrating grids, spacing and popup regions.

Form follows function—especially in cohesive layout. Here, layout grids, vertical rhythm, spacing, and global elements are shown for multiple devices. This includes demarcation of what elements are fluid, and which are fixed.

Image
Annotated layout diagrams of the Precise Fit application at different breakpoints.

Building upon the layout patterns, here content regions are defined—according to importance and to impart a consistency across all user tasks.

Image
Application color display and variations generated from corporate palette.

Application colors, primary and secondary, as well as corporate palette and variants. In order to convey consistency of corporate branding while adhering to usability guidelines and communication clarity, a standard fine arts approach was employed—graying down the color palette. Here, selected strong colors from the corporate palette are expanded through tints (lightening with white) and tones (darkening with black) in order to achieve hue and value consistency. This is especially important in regards to data comparisons, where strong colors can overwhelm others, even that effect isn’t desirable.

Image
Application typography demonstrations and specifications in light and dark mode.

Application typography, light and dark mode. Clarity and readability are the primary focus—which is enhanced by generous spacing where possible. Appropriate contrast is also attended to in dark mode, which is enhanced by the warm/cool tonality adjustments between foreground and background elements.