ONYOURMARK X DEVELOP FOR GOODHelping tutors manage student literacy success.
TIMELINE
October 2024- February 2025
(16 Weeks)
ROLE
UX Designer
TEAM
Annette Guan, Crystal Pham, Edin Le, Hanna Liu, Irina Williamson, Jacky Duong, Leeanna Chen, Tanavi Patel
Preview
Check out the demo video to preview the case study!
Introduction
OnYourMark, get set, go!
As part of Develop for Good’s Winter 2025 Project Batch, I volunteered as a Product Designer to support one of their many non-profit partners. OnYourMark, a nonprofit project of Cambiar Education, provides virtual instruction in foundational early literacy skills that are essential for kids to reach successful reading outcomes. They partner closely with schools to deliver structured literacy instruction to students during the school day for 20 minutes four days a week. Tutors engage their students and build strong relationships with them, making sure to meet students’ individual needs.
My Role
The team consisted of 6 designers, 1 product manager, and 1 design manager. As one of the designers, I was responsible for designing wireframes for one of the features of our product. I also played a role in conducting user research, interviews, design library management, and quality assurance.
Timeline
[DISCOVER]Background
Only 30% of students in the U.S. read at grade level.
This alarming statistic underscores the urgent need for effective literacy interventions. COVID-19 only worsened literacy results and accelerated a burgeoning teacher staffing crisis.
With 36,000 vacant teaching positions…
it has become increasingly challenging to ensure that students have a highly qualified teacher in front of them who has been adequately trained in the Science of Reading. OnYourMark tutors teach children in K-5th grades how to read, using the Science of Reading and ensuring students’ learning and social emotional needs are met.
[DEFINE]Problem
Tutors are dedicated to improving student literacy outcomes by providing personalized support for at-risk students, but it is hard because:
1. It is overwhelming to track real-time student progress without an organized system.
2. Tutors are unable to effectively pinpoint individual students at-risk of failing behind from large student groups.
3. Too much data prevents delivery of actionable insights for students.
[iDEATE & DESIGN]What will this look like?
Our project objective was to create an integrated literacy success dashboard. But, what exactly would be in it? Our team brainstormed a variety of ideas before collaborating to decide on what functional features we would be prioritizing.
After getting in touch with our client to validate the features we decided to go with, we got more insights on how OYM administrators would be working to manage the tutor’s assignments and scheduling behind the scenes. As a result, our team decided to create an Admin View of the dashboard as well that would have its own features for their administrative needs.
The feature that I worked on and will be discussing in this case study is Student Engagement Tracking and Generating Reports.
When I first started designing for these two features, there were a bunch of questions that I had in mind.
“To generate these reports, where is the data coming from?”
“Where is individual student data being displayed? Stored? Inputted?”
“How will this interact with the other features?”
As a result, I created a flow diagram to map out the access point for these features and what type of data needs to be generated to support its functionalities.
Low Fidelity Designs
Transforming the diagram into lo-fi wireframes, I was able to establish a way for tutors to view individual student data. This also served as a place to store and pull data for other features across the dashboard. In these early iterations, I focused on pinpointing what elements fit best in each feature.
[RESEARCH]Validating design decisions.
Next, we wanted to learn more about tutors and get direct feedback from them on our initial designs. Since they were one week out from winter break, our team sent out separate user surveys to both administrators and tutors to quickly get feedback before the tutors would be out of office for 3 weeks.
Sample of User Survey questions for the Engagement Tracker & Generate Report features.
Key Insights
We received a total of 8 responses to our surveys. 5 responses for the tutor survey and 3 responses for the admin survey. Since there were a lot of features to cover, I prioritized getting feedback on the engagement tracker and report features.
Student Engagement Tracker
4/5 respondents found the engagement trend line graph difficult to understand and interpret.
The star rating system does not provide a way to provide qualitative observations. It also does not provide an accurate quantitative representation of how engaged the student was during a tutoring session.
Current system for tracking engagement is manual and inconsistent across tutors.
Generate Report
Current system for generating reports involves a lot of repetitive actions, manual tracking in Excel and limited data to choose from.
6/8 respondents think that customizable reports would be helpful for tracking student progress.
Admins generate reports more frequently than tutors.
[ITERATE]Improving Ideas.
Discussing with our client on how and why reports were generated also put into perspective how the feature would work. For the admin view, a “Schools” tab was added to manage information on a school-level and for admins to generate bulk reports for schools.
Low vs. Mid Fidelity Designs
Diving into mid-fidelity wireframes, our team implemented the feedback we received into our designs. We also collaborated together and established branding, typography, and our navigation/search bars to start maintaining consistency across our designs. The branding was based on OnYourMark’s existing website styles. In these next iterations, you’ll see a comparison between the low and mid-fidelity designs.
[RESEARCH]A chat with data.
As we moved along the design process, we received the opportunity to conduct a design review with OnYourMark’s Director of Data & Research, Jared Wasilefsky. Since his focus of work was on the data end of things, we directed our questions and review to designs that dealt with data management and visualization.
Key Insights
How does data interact with each other across the platform?
Think about where the data your visualizing is coming from.
The types of graphs that we use to visualize data is important to consider.
OnYourMark measures progress in three categories: Beginning, Middle, and End of the year. Including existing measures of progress is vital for successful user integration into the platform.
[ITERATE]
Tying it all together.
High Fidelity Designs
Finalizing our designs, we implemented our design system to ensure consistency across all of our screens. It was important that our product came together and didn’t look like mismatched puzzle pieces. Jared’s insights also provided us with great feedback to implement into the content and layout of our designs too.
[RESEARCH]
Putting it to the test.
UserTesting with OnYourMark Tutors & Admins.
Once our tutors were back in office, we finished prototyping our product and sent it out to both tutors and admins through UserTesting to see how they interacted with it.
Key Insights
We received a total of 5 responses from 4 tutors and 1 admin.
5/5 respondents found it easy to locate and generate reports.
It took an average of 1 minute and 40 seconds for users to generate a report for an individual student.
Their current process takes an average of 15-20 minutes. In comparison, the new system is about 9 times faster than their current one.
[DELIVER]
See how it works!
Student Engagement Tracker & Generate Report.
Check out the Student Engagement Tracker and Generate Report feature in action!
[REFLECTION]
A fruitful 16 weeks!
Impact
Once fully deployed in the 2025 school year, the Integrated Literacy Success Dashboard will support 8,000 struggling readers and 3,000 literacy tutors.
The Integrated Literacy Success Dashboard…
Serves as a comprehensive platform to support tutors in improving literacy outcomes.
Provides insights into student reading scores and identifies at-risk students.
Leverages a flexible tutor workforce for targeted reading interventions.
Challenges
We faced challenges early on with gathering scheduling user interviews to get feedback since tutors were unavailable due to the winter break. However, we were able to overcome this by creating surveys and remote feedback options instead. I also relied on asking our client for feedback during our internal meetings since she knows our users well.
A challenge I faced personally was working out the complexity of our platform and finding a place to put my features. I asked myself, is this going to be a bento box on the dashboard? But if it was, it’d be a lot of information crammed in one tiny space. It was also difficult to balance what information tutors should be able to view about students and what admins should be able to view. However, mapping this out in a flow diagram and chatting with OnYourMark’s Director of Data & Research helped me put the pieces together.
Takeaways
This was such an incredible project and team to be part of! I was inspired by meeting so many creative designers and fellow product enthusiasts. One of the key takeaways that I got from this experience was the importance of communication! Our team spans across various time zones in the US and we work on our individual features remotely outside of set team meetings. Since we only have one opportunity to touch base together as a team once a week, it was crucial for us to be checking Slack, being prepared for meetings, and leaving comments on each other’s work. Upholding this stream of communication made it easier for our team to collaborate and align on project deliverables for the week.
A big thank you to my team, OnYourMark, and Develop for Good!
View the full case study and demo!
This case study covered the sections that I designed and contributed to! If you want to see the full dashboard and case study, you can check it out below.