ANIMAL CROSSING and other video game music is unique in-game based off a player’s location, weather, and time zone. Music outside of video games, however, requires human intervention: choosing a playlist, creating a queue of songs, or simply just listening to the radio. None of these options offer an experience that’s immersive for listeners, nor unique to them.
A client approached me with the idea of bringing music to users in a way that immerses them in the world of the music, similar to how video game players are when they play their favorite games. This concept would bring video game music into real-life, breaking down walls that separate these two worlds. She would be working on the back-end development while I worked on the designs.
The time limit for this project was 1 month from ideation to front-end implementation.
- How can I design a music listening experience that is immersive and doesn't require user intervention? How do I make users feel like they are in the Animal Crossing world when they are listening?
I conducted user interviews with 8 individuals who play Animal Crossing regularly and with those who listen to music regularly. I chose to use interviews because I don’t play Animal Crossing myself so I wanted to talk to users through a dialogue and understand the reasoning behind their interest in the game. I asked them questions about why they play the game, their music listening habits, and for them to show me how they play.
These sessions helped me better understand the game itself and what specifically about the Original SoundTrack (OST) is encouraging for users. Findings helped me understand:
Using the findings from the interviews, I jumped into competitive analysis. I wanted to explore the current industry norms in features and design for web apps that offer continuous music to listeners. I noted their strengths and weaknesses and considered them in my design.
iHeart Radio and many similar websites allocate a very small amount of space for music specific features (bottom bar). The rest of the real estate of the desktop screen is dedicated to users to interact with ads and find and explore different music playlists and genres. I made sure to incorporate this concept of making the most with the real estate given in my own design.
Tune In Radio is very similar in layout to iHeart Radio, with music features accessible through the bottom bar and a navigation system that allows for listeners to easily access specific genres. The rest of the screen is dedicated to advertising and providing other radio station options. The bottom bar is very simple (no skip forward or go back option) because it’s a live radio station. This simplicity is a feature I decided toincorporate in my design.
Using the interviews and competitive analysis, I outlined a journey map that would attract users like Andrea to stay loyal to the website and continue to use it. The opportunities ultimately drove me to include what I included in my initial iterations’ designs.
Using the information from the interviews, competitive analysis, and journey map, I generated wireframes that addressed users needs:
The next plan of action was to create color palettes and typography that aligned with the current vibe of Animal Crossing and that was playful and cute. This would make the website have a similar feeling for listeners as playing the Switch game.
Due to the limited budget and time for this project, I was not able to do a comprehensive usability testing session. Instead, I did testing with my client because she is an avid Animal Crossing player herself (she even streams it!). Because of this, my testing session is very rudimentary, but I still received valuable insights.
The location specification was confusing. Animal Crossing is divided up into multiple islands, but there aren’t distinct OST songs for each island. Because of that, I condensed the “Now Playing” card to reflect this.
The inclusion of the color palette for each theme was confusing to my client. This is not a feature usually observed in other apps (especially if the selection is only between light and dark modes). I removed the palettes to remove confusion, though I would like to do preference testing on this feature in the future.
Several ideas for the current iteration weren’t included because of time constraints: my client already had a domain and wanted the website up and running as soon as possible. Because of this, there was limitation in the amount of testing I was able to do and in feature implementation.
While there wasn’t time or funding to test the prototype broadly, I made sure to test with my client. This experience working within specific business restraints really forced me to create the design quickly and make assumptions based on the competitive research and the interviews I had conducted before. This reinforced my skills in rapid prototyping and using research to inform design. This approach is how I approach designing currently: research, rapidly create, and then iterate iterate iterate!
Unfortunately, as character customization would take a long time for my client to develop code on her own for, this feature had to be scrapped from the current iteration. This was a tough decision, because one of the biggest draws to Animal Crossing -- I learned through user interviews -- was the abundant number of characters for players to interact with. The compromise was that the figures I made for the characters would be incorporated in the next iteration. Depending on usability testing on that iteration, the feature could be expanded beyond just the 8 I originally chose.
This experience really taught me the importance of business requirements and restrictions in design: not all design -- no matter how much research it has backing it up, no matter how visually stunning it is -- is viable for the business. This was just one of those circumstances where it’s important to be flexible with design in order to meet both business requirements and user expectations.
This was my first time working with a developer and for a client on a project and I learned so much about the design process within the industry. Compromise is inevitable with designs: that’s why iterations exist! The time and funding constraints really made this current iteration more limited in nature than I would’ve hoped for. However, the website will be live in the next month after all the back-end is set up, so traffic data will really help us flesh out features and expand upon this MVP.