Assessing Higher Education Attainment

Expanding education attainment data for greater impact

TEAM
Periscopic

 

YEAR
2022

 

MY ROLE
Design Strategy, Information Architecture, UX/UI, Visual Design

Summary

 

Project Overview

The aim of this project was to build on the foundation of existing project developed and maintained by Periscopic for several years. The goal was to introduce new features and improvements to engage a wider audience, including newcomers to data analysis, first-time users, and those with no prior knowledge of educational attainment. Lear more about the project here.

My Contributions

My focus was on improving comprehension and making key information more accessible to first-time users. I proposed and designed a component that builds upon the existing list of key insights by presenting them contextually within the charts, and an interface control designed to help users navigate and understand the charts with ease.

 

What We Created

Core components and features of the project

 

Guided Data Exploration

The site offers numerous methods for presenting its extensive data, each providing value and depth, especially for more advanced users.

The Show Me How To Read This Chart feature was designed to assist new or less experienced users interact with the data more confidently and understand educational data better. When activated, the Show Me displays "coach marks" that highlight key elements and controls. The labels provide brief explanations of chart controls and the information it will display, while the chart labels help users understand and derive meaning from the chart.

 
 
 

Integrated Insights

The new Insights panel relocated existing insights to a persistent, navigable side panel. Users can click on insights within this panel to swiftly cycle through highlights for each data visualization on the page. Selecting an insight automatically scrolls the page to the corresponding chart, displaying a semi-transparent overlay with dynamic text and corresponding chart annotations.

How We Got There

A bit about the design process and my thinking

 

Concept Development & Design Strategy

Title

The goal was to support a wide range of higher education professionals—state leaders, their staff, education researchers, and others working to strengthen our education systems. Some users may be deeply familiar with education attainment but less comfortable interpreting data, while others might be data fluent but new to how attainment is measured.

To better support users who may be unfamiliar with interpreting data, we needed a more approachable entry point. Drawing inspiration from onboarding experiences in digital tools like optional walkthroughs that guide users through key features, I proposed a similar concept here. This guided approach aimed to create a more welcoming experience for first-time users and encourage deeper engagement with the data.

This thinking also guided the redesign of the original insights component, which served users looking for quick takeaways but had the potential to become a more visible and robust tool. We evaluated which insights would be most valuable for our audiences, how many to include, the technical requirements for generating state-level insights, and how they would connect to the existing content on the page. As we refined the information architecture, we drew from elements of the client’s site to inform how the information could be cohesively integrated into the interface design.

 

Visual notes from our meetings with the client that help synthesize their goals and audience needs

Collection of various visual and interactive elements across the client’s site

 

User Interface Design

Building Within an Established System

The Show Me How to Read This Chart overlay and Insights component needed to be integrated into the existing system and fit within a limited space on the page. At first, I considered pairing the two components, but as their designs evolved, it became clear that they functioned quite differently and didn’t benefit from being grouped together. Ultimately, the Insights component became significantly more complex than the Show Me chart overlay and was better suited as its own dedicated side panel.

Working with my team lead, we adapted these components for mobile and successfully integrated the Insights into the existing navigation menu—preserving functionality while enhancing access for mobile users.

 

Iterations of the Show Me and Insights components grouped within the existing page format.

Designs for the mobile Insights menu

Previous
Previous

Celebrating Men's Health

Next
Next

Facing Climate Change in African Agriculture