Project type: Responsive web app design, independent study
Role: UX/UI designer
Tools: Figma, FigJam
Timeline: 8 weeks
Make it easy for teachers to access relevant data and insights about their students' performance to improve overall learning outcomes and success of the students while reducing teacher workload.
The redesigned teacher dashboard is an effective, user-friendly way to track student progress and present critical data. The addition of the Live Classroom feature and Small Groups page makes DreamBox an even more valuable tool for guiding instruction.
The DreamBox teacher dashboard has several UX design inefficiencies, such as a cluttered interface, lack of hierarchy, poor information architecture, and insufficient customization options. These issues lead to confusion and frustration. As a result, it is difficult for teachers to quickly access the information they need. It also focuses on data that is not useful for teachers leading to infrequent use of the dashboard.
When teachers log in, they're presented with links to other pages instead of key data, making it inefficient and requiring multiple clicks and steps to access important information.
On quick glance, teachers are unable to tell how many students have logged in and completed lessons.
This graph has a low readability due to its poor design and does not effectively communicate information to the user. The color choices within the graph are also unattractive and do not enhance the overall user experience.
In my research, I discovered that teachers want quick access to vital student information. They also want to efficiently view data to address any learning gaps in the classroom. The redesigned dashboard includes features, such as the Live Classroom and Small Group pages, that allow teachers to easily manage their classroom and reduce workload through effective small group instruction.
I built the Live Classroom feature to allow real-time monitoring of student engagement and progress, improving classroom management and accountability during small group instruction.
The Small Groups page reduces teacher workload through easy identification of students in need of specific standard support, as well as sample lessons.
Live Classroom data is pinned to the top of each page of the dashboard for easy access, so teachers can monitor students even while they’re working with small groups.
The student card on the Live Classroom feed was designed with clarity and simplicity in mind, presenting teachers with only the most crucial information they need to effectively monitor their students' progress. These details are easily recognizable through consistent visual elements such as a color banners, text, icons, and symbols.
Small groups are automatically created for teachers, reducing planning time. By clicking on the lesson button, teachers can watch how the standard is being taught to students on DreamBox. The practice button generates a worksheet or lesson plan for small group instruction, which helps in reducing prep time for teachers.
I conducted a research study with 15 teachers. This included conducting interviews and surveys to gather their feedback on various teacher dashboards across different learning platforms, and observing them while using the DreamBox teacher dashboard to identify areas of difficulty or frustration. The main objective was to pinpoint pain points and areas that would improve the overall user experience for teachers.
I recreated the sitemap to help me identify areas for improvement and prioritize features that were relevant and important to teachers. I determined which pages required full development based on the key issues highlighted by teachers during user interviews. My goal was to optimize the navigation structure to enhance the user experience for teachers, increasing engagement and ultimately, leading to more conversions when using DreamBox.
Throughout the wireframing and prototyping process, I continued to gather feedback from users and product designers, making adjustments to the design based on their feedback. This ensured that the final product was user-centered and met the needs of the target audience.
Tabs that look like the folders that teachers use in the classroom.
User Feedback: Teachers liked the way it looked visually and thought it was easy to navigate. However, I discovered that ensuring consistent navigation across devices and implementing responsive design could be challenging.
Iterating design to create a simplified card that included all key data.
User Feedback: Review the hierarchy of content within the cards and address accessibility concerns related to using colors without symbols to represent data.
Finding ways to show all content on a smaller screen.
User Feedback: Live Classroom data was too small and difficult to read.
The iterative process was fundamental to this project, as it allowed for the refinement and improvement of the product based on user needs and feedback.
Each component, like the live classroom bar and the student card, is intuitive and displays only essential information that is useful to teachers. The end result is a dashboard that is optimized for usability and efficiency, helping teachers to more effectively target instruction and fill gaps in student learning.
Initially, my familiarity with the product led me to approach design with assumptions based on my own usage. I had to shift my perspective from that of a teacher and regular user of the product to that of a UX designer focused on fulfilling user needs. Engaging with users through surveys, interviews, and usability tests revealed diverse perspectives and pain points I had overlooked. Embracing these insights, I adopted iterative design and continuous feedback loops to refine the product. This process highlighted the importance of empathy and user research, ultimately leading to meaningful enhancements that resonated with the diverse user base.
A significant challenge in this UX case study was addressing the diverse needs of a varied user base. The product had to cater to both novice and advanced users, which required designing an interface that was intuitive yet powerful. To tackle this, I conducted detailed user segmentation and created personas representing different user types. Through targeted usability tests and feedback sessions, I identified specific pain points and preferences for each segment. By iteratively designing and refining features with these insights, I was able to develop a flexible interface that balanced simplicity and functionality.
Designing for accessibility while incorporating bright, classroom-inspired colors and adhering to existing brand guidelines was a significant challenge in this UX case study. My aim was to create an engaging interface that reflected the lively atmosphere of a classroom, without compromising accessibility for users with visual impairments. Balancing these requirements, I carefully selected color combinations that met accessibility standards for contrast while maintaining the brand’s vibrant palette. I also used icons and text labels to convey information alongside colors. This experience highlighted the importance of inclusive design and demonstrated that, with thoughtful planning, it is possible to create an interface that is both visually appealing and accessible, while staying true to the brand’s identity.
