Finding live local music can be a difficult and frustrating experience. Current methods of finding concerts are unorganized and typically only promote the artists that are already fairly well known. Currently, the only way to find smaller local music events is to be connected with every music venue and artist on social media. For those that are not already involved in the local music scene, it can be too intimidating to get involved and start seeing live music. There is a need for a more organized and easy to use method of finding live local music events.
Marquee is an interactive tool to help people find live local music in seconds. Users simply select the genres they are interested in, and the price that they are willing to pay to see it, and they can immediately begin browsing all the events that fit their parameters. They can use the map interface to easily search within their neighborhood or across town. This tool helps users find everything from national touring artists in their city’s arena to small cover bands playing in the neighborhood bar down the street. This interactive guide will help people more easily find the events that they are interested in and enhance their local scene.
I started out the design process by first planning out exactly what I would be designing. I mapped out the user experience that I intended to create. I had originally wanted to create a two part application that would be used both by people who wanted to find live music events, and those who would be planning and promoting those events.
For users wanting to find events, they would have the option view the events either on a map interface or a list view. Those events would be sortable by the details that are most important in finding concerts: genre, price, size of the venue, and distance from the user. Clicking on an event that they are interested in would then give more details about the event, venue, and artist playing that show.
The other side of the app, what I would refer to as the “back end”, would be for the use of artists, venues, and promoters. This end of the application would give these key users the ability to upload their events into the app. This feature would make it easy for even the small bands playing in neighborhood dive bars to promote their shows, along with the big nationwide touring artists.
My next step towards actually designing the interface was to create wire frames in order to plan out where different elements would fit and how they would interact with each other. As I moved forward, I began to focus more on the map interface than the list. I started to hone this application in to be more focused on finding concerts on the night that the user is interacting with it. In this scenario, a map interface would be easier to use, especially for somebody who is already out and about and wants to find the next bar with live music that they would be interested in.
As I created the wire frames, I started on a map as the app opens, in order to save the user time. I then split it into two separate paths. One path would be the user selecting filters in order to find the events that more closely represented their tastes or wants. The second path has the user selecting an event and then getting more information about the event, including start time, price, and any other artists that are opening the show. This interface would also include information about the artist that is playing that show.
My final step of planning was to look at what already existed in terms of map design. Since this was going to be the main way that the app would be use, I would have to create a design that was easy to navigate, easy to search, and pleasant to look at.
I then began early design work so that I could try to create a cohesive identity across all aspects of the application. I started with the main map interface,since that was the most important aspect. I used small white dots to indicate any events that might be of interest and a larger, yellow dot to indicate a selected event. For now, I was using a screenshot from Google Maps as a placeholder until I figured out what I wanted the actual map itself to look like.
The expanded info menu was originally designed with the venue as the most important aspect. For many people, myself included, some venues are worth going to, no matter who the artist playing is. I later reversed this decision to put more emphasis on the artists. The artists were indicated by photo in this design because many people need to see an artist before making a decision about going to see them, as the image that they put out into the world indicates a lot about their style and music.
I also began designing an example of a filter menu, where people could choose what details would match their ideal concert experience. This menu would allow users to search for concerts on different days and select what times they would like to see options for, as well as filter out unwanted genres.
During this process, I also began to compile different icons that I may need while moving forward. I had options for indicating different events and different prices for those events, as well as other various icons that would help users navigate the interface.
Four months go by during the fall co-op semester, and when I get back into work on this application, I decided to revisit the design of the entire interface. First, I looked at how I could update the main map interface, which had become the landing page of the app. I sketched out different ways to display each event on the map, whether those would remain simple dots, or if they needed to be artist photos. I was hesitant to use artist photos because I didn’t want there to be too much going on inside the main landing page. Using photos would add more elements and take away the clean design look that I had originally intended.
Next, I looked at how I could better represent the artist information. In my original designs, the artist information panels took up far too much room on the screen. Condensing these panels into smaller spaces was my top priority. I sketched out options for small cards that would pop up on the bottom of the map when an event was selected. This would give all the important information that was necessary to the user while still allowing them to navigate the map if needed. I also sketched options for expanded information panels that would be accessible when those cards are clicked on.
I then took those sketches and started to design them digitally, using a deeper blue than I had been using before, as I wanted it be more reminiscent of nightlife. I started to really gravitate towards the new info card design, and soon was modifying the cards to include a large photo of the artists, along with their name and genres. I also called out the price in the card design to be easily found. I soon dropped the location, as I realized that the location was already being indicated by the event marker on the map itself.
A very big breakthrough in this design process was switching the map over to a dark mode map. This made the design much cleaner, eliminating all the different colors used in Google Maps.
During a mid-semester faculty review, I received some excellent feedback about the functionality of the app. Most importantly, I was told that the unique aspect of this project was the aspect of looking for a concert “right now”, so I should focus on designing for that demographic. Because of this, I decided to drop the settings menu and profile aspect. I would instead make the first page of the app a filters menu so that users could select the genres they like and the price they want to pay at the beginning, and then they can see all the events that match their tastes. This would eliminate the prospect of seeing every single concert around them and then having to go into a different menu to select what they want to see.
The next most important piece of feedback was to remove the nondescript dots on the map and replace those with photos. Seeing dots clutter the screen and not knowing what the dots are could be very overwhelming to the user. Replacing them with images of the artists would be much more efficient for user to find the shows that they want to see.
I also used this opportunity to condense the cards down even further and incorporate them into the event markers. Since the artist photos were now being shown on the map itself there was no need to show them again on the cards. This led to a much tighter, and easier to use interface.
This is the where the interface design ended, and the rest of the semester was spent animating the walk-through video above.