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.


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.


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.


Middle and high school students who are traditionally underrepresented in STEAM


September 2016 - present


  • Shasha Du: Co-Founder and Product Design Lead

  • Manar Swaby: Co-Founder and Web Developer

  • Alex Krasser: Learning Experience Designer




Design Process

Problem Statement

As two women of color passionate about educational equity, Manar and I were interested in how web and mobile technology could be leveraged to encourage underrepresented youth to become interested in STEAM, and came up with the following problem statement to guide our design process:

"How might we engage underrepresented youth in STEAM through a multimedia platform that sparks curiosity and wonder?"

The ideas behind the creation of Kaleidoscope came from a source of inspiration and an awareness of what K12 math and science education often lacks: 

  • We were inspired by the subject of astronomy and the interdisciplinary nature of understanding the universe, our place in it, and of making sense of where life comes from.

  • As former teachers and education administrators, we were aware of how prevalent rote memorization and textbook learning is in K12 math and science education

  • Therefore, we wanted to create an interdisciplinary way for youth to explore astronomy in a way that would evoke their senses of curiosity and wonder. We felt that digital technology would not only make this experience widely accessible, but that its multi-sensory and social nature would also appeal to those in our target demographic.


Understanding Our Users

Manar and I understood that marginalized youth, particularly those from low SES backgrounds, faced multifaceted barriers such as: 

  • A lack of role models to provide mentorship and guidance

  • Lack of access to quality curriculum and resources within school, and activities outside of school to engage in STEAM

Based on interviews we conducted with kids in our target demographic, we created the following Persona to understand our users. 

We also interviewed two former science teachers, Joe Reilly and Dan Susman, confirming that K-12 classrooms both lacked and were eager for experiential STEAM learning opportunities. We also decided to design our curriculum for late middle and early high schoolers, since around these grade levels, experiential learning in school becomes increasingly rare.


Access to Technology

In addition, we understood that kids in our target demographic had varied levels of access to technology, whether in the form of computers, smartphones, or high-speed Internet. Therefore, we decided early on that responsive design was crucial for enabling access through a variety of platforms. 

Screen Shot 2017-10-10 at 6.28.33 PM.png


Next, Manar and I met with Megan Powell Cuzzolino, a doctoral student at the Harvard Graduate School of Education who was 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 produce this sense of vastness, and we came to the conclusion that a focus on the massive scale of the universe would be extremely engaging for kids. 


First Prototype

To get a visual sense for how we would illustrate the massive scale of the universe, I quickly created the first prototype on Google Slides (you can view the first few slides below). The first prototype had a vertical-scroll navigational system. However, based on feedback from some initial user testing, the first prototype of Kaleidoscope did not evoke the sense of awe and wonder we were aiming for. We decided to focus on adding more interactive and creative elements, as well as uniting the aesthetics of the platform with whimsical graphics that would appeal more to younger learners. 


User Journey

Building off of the content that was developed for the first prototype, we crafted a learning journey that was composed of three themes:

  1. Scale - Users explore how vast the universe is through mathematical concepts 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, learners reflect upon their identity and contemplate what it means to be human in a social and cosmic context.

  3. Hidden Figures - Users are introduced to 'hidden figures' in STEAM throughout history, and learn about their roles in advancing both science and social equity.

While the first two themes would produce the sense of awe and wonder we were aiming for,  the third theme would address the need for diverse role models. To keep the scope of our project manageable under the time constraints we were facing, we decided to focus on the first two themes for the next prototype. 


User flows

Pictured below are numerous sketches that Manar and I drew, both individually and collaboratively, to develop a user flow for Kaleidoscope. Given the constraints of the course we were taking at the time, our initial sketches were based on designing for web.


Graphic & Visual Design

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


With the Vibrant palette as a guide, I designed background graphics for Kaleidoscope using Adobe Illustrator. Take a look at my designs 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. The course we were taking required us to prototype the platform via HTML/CSS/Javascript, so I created high fidelity visual assets for the prototype:



To allow users to develop a sense of expansive cosmic scale, 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


Prototyping in Code

Manar built the second prototype of Kaleidoscope in HTML/CSS/Javascript. We collaborated closely to translate my Sketch mockups into code through a combination of verbal and written communication regarding UX/UI elements. You can view our code on Github



We presented Kaleidoscope to our class, 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. 


Usability Testing

Usability testing has brought to light some inconsistencies in the navigational elements of our prototype, particularly with the buttons used to navigate between screens. I am currently reviewing the UX/UI of the entire site, with the goal of making it more simple, consistent, and intuitive. You can view my documentation in the spreadsheet below. Next, I plan to translate my ideas for improving the navigation and flow of Kaleidoscope into wireframes and prototypes to test on users.

Screen Shot 2017-10-03 at 1.28.09 AM.png

I also want to change the parallax of Kaleidoscope in the following way, to give users the sense that they are moving through space as they scroll: 


Responsive Design

Finally, I am working on making the platform responsive to different screen sizes, paying particular attention to the mobile experience. For simple updates, I am updating the code directly, while for more complex interactions, I'm creating prototypes to communicate UX/UI changes to other web developers via Github. For instance, here's a prototype I built using Sketch and Keynote to demonstrate an improved avatar creation experience on mobile:


What's next?

  1. Usability Testing - Our next priority is to conduct more in-depth usability testing with kids in our target demographic, to gather feedback on both the content and user experience

  2. Iteration - Usability testing will largely inform the next iteration of Kaleidoscope. We would also like to experiment with adding interactive math questions to help learners expand their understanding of cosmic scale.

  3. Database - We eventually want to build a database in the back-end so that users can save their creations on the platform, and share it with others through social media.

  4. Deployment & Application - After deployment, we'd like to collect data on how and where Kaleidoscope is most useful. For instance, are kids discovering Kaleidoscope through traditional learning environments like schools, informal settings like museums and clubs, and/or social media or word-of-mouth? Answers to these questions will help guide future iterations.



The design of Kaleidoscope is heavily indebted to Seymour Papert, who developed the learning theory known as Constructionism. In short, constructionism highlights not only the importance but the joy of learning through creating and sharing. The two main activities in Kaleidoscope are the creation of an avatar and a personal Golden Record. Through the avatar creation process, we hoped to empower diverse students 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. We hope that these creation activities will prompt learners to reflect upon their identity and place in the universe, and to 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).

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: Kaleidoscope Trappist-1 background illustration modified from this graphic.