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 🙂
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.
|VISION||Help show-goers discover and track shows to go to through a personalized, useful experience.|
- Ability to browse concerts/shows
- Ability to specify criteria
- Ability to take action on results
- 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)
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.
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.
I examined similar features of competitive products to conjure best practices and inspiring ideas that could be applied to this redesign.
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
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.
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.
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:
- Day of the week (77.8%)
- Distance away from home (72.2%)
- Ticket price (61.1%) / Whether favorite artist is headlining (61.1%)
- Other plans in the mix (55.6%) / Whether friends are going (55.6%)
- Number of artists in lineup interested in seeing (50%)
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:
- Availability / Day of the week
- Ticket price
- 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.
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; straightforward actions
- Current: Up-to-date, real-time information
- Actionable: Meaningful ways to engage with the content
- font-family: ‘Fira Sans’, ‘sans-serif’;
- font-family: Open Sans;
- font-family: “Georgia”, “sans-serif”;
User Interface Design
First, I captured the existing “Tonight” feature list view (default). Drawing from my research, I made some changes that addressed the major priorities:
- 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.
- 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.
- 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.
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.
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.
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.
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.
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.
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.
- 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