Kaleidoscope

An educational website that engages underrepresented youth in STEAM through interdisciplinary learning that sparks wonder and curiosity about the universe. Coming soon to www.kaleidoscopeportal.com.

Challenge

The intersection of STEM, the Social Sciences, and the Arts are essential for solving the complex, global problems that we are facing in the 21st century and beyond. In addition, diversity is essential for creative problem-setting and problem-solving. Yet, women and people of color are still largely underrepresented in STEAM fields. According to US News, African Americans, Hispanics, American Indians and Alaska Natives account for only 10% of people working in science and engineering, and women account for only 28%.  The lack of relevant and appealing entry points into STEAM, coupled with the lack of role models for underrepresented youth, account for this disparity.

Concept

Kaleidoscope is a learning portal that engages girls and students of color in STEAM by revealing the universe through multiple layers of understanding: the sciences, arts, and humanities. Kaleidoscope offers a way for learners to explore the cosmos and our place in it, with awe, wonder, and a love of learning as end goals.

Audience

Middle and high school students who are traditionally underrepresented in STEAM

Timeline

September 2016 - present

TEAM

 

Prototype

 

Design Process

Initial Problem Statement

The idea for Kaleidoscope started with this problem statement, as posed by Alex during a class called Designing for Learning by Creating at the Harvard Graduate School of Education:

“80% of North Americans (and ⅓ of the human species) can no longer see the Milky Way in the night sky. I want to create a project-based learning experience that will help today’s youth engage with the awe, wonder, and humility that can come from understanding our place in the cosmos.”

We initially brainstormed ways to capture the curiosity of students through a multi-sensory, interdisciplinary project-based learning experience. We interviewed two former science teachers, Joe Reilly and Dan Susan, confirming that K-12 classrooms both lacked and were eager for experiential STEAM learning opportunities. We also came to the conclusion to design our curriculum for the 8th grade, as this grade level allowed for a relatively high degree of curricular flexibility. 

 

Learning Experience Design

Next, we mapped our curriculum onto a Google spreadsheet, which included topics such as cosmic scale, constellations and mythology, and space travel. Shortly after, we met with Allyson Bieryla, lab manager at the Harvard-Smithsonian Center for Astrophysics, for some guidance on our ideas. Based on our conversations with Allyson, as well as Joe, Dan, and other educators, we decided that the expansive scale of the universe would evoke the sense of awe and wonder we were aiming for. 

 

First Prototype

We decided that instead of a project-based curriculum that teachers could implement in their classrooms, we wanted to create something that would be accessible on a larger scale. I decided to create a web platform, and designed the first prototype on Google Slides to get a sense of how it would look and flow (view the first few slides below).

 

Pivot and New Partner

As the spring semester started, Alex and I continued to explore our passion for astronomy and STEAM in different ways. I continued to work on Kaleidoscope with a new partner, Manar Swaby, in a class called Advanced Design Studio. Alex went on to work on projects such as Moonscape and an article for Nova Education, The Potential for Awe.

As two women of color passionate about educational equity, Manar and I were interested in the ways in which Kaleidoscope could be leveraged to encourage underrepresented youth to pursue careers in STEAM. Manar and I understood that marginalized youth, particularly those from low SES backgrounds, faced multifaceted barriers like the lack of:

  •  Role models to provide mentorship and guidance
  • Access to quality curriculum and resources within school, and activities outside of school to engage in STEAM
  • Technology, such as desktop computers and high-speed Internet, to explore STEAM subjects online

Through Kaleidoscope, we wanted to create a multi-sensory learning experience that would be representative of the diversity of our target audience, while inspiring them to learn about the cosmos through an interdisciplinary lens. We created the following persona:

 

Ideation

Manar and I met with Megan Powell Cuzzolino, a doctoral student at the Harvard Graduate School of Education, who is currently researching the role of awe and wonder in learning. According to Megan, evoking a sense of expansiveness, whether it's in regards to physical or psychological vastness, was key. Manar and I set out to brainstorm how Kaleidoscope might accomplish a sense of expansiveness.

 

User Journey

We decided on three entry points and themes for the learning platform:

  1. Scale - Users explore how vast the universe is and are introduced to the concept of infinity

  2. Cosmic & Social Interwebs - Through the introduction of NASA's Golden Record and the idea that life could exist outside of Earth, as well as an activity in which users create their own golden records, learners contemplate what it means to be human both in a social and cosmic context. 

  3. Hidden Figures - Users are introduced to hidden figures in STEM throughout history, and understand their roles in advancing both science and social equity.

To keep the scope of our project manageable, we decided to develop the first two entry points for the first prototype: Scale and Cosmic & Social Interwebs.  

 

User flows

Pictured below are numerous sketches that Manar and I created, both individually and collaboratively, to develop a user flow for Kaleidoscope.

 

Graphic & Visual Design

We wanted to leave learners with a sense of vastness not only from the content of the platform, but also from the visuals. First, I developed a few different color palettes to experiment with, with inspiration from Pinterest:

 

With the Vibrant palette as a guideline, I set out to design background graphics for Kaleidoscope. Take a look at my illustrations below:

 

High Fidelity Mockups

The next step was to synthesize the curricular content with the visual interface in order to produce a cohesive and awe-inspiring user experience. Our course required us to prototype the platform via HTML/CSS/Javascript, so I created high fidelity visual assets for the prototype. 

 

Prototyping in Code

Manar built the second prototype of Kaleidoscope in HTML/CSS/Javascript with my Sketch mockups and descriptions of interaction flows as a guide. You may view the project on Github here

 

Presentation

We presented Kaleidoscope to our class at the Harvard Graduate School of Education, and received positive feedback from our classmates. We were excited to learn that Kaleidoscope accomplished our design intent of giving the audience a sense of expansiveness through its content, visuals, and creation activities. 

 

Mobile Responsiveness

I am currently working on making the platform responsive to different screen sizes, paying particular attention to the mobile experience. I am making edits to the code directly, as well as prototyping more complex interactions to inform my design as well as to communicate with other developers through Github. Here's an example of a prototype I built using Sketch and Keynote for the avatar creation experience:

 

UX/UI Review

I'm also currently reviewing the UX/UI of the entire platform, with the goal of making it more simple, consistent, and intuitive. Below is an example of how I want to change the parallax of the site. 

 

Design Decisions

Navigation

To allow users to develop a sense of cosmic scale and thereby a sense of expansiveness, we kept the vertical navigation menu from the original prototype, which allowed users to zoom out to larger and larger degrees of scale as they moved down the menu:

2nd Prototype

3rd Prototype

However, since each degree of scale contained up to several pages of content, we also needed to give users a way to navigate within those pages, and therefore also added a left and right horizontal navigation bar. 

 

Use of Embedded Content

Throughout Kaleidoscope, we also made use of embedded websites such as goldenrecord.org and trappist.one. The idea was to build upon the creative work that others have done to provoke wonder and inquiry in audiences:

 

Constructionism

In addition to navigating through degrees of cosmic scale, the two main activities we built into the third prototype are the creation of an avatar and a personal Golden Record. Through the avatar creation process, we hoped to empower our diverse student audience to envision themselves as astronauts and scientists. The creation of the Golden Record serves as the focal point of Kaleidoscope because it encapsulates the interdisciplinary and multi-sensory nature of our platform, enabling students to express themselves through music, sounds, photos, language, and even brainwaves. Through the activity of creating their own golden record, we hope that students will reflect upon their identity and place in the universe, and see how they are connected both to and within it.

The idea was that true understanding, especially of something as complicated and mysterious as the cosmos, could not be accomplished through intellect alone. By allowing students to construct their knowledge of astronomy through creation, by having a ‘conversation with the material,’ we hoped that it would allow them to develop a more personal relationship with the universe and a more visceral understanding of our place in it (Resnick, 2013, p. 165).
 

Reflection

Early in the process, Alex and I were tasked with writing a paper to reflect on our process of creating Kaleidoscope. We wrote two separate papers, and then literally cut and pasted them into one cohesive paper: 

 

I thought it impossible to illustrate our process without visuals, so I designed a visual paper, which provides more insight into the motivation, reasoning, and design decisions that went into Kaleidoscope:

 

What's next?

  1. Deployment - We hope to launch Kaleidoscope on the web as soon as possible
  2. Testing - After deployment, our first priority is to get Kaleidoscope out to a group of students in our target demographic to test the content and UX/UI elements
  3. Iteration - Based on user testing, we would like to make improvements to the user experience and content
  4. Database - We eventually want to build a database in the back-end code so that users can save their creations on the platform, and share it with others through social media. 
 

With Gratitude to:

Our professors (from left) Karen Brennan, David Kahle, and Brian Grossman

 
 

Reference: Resnick, M., & Rosenbaum, E. (2013). Designing for tinkerability. In M. Honey & D.E. Kanter, Design, Make, Play: Growing the next generation of STEM innovators. New York, NY: Routledge

Credits: Icons on this page are by Roundicons. Kaleidoscope icons were modified from designs found on Flaticons and The Noun Project. Kaleidoscope homepage illustration inspired by Tyler Nordgren. Trappist-1 background illustration inspired by this.