Businesspeople on sloped walkway in a modern glass building.

Leader Edge Application Prototype

Image
SHL Leader Edge application displayed in multiple devices.

Leader Edge is a Web-based application that helps organizations grow and develop leaders from within their ranks. It does this by providing psychometric assessments which then suggest development activities—many self-directed—based on a candidate’s strengths and weaknesses. This prototype is an enhancement and extension of current SHL products.

 

Image
Screen displays of SHL Leader Edge Application

Dektop screens showing different stages in the application. Here, to maintain consistency across device usage, the desktop application employs a narrow, single-column layout format.

 

Image
Screen displays of SHL Leader Edge Application

Screen views showing expanded card views, as well as user profile flyout patterns. To maintain consistency, usage paradigms adapt for different devices.

 

Image
Application design samples showing process iteration

In the prototyping phase, usability challenges were addressed by iterative improvements. Moving from the top left, progress indicators for onboarding and profile process were revised from a subtle bar below the persistent header (which could easily be lost) to an easily read, but unobtrusive progress bar. Below that, iterative improvements were made to the survey widget interface, moving from stock iconography—which may not be reflective of the question, to more general custom icons. In addition, elements that may not be readily apparent to some users were assisted with static text, as well as tooltips. At the top left are iterations showing different layout patterns—with tests for two-column layouts for desktop, as well as differing widths and added containers. For testing, research was also referenced per line length and cognition, shown in the bottom right. In addition, client-selected custom colors are demonstrated. At the lower right are evolutionary improvements to the application navigation and wayfinding. Evaluations of user testing, as well as information architecture reviews helped guide this.

 

Image
Information architecture diagrams for general and user onboarding

To gain a deeper understanding of the application, an information architecture review was undertaken, to uncover organizational challenges. Here, the general layout of the leader screens, as well as the elements of the user onboarding process are diagrammed.

 

Image
High-level user experience diagram for leader onboarding

From the outset, a user-centered design process was employed. Shown is a high level flow for the leader onboarding process, showing decision points and sticking points in the user flow.

 

 

Image
Detailed user experience diagram for leader onboarding

The leader onboarding user flow is further explored in detail here—application state thumbnails are added to the onboarding process, to help guide what key elements and tasks the user needs in order to achieve a successful outcome.

 

 

Image
Collage of typographic specifications and application colors

Clarity and focus of the application were designed into every aspect of the application, starting with typography and colors. Here, a detailed guide shows typographic usage and contextual spacing, as well as use of SHL branding colors. The palette was expanded to ensure accessibility compliance, shown here with deeper alternates for some low-contrast challenges.

 

Image
Collection of application elements for use with rapid prototyping

To ensure accurate design communication and consistency during development, as well as allowing for rapid iteration, a detailed component library was set up in Figma. Shown here is a sampling of form elements, navigation, and popup menu elements. For elements requiring it, detailed developer and interaction design notes are included, as well as spacing and padding demonstrations.

 

Image
Annotated application layouts demonstrating grids, spacing and popup regions

Here, accurate design communication is shown for layouts in different device breakpoints, complete with spacing, vertical rhythm, and other annotations. Elements common to application administrators and general users are shown.

 

Image
Annotated layout diagrams of the Leader Edge application at different breakpoints

Annotated wireframe layouts communicate content regions within the screen display, showing vertical spacing patterns, as well as annotations for necessary items to ensure design consistency.

 

Image
High-level view of Figma interactive prototype for use in testing

A high-level view of the desktop interactive prototype in Figma. This view shows the links to the multiple screen states used in the testable prototype, which allowed rapid iteration based on testing feedback.