Nov 2022 - June 2023
1 Designer, 5 engineers
Toddle - Your teaching partner
Project overview
Students, particularly younger ones, face challenges in navigating Toddle's assignment interface. Key actions like submitting work or viewing feedback are not intuitively accessible, especially on mobile devices. This results in increased effort to locate assignments, understand expectations, and review teacher evaluations, leading to decreased engagement and potential learning gaps.
How might we redesign the student assignment experience on Toddle to make it faster, clearer, and easier to navigate helping students quickly find what to do, where to submit, and how they’re being evaluated, while keeping younger learners in mind?
We received consistent feedback about improving the student-side assignment experience through NPS surveys, feature requests, school buddy conversations, and even directly from students themselves. Instead of addressing each request in isolation, we zoomed out to map the pain points and look for patterns. What was the root cause behind this friction? Was it a visibility issue, a cognitive load issue, or a structural one? And how were other platforms solving this?
Improving this experience wouldn’t just help students, it would ease the burden on teachers, reduce back-and-forth, and give students more clarity, ownership, and joy while using the platform.
My role
Product design, user research, Competitive analysis, Stakeholder management, user testing, Product management and project management.
The team
1 designer, 4 Engineers, 1 Engineering Manager
Timeline
Jan 2025 - Mar 2025
Project highlights
Step-by-step mobile flow
On mobile, the assignment experience is structured into three simple tabs at the bottom, guiding students through understanding the task, adding their response, and reviewing their submission, one step at a time.
Assignment widget and updated landing page for assignments
Enabled easier access to assignments through a redesigned assignment widget on web and tablet, supported by a robust notification system and an improved landing page that helps students quickly understand what’s due and where to begin.
Two page layout and enahnced visual design
The assignment page now uses a two-pane layout. On desktop, students can view assignment details on the left and upload their submissions on the right. The submission section stays visible while scrolling, so students never lose context.
The current assignment submission process
Submitting an assignment as a student is a multi-step process, often cluttered with too much information upfront. Students struggle to distinguish what’s important; due dates, instructions, self-evaluations, and teacher feedback are not clearly visible or prioritized. On top of that, adding work involves multiple layers, which can feel overwhelming. Before diving into the case study, it's important to first visualize what the submission journey looks like from a student’s perspective.
Understanding the problem space
Navigation
The interface felt complex and unintuitive. Students often missed critical assignments because due dates weren’t clearly surfaced on the homepage.
Scrolling
Both on web and mobile, students had to scroll extensively to find the “Add Response” button. On smaller screens, this button was even harder to locate due to its low visual prominence
Lack of heirarchy
The assignment page was cluttered, with instructions, due dates, evaluations, and resources all competing for attention. There was no clear visual structure to guide students on what to do first.
Multiple submission areas
Students often missed adding self-evaluations because it lived in a separate area from the main submission section, leading to incomplete workflows.
User paint points
We spoke to students and teachers across multiple schools and synthesized insights from conversations, support tickets, and NPS survey data. This gave us a clearer picture of the challenges students face when interacting with assignments. We discovered that many students found the process cumbersome - missing key instructions, struggling with submission steps, and often overlooking deadlines. These issues were especially pronounced for early years students, where clarity, simplicity, and visual cues matter even more.
Aligning with stakeholders to uncover what the redesign truly needed
After a thorough reassessment of pain points through NPS analysis, in-person feedback, and evolving product needs, it became clear that a full redesign and rebuild of the student assignment experience was necessary. We created a detailed product requirements document to align all stakeholders, clearly outlining the project goals, timelines, and roadmap to drive the redesign forward.
Making it simple but significant
The goal of the redesign was to simplify the experience by making a few high-impact changes, aiming for 80% of the impact with just 20% of the effort. We focused on identifying the most critical areas of friction and directing our efforts toward improving them.
As a designer, one of the biggest challenges was streamlining the overwhelming amount of information users needed to see on their screen, without compromising on clarity or usability. The focus was to make the assignment viewing experience simpler, more accessible, and genuinely delightful for every individual.
Before moving into visual design, I defined a few core conditions to guide an efficient user flow, ensuring that the redesign would not just look better, but feel better to use.
Creating multiple iterations
For the sake of brevity and confidentiality, I’ve outlined only a few key approaches for the student layout section - focusing on my explorations and thought process around organizing and chunking information.
We tested these internally through Figma voting and direct feedback sessions with teachers. I’ve also included explorations to help define how we could better organize student information and make it easier to navigate.
Turned insights to actions: We took some data on the types of media files added by students and found that 80 percent of this was images and files uploaded from device.
A/B testing with users: Gathered detailed requirements directly from partner schools and built interactive demos to validate direction and gather feedback.
Collaborated with developers: Worked closely with engineering teams to evaluate feasibility, identify edge cases, and co-create a realistic development road
Reiteration and refinement: Improved designs through continuous feedback loops — ran regular cadence calls to resolve dependencies, address developer questions, and adapt to evolving constraints.
HOW DO WE SEGEREGATE INFORMATION FOR STUDENTS?
Exploring mobile navigation
We created some navigaiton options for mobile and voted them on figma with the team - People gave their views on what kind of navigaiton they thought would work best
A QUICK COMPARISON BETWEEN THE CURRENT AND REVAMPED VERSIONS OF THE SOLUTION
Product interactions
#1
The layout features a two-page view: key details like the learning experience description, assessment tools, submission status, title, and important dates (open, close, due) are shown upfront, while the right side hosts a sticky response box.
The submission box is designed to unlock the "Mark as Done" action only after the student uploads their work and completes the self-evaluation, ensuring a guided and structured workflow.
Assessment tools are placed upfront, helping students clearly understand expectations before they begin working.
New teacher messages appear directly in the chat sidebar, keeping communication clear and visible throughout the process.
Submission statuses are clear with a due and close date in yellow when due date is nearing.
Before
After
#2
The mobile flow was redesigned into clear, step-by-step sections: instructions, your response, and messages - creating a more guided experience for students.
The UI was made more compact, allowing more information to be visible at once without overwhelming the user.
Evaluation tools were updated to follow an expand-collapse interaction. One criterion opens at a time, and once completed, it automatically collapses, bringing focus to the next.
The mobile landing page was revamped to prominently feature pending work and unread messages, with filters to easily toggle between pending and completed tasks.
Before
After
#3
We added self evalution in the response section so students wouldnt end up missing it. the buttons would also become outlined onvce the response has been added, indicating to students what order they should be adding their resposne in
Submission template added by the teacher is also added int he response section and clearly indicated that that is a submission template with adding response being the primary action, not adding work - indicated through colours
Before
After
Homepage widget
Mobile assignments page
#4
We rethought the student task experience from the ground up and introduced two action-oriented tabs — To-do and Unread, with Done for completed tasks.
Less frequently used tabs were moved under a filter to reduce cognitive load, with the option to use chips for deeper filtering if needed.
We also translated this structure into a customizable homepage widget on the student web dashboard, giving students quick access to what matters most.
The content within the widget was intentionally minimal, surfacing only the most essential details; assignment name, status, and teacher comments to support fast, informed action.
Before
After
…We also created illustrations for students for all submission states and actions!
Comparing the old and new flows
Let's talk numbers
Reflecting on this
Many layout and usability flaws were uncovered only because we tested often and involved real users. Failing early through rapid iteration ultimately made the final product much stronger.
This project started off looking simple but revealed complex and layered needs as we dug deeper. Many issues were not captured directly in feature requests or NPS feedback. For example, teachers were using portfolios to manage assignments, which was never the intended flow. This taught me that valuable patterns are often hidden beneath surface level asks, and user behavior needs to be interpreted, not just reported.
Initially, illustrations were not a priority, but the work evolved into its own design track. We had to define a distinct visual style that extended beyond empty states. This expanded my appreciation for how illustration systems support the overall experience.
Our click by click comparison between old and new flows helped align stakeholders. It highlighted real improvements and helped justify decisions with clear and measurable data.
I also enjoyed focusing on the smaller details; icons, visual balance, and interface behaviour. These small but intentional changes helped bring clarity and cohesion to the final product.
