The LeR MAp

01/
UI/UX + INTERACTIVE DESIGN
07/

a drive towards equity

SKILLS USED
CONCEPTING
UI/UX
INTERACTIVE DESIGN
ART DIRECTION
02/
OVERVIEW
07/
CHALLENGE
A group of 10 influential stakeholders in education, workforce development, and government aimed to visualize the complexities of new LER technology for both ecosystem organizations and broader audiences. Their goal is to drive LER adoption in ways that enhance learner agency and promote economic mobility.
APPROACH
To create a comprehensive, interactive map offering a high-level overview of the organizational ecosystem and outlines actionable steps each stakeholder group can take—both now and in the future—to drive adoption.
03/
THE INITIAL DESIGN: THE INTRO
07/

The IntrO

The LER Interactive Map is divided into two main sections: the first is a single-scroll article introducing LERs, their importance, and their impact, while the second consists of three interactive modules.

The first section...

04/
THE INITIAL DESIGN: THE MAP
07/

The
INteractive
Modules

The first module visually maps the ecosystem, illustrating stakeholder groups, their roles, and the work streams driving LER development and adoption. The second module outlines the essential action areas for each group, and the final module breaks down the estimated value propositions tailored to each key stakeholder group.

05/
REVITALIZED DESIGN + CONCEPT
07/

THE UI/UX REVISITED

The roll out of the first phase was a success in many ways. However, in spite of several constraints that informed the initial design choices, I made several changes to the UI + UX, interactive modules and the overall design system employed.

Iconography, COLOR & TYPOGRAPHY

The first change was to the iconography of the core LER Map. Broadly speaking, the initial set succeeds in elevating the visual appeal, however it fails to simplify the complexity of the information they represent.

They're also finely detailed, context-specific illustrations that do not scale well, drastically detracting from the mobile-user experience.
Therefore, I converted each icon to a single color with abbreviations of their full text labels. A single color to each icon enhances the user's ability to quickly distinguish them from one another, and helps to simplify an already dense and text-heavy module.

Given the unique titles of the LER stakeholders that the icons were meant to represent, they're unable to be visualized with simple, commonly recognizable imagery.

This adjustment required adding more colors to our palette, so I adjusted the tones to a softer set that does not contrast as sharply from each other and adheres to accessibility standards.
06/
REVITALIZED DESIGN + CONCEPT: THE LER ECOSYSTEM MAP
07/

LER MAP structure

A network of stakeholder groups working together via an interconnected system was an important concept to display in our visual depiction of the LER ecosystem.
‍
We chose to employ circles to help represent this given their symbolism for unity and continuity, both fundamental components to any ecosystem.

INITIAL DESIGN
REVITALIZED DESIGN

ReImagined
WIREFRAMES
& DESIGNS

The reimagined module utilizes a table composition. For the wireframes I employed:

• 1440 x 1024 (displayed to the right)
• 8px grid
• 12 column system (stretched up to 1440)
• Margin 40p
• Gutter 16px
• Font (body) 16px
• Breakpoints: 1440, 1024, 768, 375
hover over me
‍

hover over me
MOBILE

• 375 x 852
• 8px grid
• 4 column system (fluid)
• Margin 24px
• Gutter 16px
• Font (body)

DESIGNS
hover over me
hover over me
07/
CREATIVE CREDIT
07/
AGENCIES --- NATIONSWELL
                        JOHNSON & JOHNSON
                        DELOITTE
ART DIRECTOR/DESIGNER --- MOSIAH CULVER
ILLUSTRATOR --- CHIDIEBERE IBE
AGENCIES
NATIONSWELL + WALMART
STEERING COMMITEE
AACRAO + Competency-Based Education Network + Digital Credentials Consortium+ Digital Promise + JFFLabs + National Association of Workforce Boards+ National Governors Association + SHRM Foundation + T3 Innovation Network + U.S. Chamber of Commerce Foundation
ART DIRECTOR + DESIGNER
MOSIAH CULVER
ILLUSTRATOR
MATHEUS COSTA
NEXT PROJECT

Illustrate CHange

View
‍Project