Overview
Sequential Questions is a new interaction model designed for Smartwork, an online learning platform used by over one million students and instructors.
The feature enables students to work through complex, multi-step problems where each step builds on the previous one a critical need in subjects like chemistry and STEM education.
This project required introducing a new interaction paradigm within a rigid legacy system, with 1 million active users, balancing usability, platform consistency, and technical constraints.
My Role
I led the end-to-end design of Sequential Questions from proof of concept to production.
My work included:
Translating early concept prototypes into scalable product experiences
Designing for three user groups: students, instructors, and content creators
Navigating system constraints while introducing new interaction patterns
Leading cross-functional alignment with product, engineering, and content teams
Delivering high-fidelity prototypes and detailed UI specifications for implementation
Problem
The platform lacked support for multi-step, scaffolded questions, limiting instructors’ ability to assess complex problem-solving workflows.
Students could not structure their thinking across steps
Instructors relied on fragmented or workaround solutions
Content authors were constrained in how they built learning experiences
System Constraints
The new interaction needed to exist within a legacy system that:
Enforced strict UI and layout patterns
Already included its own navigation model for assignments
Could not be fundamentally restructured
In other words, this meant that the solution had to integrate and not disrupt the current flow.
Research & Discovery
Before design began, the concept was validated through internal research led by the Digital Development Studio and academic partners.
Key Findings
image here
Usability Risks & Design Implications
These insights informed the design direction, which was reducing cognitive load while introducing the new interaction model.
Risk
design implication
Increased cognitive load from multi-step flows
Required progressive disclosure and clear step hierarchy to avoid overwhelming students
Confusion around navigation and progress tracking
Required clear separation between step-level actions and assignment-level navigation
Difficulty distinguishing system-level vs question-level actions
Required strong visual hierarchy and button differentiation
Multiple interaction layers (steps within assignments)
Required designing for overlapping mental models without breaking user expectations
Instructor need for control vs student simplicity
Required balancing configurability on the backend with clarity on the frontend
image here
01
Sequential Questions required an accordion within an accordion structure, where each step could expand, collapse, and update dynamically. Without careful design, this risked: overwhelming users, breaking visual hierarchy, making progress difficult to track
SOLUTION
I structured the experience using progressive disclosure, revealing only the active step while maintaining visibility into overall progress. A stepper component at the top provided orientation, helping users understand where they were within the flow without needing to process all content at once.
02
The feature needed to integrate into a platform used by over one million users, with strict existing UI patterns and limited flexibility. This meant: layout structures could not be redesigned, new patterns had to feel familiar, the experience needed to work alongside existing question types
SOLUTION
Rather than introducing entirely new patterns, I extended existing components to support multi-step behavior. I introduced:
A Start Page to explain the new interaction upfront
A stepper to communicate structure and progress
Visual framing to distinguish Sequential Questions without breaking consistency
03
Resolving dual navigation conflict
The platform already included assignment-level navigation, while Sequential Questions introduced step-level navigation within a question. This created competing actions in the same interface:
“Submit answer” vs “Next question”
Step progression vs assignment progression
Users struggled to understand what action moved them forward and what action completed their work.
SOLUTION
I created clear visual and spatial separation between navigation layers:
Step-level actions were grouped within the question container
Assignment-level navigation remained fixed and visually distinct
Button hierarchy and placement were refined to reinforce meaning, reducing ambiguity between progressing within a question and moving across questions.
image here
04
Instructors needed granular control over: step-level feedback, attempts and grading, content structure. However, exposing this complexity directly to students would increase cognitive load.
SOLUTION
I separated concerns between systems:
Flexible configuration for instructors and content creators
Simplified, guided experience for students
Students only interacted with the step flow, while complexity remained abstracted behind the scenes.
image here
Design Trade Offs
Designing within a legacy system required balancing competing priorities.
Improving clarity sometimes meant introducing new visual cues, but these needed to remain consistent with existing patterns to avoid disorienting users. Supporting multiple question types increased flexibility for instructors, but added complexity that had to be carefully managed for students.
Some challenges, particularly around dual navigation, could not be fully resolved due to platform constraints and instead required mitigation through hierarchy and interaction design.
Final Prototype
Supporting multiple question types within sequential flows increased flexibility, but added complexity for users. Some issues, particularly around dual navigation, could only be mitigated, not eliminated. Designing within these constraints required prioritization and compromise. I extended Smartwork’s design system to support multi-step interactions. This included:
Stepper components for progress tracking
Button states across step interactions
Layout patterns for dynamic content
Responsive behavior across different attempt states
All components were documented in UI specifications to ensure consistent implementation across student, instructor, and content creation experiences.
Delivery & Handoff
To ensure the feature was implemented accurately, I delivered a comprehensive UI specification that detailed interaction behavior across all user states, including edge cases and system responses.
Designs were documented in Zeplin for developer reference, but more importantly, I stayed closely involved throughout the development cycle. I worked directly with engineers to clarify interaction logic, answer implementation questions, and resolve edge cases as they emerged.
Before launch, I conducted final visual QA to ensure the experience matched the design intent and functioned correctly across all user flows. This step was critical in validating that the interaction model held up in production and delivered a consistent experience across the platform.
Outcomes & Impact
Sequential Questions launched successfully and are now available across the platform. Results:
Enabled instructors to create structured, multi-step learning experiences
Increased platform differentiation in a competitive edtech market
Established a reusable framework for future interaction models
