Web-based tool:
scale visualizer
The Scale Visualizer is a web-based tool designed to help students quickly and effectively learn scales on keyboard instruments (piano, xylophone, etc.). Originally conceived as a memory aid for students struggling with the keyboard layout, the tool evolved into a flexible practice resource. It can be used during instructor-led lessons or independently by students outside of class.
Audience: The percussion studio at Suffolk County Community College
Responsibilities: Instructional Design, eLearning Development, Graphic Design, UX Design
Tools Used: Articulate Storyline, Adobe Photoshop, Audacity, ChatGPT
The Problem:
Many percussion students at Suffolk enter college with little to no keyboard experience. Because keyboard skills are tied closely to music theory, a required course, students needed to master scales quickly to succeed in coursework and assessments. For this reason, a solution was needed that would:
Accelerate student familiarity with keyboard layouts.
Support scale learning as a foundation for music theory.
Improve performance on required semester assessments.
The solution:
The final solution is a stand-alone, web-based tool that allows students to see how the notes of any given scale are arranged on the keyboard. This solution was the best choice, as it can function as a tool in instructor-led training sessions, while also being available as a resource for students practicing on their own.
My Process:
I followed the ADDIE framework in early development stages:
Analysis: Identified needs through direct conversations with students and review of assessment data, which showed lower performance on scales compared to other skills.
Design: Focused on use in spaced practice and ease of access. Emphasis was placed on creating a smooth, intuitive interface to reduce friction in learning.
The first iteration of the interface design. I had hoped to be able to create a button layout that would represent the circle of fifths while still being intuitive to use.
The second iteration of the interface design. After deciding that the circular order of the buttons would be too confusing and visually jarring, I opted for a more compartmetilized design, adding border boxes to distinguish the different features. Additionally, I settled on a button layout that would still showcase the relationship between the flat scales and sharp scales.
The final design of the tool. I tightened the elements within the bounding boxes, added a slider at the bottom for another method of interacting with the tool, added a lock feature to speed up navigation between scales, and added in a tutorial.
The Final Product:
The finished product boasts a slim, user friendly design that is easy to navigate and understand. The learner is given 3 different options for interacting with any given scale. They can:
Click each note individually on the keyboard.
Press the play button to see and hear the scale played.
Click and drag the slider to see and hear the scale played.
The play button in use.
The slider feature in use.
Development: Iterated designs weekly with help from fellow instructional designers in the Devlin Peck Instructional Design Bootcamp, and music colleagues. Generative AI was also used to assess accessibility of color palettes, refine wording, and propose adjustments in formatting.
Results and takeaways:
Building the Scale Visualizer was an incredibly gratifying project, blending my skills as both a music educator and instructional designer. I am extremely happy with the final project, and it has been a popular tool thus far with learners at Suffolk.
Key takeaways:
Successfully created a smooth, intuitive user interface.
Created a stand-alone tool that can be used in a variety of settings, including individual learner practice and instructor led sessions.
Created a fully visualized tutorial for those who need additional assistance.
Created a complex build in Storyline, including over 11,000 triggers and 5,900 states.