Research & design

The Yellowheart App

Yellowheart is a music streaming and ticketing platform that aims to revolutionize the way music artists and fans interact. The app allows fans to support their favorite artists directly by purchasing unique digital collectibles and exclusive content, in addition to concert tickets. This UX case study outlines the process of redesigning the Yellowheart app to enhance user engagement, improve the overall user experience, and increase user retention.

Opportunity

Seamlessly infuse entertainment into a ticketing experience by harnessing the power of blockchain technology.

Objective

To create a brand-new blockchain ticketing wallet that seamlessly combines easy ticketing with digital collectibles (NFTs).

    the final product

    Through our platforms (Marketplace and Wallet app) we've successfully onboarded 27k users to the web3 space and minted a total of 70k NFTs, with nearly 10k serving as event tickets.

      Design Process

      user personaS

      After conducting extensive user interviews via our users in the Yellowheart Discord server, we narrowed it down to the three main ones: The NFT Music and/or Sports Fan, The Music NFT creator, Crypto Enthusiast.

      While the use cases for each persona was slightly different on the Yellowheart platform, for the app they have similar objectives and pain points.

      User Journey

      Nick and his 2 friends, Mike and John want to check out Scope in Miami. They hear that the tickets are going to be sold on the Yellowheart marketplace.

      After Nick purchases the 3 tickets, he is directed to the app store to install the Yellowheart app on his phone. He installs and syncs his mobile wallet with his desktop browser wallet easily.

      He's thrilled that he can instantly see the tickets that he had purchased 10 mins ago on his phone. He shares the app with Mike and John so that they are able to receive and view the tickets on their devices.

      Fast forward to the day of Scope in Miami. Nick meets up with Mike outside of the venue.

      John is running late so Nick will need to send the ticket. Nick brings up the tickets and pastes John's wallet address and sends 1 ticket.

      Nick brings up the ticket QR code and the attendant at the door scans his ticket and Nick and Mike enter the venue, anticipating an amazing time.

      MVP

      These features were required for all three personas to create their Yellowheart wallet, purchase their ticket(s), transact the tickets if needed, and finally to redeem their ticket(s) at the venue.
      Ability to view NFT tickets
      Receive and send NFT tickets
      Profile
      Enable QR Code scan
      Ability to create or import wallet
      Sync mobile wallet with desktop wallet

      YOUR TICKET WALLET

      Before, wallets only showed cryptocurrencies. Our app started by showing both crypto and a place for your tickets, sorted by event.

      When you tap on a ticket, a big video appears with basic event info. You can also show a QR code, send the ticket, or learn more about the event. Having tickets as videos began with Version 0. They said they did this because videos were popular on Instagram and TikTok. People really liked the video-ticket idea.

      When we got new clients, we added things to make users more interested. Like changing a ticket's color when you enter, sending media, and messaging ticket holders. As we added more features, we split the wallet and assets into different pages at the bottom. This made it easier if you just wanted to get into a show.

      IN SYNC

      Being a web3 company, we aimed for safe and decentralized methods to safeguard your things. At first, the marketplace only worked on desktops. To buy, you had to get our plugin, make or bring in a wallet, and pay with a card or crypto. Other apps from competitors had set the idea that you log in to your account everywhere and see tickets.

      When we launched our mobile app, we improved how new users started. We asked them to make or import a wallet and gave info about private keys. But if they used a different wallet than what they used to buy tickets, the tickets wouldn't show up on the app. This caused a lot of people to be confused and lose their tickets. The tech team found a way to match wallets by scanning QR codes and reminded these users about their other wallets.

      YOUR Media WALLET

      After releasing albums on our platform, we needed to add a way to play the media and differentiate them from the tickets.

      We also included a new media section to add all videos and music organized by albums. Your NFTs (tickets and collectibles) and currencies would live separately.

      THROUGH THE DOOR

      When it's time to go to the event, our mobile app works like many other ticket apps. You tap the QR button, and a spinning QR code appears that can be scanned by our redemption app.

      The developers made a prototype for the first redemption app. It had a list of ticket holders and a screen where you could scan using your phone's camera.

      I watched how people enter events and get scanned in, observing the screen, the device, and how long it took for each person. This helped me make the redemption process better. I used colors to show if the scan worked or not – green for success and red for a problem. There was a button to confirm, so mistakes could be avoided.

      I worked closely with the business team to get feedback from clients. We added things like multiple profiles with different rules, basic reports, and later, printing badges for conferences.

      For the different profiles, the developers made it simple for ushers to scan and enabled all features for the box office role. I made plans and screens for both of these cases.

      People wanted reports, so we added a pie chart at the top that showed how many tickets were used and not used, and the types of tickets.

      We made it possible to print from our app using Bluetooth. The developers connected the printer and set up how the label would look with data like names and titles from event registration. I worked on the badge designs, using fonts the printer had, and made guides for how ushers and the box office should use them.
      Back to the top