top of page

Film Music App

Case Study

The Project

Inception:

So if you know me you know that I'm a film music aficionado. I have been a fan ever since I was a little kid and I've even been blessed to compose original music for a number of high profile projects. One of the websites I visit most frequently is a site called Vi-Control where a small group of music fans get together and discuss all things film music. A few years back I met my good friend and composing partner Tatenda through that site and lately he has been venturing into front end development. One day he was talking about how he wished spotify had a better music filter for the type of music we like to listen to and also had features that were unique to this small community of film music fans. We discussed this idea over the course of several weeks and finally thought to ourselves, let's design an app where it's just that... Film Music! And it would just be film music and nothing else.

Duration: 8 Months

Tools: Figma, Optimal Sort, UserTesting.com, Zeplin

Context

It's no secret that there are plenty of competitors in this space, from Sirius to Spotify, you name it. But this application was to be created for a very niche audience... Film Score listeners. Often confused with Classical Music, the power behind this style of music lies in it's association to it's corresponding film and the images it evokes when listening to this genre. Gone are the days where the algorithms in Spotify etc. will randomly drop classical pieces or impressionistic pieces that really don't fit this specific genre. And that's what we wanted to create here, an app solely for these type of users and along with it also create a strong community within the application.

My Role

My role in this particular scenario with was quite simple and pretty unique in the sense that this was a complete labor of love project. I didn't see a dime and that's okay, because I knew I was going to be an everyday user of this product. Probably more than the client, I wanted to see this application come to life. After a few conversations, I was to head the design, feel and experience of the application before we could hand it off to an experienced developer that would take it to the next level.

User Testing

The particular audience we were catering to for this project was pretty defined from the get go. But as always I thought, how can we create more awareness for this type of music? What if this type of music didn't have to be so niche or maybe considered boring by others. Tate and I never really took the time to think of an outsider's perspective on the subject matter so I suggested to also do some user testing on people who normally don't listen to this type of music or interact with it. So we broke up the categories into fans and non fans and the results were very interesting.

Luis

Age: 30

Location: West Palm Beach, Florida

Occupation: IT

Education: University of Central Florida

Status: Engaged

Film Score Music Knowledge: Very little to non existent

Luis C is a professional IT engineer who loves movies and music but honestly never paid attention to the music in movies outside of the theaters. Till we interviewed him he never picked up a film score CD or Album. He is open to all types of music and we wanted to see if this application would not only help discover more music in this genre, but ultimately make him a fan.

118730546_10157259518000896_4725009876769542321_n.jpg

After initial interviews to define qualitive and quantitive requirements, we came to the conclusion that Luis needs an interface and application that engages him right from the start screen. This made me realize we would have to create something that makes him feel comfortable and at home from the beginning.

Needs

118730546_10157259518000896_4725009876769542321_n.jpg

Luis's main goal is really to discover more film music and eventually create playlists of some of his favorite movies and the corresponding score music.

Goals

118730546_10157259518000896_4725009876769542321_n.jpg

He wants a really good search system that can help him search his favorite films and also needs a great recommendation system that won't stray too far off from his current favorites.

Challenges

Phase 1

Tasks:
1.) Download and Open App
2.) Discover Film Music Pop Up
3.) Optional Sign Up/ Free Trial

"I like that right from the start it gives me the option to discover new music, especially since I am very new to the genre itself"

Phase 2

Tasks:
1.) Select Search Bar
2.) Select Filter by Film, Actor, Composer etc.
3.) Select Album/Song

"There are so many search filters one can use and I am of the mind set of the more the better in this scenario."

Phase 3

Tasks: 
1.) View Album Ratings and Reviews
2.) Read Conditions 
3.) Make a Decision on free trial or purchase

"I kinda figured one would have to pay for it but I do like that the paid feature does give you more options like "Guess the Score" and more custom playlists plus bonus albums. My concern is that it all has to work or else it will be a total dud, I would suggest keeping it free at first."

Katrina

Age: 27
Location: Los Angeles
Occupation: Film Composer
Education: Columbia College
Status: Single
Film Score Music Knowledge: Extremely Familiar

Katrina is a successful film composer based out of Los Angeles and she is part of the niche we were catering to. She has been a fan of film music her whole life and is all for an application that helps spread awareness of not only this style of music but of the profession as well. She is a bit more picky when it comes to her case study so here are her results.

220563508_10226542136963768_8901562997916666483_n.jpg

Katrina really wants to see a lot of diversity within the application as far as music goes. She likes a lot of modern music but she is also a fan of early Golden Era music from the 1920s-1950s. She wants to get the most she can from the application and be exposed to music she has never heard which can in turn help her grow as a composer.

Needs

220563508_10226542136963768_8901562997916666483_n.jpg

She is willing to buy the application if it meets her needs, and she also mentioned she would love to see a community forum where she can meet other film music lovers.

Goals

220563508_10226542136963768_8901562997916666483_n.jpg

She feels a community forum might be a lot of work to build in but it would be very effective. She thinks that incorporating such a large and very specific database would be hard but she really wants this application to come to life.

Challenges

Phase 1

Tasks:
1.) Download and Open App
2.) Discover Film Music Pop Up
3.) Optional Sign Up/ Free Trial

"Great idea, seems pretty straight forward."

Phase 2

Tasks:
1.) Select Search Bar
2.) Select Filter by Film, Actor, Composer etc.
3.) Select Album/Song

"Love this idea, can we also filter by decades? I would love to see how I can search within those categories. Also, I'm an advocate for female composers so even searching by gender would be great."

Phase 3

Tasks: 
1.) View Album Ratings and Reviews
2.) Read Conditions 
3.) Make a Decision on free trial or purchase

"I think I would definitely purchase if those features I thought of would be implemented somehow."

Wireframe and prototype

 

We weren't a hundred percent sure that this idea would ever come to fruition as an actual app but I was dead set on giving it a shot. So I proposed my usual process so he can then take it into development on his side.

 

One of the most crucial steps in the design process is really nailing the aesthetic. I always try to find that balance between usability and what looks trendy and modern. As a rule of thumb, usability always comes first but definitely having something beautiful to look at never hurts and can actually attract a larger customer base.

I normally design a sitemap first but for this case study I really wanted to dive into the design and functionality of the application. As you can see above, I wireframed and prototyped some of the key features and pages to show to Tate and his team. One of the features that I suggested and incorporated into the wireframe was the called "Guess that score". Tate immediately knew where i was going with this and surprisingly loved the idea before I began to explain it. 

The concept behind Guess that score! is pretty straightforward. When the user navigates to that page, the app will randomly play sections from a film score and give you two options to pick from. If you guess correctly your score will be recorded and you will have multiple turns per each round. One of the goals is to work an AI feature into this where each round would become increasingly more difficult to make it even more fun for the user. This feature can also be further expanded into a community based game where film score fans can compete against each other and compare scores to see who is really a true fan of the genre. This was just an early version of the concept but the team and I would definitely like to take this a step further and see where it can go. The next step in the process was the high fidelity designs. 

Journey Map

Luis

For the purposes of keeping this case study fairly short, I wanted to share Luis' journey map from the minute he downloaded the app. We did a scenario where he expressed his frustrations with Youtube music streams, their ads and randomness and how it compares to our solution which he then explained to me on a one on one video interview.

Mobile App CJM_1_edited.jpg

Final Designs and feedback

After making these wireframes I went into Figma and mocked up my usual prototypes. I even implemented some limited functionality with third party figma plugins to give him and some of our other film scoring buddies a chance to play around with the navigation and such. 

After several iterations we finally concluded on a dark theme color scheme which would be clean and simple. We also wanted to really use whatever resources we can get from our friends to make sure we had access to the best music on the app and we can always just implement more. 

This process of course wasn't a short one but one thing I really wanted to make sure of was that we really included a lot of user feedback and input from the community we were catering to. Tate and I even drew up some survey with unique questions that would help us design the app and even filter the content further. The result was a very cool and clean design that we were proud of. The prototyping for the application was done in Figma using some animation plugins to further enhance the user experience. We then asked our friend Salah to handle the development of the application and implement the necessary code. 

bottom of page