Sequential Questions
Sequential Questions is a multi-step question type in Smartwork that guides students through complex problems step by step. It helps students master foundational concepts while providing progress tracking and insights for instructors.
Year 2023
Role UX/UI Designer
Client W.W. Norton Publishing Co.
About Sequential Questions
Sequential Questions is a question type developed for Smartwork, Norton’s online learning assessment tool used by over one million college students and instructors.
The Sequential Questions question type was developed in direct response to a high-demand request from our chemistry team, along with college professors. They wanted a question type that would allow students to work through a problem in multiple, sequential steps.
Because this feature didn't exist in our competitors' platforms or in Smartwork at the time, we saw it as a major opportunity to strengthen our product and make it stand out. This new question type was built to provide instructors with a powerful way to guide students through complex, multi-step problems, ensuring they master foundational concepts.
My Role
I was responsible for the end-to-end UX design for the new Sequential Questions question type. My work began with a proof-of-concept prototype and a review of research findings from a survey.
The goal was to create a multi-step question that met the needs of three distinct user types: students, instructors who create and edit assignments, and the media editors who write the questions in the authoring management system.
My process began with an exploration phase where I drafted multiple design variations based on user stories. These designs went through several rounds of adjustments and updates with our Product Manager and Design Director, ensuring we were aligned on functionality, usability, and product needs. Once we finalized the designs, I created a high-fidelity prototype to present to the full Smartwork team and stakeholders for feedback. I then made further updates and applied the final visual design.
Once the prototype was complete, I passed the designs off to the developers. To facilitate this, I sent out a UI spec and uploaded visual designs to Zeplin. I also stayed on the project to help answer any questions and do a final Visual Quality Assurance (QA) check before the question type went live.
Challenges
Challenge 1
Design a new student experience within an already existing web application.
A major challenge for the Sequential Questions project was creating a new, intuitive student experience from scratch. Our goal was to build a multi-step question that seamlessly integrated with Smartwork’s existing functionality while also introducing new features and a unique navigation flow. The final product had to clearly communicate its new functionality and ensure students understood how to answer and navigate the question without being cognitively overloaded.
My Solution
To solve this, I focused on providing students with a visually clear design to distinguish a Sequential Question from other regular Smartwork questions. I began by designing a clear Start Page that explained the new question type and how to navigate it. I then added a prominent stepper at the top of the question and a question steps sidebar to communicate the total number of steps and the student's current progress. For step navigation, I introduced a new bottom navigation bar with a clear border around the step content to visually highlight the multi-step buttons of the question.
Challenge 2
Integrate a new question type into the Assignment Settings and Authoring Management System.
While the student experience required a new design, the challenge for instructors and media editors was integration. My goal was to create a straightforward process for them. Instructors needed to be able to seamlessly select, edit, and manage the new Sequential Question in their Assignment Settings. Similarly, media editors had to be able to efficiently write and build these complex, multi-step questions within the Authoring Management System. My designs ensured that the new Sequential Question was a natural and intuitive part of their existing workflow.
My Solution
For instructors, we added the new Sequential Question type directly into the question table and Question Library. We also added a dropdown that, when clicked, revealed a breakdown of all the steps and their details. A key design decision was to disable the edit feature for the Sequential Question. Media Editors write these steps specifically to build off one another, and editing this content could disrupt the flow of the question. However, instructors could still universally edit the points, attempts, and grade penalties.
For media editors, we added this question type to the Authoring Management System (AMS) and designed a new workflow that allowed them to write it step by step within the Question Metadata. We also provided clear messaging explaining how the question would work, specifying that only the main question data would be visible to instructors in the Question Library, while the metadata for individual steps would not.
Please note that the screens shown here represent a very small portion of the overall design work. I would be happy to walk you through the full prototype and provide a detailed walkthrough over a call.
Key Screens & User Flows
Here are some key screens that highlight the specific designs for the student user experience.
Please note that the screens shown here represent a very small portion of the overall design work. I would be happy to walk you through the full prototype and provide a detailed walkthrough over a call.
Visual Design & Handoff
Once the prototype was complete, we passed our designs off to the Smartwork developers. To facilitate this process, I wrote a UI Spec that detailed the functionality of the new question type and uploaded our designs to Zeplin, which communicates all visual design specifications. I stayed on the project to help answer any questions that came up during the build-out and then performed a final Visual Quality Assurance (VQA) before Sequential Questions went live to ensure the product worked as intended.
Below you will find a glimpse of our Visual Design handoff from Zeplin.
Outcomes & Reflections
The Sequential Questions project was successfully launched and is now live for all instructors and students. After the prototype was complete, we passed our designs off to the Smartwork developers. To facilitate this process, we sent out a UI spec that detailed the functionality of the new question type and uploaded our designs to a software called Zeplin, which communicates all visual design specifications. I stayed on the project to answer any questions that came up and performed a final Visual Quality Assurance (VQA) to ensure the product worked as intended before it went live to the public.
This project was a valuable learning experience, as it reinforced the importance of designing with constraints. The challenge of creating a clear product despite numerous limitations—such as a complex, multi-step process and the need to integrate with an existing framework—forced me to be more intentional about every design decision. This project showed me that working within a defined set of rules can lead to the most creative and impactful solutions.