ShowMi

A platform that enables users to keep track of events attended, artists seen, and suggest event recommendations based on previous attendance data.

Duration: Nov 2019 – Jan 2020 (3 months)
Team/Role: Design team of one
Category: Passion project case study

PROBLEM

What events have I been to? Which artists have I seen?

ShowMi is a passion project originally driven by a personal pain point of mine. I love attending concerts, music festivals, jazz festivals, etc. However, I can never keep track of which events I’ve been to, never-the-less list out all the artists I’ve seen (virtual and live). Below shows a brief overview of the process:

Diagram of project process

Research

With a frustration in mind, I wanted to see if anyone else also faces the same problem as me. If so, I wanted to really dive into understand why it’s frustrating, when people feel frustrated, and how people currently deal with the frustration.

RESEARCH

Competitive analysis

I began by doing some research to see what’s out there currently. I noted down the popular platforms, identified the key features I envisioned ShowMi to have, and reassessed the existing platforms based on those features. To my surprise, there’s literally a multiple tracking app for everything… except historical data for attendees.

Key takeaways

  • Cater more towards artists, rather than attendees. For example, there are plenty of alternatives for artists tracking event attendance, rather than attendees tracking artists they’ve seen.
  • Attendees can ‘track’ artists’ for upcoming tour information/concerts in the future rather than tracking performers seen in the past.
  • Complaints on limited data and poor UI for existing databases

Competitve analysis of existing platforms

RESEARCH

Surveys

As no adequate solution exists I began to wonder perhaps no one else is affected by this pain point? To see if the problem is significant enough for me to take action, I made a survey.

Dec 2019 - I was at an all-ages music festival, passed around a Google Forms on my phone, and gathered 130 responses. The demographic ranged from ages 15-40 and respondents of various gender identifications.

Key takeaways

  • 112 (86%) of respondents would like to track events they’ve attended
  • 97 (75%) of respondents would like to track artists they’ve seen in the past
  • The most popular tracking method (both artists and events) is a screenshot of the lineup

112 (86%) would want to but 18 (14%) currently don’t do so



97 (75%) would want to but 33 (25%) currently don’t do so

RESEARCH

Key takeaways 🔑

The pain point IS significant! People care to track this information, in some cases they even took matters into their own hands and built an extremely detailed excel spreadsheet

  • Target user 1 – Attendees are anybody who goes to concerts/events and is curious of tracking that information will gain value through ShowMi, whether they attended 1 or 30+ events a year.
  • Target user 2 – Event organizers can leverage the ShowMi platform and user data (with consent, of course) to promote their upcoming events to potential attendees of interest.

IDEATION

User stories

To grasp a better understanding of the scope of this project, I identified three key features and user stories for each corresponding feature. I found that planning out the task flow early on helped me make more strategic design decisions as I could identify opportunity areas and ask users to perform a specific task during user testing sessions.

IDEATION

Product requirements

After developing the basic user flow for the main user stories, I went to ideate the key features and the interactions a user takes. Below is a quick demo of the 3 main features.

FEATURE 1

Adding artists


The main value proposition of ShowMi – a way for users to add/track artists they have seen. This could be automating artists from a specific concert’s lineup or manually searching for an artist



FEATURE 2

Viewing statistics


A method for users to get a quick overview of their entertainment attendance data. Users can see the total number of artists they’ve seen or events attended over a specific timeframe, as well as their most-seen artists.



FEATURE 3

Personalized recommendations


A method for users to explore upcoming events that may be of interest to them based on their data. Interviewees mentioned this was a feature they’d be interested in seeing as it gives more incentive to use the app.





DESIGN DECISIONS

Wireframing the interaction

To share some context before diving into the nitty gritty design decisions, a stripped back (no edge cases!!) walkthrough of the actions taken to complete user stories 1-3 is shown below.

The user can also use the ‘explore’ tab to browse through an infinite scroll of upcoming events, where they can tap into an event to view the event details as well as details of the performing artists.

User flow overview for context

Previous iterations

I first started with some low-fi wireframes and I found I was struggling to decide whether the primary goal of the app is to track artists or view statistics of artists seen or events attended. And how I would go about showing that. I did some A/B testing and found that despite Wireframe A being more visually appealing, majority of people didn’t know how to interact with it.

V1 Wireframes

DESIGN DECISIONS

HMW make adding artists effortless?

I wanted this page to have as little tasks and interactions as possible, so that the user is not distracted from the main goal - to add artists.

The entry point is the ‘+’ button in the nav, which prompts the user to search for something in the global search. In this particular example, the user searches for a music festival. Artists are based on the lineup data and sorted alphabetically. The user can navigate between the festival days and simply tap to add or remove an artist.

Goal: high task completion rate by keeping other interactions and distractions at a minimum.

User story 1 core flow (tracking/adding artists from an event)

Previous iterations

In previous iterations, I thought about including links to the artist’s profiles or streaming platform. However, including those options would likely reduce the completion rate as it would redirect the users attention, possibly even away from the app.

DESIGN DECISIONS

HMW make adding artists EVEN MORE effortless?

Beyond keeping interactions and distractions to a minimum, I also researched on common best practice patterns for how artists are displayed vs. events. I also asked interviewees what they notice and care about for both artists and events.

Key takeaways

  • UI for profile pictures/avatars typically use circles whereas calendar events use square cropped images
  • Events require much more important information than artists (ie. venue address, date(s), opening time, etc.)
  • Only using circle/image differentiator isn’t enough – often the event feature image is the same as the artist profiles image
  • Interviewees needed information to validate the event is the one they attended (ie. Artist on tours with multiple dates/venues)

Goal: leverage research to guide trade-off decisions and visual UI elements to differentiate between artist profiles vs. events.

Highlight key information using visual UI elements

ITERATIONS

HMW help users understand their stats?

Numbers and charts can often be daunting. To help highlight core pieces of information, I used color and typography to guide the users attention while making sure it wasn’t distracting by keeping the color pallet neutral, which allowed for vibrant artist/event images to pop. To validate my design choices, I ran everything through the plugin VisualEyes to generate attention heat maps.

Goal: be friendly for all knowledge levels by leveraging typography and color to guide the users attention

User story 1 core flow (tracking/adding artists from an event)

ITERATIONS

HMW design better event cards?

Events include a plethora of information and I quickly found that one size does NOT fit all. Showcasing all that info on a small mobile screen would be extremely overwhelming, especially when there are numerous events users can scroll through.

Key takeaways

  • Users need to quickly validate that the event they searched for is the one they attended
  • Users need more incentivizing information when exploring events to see if it’s of interest
  • 'Explore’ has much more real estate than ‘Search’
  • Research showed that the hierarchy of information is: 1. Image 2. Event name 3. Date 4. Other – location, time, number of people interested, etc.
Goal: understand the different user needs in Search vs. Explore to show just the right amount of necessary information for each situation

Final card UI variations

Previous iterations

I went through probably hundreds of card UI inspiration posts online, then narrowed down my criteria based on:

  • Is it overwhelming when there’s numerous cards shown at once?
  • Is it interesting to look at?
  • Does it show relevant information?
  • Is it scalable for different types of feature images?

Previous card UI explorations



Final Prototype


User story 1 I just saw a concert! Now I want to track all the artists I saw

User story 2 How many events have I attended? Artists have I seen?

User story 3 I want to explore events that might be of interest to me

Revisiting during COVID

To wrap up this project, I actually re-visited this since given COVID restrictions, if ShowMi were actually a real product, it would not have survived. To show my consideration for product viability, the proposed solution is to add a legend that would tag all ‘virtual’ events with the virtual tag. Low effort, high impact.

Virtual event tag


Key takeaways

Detachment from my own bias

Understanding how to analyze and use research data to put myself in the user’s shoes. This let me validate or reject my own assumptions, formulate strong rationale for decisions, and turn feedback into opportunities. If I didn’t do this, I would not have thought of or known that adding a recommendations page is what users want.


Don't need to re-invent the wheel

There are so many well-known UI patterns (such as cards, profiles, "add" buttons), it's not always feasible nor practical to create a new component when my justification is just because the UI looks 'nicer'. Instead, I spent a lot of time breaking down existing design patterns to analyze why it works, why it doesn’t, and what I can do to take it a step further.


Building a design system & Figma tricks!

Learning to create a design system really saved me countless hours and made it much easier to establish consistency, whether that be with defining margins, font styles, or drop shadows. I also learnt a few cool Figma hacks (creating varients, autolayout, changing nudge amount from 10px -> 8px)

What would I do differently?

APIs for app integration

It would be require less taps for users if data from their Calendar / Ticket Wallet app could automatically sync with ShowMi. For example, a notification on the lockscreen appears post-event to nudge the user to add the artists seen.


Explore data visualization UI

I believe that the stats section has a lot of room for improvement in terms of a) UI to help users understand data at a glance b) UI to be more interesting/engaging (maybe microinteractions?) and c) brainstorm relevant filter options


Scaling up for non-music eventsExplore data visualization UI

Although the initial pain point was to track artists & the corresponding event, I think this tracking idea could also span to events such as hackathons, networking events, case competitions, or sporting events. For example, after a user attends a case competition, they can track what place they came in, who was part of the team, or key highlights/learnings.


Check out some other projects while you're at it: