Music Battle Game: How To Design When The Project Implies Later Adjustments

Happy 2019 everybody!
As you might have noticed, I took a break from the blog during this holiday (since my house was messy as my brain, I needed time to organize and tidy up around).

Now I am back, with plenty of new topics to share with you!

But at first, let’s talk about my school…
…”Again? Isn’t that maybe you don’t have anything else to say?” you might think. And, yep. How can I reply to this?
School is a huge part of my life right now, so it takes a lot of time and effort to only complete what is asked to us.

“So what are we going through this time?”
Easy! A Node application!

…”What?! But this blog is about DESIGN, code doesn’t belong here!” you might think. And it is partially true!
In fact, my class is expected (as a part of one exam) to DESIGN and then develop an online application which takes artists’ data from the Spotify API and make the user play over it.

Being a designer means not only look at the little pond around you, isn’t it? Explore the net, follow the mainstream and know, at least on the surface, what is linked to the profession is all part of the game.

Anyway, because this blog is ABOUT DESIGN, what I am going to show you is the process I used to shape the idea of this application. Ready?

Basic requirements

The brief was very specific about how the application should have worked:

The criteria for the comparison can be up to me, or I could make the user choose as well (those imply two different levels of coding skills though).

1. Brainstorming

In this first phase of the design process, I had to use an approach different from my usual one to brainstorm over the application; in fact, every idea was strictly connected to my abilities about coding (that are currently beginners), so the firsts steps were:

  • Look on the Spotify API documentation and see which info I could get to work with.
I could get a list of several artists.
I could get different info about a single artist.
The same as above.
I could get the top tracks of a single artist.
And different feature for every of those.
Like danceability
Or the vibes the song share with the audience
  • Then, purpose several solution with the material collected.

My favorite one is the dance party track, because not only is original but gives also a value to the user, who might discover which are the best tracks for their dance party!

Anyway, to stick to the basics, I decided to keep designing also the popularity contest – as the minimum requirement for the brief (just in case, you know).

2. User Flows

The goals of this extremely simple application were:

  • Less click for the user – Make everything as much automatic as possible.
  • User-friendly UI design, to avoid tutorial and let the user easily understand by themselves how to use the app.

Which implied: a clean screen, few options to the begin with that drive the user to complete the game, clear info about the result.

Here’s the key feature of the process: the flow of user’s actions is the same in both the challenges!
The popularity contest is just the foundation for the dance party tracks battle, in fact, it can be thought as these were bricks: you can add more at any time!
I designed it in this way so that could be easier to decide while coding where to stop (indeed I wasn’t enough confident in my skill).

3. Logo and palette

Honestly, for this part, I haven’t given my best!
I was just trying to find a logo which could give the idea of a battle, but that is it, really.

Few inspiration online:

What I most love of this app is the color palette I chose:

In fact, when talking about music everything is so personal that is hard to simplify the emotion to only one color, and using something excessive (as gold, or sheer finish, etc.) can remind about the life of superstars.
So that’s why the rainbow: it includes most of the color shades (and their psychologic meanings with it) and it gives a hint of vitality (catching the attention of the user when needed – for example in CTAs).

The final logos

4. Wireframes

5. The result

Here you can find the link to play with the app online (you will we redirected to Heroku, website which hosts my “Music Battle Game” app).

I am actually proud of myself to being able of coding an application (also if extremely simple); it is a lot more than I have ever tried until now.

What I learned…

This experience taught me the importance of working with capable programmers. The design is essential to sell the product but can’t do anything without someone who can make it works as thought.

Also, there might be times where it essential to find a compromise; I think that designing not only means create the perfect product but idealize one which fits perfectly all the financial and technical requirement around it.

Finally -but this is obvious and the project only confirmed what I already knew- it is better something simple that works as intended than a more complex product with bugs all around.
I mean, I told you it was obvious.


Hope you enjoyed this article! The intent was to show you can approach a project in plenty of different ways, as much as you use your knowledge to fits the requirement and always give your best 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.