Presented By:
Erik Soriano
Role:
UX designer
Developer
Timeline:
2023-2024
Tools:
Figma
Unity
Adobe Illustrator
As the vinyl spins, cracks, and grooves, it's no longer a record; it's a ceremonial sojourn.
Music transcends its audible nature; it's a sacred ritual, a timeless celebration, resonating with life's symphony, inviting reflection and provoking the soul.
Summary
Over the span of two four months, I embarked on a journey to pioneer a VR learning experience tailored for younger generations, with the aim of fostering appreciation for vinyl records and tracing the origins of music technology. Informed by user research insights, I utilized Unity and the XR Interaction toolkit to develop and refine a prototype, conducting rigorous testing to enhance usability and ensure an engaging educational journey.
Promo poster for conference/event submissions.
Project Goals:
Educate users on vinyl records and gramophones history.
Inspire appreciation for vintage music and technology.
Create an engaging learning experience with music playback and genre discovery.
Target Audience:
Gen Z
Millennials
Users who have limited knowledge of record players, analog music and VR
Problem Statement
Amidst a lack of appreciation among younger generations for the historical significance of vinyl records and gramophones, hindered by costly access to such technology, an opportunity arises to revolutionize teaching and learning. The rise of VR and emerging technologies offers accessible and engaging experiences. As VR becomes increasingly prevalent, it unlocks innovative learning opportunities.
How might we
create an engaging educational experience for younger generations, revealing the gramophone's impact on music innovation and guiding virtual exploration of early 20th-century scenes for a vivid connection to the past?
User Research
Research Methods
Online Survey ( 15 responses)
Usability Tests (with 4 participants)
Secondary Research:
Design Precedents
Insights
Users are interested in learning how gramophones work mechanically without electricity
Users know the basic concept of vinyl records, but may not know the differences in speeds and implications in playback
Users are open to a learning experience in VR, it it was easy for beginners with no prior XR experience
But…What is a Gramophone?
To grasp the nuances of a gramophone, essential for my VR project, I turned to Google and YouTube. Through extensive research, including watching numerous videos on gramophone operation and repair, I ensured accuracy in my virtual representation despite lacking direct access to the vintage technology.
Mechanical sound reproduction device.
Featured a large acoustic horn for amplification.
Played shellac records at 78 RPM.
Hand-cranked for power.
Used a needle and cartridge to read sound waves.
Provided limited sound fidelity.
Often adorned with decorative designs.
Significantly impacted early 20th-century entertainment.
Precursor to modern record players.
Images showing secondary research about gramophones. Source: https://www.youtube.com/watch?v=d8UE4R_5o9c
Research continues…
After gathering all the essential information about early gramophones and vinyl records, I synthesized my findings using Figma. This allowed me to create a comprehensive reference point and design questions, serving as my North Star throughout the project development process.
Explorations in Unity
Early prototype testing hand tracking vs VR controllers. The goal was to be as accessible as possible, and leverage haptic feedback. Ultimately we decided to use VR controllers.
Originally the experience was going to be either fully black and white or color, I decided to use both and let users choose. This decision also made the experience accessible to color blind people. and went well with the red, gold and black UI palette.
When building the internal machine, I sent countless hours researching YouTube videos of people repairing and cleaning the gears and learn what where the most important ones to describe to players.
The Solution
Introducing Sonidify XR: Gramophone - an immersive journey into early music technology. Users explore a fictional Art Deco-inspired location, engaging in four learning modules covering vinyl record types, gramophone setup, machine workings, and an overview of the music recording process.
The experience’s rotating platform feature to navigate between modules is inspired by Disney's Carousel of Progress.
The narrated storytelling that compliments the interactive elements, and guides the player is inspired by the VR experience: Traveling While black, and the real-world location: Salem Witch Trials Museum in Massachusetts.
Features:
Interact with a gramophone and learn setup steps for music playback, using an optional tutorial panel, or curious players can jump right into it alone.
Interactive elements: audio buttons, pop quizzes after each module, and info panels, a metric to assess learning outcomes.
Ability to shrink and explore the gramophone's internal workings, learning how it works mechanically.
Music playback: Listen to various 78rpm records from the early 1900s. Plus ability to switch between black and white and color mode, for a true vintage experience.
User Flows
Since my experience was a tour, it involved several tutorials for users to learn and interact with elements
Modules 1, 3 and 4 were non-linear since user could select information to listen to/read in any order
Module 2 had to be linear since it involved all the steps needed to set up a gramophone, and shrinking to go inside, etc.
These task flows show the happy path for users
Example flow shows the steps to set up the gramophone, as user learned them 1 step at a time - using the reference tutorial panel.
Style Guide
Inspired by Art Deco design from the 1920s-1930s
I chose colors that would translate well to grayscale (since one of my features involves switching color modes for users who want a vintage aesthetic, but also color blind users)
Inspired by
Art Deco
In my VR world, the 1920s-1930s vibe naturally led me to Art Deco; it just made sense. I knew what I wanted. Research helped me grasp the style, allowing me to create a UI that resonated with the environment design. I envisioned users feeling as though they were in a fancy lounge, a luxury hotel, a or a stage—that was my goal.
(Click on the images to enlarge)
User Testing
Apparatus
Meta Quest 3
VR Controllers
Usability Testing
5 moderated, in-person tests were conducted over a week
All participants completed the experience until post credits
They all expressed a good user experience, and praised the intro VR tutorial being pivotal in understand how to navigate the experience; no help was given by the researcher to avoid bias
Small issues included multiple audios playing simultaneously, and the speed of shrinking/growing being too abrupt
Suggestions included ability to ‘grab’ records, making audio narration shorter, and include subtitles alongside the audio
All participants learned basic knowledge of gramophones, records and expressed interest in exploring future iterations and desired more content
Participants during a moderated usability test. Little to no guidance was given, and they were able to complete the experience with minimal issues. All participants consented to being recorded and have their photo used for this case study.
Changes after Usability Test
Implemented a pop quiz mechanism after each learning module to help user solidify knowledge
Will introduce closed captioning to go alongside audio clips for users who prefer to read more then listen
Demo Video
Reflection
This project was a captivating challenge for me as a UX designer, as it pushed me to explore VR as a novice, allowing me to understand firsthand the learning process my user group experiences. As a music enthusiast, I poured passion into every detail, gaining a deep appreciation for gramophones and the music of the 1920s-1930s. Throughout the journey, I learned the delicate balance between accessibility and innovation, opting for traditional controllers with haptic feedback to ensure usability for all users. Additionally, I made the deliberate choice to create a fixed experience with a rotating platform, prioritizing focus on the learning modules. Looking ahead, I'm excited to iterate on this project and explore new chapters, such as XR cassette and XR CD, and XR iPod, each one trying a new way to navigate (not rotating necessarily). I plan to continue exploring projects that intersect technology and music.
Next Steps
The next steps involve continuing usability tests on XR Gramophone and submitting it for conferences or VR shows. Following that, I will begin working on the XR Cassette chapter.
Before you leave…
Check out this playlist I made that kept me inspired during this entire process. Why not?