I led the end-to-end design process for Sequencer’s student and educator experiences, shipping tile-based learning and activity creation workflows. I also bridged design and development through creation of a responsive design system and documentation.
ROLE
Product Designer
TEAM
1 Product designer
2 Engineers
TIMELINE
3 Months
TOOLS
Figma, Cursor, React.js
Sequencer gamifies learning through interactive ordering
Results & impact
Sequencer introduced a more engaging way for students to learn while making activity creation easier or educators. The project reaches users across the univiersty, and the design workflows established through this project set a precedent for more consistent and scalable design and dev practices across applications :]
VIEW THE PROJECT PROCESS
Mapping out the experience for two different sets of user goals
I led a brainstorming session on student and educator experiences to explore the possibilities and limitations of different workflows and interaction patterns.
The guiding principle: Make interactions delightful without complicating the learning objective.
How might we make learning sequences engaging
& interactive for students?
*Drag-and-drop emerged as a natural interaction pattern, inspired by how we physically arrange cards into order. I mapped out how students would move through the activity, from understanding the task and arranging tiles in order to submitting their answers.
Providing meaningful feedback and rewarding students upon completion was equally important to reinforce learning and create a sense of accomplishment with the app as well.
How can we make activity creation fast & scalable for
educators?
*For educators, I mapped out the process of turning course material into a playable activity, from creating and organizing tiles to previewing, testing, and sharing.
I focused on reducing repetitive steps and making content easy to modify, while making sure the workflow could scale to topics of different lengths and complexity.
The student experience — I first explored a horizontal timeline to show event progression, then refined the design into vertical numbered slots with shuffled tiles for clearer, more intuitive sequencing.
The teacher experience — Early explorations let teachers add and edit tiles individually.
After iterating, it was clear that the separate editing steps interrupted the workflow. Bringing editing and reordering into the sequence helped keep the activity in view while making adjustments.
Building a scalable design system & documentation to support future designers & developers
Sequencer was a project designed to evolve, so with the creation of the design system, I wanted to establish a shared source of truth to guide future development and iteration.
By standardizing design decisions, component patterns, and documentation, I wanted to maintain consistency across the product and improve on existing practices within the application ecosystem.
I established design tokens & a documented source of truth for design & development
Many legacy widgets relied on hardcoded values and inconsistent naming, making maintenance difficult. I replaced this practice with shared design tokens (e.g., color.brand.primary) and documented component behaviors, and guidelines, in a DESIGN.md to support dev handoff and future AI-assisted development.
I built a responsive library in Figma & React
I integrated reusable components for desktop and mobile with React. I also made the decision to move beyond Materia's legacy CoffeeScript and HTML/CSS stack to support a more modern and maintainable frontend. This helped bridge current gaps and make future updates easy.
Key design iterations within the student experience
Exploring tile interaction patterns & visual design
The sequencing interaction was the heart of the experience. Students needed to understand what to do immediately, but I also wanted the activity to feel engaging.
Balancing play & usability
For the final design, I moved toward a more structured drag-and-drop grid, where students could see all shuffled tiles and rearrange them directly. This gave greater visibility for comparing and revising.
TAKEAWAY: Balancing interaction design with intuitive task completion keeps the focus on learning.
Key design iterations within teacher studio
Making creation as intuitive as playing
Educators also needed a straightforward way to transform their course content into playable sequencing activities.
For Teacher Studio, part of my design goals shifted from gamification and learning to efficiency and control.
The tooling needed to allow educators to create tiles, define their correct order, and make changes without spending too much time navigating the interface. The workflow had to be efficient for simple activities while remaining flexible to support more complex ones.
Understanding users & building a foundation for personalization
The final iteration of the teacher studio's main panel made it easy to manage content, make quick adjustments, and maintain the correct order as activities became more complex.
Accessible up/down controls let educators move tiles within the sequence, make quick adjustments, and maintain the correct order as activities become more complex.
Final product
Learnings & reflection
Designing for two different user groups
Something unique about this project was designing for two user groups simultaneously. It stretched my product thinking as I balanced the individual needs of students and teachers while ensuring their workflows came together cohesively.
Thinking beyond design handoff
As the sole designer, I learned to think beyond delivering polished screens and consider how my designs would be built, maintained, and improved over time. It pushed me to take greater ownership of my decisions and consider the product's long-term success, even after my involvement ended.