Animal Crossing: New Horizons - Live Music

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?

User Interviews

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:

  1. The importance of a web app with as little clicks as possible from entry to the website to listening to the music.
  2. The desirability of a music listening service that is automated.
  3. Most do not seek out individual songs to listen to when they listen to music. They would much rather listen to an already curated playlist.
  4. All participants listen to music while they're doing other things (i.e. studying, working, or driving).
  5. Most play Animal Crossing for hours at a time, often losing track of time when they're playing.

Competitive Analysis

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.

1. iHeart Radio

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.

2. Tune In

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.

User Journey Map

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.

Concepts, Sketching, and Wireframes

Using the information from the interviews, competitive analysis, and journey map, I generated wireframes that addressed users needs:

  1. Limited music listening features to eliminate the need to control the music.
  2. Clear information about the song currently playing.
  3. Explanation for how the website is beneficial for music listeners and animal crossing fanatics.

Visual Design & Prototype

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.

Usability Testing and Feedback Incorporation

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.

1. Now Playing

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.

2. Themes

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.

Challenges & Next Steps

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.

1. No time for usability testing

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!

2. Character customization had to be scrapped

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.

Overall thoughts and lessons learned

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.

⭡ Top
All WorkEDRA
Animal CrossingSpotify Podcasts