Innovating a Classroom Research Tool

As the design lead for Cultivate, a UChicago Impact tool that analyzes how teaching practices influence student outcomes, I guided the team in synthesizing research into actionable insights, while enhancing site organization, user engagement, visual consistency, and ethical data comparison.

Client

Cultivate - UChicago

Deliverables

Product Design, User Research, Interaction Design, Prototyping

Role

Design Lead

Summary

Cultivate, a tool from UChicago Impact, analyzes how teaching practices influence students' attitudes, strategies, and academic performance. It offers educators insights into 5th-12th graders' self-perceptions and highlights key factors in the learning environment that promote strong mindsets and well-being.

The Cultivate team aimed to boost user engagement and improve the organization of their site’s extensive content. While the platform provided valuable information, it required better access to key interactions and enhanced design consistency. Additionally, we addressed the challenge of ethically comparing student data groups, ensuring the analysis was unbiased and responsible.

As the design lead for this project, I directed the team in synthesizing research into essential insights, personas, journey maps, and guiding principles. I also played a key role in ensuring visual consistency, facilitating ideation sessions, designing wireframes, providing consultation, and creating prototypes.

Key Issues

· Users find difficulty in locating relevant information in a complicated user flow.

· Distracting interactions and nuances result in longer times to reach key actions.

· Diagrams are difficult to navigate and limit meaningful comparisons of data.

Screenshot from the original product.

Problem Space

Organizing and collecting students' mindsets in grades 5-12 is essential for enhancing classroom communities, as it enables educators to understand individual learning needs, promote collaboration and empathy, and tailor instructional strategies to foster a supportive and inclusive environment that boosts engagement and academic performance.

Restructuring User Flow

It was important to restructure the information architecture because the initial scrolling infographic style, which the client originally preferred, wasn’t ideal for efficient user navigation. While we had proposed an inquiry-driven model, the final design became a thoughtful compromise between the two approaches. This allowed for both engaging visuals and a more intuitive flow of information. By implementing a funnel-style structure, we guided users from broader learning conditions down to specific metrics. This approach helped users reach the exact information they needed more efficiently, avoiding the confusion of scattered metrics throughout the site.

Representation of original architecture

Proposed funnel-style architecture

Using this approach, we designed a landing page that allowed users to first choose the learning condition they were most interested in, a priority identified through user studies. The landing page presented the various learning conditions with an overall score, along with key snapshots on accuracy and dataset size. These insights helped users quickly understand the state of each condition and focus on the area needing the most improvement based on the data. By enabling users to dive into the most relevant areas, we streamlined the decision-making process and made the data more actionable.

Re-designed Cultivate Landing Page

Early Wireframes

Before establishing a cohesive layout and design system, we developed mid-fidelity prototypes to test usability with both users and the client. These prototypes allowed us to gather valuable feedback on the functionality and flow of the design, ensuring it met user needs and aligned with the client's expectations. This iterative process helped refine the final design.

Learning Condition Landing Page

Learning Condition Analytics

Mindset Appendix

User Testing

During user testing, several instances of confusion emerged. To address this, we created detailed user flow diagrams that clearly highlighted the key problem areas. These diagrams allowed us to collaborate effectively with the client, pinpointing issues and developing targeted solutions. This process ensured a smoother user experience by resolving potential pain points early on.

Data Visualization Iteration

A major challenge was developing a system to accurately compare various datasets across different groups such as class subjects, grade years, and demographics like race, gender, and fiscal status. We also needed functionality to toggle between graphs comparing data for the current year and those comparing this year to the previous one. Additionally, the client required that multi-variable comparisons between demographics, such as race and gender, be avoided. To address this, we used tabs to distinguish between data that could be compared and data that could not. This solution, refined through multiple iterations of testing and client feedback, resulted in an effective system for managing and comparing the data, as illustrated in the figures below.

Early Design for Disaggregation Data

Early Design for Disaggregation Data (Single-year vs. Multi-year toggle)

Multi-year Disaggregation Visualization

The end result of this iterative process was the implementation of a thermometer-style graph and a data table for comparing data within a single school year. For multi-year comparisons, we utilized two line graphs that allowed users to hover over specific lines to gain more insights into data comparisons. This design not only made the information visually engaging but also provided users with interactive elements to explore the data in greater detail.

Final Current-year Graph

Final 2-Year Graph

High-Fidelity Wireframes

Once we established the optimal user flow, we developed clean, consistent, and professional styles for the final wireframes. This involved a blend of existing branding assets from Cultivate's previous site and general styling guidelines from the University of Chicago. By integrating these elements, we ensured that the design was not only visually appealing but also aligned with the institutional identity.

Cultivate Landing Page

Learning Condition-specific Analytics

Additional Mindset Data Pop-up

2-Year Comparison Graph

Developer Handoff Specifics

Prototyping

The prototype was crucial throughout the design process for demonstrating how the redesigned interface would improve user engagement and content organization, providing a tangible representation of the proposed solutions. It allowed clients and users to interact with the design early on, enabling feedback and iterative improvements to ensure the final product met their needs and expectations.

View Prototype

Delivery

To ensure consistency, we provided developers with clear styling guidelines and detailed representations of various states for interactive elements. This comprehensive documentation helped maintain the design integrity throughout the development process, ensuring that all components functioned as intended and adhered to the established visual style.

We delivered the final designs to the client with a comprehensive handoff. The design package included detailed layouts, interactive prototypes, and thorough documentation to guide the development process. We added extensive notes and recommendations to ensure that developers could accurately translate the design into a functional tool, with special attention given to maintaining the user experience and interaction flow. This approach helped facilitate a smooth transition from design to development, ensuring alignment with the project’s goals.

Screenshot from Developer Handoff

Additional Materials

In addition to the interactive designs, we created a downloadable PDF document that provides a printed snapshot of the data available throughout the site, tailored specifically for each school. This feature allowed users to easily access and share key insights offline. We ensured consistent design decisions between the PDF and the digital interface to maintain clarity and a cohesive user experience across both formats.

Data Overview PDF

Thanks for viewing!

Check out some of my other projects.

Zenpals

Next Project

DOn't be shy, Let’s Work!

I'm available for freelance, contract work, and full-time employment. Reach me at evanoneil26@gmail.com

contact