This summer, my friend and I were talking about our love for concerts and festivals when she brought up an interesting project of hers to address the needs of a typical music-loving college student. She was developing an application to discover local music events. If you go on Ticketmaster or Songkick, the local events that pop up are usually concerts from well-known artists and can often cost at least $30 or up. What about broke college students that just want to see some local artists play? Where can they find these events?
As a fellow music lover, I wanted to tackle this problem of improving the discoverability of local music events. My friend had already implemented a version of this app in Spring, so to start off, I looked at her UI and decided to go from there.
From my initial observations of the UI, I was able to pick out a couple of problems that I had with following through certain processes such as adding events or artists. However, I also wanted to conduct research to see how other people think when they use the app. To do this, I conducted a usability test by running through 2 scenarios with 5 participants. The scenarios were:
- You just found out about a cool local artist nearby. Show me how you would add this artist in the app.
- Today is Thursday and you want to find a local event for this weekend. Show me how you find an event that catches your interest.
- Users were confused about where to enter the artist's information after pressing “Add Artist”
- Users were confused about why there was a “create artist profile” option when entering “Add Event”
- Users were not sure if the information that they entered processed or not
After receiving some real feedback from users, I started my version of the redesign with two things in mind:
- Core experience should allow the user to separately carry out the three main objectives of the app: find events, add events, and add artists
- Consistent and cohesive components will allow users to navigate the interface more easily
My initial attempts at redesigning the app showed very similar results to the original screens of the product. For example, the home screen had the same layout for the events near the user. The “add artist” and “add event” options still had separate pages but improved navigation. The only thing I really changed was adding a navigation bar at the bottom so that the user didn’t have to keep pressing the back button after entering a subpage. Overall, none of these solutions were original to me and I had to somehow get away from the original designs.
To start, I first focused on the home screen. I decided to change up the overall format of the sections by throwing away the sections with text overlay to represent each event. Instead of telling users what each event was, I wanted to show the users by adding images with short descriptions to replace the sections. A problem I ran into at this point was: How do I allow users to input their location without just having a textbox that says “type in your location”? I wanted users to be able to visually see where they are in relation to close events so the solution was to implement a map that included pins of nearby locations that match up with pictures of the events. The user’s current location can easily be found by the active colored pin.
Incorporating the feedback I received about adding events/artists, I decided to include more clear instructions for the user when entering information for events/artists. After saving the information, a confirmation message appears that signals to the user that they can exit because their information is safely saved. I also decided to group the “add event” and “add artist” options under one category in the navigation bar. This eliminated the confusing icons of the separate categories and once the user clicks into the add button they can clearly see the two text options.
The initial app had an underlying cool-tone scheme so I decided to look at a warmer color scheme to represent the warmth and vibrancy that music can bring to peoples’ lives. I decided to try different color combinations of warm colors through gradients. Another thing that I considered when designing was typography. I used the same font style throughout the wireframes and wanted the font that was used to be modern and easy to read.
After incorporating the feedback I received from my friend, I made a prototype that I was able to test. From the feedback I received, one of the most helpful pieces of feedback I received was that they didn’t really know how exactly this app would be different from other concert apps such as Songkick or Stubhub. As a result, I decided to add two onboarding screens in order to let the user know exactly what the app is for and how it can help fulfill their needs.
I will be sending over these final designs to my friend to implement in the real application. Moving forward, I would like to be able to conduct more usability tests with the functioning app to see if any improvements can be made to the features of the app.