Background
YellowHeart is a ticketing company leveraging blockchain technology to prevent scalping and enhance fan/artist interaction. The ticketing app was part of an ecosystem with a desktop wallet and web marketplace. Its primary use was to provide proof of entrance to an event and hold your tickets and NFTs.
My contribution was unifying the UI design system and adding to an existing foundation app the previous product designer laid out.
I worked closely with the mobile dev team to gain perspective on the technical challenges and with the product team to gain insight into user pain points and opportunities.
A wallet for your tickets.
Up until then, wallets displayed only currencies. Our app started as a hybrid showing the coins and a drawer for your tickets organized by event.
When you click on any ticket, it will display a full-screen video with the event's basic information and action to display a QR, transfer the ticket or get more details about the event. Tickets as a video standard were part of V.0; when I joined, they explained that given the increasing popularity of the format from Instagram to TikTok, it felt apparent to implement it. Customers got very excited with the video/ticket experience.
Soon as we onboarded new clients, we enabled functionality that increased user engagement, such as changing the color of a ticket upon entry, media delivery, and messages to holders. As we expanded the capabilities, we separated the wallet and the assets into different pages that you could navigate from the bottom; this created a more streamlined experience for those wanting to enter a show.
I worked on the UI and UX, creating screens and flows for the wallet, the ticket list, and settings. I provided devs with specs, followed through with the development in case of last-minute changes, and tested the app with each release.
Syncing wallets
As a web3 company, we sought decentralized and safe ways to keep your assets. The marketplace launched only on desktop; the only way to buy was to download our plugin, create or import a wallet and pay with a credit card or crypto. Up to then, user expectations created by our competitors' apps had been that you log in to your account regardless of the device, and they could see the tickets.
When our mobile app started, we implemented an improved onboarding experience prompting a user to create or import a wallet and giving information about private keys. If they made a new wallet different from the one they bought the tickets with, they would not automatically appear on the mobile app. We encountered a lot of confused users trying to find their missing tickets. The dev team devised a way to sync your wallets by scanning QR codes and added a check to prompt these users about their existing wallets.
I worked closely with the product and dev team to create an informational and graphic, easy-to-follow, guided onboarding to keep the user confident as they scanned their desktop wallets into their mobile app. Reminders to safeguard private keys and explanations at every step helped significantly reduce dual wallet issues.
A wallet for your media
After releasing albums on our platform, we needed to add a way to play the media and differentiate them from the tickets. I worked closely with the team to create a media player to support video or music.
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 enter the show, our mobile app works like most other ticketing apps, you click on the QR button, and a rotating QR comes up where you can get scanned by our redemption app. The devs had created a working prototype for the first redemption app with a list of holders and a scan screen through your phone's camera.
I spent time looking at people entering events and how they get scanned into an event, observing the interface, the device, the average time on each attendee, etc., and used it as research to improve upon our redemption experience. I used color to reinforce feedback after the scan, displaying a successful or denied message and a green or red tint over the screen with a confirmation button to avoid errors.
I worked closely with the business development team to capture feedback from our clients and prioritized adding multiple profiles with different restrictions, basic reporting, and, eventually, badge printing for conferences.
For the multiple profiles, the dev team stripped down the capabilities to just scanning for the usher role and enabled all other capacities for the box office role. I created flows and screens for these two scenarios.
We also got a lot of requests for reporting, and we attended to it by adding a pie chart at the top with totals broken down into redeemed and not redeemed and the different ticket types.
We integrated the ability to print from our app via Bluetooth. The development team configured connecting the printer and formatting the label to include data points like name and work title collected during event registration. I worked on the badges, providing designs based on preloaded fonts the printer could use, and created usher and box office flows explaining its use and expected behavior.