The “Concert Matchmaker” Mobile Design Concept

Consider this a little UX Design Jam to switch things up… I took just a few hours to do a rapid design concepting project — in this case, the redesign of a concert-searching feature of an app that I love to use. Not sure if this idea will be continued! Sharing anyway 🙂

Problem Overview

As a concert-goer who’s always looking forward to seeing live music, I find the Bandsintown mobile app to be SO helpful because it suggests concerts in my area based in a direct integration with the music I listen to. However, I find the actual concert-searching feature of the app to be a bit lacking and cumbersome. So, I wanted to reimagine the “Tonight” feature with a new and improved show-seeking experience.

Solution Overview

FEATURE “Concert Matchmaker”
VISION Help show-goers discover and track shows to go to through a personalized, useful experience.

Requirements

  1. Ability to browse concerts/shows
  2. Ability to specify criteria
  3. Ability to take action on results

Assumptions

  • Extension of existing Bandsintown mobile app
    • Inherits base visual & UI style
    • Maintains integration with Facebook, Spotify, Calendar, etc.
    • Uses configured data in Settings section of app
  • Maintain existing desktop experience (separate, within Facebook)

Research

Heuristic Evaluation

I started by examining the usability of the “Tonight” feature to start identifying what’s working & what’s making this experience feel so lacking and cumbersome.

bandsintown_tonight

screenshots of the “Tonight” feature of the Bandsintown app

STRENGTHS

WEAKNESSES

  • Integration with “Concert Cloud” to control selected vs. recommended artists
  • Ability to filter by distance from specified location
  • Thumbnails of artists in list results
  • Venue & Town in list results
  • Level 2 detail view contains helpful information: Date, venue, map, RSVPs, Lineup, etc.
  • Level 2 detail view contains useful actions: RSVP (“I’m attending” or “Maybe”), Share on social media, Get tickets
  • Results only displayed in list; long-scrolling
  • Results only ordered by time; assumption that users are searching day-of or soon
  • Duplicative show results due to artist itemization
  • All results presented equally
  • No additional filters
  • Level 2 detail view could contain more useful information: Friends’ RSVPs, Distance from home, etc.

User Reviews

I looked into what existing users are saying about the app by skimming the iTunes App Store and Google Play Store reviews. I did this in lieu of having the ability to conduct interviews with, distribute surveys to, or study analytics of current users’ app usage behaviors & sentiments. Below, I noted anecdotal patterns in feedback that are relevant to this feature.

POSITIVE

NEGATIVE

  • Keeping track of RSVPs
  • When searching by artist, can directly see shows instead of sifting through many
  • Integration with music library; automatic artist tracking
  • Search by location & distance
  • Choice to either seek specific artists’ shows, or discover recommendations
  • Less helpful for lesser-known artists
  • Delayed postings of shows
  • All list views with immense scrolling and default ordering; no calendar-like view
  • Itemization of separate artist listings for the same single show

Competitive Landscape

I examined similar features of competitive products to conjure best practices and inspiring ideas that could be applied to this redesign.

competitors

screenshots of similar features of comparable apps

Best Practices & Inspiration
  • Tiles / Cards
  • Sense of timeline
  • Large visual imagery & Typography
  • Personalized recommendations
  • Limited color palette, hierarchy and template views
  • Sticky CTA / action buttons

Audience Survey

Based on ideas gathered from my heuristic evaluation, competitive analysis, and investigation of user reviews, I distributed a quick survey to validate some initial ideas and help guide the design direction.

Survey Contents & Distribution

I used Google Forms to quickly create, distribute and collect results of the short survey. The questions were designed to focus on how this audience discovers and decides which shows to go to. In hindsight, I would’ve also asked about how far out people look for shows to go to.

survey

Recruitment

Given that I needed to resort to guerilla recruitment methods for this exercise, I reached out to show-goer friends on Facebook and Reddit users in a music channel.

recruitment

Thank you, awesome comrades who participated!

Key Findings

These are the three most relevant, insightful findings that resulted from the 18 participants. This data would help shape the design focus of this feature, along with specific design decisions of functional components, like the kind of options to involve in filters.

Insight #1  /  Unalignment of important show-finding criteria between “Tonight” feature & user expectations

While the “Tonight” feature of the app focuses on tracked artists and events that are approaching soon, the audience finds the following seven factors to be most important when searching for shows to go to:

  1. Day of the week (77.8%)
  2. Distance away from home (72.2%)
  3. Ticket price (61.1%)  /  Whether favorite artist is headlining (61.1%)
  4. Other plans in the mix (55.6%)  /  Whether friends are going (55.6%)
  5. Number of artists in lineup interested in seeing (50%)

results_factors

Meanwhile, the factor of “How soon it is,” which the “Tonight” feature’s UI tailors towards, was the least important factor (0%).

Insight #2  /  A common theme of “worth” in decision-making

The open-ended response revealed that users very consciously weigh several factors in deciding whether or not they will plan to attend a show, with the following criteria noted as the most critical to weigh:

  1. Availability / Day of the week
  2. Distance
  3. Ticket price
  4. Artist interest / Lineup

Insight #3  /  Validation of app/website browsing as a primary show-finding method, with Facebook feeds and Facebook event invitations as the next most-used show discovery methods, respectively.

results_discover

Design Principles

Establishing a set of overarching design principles based on all the exploration thus far helps direct, strengthen and control the design decisions going forward.

  • Customized: Flexibility to personalize criteria
  • Algorithmic: Smart automation to present relevant results that aid decision-making through weighing multiple factors
  • Efficient: Eliminate extra steps or burdens, utilize automated processes and data integration, limit number of choices to choose from, and maintain consistent formats
  • Simple: Light-­touch aesthetics; straight­forward actions
  • Current: Up-to-date, real-time information
  • Actionable: Meaningful ways to engage with the content

Style Guide

Color Palette

colorpalette

Typography

  • font-family: ‘Fira Sans’, ‘sans-serif’;
  • font-family: Open Sans;
  • font-family: “Georgia”, “sans-serif”;

User Interface Design

Wireframe Concepts


First, I captured the existing “Tonight” feature list view (default). Drawing from my research, I made some changes that addressed the major priorities:

  1. I clearly titled the page “Concerts” so that it revolved around the idea of a concert list first and foremost, as opposed to using a single data variable (i.e. location) to drive the focus of the page.
  2. I swapped the distance icon in the top right with a more generic filters icon, expanding the functionality to control the list results with more data variables than distance alone.
  3. I reimagined the list to visually convey more personalized information, without completely abandoning the sense of timeline. Bandsintown’s Concert Cloud algorithm is incredibly powerful for matching up how strongly an artist or concert would be recommended to a user, based on their music listening data that’s automatically integrated into this app. So, instead of using two general buckets of “Recommended” vs “All” with all items listed in an equal way, I visually emphasized the best-matched shows with the size of the image. However, this first concept iteration brought up too many visual problems of clutter and spatial content dependencies.

conceptsketch01

Along with these timeline list sketches, I made sure to examine what kind of data could be controlled once the filters button is activated. I based these decisions off of the existing settings, the research findings, and the general design principles of keeping things simple and efficient. So, I landed on only four inputs within the three categories of location, tickets and weekdays. I used sliders and toggle buttons appropriately for a clean, efficient UI.

conceptsketch02

Going back to the list view problems about visual clutter, I did some quick UI research and revisited the competitor analysis findings for inspiration. I started gearing towards a card-based view driven by large images. Additionally, I pushed the interaction design by using the modern trend of swipe gestures to reveal more information. This helps reduce the cognitive load, focusing the user on the right information in the right order, based on user initiation to voluntarily see more details.

conceptsketch03

Building off this core list view, I extended the experience to the full details view. Again, I reworked the existing view of this page to be more image-driven and to include more important information. Going forward, I would reorder this information based on importance and logical flows to comprehend it.

conceptsketch04

sketches compared against screenshots of existing pages

Finally, I took some time quickly iterating on specific UI components within this user experience. For example, based on findings from the competitor analysis and heuristic analysis, I reimagined the RSVP buttons as options that spring out from a sticky button always present on the detail screen. This draws attention to it as a CTA, reduces clutter, and encourages users to act on this at whatever point in the details page they feel ready to make their decision.

conceptsketch05

sketch compared against screenshot of existing UI element

Mockups

Normally I’d take more time sketching variations of the design approach and creating sets of wireframes digitally before jumping into higher-fidelity mockups. But for the purpose of this exercise, I sped ahead to design. You’ll see that I incorporated the idea of using size visualization to emphasize better matches in the concert list, but combined with the visual style of the second sketch iteration. A few other details for content, iconography, hierarchy, and small features were iterated as well. I used the limited amount of time to focus on the core, primary mobile screens for this feature.

Mockups

Next Steps

This was fun! But it was a quick rapid concepting exercise done in a few hours. If I were to seriously keep spending some time on this, here’s what I’d do:

Mockups of Additional Screens

Completing the flow of secondary screens from sketches and beyond, such as the filters screen to adjust settings and the activated sticky button to take action.

Additional Wireframe/Mockup Sets

I’d go through the rapid concepting exercise a couple more times to ultimately have 2-5 sets of mockups that all represent a substantially different UI. For example, some of my initial sketching involved a more calendar-oriented approach that visually indicated the dates with best potential. Another idea revolved around a few stacked sets of ways to approach the results, using horizontal scrolling to skim through them. Another idea took a Tinder-esque approach, really focusing in on the “matchmaker” concept.

Usability Testing

  • A/B Tests of different layout & UI treatments to evaluate efficiency and effectiveness in carrying out specific tasks by testing first-click impressions and path analyses
  • Cognitive Walkthroughs of the experiences to see how users are reacting to the various approaches, and what’s most helpful in directing users towards a successful experience
  • Interviews with wider representation of audience to discover needs of unaccommodated segments

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s