Heidn

Project ‘Heidn’ (Late submission) (no name included in the prototype) Designer: Hieu Trung Nguyen - team Heidn

Chosen experience

The experience I chose was the sounds of “home”. Being an international student, I understand the feeling of being separate from your family, your friends, what you are used to. Sometimes, you miss the idea of being home: hearing the music, the news from your hometown, hearing your languages, hearing the voices of your loved ones. Sometimes, you just want to recreate an environment where you are surrounded by familiar sounds.‘Heidn’ allows you to relive the sounds of your idea of home and provide you with the freedom of making your own digital safe-and-sound place.

Context & Research

Initial idea The initial idea is to create an interface design of a living room, and allow the user to drag-and-drop the elements they would like to hear. For example, the user could decide they want to hear the music of their choice by adding the songs they would like to play. They can add the sound of cooking, sounds of their pets to the place. Users could add messages, or conversation with their loved one to the space. Users can also ‘record’ and plan out an experience to use for later. → Idea got scrapped due to the complexity of the design: living room design will take too much time

2nd Idea: Instead of using the whole living room, focus down on the “sounds”. As sound is the center of the experience, using an item to represent ‘sound’ to make as an interface. Options: music box, cassette player, radio, TV, record player… A music box has always been an item with connection to old times, nostalgia → makes sense to represent past memory, past audios. Opening a music box also feels nostalgic, as if it contains memories of the past.

My final prototype uses the idea of a music box to give users the ability to create an environment surrounded by their own sounds (the sounds of ‘home'). It also replicates the feelings of opening a music box, which involves nostalgia, magic, and a sense of secrecy.

Design Process

References For references, I get a lot of inspiration from different designs of music boxes. As a K-pop fan, I also took inspiration from the Feel My Rhythm album design of the K-pop girl group Red Velvet, which has a lot of influences from classical music and ballet.

In addition, I also used these references to decide on the color palettes that I will be using for the design. Speaking of home, I intend to evoke emotions of nostalgia, magical, cozy, warm. My final color palette used a lot of warm, earthy colors, with touches of gold for the ‘magic’.

User flow diagram + Design decisions

For my design, I plan to get users to go through these stages: Enter the ‘password’ to open the box. In the design, as the user enters the passcode, the key will open the music box. When the user has opened their box, music notes will appear. Each of these notes is a sound that the user has placed in the music box. For example, one note can be raining sounds, another one can be the sound of cooking, and another one could be their favorite music. The main interface is where the combined music will be playing, providing users the sounds of ‘home’. The user can click on one music note to see which sound is playing. The information include the name of the sound, the audio being played, and the notes/messages that the user can put for the significance of the sound (e.g. ‘rain sound reminds them of their home in the tropical country’). The user can also remove sound if they do not want to hear it anymore. The user can add more sound to the current combined audio being played. This is the main idea of this project, allowing user to create an environment with sounds that are from their ‘home’, or remind them of ‘home’ They will enter the name of the sounds, the audio they want to play, then decide whether they want the sounds to loop. The ‘loop’ feature idea came to me as I was thinking about how a lot of people like to hear a certain audio when they want to focus on studying, so adding a loop option will allow them to use the project as a customized audio curator/creator. Once the user is done with listening, they can close the box by clicking on the key. Doing so will trigger the animation of closing the box and returning to the login screen.

Design choices

Why a lock/key? I believe when it comes to feeling of home, users would like a sense of privacy, and it happens that some music boxes do have a lock. For this step, the Smart Animation on Figma was spectacular in making the animation for the opening of the box.

How did I come up with the design of the box? Based on the references, music boxes tend to have intricate decorations, patterns, and texture, which posed a great problem when I was trying to replicate it. The fact that I also wanted the box to be 3D also brought significant difficulties in the designing process.

Therefore, I decided to design a music box that could ‘show’ that it is one. This involves some pattern in the front, and I also add a music note on top of the box, indicating that it has to do with sounds/music, and not just a random mystery box. I also experimented with some textures in the design of the box. The front was layered with a ‘fine grain layer’ with lowered opacity. This is a new technique that I have never tried before, so this was a great opportunity for that.

Why music notes? Before coming to the final decision to use music notes as individual sounds, I have considered using other items, such as a charm of raindrop to demonstrate ‘rain sounds’, or a ‘cat’ charm for ‘my pet’s purring sound’. While this sounds like a lovely idea, it would take too much time for me to design each individual charm. Also, as I planned to have users add their own sounds later, how do I decide what charm the user wants? Music notes are easier to design, and they bring a sense of ‘magic’, as they aren’t physical objects we can see, which makes it perfect for ‘sounds’.

How did I make it seem ‘magical’? My inspiration for this is to make the music notes glow and float around the air, which I have seen in a lot of movies and animations. By looping back and forth between a screen with the normal states of the notes, with another screen with the ‘glowing’ states, I was able to recreate this feeling of magic. However, due to my inexperience, this might have caused some not-so-ideal transitions between different frames of the prototype.

How did I design the user interface for input/displaying information? I tried to make it as simple as I could, as long as the user knew what they could do. Clicking on the note seems natural when the only things moving around are music notes. For the adding sounds, I designed a button in the middle of the box with a music note and a ‘+’ sign to indicate that it’s the place to add more music. The interface for adding sounds included a sidebar for volume, a display of audio length, and a loop circle-click.

Any other design notes: The closing of the box reuses the frames I designed for the opening of the box, which was great. It also creates a feeling of completeness when the user is done with the experience.

Weakness and Suggestions for improvement

As my project focuses on the idea of ‘home’ sounds, it is unfortunate that there aren't any sounds available right now in the prototype. This is due to my inexperience with Figma and how it handles audio, but also the limited time for the Design-a-thon. Thus, the next big step is to add sounds to really emphasize the ‘audio’ aspect of the project. The opening of the music box can have the key sound when it opens the box, the usual music box music. The most important thing is to have the audios the user wants to have. An ideal audio environment for me would include my mother’s cooking noises, the cricket noises in the hot summer, and my favorite music with lo-fi effect to make it sound like it’s coming from the next room. That is what I consider the sounds of ‘home’. Transitions are clumsy. One of the biggest issues I had with this project was how to make the transitions more clean and consistent. The whole group was moving smoothly, but there is always that one smaller group that doesn’t move with the rest. This is due to my design process with Figma not being structured properly, as I do go back and forth different frames to ‘fix’ individual groups, which made the whole thing inconsistent.

From this Design-a-thon and also my first, I learned a lot about brainstorming ideas and keeping them realistic in a reasonable time. It also allowed me to gain a lot of new knowledge with Figma through exploration and trial-and-error. I want to express my gratitude for the organizing team at USC, and also the amazing mentors that were willing to help us in this Design-a-thon.

Built With

• figma