case study 01.
This music application is tailored towards those who are going to The Romantic Tour of Bruno Mars this year. It provides a more easy way of listening to his setlist rather than having to type each song on a standard music app. This contains a competitive twist where you can have karaoke, but where it tests you on how much of the lyrics you know; each user will have a score and is shown on the leaderboard page.
Music App
Process
Mind-Mapping Content Ideas
Before sketching, I began with a mind-map of ideas to help me with my layout later on and came up with a range of ideas. While that concept was already different from the music apps that currently exist, I wanted to think of something more to really differentiate this from other apps. It then came to me that while music apps have a karaoke feature, there’s never been a competitive twist.
I wanted to add some competition into this app because that would really drive fans to use it and when it comes to the day of the concert, they’ll be able to sing their hearts out from the practice using the competitive karaoke feature!
Spotify Analysis
I wanted to take a look at the Spotify interface to help me grasp how I should be designing my content. What I noticed was the simplicity and usability of the app; as soon as you open it, you’re welcomed with a range of elements that make you want to tap and interact right away making it really engaging. In terms of navigation, it’s easy to identify and I noticed that whenever you’re on a specific page, that navigation icon is lighter in comparison to the others indicating that the user is currently on the page; the smallest details like that are what makes an app cohesive and so I wanted to really consider that in my interface design. Additionally, whenever you need to scroll for something, it’s easy to recognise as half of the element is shown which is done well with this app.
Problem Statement
Create a music player to discover, choose and play music with the following screens:
A home/app launch screen
A choose your music screen
Playlists
A play screen
Users and Audience
For all the beloved Bruno Mars fans who are going to his Romantic Tour concert; instead of having to go through the hassle of going on an app such as Spotify to manually search up his songs that are being specifically played in his tour, fans can use this application where the only music you can have are straight from his setlist!
Sketching + Wire-framing Process
These were the sketches I drew out and felt quite pleased with them. I felt that I was able to design each screen quickly, although I wasn’t sure if that was such a good thing..
After creating the wireframes, I felt that they were quite off, it was likely because they were just the drafts of my main design. I also noticed that the red navigation felt a bit too dark against the black background, so I made it brighter to enhance the contrast.
Master Apprentice + Icon Making
When making an app, icons are included as well. I did two master apprentices to try and teach myself how to create icons through the use of vectors; the first set of icons aren’t really the best. It was my very first time attempting to create icons and I was unsure on how to properly use the vectors to curve certain areas.
However, my second set were a lot better after I learnt how to use the vectors. I believe that this exercise was really helpful as now I can create my set of icons for my app more efficiently and accurately.
outcome
Out of all the projects I did during this time, this was definitely my favourite; going into this course, I knew that I wanted to design user interfaces and this only made me more confident in what career I’d like in the future. I did feel a bit constricted when using Figma because there were some features I wanted to really see come to life, especially the competitive karaoke feature, but I think I was still able to demonstrate the point of that concept either way. I’ve been able to gain discipline in spacing and padding and attention to detail which is vital in design. I would have liked to sketch more but honestly my ideas kept rolling out as I was already on Figma which isn’t ideal, so for my next projects, I’m really going to focus on sketching out more ideas to give me more of a variety.
