top of page

Pixelate
Twinkle Twinkle Little Notes

Date

Apr 12, 2021

Duration

2 Weeks

Target Audience

The target audience for this project includes music teachers and educators who work with children, as it can serve as a creative and engaging tool to teach musical concepts and help children with hearing disabilities learn musical instruments through visual cues. It could also be of interest to individuals interested in experimental design, digital art, and interactive media.

Team

Facilitator: Karan Dudeja, Kumkum Nadig, Syed Gowhar Andrabi

Team Members & Main Roles:​

  1. Kenneth Bhasme (Programming)

  2. Nayal Adithi (Documentation)

  3. Nidhi Surekha (Programming)

This is a group project and can be completed by designers with expertise in Experimental Design, Interaction Design and Programming.

Project Brief

This project is a thrilling journey of creativity, experimentation and innovation that brings rhymes to life for children with a preference for visual learning. Our goal is to use the magic of technology to transform musical notes into pixels. Pixels, the smallest unit of an image is what this project is based off of. The visuals engage and captivate young learners. With every note progression in the song, our visuals will evolve, creating a one-of-a-kind experience for each rhyme. For this project, we chose to work on the famous rhyme 'Twinkle Twinkle Little Star' as it motivates kids to aim for the skies. But that's not all - our project also acts as a unique learning tool for people who want to explore the world of music. By exploring the interplay between programming, experience design and experimental design, we crafted an experience that will leave a lasting impression. This project tries to go beyond traditional media and push the boundaries of what's possible.

Wooden Board

Deliverables

  • Concept Note that outlines the project's concept, inspiration, goals and expected outcome.

  • Code and programming that enables the visuals to change based on note progression in the song and enables live input options for musical instrument learning.

Design Considerations

  • Ensuring that the designs are inclusive and accessible to children with hearing disabilities and other diverse audiences.

  • Creating a cohesive visual identity that aligns with the project's goals and target audience.

  • Ensuring that the programming and code is functional, efficient, and compatible with the project's intended platforms and devices.

  • Conducting user testing and gathering feedback to iterate and refine the designs to meet the project's goals and objectives.

The Process & Outcome:

​

​

For this project, we first started with understanding what a pixel is. It is the smallest unit of an image. We brainstormed a few ideas and concepts related to pixels, like "censorship" or "larger the pixel size, lower the clarity". After much brainstorming, we settled on the idea of "the smallest unit" and started thinking about other things in our world that have a similar concept - 'Atoms' for chemical elements, 'Cells' for living organisms, 'Bits' for information, 'Musical notes' for music, etc. Now, we're not all experts in music, but we do know that musical notes are the building blocks of melodies and harmonies. However, we learned that some people find it hard to distinguish between different notes. Now that we saw a problem area, we put on our thinking caps and came up with the idea to transform musical notes into visual imagery to help such individuals or people with hearing disabilities.

Of course, we had to figure out the best tool to bring our vision to life. We initially tried creating visual animations on After Effects, but it was taking us a lot longer than expected, So we put on our coding hats and started programming. Kenneth and I took care of the coding while Adithi helped with ideating the visuals to use. We tried p5js at first, but decided to move on to Codepen because it was more our style. After many hours of coding and designing, we finally put everything together and created a magical experience of visualized musical notes and rhymes. It was like seeing music in a whole new light!

Learnings & Shortcomings

 

It's true that user-centered design usually follows a defined process, but sometimes it's important to break free from the traditional methods to really explore new possibilities. This project may have had some errors, but it was exciting to see the team explore and ideate in their own unique way. Who knows, maybe this unconventional approach will lead to even more innovative ideas and solutions! At the end of the day, it's all about finding what works best for the project and the team, whether that's following a traditional process or breaking the rules to try something new.​

Click Logo to Fly to the Top

Click Birds to Fly back Home

bottom of page