How can we use visual and semantic cues to quickly communicate sets of crucial student information?
Establishing a flexible and scalable design system that allows tutors to quickly scan an overview page and optimize lesson planning and prioritization.
Role
Lead Product Designer
Duration
Dec 2023 - Feb 2024
(9 weeks)
Team
Bill Guo (Design)
Shivang Gupta (Product)
Danielle Thomas (Research)
Cindy Tipper (Engineering)
Tools & Methods
Figma Prototyping
Contextual Data Testing
Content Copy Editing
Handoff Specs
The Problem
The current student card design is:
1. Missing crucial information
2. Not effectively communicating that information
3. Hard to process at a quick first pass
The Goal
Design a new student card that prioritizes the most important information so that tutors can quickly gain a comprehensive understanding of their tutor group, and prepare for a lesson in a way that is more personalized.
What is PLUS?
PLUS is a comprehensive tutoring program, which combines human tutors with AI-driven software. PLUS aims to boost learning gains for middle school students from historically underserved communities.
So what was our solution?
Missing data on: motivation, performance, language, and possibly learning disabilities
Language is not descriptive enough to quickly decode meaning
Status tag does not stand out enough (it’s a high priority data point for tutors to look for)
Spacing and distribution are not efficient and are unintuitive for information processing
Only essential data is on display
Clear status language & color fill to indicate & highlight status
Content distribution allows for condensed card size
Motivation and performance tags with icon indicators for quick processing
Where did we start?
There’s a lot of crucial information that a student card could communicate. For our initial explorations we started with a long list of things, playing around with different ways to fit them all.
The long list of things:
Student Name
School
Grade
Email
Pronunciation
Status
Motivation
Ability
Language
Disabilities
Enlisted a friend to talk through ideas and try to crack the code!
Iterating again and again…
As we went through multiple rounds of iterations, we experimented categorizing and grouping data based on information type, using progressive disclosure, prioritizing based on hierarchy of information, and visually differentiating tags by type.
By the 3rd round of iterations, we made the decision to go back to the drawing board and think critically about what information could be cut out. This included static info (grade, school), the pronunciation button (feature not yet launched), and learning disabilities (to avoid biasing tutors before they are trained on the topic). We also emphasized the idea of making the status stand out with separate sectioning, color, positioning, etc.
How do we design under realistic contexts?
To finalize the design, we decided to quickly prototype the final card designs into the portal interface, replacing the placeholder text with real data, and adding variability to the states. This allowed us to test the design in a realistic context and make a final decision based on which set of cards was most readable and felt like a low cognitive load at first glance. By stress testing edge cases such as maximum tag lengths vs. no tags at all, card spacing and size, long names, etc. we were able to pick a design that was flexible, adaptable, and scalable.
How do we efficiently communicate complex meaning?
Icons for efficiency
We experimented with adding icons to condense the tags, and communicate urgency more visually at first glance. We also wanted to be mindful of color-blindness and other visual impairments.
Tags make the status
We also saw an opportunity to improve the label language. This led us to make the discovery that the 4 possible status labels did not sit on a linear scale but were rather on a motivation vs. performance matrix.
Fine-tuning Language
Existing status labels were a common point of confusion across the team and it was hard to decipher the order of progression. The language also did not accurately reference motivation or performance. We worked with the research team to brainstorm new ideas.
We then used ChatGPT to help us brainstorm possible new labels that would clarify the language so that it focused on motivation, performance, and highlighting this matrix.
We ended up prompting for a list of options for each status level.
We curated a list composed of both our own and the ChatGPT-generated options to consult the rest of the PLUS team and get some survey data on preference.
The goal is that by using candid language, tutors can understand their students in a more nuanced way without spending too much time deciphering labels.
Finalizing Decisions
The finalized labels are the following:
Needs a Push - low motivation, low performance
Determined Beginner - high motivation, low performance
Passively Progressing - low motivation, high performance
Outstanding - high motivation, high performance
How does it get implemented?
To prepare the dev team for implementation, we created a design spec document to outline specific design choices, components, and behaviors. This design is currently under development.
Components
These are the subcomponents we used as building blocks for the card design. They are set up as variables so that they can easily be switched out to allow a variety of different combinations.
Using the subcomponents shown above, we created a component group of each student card design.
Each card is a different state and color, and can include a variety of different tags. The left column is the default state, and the right column is the hover state.
Behavior
It was important to include annotations for the devs about specific behaviors.
In this case, the save button behavior and the hover conditions of the “…” tag needed clarification.
Since the status labels changed, we also made note of the default order in which the cards should be sorted when the user first opens the page.
We also created a simple filtering system for customized sorting either by name or by status.
So what did we learn?
Thank you to Bill, Danielle, and the PLUS team! :)
Working on this project from beginning to end and having full ownership of the design has been a formative experience. This project started off with just adding a few tags to the existing card design. However, as I explored cross-functionally with the research and dev teams, I learned that asking questions early on, and driving the project with intentionality could lead me me to identify opportunity areas for realistic and tangible improvements beyond the brief.
Rather than a project about designing new tags, I saw this as a project about visual information processing. By uncovering the root issue that tutors struggle to quickly process large sets of student information, I was able to reframe the approach, to ensure that it is directly relieving the main pain points rather than just deferring that pain.
I will still be working at PLUS for the Spring of 2024, and hope to continue designing with purpose and impact in mind!