William Bruno
05 · Case study

Velocity

Role

Senior Product Designer

Scope

Adaptive K–5 learning platform

Studio

Tectonic · 2021–2022

Discipline

UX research · Interaction design · Design systems

Voyager Sopris Velocity reward screen with character celebrating student progress and skill badges

A classroom of twenty-five. A product for one.

Context

Velocity is Voyager Sopris Learning’s flagship adaptive K–5 platform. I led the redesign from classroom research through interaction design and into the system that engineering built from.

Challenge

One product, two users: a student working alone and a teacher watching the whole room. All on aging school hardware in rooms where bandwidth was not guaranteed.

Solution

Velocity’s wide range of activity types got mapped into one consistent interaction model: a shell, a structure, and a golden path from login to grade-level readiness.

Impact

Student and teacher experiences designed in parallel, seven interaction types feeding the adaptive engine in real time, and a full design system handed to engineering, ready to build from.

01 · The classroom

Every decision had to hold up in a real classroom, not a design review.

Velocity had to serve two users at the same time: a student working independently and a teacher monitoring twenty-five at once. All on aging school hardware in rooms where bandwidth was not guaranteed.

Those constraints weren’t abstract. They were the brief.

Students using Velocity on Chromebooks in a real classroom
Classroom observation: the design brief written by the room itself.
02 · The transformation

A shell, a structure, and a golden path from login to grade-level readiness.

Velocity’s wide range of activity types (cold read, highlight, drag-and-drop, guided practice) got mapped into one consistent interaction model. A shell, a structure, and a golden path from login to grade-level readiness.

The visual language said learning tool without saying enterprise software. Approachable, clear, age-appropriate. Never condescending to the kids or the teachers.

Student golden path diagram from first-time experience through skill practice to grade level readiness
Golden path: the student journey from first login to grade-level readiness.
03 · Visual foundation

The system underneath every screen.

Approachable, age-appropriate, never condescending: a warm primary palette with clear semantic accents, and type readable at every age, scaled across modalities.

Voyager Sopris Velocity mood boards exploring approachable, age-appropriate visual directions
Mood: approachable, age-appropriate, never condescending.
Voyager Sopris Velocity color system showing primary, accent, and semantic palette tokens
Color: warm primary palette with clear semantic accents.
Voyager Sopris Velocity typography system with hierarchy specimens for headings, body, and instruction copy
Type: readable at every age, scaled across modalities.
04 · The screens

Designed for the kid. Documented for the team.

That was the design intent for Voyager Sopris Velocity: one consistent shell across activity types, celebration without infantilizing the student, and screens designed for the Chromebooks and tablets actually in classrooms.

Voyager Sopris Velocity lesson experience screen with interactive reading passage and inline comprehension tasks
Lesson: one consistent shell across activity types.
Voyager Sopris Velocity reward and progress screen with badges, level-up moments, and student celebration
Reward: celebration without infantilizing the student.
Voyager Sopris Velocity responsive design across Chromebook, tablet, and desktop classroom hardware
Responsive: designed for the Chromebooks and tablets actually in classrooms.
2
Users in one product

student and teacher experiences designed in parallel.

7
Interaction types

feeding the adaptive engine in real time.

1
Design system

handed to engineering, ready to build from.