Embedded Files
🕑 6 minute read
Summary
Corgi is an online tool for students and teachers. The application features a set of digital graphic organizers designed to help students build higher-order reasoning skills by applying practical thinking routines.
Students begin by exploring a complex topic guided by an essential question. Then, using Corgi's thinking routines such as Compare & Contrast, Cause & Effect, or Claim, Evidence, Reasoning, they practice organizing and synthesizing the information they gather so they can build a deeper understanding of the topic while developing habits of mind.
Project details
Project title: Accelerating Higher Order Thinking and STEM Content Learning Among Students with Learning Disabilities
Timeline: 2018-2022
Funding source: National Science Foundation Discovery Research K-12 Award
Budget: $1.5 million
My role: Product design lead
Problem
Graphic organizers are a perennial favorite in classrooms. Many teachers rely on paper-based versions to help students structure their ideas and make complex concepts more understandable. But this format can also present challenges for learners, especially those who require assistive technology to access text.
Corgi set out to provide students with a digital alternative to hard-copy graphic organizers - allowing students to utilize built-in digital supports to scaffold their learning. Corgi's first iteration, completed in 2017, closely mimicked the familiar structure of paper graphic organizers. While this version showed promise in initial pilot testing, we also discovered that learners were still facing barriers when using the application.
Graphic organizers are designed to show students the big picture - they visualize a lot information at once. Some learners find that overwhelming; they have trouble parsing information displayed holistically.
For Corgi's second version, we wanted to provide a better option for those learners who needed more support to understand the big picture.
Definition
How might we...
redesign Corgi's visual layout to help students struggling with information overload when using a graphic organizer
in order to...
better support a wider range of learners with more variable learning styles
Solution
My team embarked on a major revision of the Corgi application, reworking the layout and user interface. We introduced a feature called the 'focus state' that allows each user to customize the layout of their screen according to their needs and preferences.
Students have the option to preview each graphic organizer in its entirety, then complete it step by step. For each step, a student can choose to view the whole organizer, only the step they are focused on, or a hybrid of the two. Students are prompted to select the level of support that suits them best.
Goals
Give students a flexible, customizable layout with a variety of viewing options
Chunk information so students can focus on small sections when needed
Upgrade the user interface to minimize distractions and appeal to middle school-aged learners
Provide guidance to ensure students know what options are available to them
Key screens
Students can customize how they view and interact with Corgi, optimizing their ability to understand complex concepts. The screens below display four possible ways students can visualize the same information in Corgi.
The sidebar displaying additional teacher instruction
The sidebar displaying a preview of the full graphic organizer
The full graphic organizer expanded
The sidebar hidden for focus mode
Try out the Corgi application ⮕ (requires login with your Google account)
Discovery
When I joined the CAST team in 2018, the initial pilot for Corgi 1.0 was just wrapping up. I jumped in to help synthesize the qualitative data collected from students and define a set of concrete action steps based on user feedback.
Corgi 1.0 featured a single-page layout that required students to jump from section to section to complete the graphic organizer
The following patterns emerged from the data:
A significant number of students found it confusing or difficult to follow the steps in sequence
Some routines were numbered 'out of order' and required users to jump around
Some students were unsure of what to do at each stage of the organizer
The information buttons that provided additional directions were not accessed by many students
Some students found the user interface unengaging; it did not help them maintain attention or motivation
Iteration
Phase 1
We hypothesized that providing students with a way to focus on one step at a time would benefit all students, not just those struggling with information overload.
To achieve this, we started iterating on the existing design. First, we kept the single-column layout but experimented with including additional spacing to display only one step in the viewport. Users could navigate to each step by scrolling or tapping directional arrows.
Wireframes
This revision featured a single-column layout that only displayed one step in the viewport at a time
Through internal testing, we discovered this design solved one problem but created another. While users reported being able to more effectively focus on each step individually, they lost the connection to the bigger picture. Each step became too separated and disassociated from the final product.
Phase 2
In our next design iteration, we wanted to preserve the successful elements of the previous version, while restoring a connection to the full organizer that users were missing.
We developed the addition of a sidebar that displayed the full graphic organizer. On any page in the routine, users could choose to hide the sidebar and focus solely on that step or expand it to view the organizer and understand how the step they're working on fits into the bigger picture.
We also transitioned from a single page to a paginated design so users could more easily track their own progress.
Wireframes
The addition of the collapsible sidebar in its open state
The sidebar collapsed, creating a focus state
I conducted a series of individual user tests with middle-school students. I wanted to discover whether this layout improved wayfinding and aided their ability to autonomously navigate the application.
The results were encouraging; through a series of tasks, students demonstrated that they could navigate from page to page independently with fewer errors and observed moments of confusion.
Students also accessed the sidebar with some regularity. Some preferred to keep it collapsed for the entirety of the session, while others adjusted it at each step. We were excited to see that behavior because it indicated that each student took advantage of the ability to customize the interface to suit them best.
Phase 3
Building on the success of the sidebar layout, we continued to iterate on that design and began to address the visual interface. We wanted to improve the overall tone and style of the application by making it feel more welcoming and engaging to our middle-school audience.
In collaboration with our front-end developer, I developed a design system using Atomic Design principles in Figma to support the application's reskinning. The goal of creating a design system was to allow the application to grow while maintaining cohesion and consistency.
We created a survey for students to weigh in on the color palette and logo variations for the new interface.
High-fidelity mockups
Sample screens at max-width and min-width created with our design system components
Design system
Corgi's design system is organized by Atomic Design (bradfrost.com) components: atoms, molecules, organisms, templates, and pages.
Atoms from Corgi's design system
Outcomes
Corgi 2.0 (cast.org) was released in September 2022. This application is free for students and teachers to use and has been widely adopted in public school classrooms around the country. Pilot testing is planned for the spring of 2023.
Google Sites
Report abuse