.png)
Xun Music Box
A music box and tablet interface for children to send delightful tunes and messages to their loved ones.
Team
My Role
UX Design
UI Design
Visual Design
Web Development
Tools
Figma, Miro, HTML, CSS, JavaScript, jQuery, Bootstrap, GitHub, p5.js, Audrino, Adafruit Circuit Playground Express, MakeCode
Deliverables
Co-Design with Kids
Digital Prototype
Physical Prototype
Concept Video
Timeline
10 weeks
Jan to Mar 2021
Why I love this project:
The Xun Music Box gives kids a sense of ownership and independence in their relationships, and reassures them that people they love can be there for them even if they are physically apart.
Design Challenge
How might we help kids nurture their social connections and creativity during the pandemic?
This project took place during the height of the pandemic, from January through March 2021. Having been in lockdown for over a year, the light at the end of the tunnel still seemed far away. Everyone, including school aged kids, was suffering from isolation and near nonexistent social outlets.
Our design brief was on mediating intimate connections via interactive technology that combines the digital and physical to enable kids to communicate and feel connected in new ways.
Image by @anniespratt on Unsplash
Research
How do kids and adults currently communicate while separated?
Research Overview
Family video calls are the most common way of communicating during the Pandemic. Image credit: https://theeverymom.com/family-zoom-call-tips-for-kids/
Subject Matter Expert Interview
Certified child group leader for social skills group in educational and clinical settings. MS in educational psychology
COVID Impacted Families
Talked to families with children in preschool and elementary school about how they are coping during the pandemic lockdowns
Competitive Assessment
Conducted review on academic design research facilitating connection as well as commercial products
Literature
Review
Coping, communication, and effects of distanced families, development of children aged 7-11, impacts of COVID on families
Research Insights
[1] Kids did not initiate contact
In situations where kids are separated from people they care about, kids did not initiate communication with the people they wanted to connect with.
[2] Caregiver Facilitation
For kids to communicate with others, they would need to ask a caregiver to facilitate a conversation. (If the caregiver was too busy, they were out of luck.)
[3] Social Growth for Kids (7-11)
Pandemic lockdowns negatively impact social emotional growth and development, especially for kids aged 7-11 since they are seeking independence and also validation from peers and adult rolemodels.
[4] Creative Outlet For Coping
During the pandemic, people look to positively channel the time they aren't doing social things into creative hobbies (i.e. knitting, baking, music, etc.) which also eases stress.
-
Research on children 7-11
-
Research on separation and COVID in families
-
Got perspective from friends with kids and instructors
-
Set up and run interview w/ SME specializing in childhood communications
What Joan did... ^
Design Principles
We created design principles from our research insights, to keep them front and center whenever we were designing.
Whimsical
and Fun
A getaway for people to enjoy themselves while also finding connection and adding positive vibes.
[Insight 4] Parents I talked to said kids would get bored at home all day during the pandemic and that the kids need social and creative outlets.
Kid-First Relationships
Take a kid-first approach to relationships, thinking first from the child's perspective and wellbeing.
[Insight 3] Parents said kids' relationships fell to the wayside and they had to facilitate conversations with relatives, family friends, and school friends.
Independence and Ownership
Let the kid have control of their own relationship, initiating contact when they want to.
[Insight 1, 2] Kids often don't have direct outlets to have ownership of their own relationships. How do help facilitate a child's ownership of their relationships?
Cross Generational
Allow adults to participate with the kids, since adult interaction is where most children get validation.
[Insight 1,2] Children need adult validation that what they are doing is right. That is why they need to show us things they made or demonstrate things they know how to do. Is this possible to do remotely?
Concepting
Created 20 initial concepts from research and design principles.
We each used different concepting methodologies. I started out with very quick concept sketches (crazy eights) for a few sheets of paper, and then combined and refined down. Then I shared the concepts and my thought process with the team. We downselected to 20, then 10, then 1, based on how well each reflected our design principles.
.png)
Our team's concept sketches.
Concept Selection
We selected Music Box for its feasibility, potential for impact, and alignment to our design principles.
The downselection process:
-
Combining concepts and recreating concepts
-
Reflecting with industry partners + instructional team
-
Dot voting with our cohort and our team
-
Best rating on our decision matrix (see below)
Assessment:
-
Music Box had the most feasibility within the capability of our team.
-
Our potential for impact was measured with charting each of the concepts as aligned to our design principles.
.png)
The initial idea of Music Box was a box with a speaker and a button for the parent, and the kid would use their app to make a melody and then send it to the box. The light on the box would blink, and the parent would press the button to hear the song.
.png)
-
16 quick concept sketches
-
Self downselection
-
5 narrowed concept sketches
-
2 more thought out concept sketches
-
Discussions on narrowing
What Joan did... ^
Matrix to help us downselect with concepts on the left column, feasibility, and our design principles with ratings. Music Box clearly had the highest rating, and it was the clear choice since Friend Frame was not feasible.
Experience Prototype Video
Validating the experience concept for Music Box with KidsTeam
What we want to learn from KidsTeam with prototype:
-
How would kids react to the overall experience?
-
Would kids like making music on an iPad?
-
If the kids would want to share the music they made and with who? What kind of music? Would it matter how many times that person listened?
-
Any emotions or issues with making music?
-
-
Test form factor, how kids would react.
In wanting to validate the overall experience and basic concept, we decided to make an experience prototype video to give the kids a sense of what the product was and how it worked to get feedback.
In order to do this we'd need:
-
A digital prototype for the iPad interface
-
Physical prototype of the box
-
Storyboard, actors, videography for the video
.png)
Ethan (my son, starring in the video) is behind the scenes working on his iPad pressing.
Step 1: Digital Prototype (v1.0)
Figma UI prototype used for the experience prototype video
Considerations from industry partners:
-
"Feedback" and how the child would know how the music was being received by the recipient.
-
To address this, we added a home page that highlighted whether or not the person was listening now and how many times they listened.
Hypothesis:
-
That the interface is fairly straight forward as a music pad and wanted to validate that it made sense.
-
See if the listen count resonated with kids.
-
If the count could bring any unintended emotional or psychological if they saw that no one was listening to their songs, but a friend had lots of listens.
-
-
Took less than a day to make, familiar w/ kids apps
-
Created this prototype in Figma as a concept for the music box app to use in the first video.
-
Tested with my son, Ethan
What Joan did... ^
Ethan was the first tester for the prototype since he was the star of the video. At first glance, he was quite excited when he saw the prototype and engaged with it as if it were a real app. Unfortunately, there was no functionality yet, but his correct assumptions gave me reason to believe we were on the right track with the UI.
.png)
.png)
V1.0 for the keyboard included keys corresponding to the Circuit Playground Express's tones and a line that worked as a metrenome that corresponded to the slow to fast dial at the bottom of the screen.
V1.0 home screen for the Music Box UI featuring the colored squares as a preview for what notes were included in the song and number of times your recipient listened to your song as feedback for the kid making the music.
Step 2: Physical Prototype (v1.0)
Cardboard prototype with CPX inside used for the experience prototype video
In this version, kids would decorate the DIY music box, put special things inside to give to a family member, and then send music to the family member through the box.
Hypothesis:
-
What do kids think of the music box as a gift to someone they care about?
-
Kids might really enjoy making a DIY music box to be able to express themselves in a visual sense as well as with music and be validated.
-
Made it low fidelity for the "sketch" effect, so kids could come up with their own ides about what the music box should look like.
V1.0 was a DIY kit music box that kids would get and decorate themselves and put special things inside to give to a family member. After giving the box, the kid would create the music, and then send it to the music box. To see it work, watch the concept video in the next section.
Step 3: Creating the Experience Prototype Video
Demonstration of basic product concepts for feedback; uses physical, digital prototypes (v1.0).
Hypothesis:
-
We think that some kids like music more than others, and if we get kids that don't like music as much, then we may not have our target audience.
-
If we do get our target, we think by showing the experience, the kids will be able to tell us more about what they would do and prefer.
Feedback from instructional team, industry partners:
-
Thinking about how the adult might be able to navigate to different songs from the box, if they'd have a companion app, if the adult can respond to the child via voice, and if they can keep all the songs.
-
Maybe the angle would be one of nostalgia, the music box could be a high quality item that keeps the child's younger voice and music they made as a time capsule in addition to being a form of connection.
.png)
Quick, lo-fi sketch storyboard for the Experience Prototype Video
Music Box Experience Prototype Video:
[1:41 min video] Music Box Video: kid customizes a music box, gives it to the parent (me), and then gets on their iPad app and sends music to the parent with the music box.
-
Created Music Box low fidelity video in a day and a half.
-
Concept and storyboard for video
-
Cardboard prototype with Circuit Playground Express
-
Figma UI prototype for iPad
-
Directing, videography, editing
What Joan did... v
Step 4: User Testing on Experience Prototype Video
Co-Design Session #1 with KidsTeam testing Experience Prototype Video
.png)
What is KidsTeam UW?
Kids Team: professor Jason Yip, PhD Students, undergraduate students, MHCI+D students (us), and kids aged 7-11.
Agenda:
-
1 hour session, 4 kids accompanied by researchers
-
Introductions to the kids, chat
-
Show experience prototype video
-
Co-Design: take questions, discussion, ask kids questions, idea share-outs
-
Creating music activity
-
Discussion
-
Wrap up
-
Talked to Wendy (KidsTeam researcher) about how to work with KidsTeam over Zoom
-
Worked with Leyla to do the slides presentation and set up activities for kids
-
Facilitated a KidsTeam discussion with 5 kids, then facilitated smaller group when time for breakout rooms
-
Debrief with KidsTeam, Leyla, and our team after
What Joan did... ^
We Asked...
-
About who they currently talked to and what their social situations were like
-
Who they'd share the music with, give a music box
-
How they felt about music
-
What they thought of the experience of the music box and if they'd envision themselves using it.
-
How they'd decorate their music box.
Insights from Experience Prototype Video
The pandemic had been very isolating for the 4 kids we talked to.
.png)
My KidsTeam breakout group with two kids. Their cameras were off most of the time, and one was more interactive than the other. My other teammate was conducting another concurrent breakout group with another two kids.
Insights
.png)
Affinity diagram of quotes to gather main insights.
Context Insights
-
Lonely during the pandemic, wants to see friends and extended family
-
Products need to be fun and engaging, take them away from the monotony of the pandemic
-
Tired of being quarantined with siblings and parents
-
During the pandemic, people may use music to relax, unwind, and get a feeling of freedom of expression.
-
Parents of kids are busier during the pandemic with needing to take on both full time parenting and taking care of the kids. This leaves kids to fend for themselves in another part of the house by themselves or with siblings.
-
Because parents are so busy, they are not available to facilitate zoom calls with friends and relatives as often which leads to more isolation for the kid.
Concept Insights
-
Reflects values based on expressing themselves
-
Customization (for themselves and others)
-
Wanted lots of different shapes of the Music Box to be able to customize for people
-
-
Creating music was both relaxing and exciting based on what they needed it to be--it was flexible
-
Needs options for people not good at making music
-
Some people are just not into music
-
For kids more into singing: voicing over a song
-
For kids that just like making music for themselves: having a personal song repository
-
Needs ways for different kids (or different moods) to communicate. With or without voice, whether they are feeling confident or not, lower barrier to entry, or allow for more creativity when they are feeling more creative.
We learned a lot and felt great about both the concept and context insights we were able to get from showing the experience prototype video (v1.0) to KidsTeam to build out version 2.0.
Physical Prototype (v2.0)
Concept Refinement Testing with Wizard-of-Oz
The goal of this prototype is to test interaction and form factor with users.
Hypothesis:
-
If the user would gravitate to a certain form factor
-
How the user will react to a song playing when they open the box
-
Intuitiveness of box changing colors in the four different states (new message, music playing, recording, and message sending states.
-
Whether our music box’s physical design is easy to use, fun to interact with.
-
How the song recipient will use the music box to send a message back to the individual that sent the song to them.
-
If there is adequate feedback to suggest that the device is recording during a certain period and when it is not recording.
.png)
Box with a space inside for the iPhone (connected to Zoom).
Why Wizard-of-Oz?
We chose the Wizard-of-Oz method because it would allow the user to experience the tactile feel and functionality in person without us actually going through the time and expense of actually building it out.
Insights from Physical Prototype (v2.0)
The adult perspective and engagement on the shape and function of the music box.
Insights:
-
Clarity in commands - if using physical buttons, they should be really clear without needing explanation. Consider color references in cultural settings.
-
Smaller device - even with adults, they felt the current size was too large and unnecessary. Can assume children may want it even smaller.
-
Customized and personal songs shorter in length - standard songs less impactful in this setting.
-
Lean in to low tech - There is a nostalgic value for this device and its important to lean into that energy.
-
Sleek/modern like an Apple product.
-
Easy to learn
-
Delight with color and sound
-
Since Nathaniel and Roz were not as interested in coding the digital prototype, they took full ownership of this portion of the project and kept Leyla and I in the loop while we started working on the digital prototype.
-
We felt that this was a better use of our time since we were in the remote context, each taking on more ownership of each piece to be more efficient.
What Joan did... ^
[5:30 min video] Shows the WoZ process and the reveal at the end.
.png)
Closed view of the physical prototype (v2.0)
Interaction Design
Mapping out key flows and actions
As we were getting into our 2nd and final revisions, we wanted to map out the device's interactions in order to align on the interaction of the design and be able to easily explain the concept for feedback.
.png)
Brand Alignment
I designed and facilitated a team workshop for brand alignment, so we could be in agreement and stay consistent moving forward.
Similar to aligning on the key flows and actions for our 2nd and Final revisions, we agreed it was also time to align on branding guidelines. I designed a workshop for my team consisting of two, two-hour meetings where we spent time collaborating on Zoom and Figma to find inspiration together, discuss our selections, and align on look and feel for the project.
After we completed the brand alignment workshop, I took into account what we had agreed on, what everyone had said and voted for during the workshop, and created branding guidelines for everyone to follow.
-
Facilitated and planned the design workshop including timing and Figma board.
-
Got alignment for look and feel for both the physical and digital prototypes, voice of the product, and values.
-
Created branding guidelines for the team to follow.
What Joan did... ^
Send a Song Interface
Digital Prototype (v2.0)
Built to test the interaction of the product with KidsTeam
Live working prototype coded from scratch with HTML, CSS, JavaScript, jQuery, p5.js
We decided to build a live working prototype because of the sound element and level of interaction we wanted to test.
Hypothesis:
-
Hoping that having 3 ways to communicate would make the barrier lower.
-
Send a song: for kids that weren't feeling so creative or weren't able to make a certain sound.
-
Record: multipurpose, maybe to send voice, music, or other sounds.
-
And a simplified create a song interface to get the basic point across.
-
-
Send a song: we wanted to know what other kinds of songs they might want to send.
-
Create a song: we wanted to know what other functionality kids might want.
-
Record: wanted to understand what kinds of things kids might want to record and send.
Parking Lot:
-
Personal song repository, doesn't promote togetherness
-
Voicing over a song, too difficult to prototype at this time
Record a Message Interface
[34 sec video] Some kids said that they might feel self conscious sharing their own music with people, so we added a library of music to test.
Create a Song Interface
[20 sec video] We were excited to build this keyboard because it was the center of functionality for creating and sharing music. We quickly realized our programming skills were not able to code everything we wanted, but at least we'd be able to test basic functionality with the kids.
[14 sec video] Kids wondered if they could talk back and forth during after watching the prototyping video, so we added a place to record voice to see what kind of messages kids might want to share with their loved ones.
What Joan did... v
-
Collaborated with Leyla on GitHub
-
HTML, CSS, JavaScript, jQuery, p5.js
-
Implemented buttons, form elements, faked sends
-
Implemented the "Send A Song" page. Created the song carousel with JavaScript
-
Implemented the "Record A Message" page which led to the discovery of how to use p5.js without needing to use their editor and installing it on our page. I showed Leyla, and she was able to then use it to finish out the keyboard feature.
-
We both have a deeper appreciation of developers now.
User Testing on Digital Prototype (v2.0)
Co-Design Session #2:
Testing the Digital Prototype v2.0 with KidsTeam
-
Handed the digital prototype off to Nathaniel and Roz to test in the second co-design session with KidsTeam.
-
Gave Nathaniel and Roz additional questions to answer with KidsTeam about the digital prototype.
-
Watched the KidsTeam session afterwards, took notes, and created a Google Slides summary of our insights with Leyla.
What Joan did... v
The goal of this co-design session was to test the digital version with KidsTeam.
Agenda:
-
1 hour session, 4 kids accompanied by researchers
-
Introductions to the kids, chat
-
Show Low Fidelity Concept Video
-
Take questions, discussion, ask kids questions, idea share-outs
-
Creating music activity
-
Discussion
-
Wrap up
We Asked:
-
Record a message to your mom or guardian
-
Create a song to send to a music box
-
Send a pre-made song to a music box
-
Who they'd share their music with and how
-
If they liked/disliked about the instrument (digital prototype) and what they'd do to improve it
.png)
Even with all of their kids having their cameras off, we still got a lot of good feedback from them.
.png)
Demonstration of the digital prototype and then distributing the link for the kids to respond to.
Insights from Digital Prototype (v2.0)
The prototype was fun for the kids to get their hands on and play with.
As soon as the kids got their hands on the website link, we knew that coding the digital prototype from scratch was worth the extra time and effort to give them the basic interactive experience. Here are their main insights:
-
Wanted to be able to change the tempo
-
Have longer and shorter notes
-
Know what the notes were
-
Have a wider range of notes
-
Access to different instruments instead of just one
-
Being able to record their voices into the song
-
Wanting to layer the music
.png)
Simple questions was best for kids to have free form answers.
"I think it'd be good if I could change what sounds it could make"
- Participant A
"You can't do notes on top of notes in the same place like my other game...Magic Tiles 3."
- Participant B
High Fidelity Digital Prototypes (Final)
Taking insights and making them a reality.
I was tasked with the high fidelity version 3.0 of the UI of the prototype in the final weeks of the project. Since the kids were comparing it to games that they liked better, I researched those games to get inspiration as well as make sure our UI was staying competitive with the others and understanding what visual bar those games were setting and what look and feel kids expected and were used to. I maximized the saturation of the colors to give the feeling of energy, vibrancy, and fun. This look and feel can be definitely be taken further, and it'd be fun to do some more design research and testing to see what kids like best.
I also worked on a Design System for the Xun Music Box, click on the link below to see it.
-
I had the pleasure of complete ownership of the entire UI and design system for the final version.
-
Took inspiration from sound apps and games
-
Updated and extended the design system
-
Built out several clickable prototypes for the final concept video.
What Joan did... ^
.png)
Final Splash Page
Home Page
Used for notifications, navigation, and other functions.
Initiating the Conversation
Something that was important for the kids to initiate the conversation, have two-way communication, see message history. So, I've built a place for the voice messages and songs to be stored following the ubiquitous messaging convention.
Validation and Positive Feedback
I also considered giving the kid more feedback because kids thrive on validation, so seeing whether or not Aunt Roz is "Listening Now!" and how many times she listened to a song, could be a possible way to test giving positive feedback to the child.
Highlight 1 on 1 Relationships
Since it was important for the kid to be in the center of the conversation, and we wanted to highlight each 1 on 1 relationship for each box the kid was linked to, I gave each music box it's own window that you can swipe through to see your communications with each loved one. This UI is probably good for up to 6 or 7 music boxes, so if they get a lot more, another convention would need to be implemented for better usability.
Need for Customization
The kids also wanted to have lots of different types of music boxes so they could shop for the "perfect" music box for their loved ones, so the button for "Shop the Music Box Gift Store" is a nod to that concept.
We didn't test the navigation page because we only had a short time with the KidsTeam, but I thought it was important to build out because it was the part of the experience that ties everything together.
.png)
Final Home Page
Create a Song Page
For kids to create and share music and then send to linked music boxes.
-
Sound visualization
-
Volume up or down
-
Timeline
-
Time navigation
Updates from v2.0 to Final
-
Longer beats
-
Add voiceover
-
Control tempo
-
Change instruments
-
Add time (beginning or end)
.png)
.png)
Final Create a Song Page
Create a Song for v2.0
Send a Premade Song Page
Kids can find a song they like or they think their loved one will like to share with them.
The feedback from the KidsTeam was that they wanted more music, so we added several pages of songs with multiple instrument variations so they could customize.
-
Timeline
-
Time navigation
Updates from v2.0 to Final
-
Add voiceover
-
Change instruments
-
4 pages of different songs
.png)
.png)
Final Send a Premade Song
Send a Premade Song v2.0
Record a Message Page
Kids can record a message or any kind of audio to send to their loved ones' music box.
We found that we didn't need so many buttons on the record page after watching people use it, so we were able to distill it down to two buttons for maximum simplicity.
Updates from v2.0 to Final
-
Removed all except 1 button
-
Added wave visualization
-
Added time counter
.png)
.png)
Final Record a Message
Record a Message v2.0
High Fidelity Physical Prototype (Final)
A modern, low tech take on the music box, bringing nostalgia to the twentyfirst century.
This prototype fulfills the desires we found in the Wizard-of-Oz research. Key features:
-
Pays homage to traditional music boxes
-
Size of an egg with clean lines
-
Can hold things like a traditional music box
-
All functions work with one simple twisting action:
-
Twist all the way past haptic bump to record
-
Twist closed past the haptic bump to stop recording and send.
-
Twist all the way closed to stop playing.
-
Twist open to play the song.
-
This was as far as we got for the concept of the final physical prototype, so it hasn't been tested. Next steps for this piece would be showing it to potential users, getting reactions, refining, then fabricating a physical prototype to test and use.
Kudos to Roz Hillenbrand who took the lead on the physical prototyping part of this project!
Our team's concepts and ideas for the final high fidelity physical prototype.
.png)
Final Concept Video for Xun Music Box
Illustrating one potential use case with Ethan and Aunt Roz
[2:09 min video] This video is meant to be a stand alone piece to showcase the concept for the Xun Music Box. We presented it formally at the end of our presentation (where we explained our research, design process) at the Final Showcase which included an audience of industry partners who critiqued and commented our concept.
-
Contributed to the values and framing of the storyboard
-
Set up and shot the scenes with Ethan and uploaded all the footage in a timely manner for Nathaniel to review in case we had to reshoot
-
Shot with Ethan for several hours over a couple days.
-
Hard to keep child actor happy.
What Joan did... ^
In this video, we really wanted to showcase the relationship of Ethan and his Aunt Roz and the sense of connection the music box facilitates for them. Since we were all remote, we had to agree on a storyboard beforehand, and each had to do some filming. Nathaniel Gray, who was a film major, did our editing and voiceover.
Next Steps
If Xun Music Box were real, what would we do?
Test under real circumstances in order to:
-
Understand the implications for a child to have unlimited access to communicate with loved ones.
-
Understand how children would really use the software, how long they would use it for before they got tired of it.
-
If they used it only for music creation or only for voice recordings?
-
How people feel using the music box side. Do they actually feel connected using this?
-
Do chidlren actually feel empowered?
.png)
Reflection
What did we do well?
What could have been better?
What went well:
-
Everyone taking ownership of their parts of the project and putting in best effort.
-
Our teams efficiency in team meetings in getting things done and decided quickly for tight deadlines.
-
Under COVID circumstances, we made every effort and did the best we could.
What could have been better:
-
Would have been nice to be able to give everyone on the team more agency and have more communication in every part of the project instead of having to chop it up and distribute like we did because of the circumstances.
.png)