FAMILIAR: 3D Animation Feb 24 - May 24
Familiar, which was co-founded by Alice Zhou and Diego Asua in July of 2023, is a startup that provides an app for young adults to deal with their mental health. More specifically, their product is an AI-chatbot app that can be personalized and accessed at any time and any place. A cute character represents the chatbot, making the overall service much more approachable. In terms of what the app does from a technical standpoint, the chatbot grows with the user through interactions and keeps journal entries of previous conversations to track the user's emotional growth. This personalization and journaling feature, along with an integration of gamification, makes Familiar engaging for customers and encourages them to interact more with the app.
Role: 3D Design Intern
Types of Design
3D Animation
Tools
Blender
recognizing the problem
As I observe new artists, I recognize the main struggle to be matching the tempo for all of the instruments. A choice where everything is the same tempo will help.
“New artists need a way to create any beats they want without having to worry about matching the tempo for all of the instruments they incorporate.”
brainstorming & prototyping
My initial sketch, made digitally, visualizes the basic concept and how the instruments might be organized. Early on, I knew I wanted to include sound effects in addition to the original set of percussion instruments. However, as I began creating coding and redesigning the format of the website, I discovered that having labeled cards for each instrument would help define the space I allocate for them and allow users to better understand what options they have. From here, I used Adobe Illustrator to create the cards for each instrument, which is seen in the final website.
For the color palette and visual style of this website, I took inspiration from the colors you would see in a photo of a rock drummer because of the correlation percussion instruments have to rock music. In this genre, warm colors tend to glow with a black background. So, I chose shades of red and yellow to help bring this look to life. These colors also helped in distinguishing the 8 regular instruments from the 6 sound effects.
—- I wanted to design a website that was easy to figure out. —-
So, I divided the website based on the speed of the tempo. So, all the instruments under “Every Beat” would play at every beat, all under “Every 2nd Beat” would play at every other beat, and so on. For the purpose of this project, I provided 8 of the same instruments for each tempo: 4 that belong on a traditional western drum and 4 percussion instruments that would be used for other genres of music. This way, users have a diverse choice of instruments based on the genre of music they are creating. I also incorporated 6 sound effects, which are placed aside from the regular instruments to avoid any confusion. Most of these effects don’t come from traditional instruments, just in case users want to have some fun.
coding the website
Since I only had 2 weeks to complete this website from scratch, I made the strategic choice of creating all of the visuals —- like the buttons —- in advance using Adobe Illustrator. I also spent a few days editing the audio for each button prior to coding. Once I imported all of my assets, I was able to focus all of my efforts on the coding and quickly make all of the interactions, which where created using p5.js.
p5.js is an open source library of JavaScript. I used p5.js for all of the interactions before using HTML and CSS for formatting the website. My coding process for this website went as follows:
Turn the images into interactive buttons. This includes determining the position and coding in the button feature for each card. I had to ensure that the 8 instruments were a toggle button while the 6 special effects were a normal button. In addition to creating the button features, I also had to load the sound of the instrument with the button.
Create separate functions for each button to ensure both the audio and the yellow outline appear when clicked “on.” The toggle button is like an on and off switch; once you click the button to do something and click it again to stop, the third click must restart the action.
Troubleshoot the code. I struggled the most to make that third click start the action again, especially for the yellow outline. It took some time, but I eventually made the website work.
Final product
To play a sound, the user had to simply click a card. To indicate that an instrument has been clicked and will be repeating, I illustrated a yellow border to the card. If the card is clicked again to stop the music, the border will disappear. As for the sound effects, I first thought of added a red border for when they are clicked. However, since these sounds do not repeat, it would not have made sense to indicate the button being “on” or “off.”
Having the traditional eight percussion instruments repeat was a strategic design choice. Since these sounds are what make up the beat, and the purpose of the website is to maintain tempo, the user should not have the necessity to keep an instrument playing. By clicking a card once, the website will continue the user’s creation on tempo until the card is clicked again to “turn the instrument off”.
To add more interaction choices that would make the overall website more engaging, the titles grow and reach the top of the screen when hovered and the navigation (“Instructions” on the main page and “Back” on the Instructions page) changes color. The subtitles on the main page (“Every Beat,” “Every 2nd Beat,” “Every 4th Beat,” “Every 8th Beat,” and “Sound Effects”) also grow and move slightly when hovered over.
Video DEMO
This website turned out to be an extremely fun way for users to get an understanding of tempo. Users are able to experiment with different instruments and discover the relationship between their sounds. I was also able to test out my website with the target users, which resulted in a memorable experience for me and them. I observed how intuitive my UI/UX design was, and I recognized that the users had a lot of fun when experimenting with the instruments. This meant that my website made music creation fun and easy.