TOUR VAN APP

  • ROLES:

    Graphic/UX Designer, Branding, Researcher

  • TEAM:

    Myself and one other designer

  • GOAL:

    Use a business requirement document while focusing on the user experience to create a music player/concert ticket app

  • TOOLS/SKILLS USED:

THE REQUIREMENTS

MUSIC PLAYER

  • Access and use my music library
  • Import songs or other libraries
  • Play music based on albums, artists, songs, and playlists
  • Search entire music library

CONCERT TICKETS

  • Be able to buy concert tickets
  • Search for concerts near me
  • If I am playing a specific artist, I want to be able to receive a notification that there is a show near me
  • Receive notifications from friends that they are attending a concert and would like me to join them

RADIO

  • Play digital radio stations
  • Play radio stations based on genres
  • Favorite radio stations
  • Receive suggestions for radio stations based on radio stations I’ve played in the past

SOCIAL

  • Connect socially with friends through the app
  • See what my friends are listening to
  • Share what I’m listening to with my friends

HOW WE ARRANGED THEM

HOME (MUSIC)

  • Toggle between Music and Radio
  • Music player library with artist, song, and playlist filters
  • Search music library (by artist, song, album, and playlist)
  • Number of upcoming concerts on the right next to the artist
  • Slide out social feed on the left

HOME (RADIO)

  • Toggle between Radio and Music
  • Filter by genres, favorite, and suggested stations
  • Spot to favorite stations
  • Slide out social feed on the left

PROFILE PAGE

  • Set concert distance radius
  • Profile picture
  • Notifications of upcoming shows / notifications from friends
  • Import music button

ARTIST PAGE

  • Number of upcoming concerts with a different color if it is in your area
  • Buy concert ticket - redirect to ticket purchasing site
  • Artist's songs

NOW PLAYING

  • Next/previous song
  • Number of upcoming shows next to artist's name
  • Share song with friends

SOCIAL FEED

  • See what songs your friends are listening to
  • See what concerts your friends are going to
  • Search feed to specific friends

SKETCHES/BRAINSTORM

After discussing how to organize the requirements in our form of an information architecture, we strarted brainstorming design layouts and branding concepts. Through this process we came up with our brand, the Tour Van.

tour van sketches 1
tour van sketches 2
tour van sketches 3
tour van sketches 4

PROTOTYPE

Using Adobe XD, we created a prototype for user testing. We worked together while designing and prototyping, so the result was a mixture of both of our thinking and work. We then tested the prototype with five strangers within our target market of young adult concert goers.

Try the prototype here!

USER TESTING FINDINGS

  • No one understood how to get to the social feed
  • The navigation besides the social feed was intuitive for most
  • The amount of content on the home screen along with the dark color scheme made it difficult for some users to find what they were looking for on that screen
  • Not all of the users understood that the numbers inside the Tour Van icon were the number of upcoming shows for that artist

CHANGES BASED ON TESTING

  • Because no one understood that the side grab bar was for the social feed, we decided to get rid of the side bar all together but kept it so you swiped right to get to the social feed as just a learned function
  • We changed the color scheme to make it brighter, clearer, and fit the fun Tour Van vibe
  • We changed the way we displayed the Tour Van icon with the number of upcoming shows to make it more clear what the icon's meaning is
  • I created some custom icons and a new fun and funky logo to give us stronger branding to fit the fun care-free concert lifestyle that our target audence relates to

REFLECTION

WHAT WENT WELL

  • Our collaboration led to great ideas and creative solutions to getting all of the requirements in an easy to use app
  • Strong communication, clear file naming, and using google drive allowed us to keep things organized while collaborating

WHAT CAUSED SOME ISSUES

  • Not being able to have both of us working on the XD document at once slowed us down, but we were able to successfully work past this issue by focusing on our communication and using Google Drive to share the document with eachother
  • This was our first time going out and doing user testing with strangers so we did a poor job conducting a few tests which forced us to do some more testing in order to get useful results

WHAT I LEARNED FROM THIS PROJECT

  • HOW TO CONDUCT A PROPER USER TEST - I learned that when conducting a user test, it is important to clearly explain to the user what the app is, what they are going to be asked to do, explain that it is a test of the design not the user, and use phrases like "show me how you would..." to avoid bias in the way the user completes the tasks
  • I WORK WELL IN TEAMS - Even though I only worked with one other designer on this project, we were able to work much faster and come up with more creative design solutions than I would have on my own. Whenever I got stuck creatively, my partner was able to help spark a new idea that would get the creative juices flowing again and I did the same for him. It also was helpful that we are both strong have strong communication skills