YH-Ipad.png

YellowHeart Ecosystem

🔮 The Ask: Seamless onboarding from web2 to web3 while purchasing tickets.

👨‍👩‍👧‍👦 The Audience: Crypto enthusiasts in their 40s; young mid-20s NFT, music, and game fans; and event organizers and musicians from 35-55 years old.

👪 The Team: I was the company's art director and UI/UX designer. CPO, one Product Designer, Product Manager, Head of Mobile, technical manager, and a 10+ dev outsourced team.

🗯️ The Impact: We have onboarded 27k users to the web three space through our platforms and minted 70k NFTs, of which almost 10k are tickets

Background

Getting a ticket for a concert in high demand can be a Sisyphean task. Recent news about Taylor Swift tickets selling out in seconds brought to light the awful truth about ticket scalping still being a big problem in the music sector. The company's CEO wanted to fix that by making secure tickets that could live on the public ledger, where bots had a more challenging time scalping.

Web3? Yes, many companies took a stand on this idea of web3, where users take ownership of their assets by claiming them on a public ledger and keeping them encrypted and secured in the blockchain. But for someone buying a ticket to see their favorite artist, this can easily go over their heads. Most fast-adopting "web3" platforms are a hybrid; users do not have 100% ownership of their asset until they remove it from the company's custody. This solution was a smart and easy way to go around someone having to manage their private keys and learn about wallets to buy a ticket, instead, they could sign up like they normally do to any app, and we do the work behind the scenes. But this can also be a security risk to hold all assets in our servers. This point of contention was a pivotal point to how we built the YellowHeart ecosystem, management was a strong proponent of web3 and decentralization, so we decided to create our proprietary mobile and desktop wallet so you could integrate with credit card payments, hold and manage assets, and gave more control over the capabilities we could offer in the future.

I held an Art Director title at the company, working closely with the business dev and marketing team to develop and produce concepts for our clients and with the product team to improve UI/UX. 


Initial research

Delved deep into the crypto space and community, becoming familiar with the onboarding as it existed. I was constantly researching, joining communities in discord and Twitter, reading white papers, listening to AMAs, getting scammed, buying crypto, getting a wallet, and navigating different marketplaces and networks. All to better understand how to provide a better experience for people who joined through our app. Competitive analysis was the tool I used the most; jumping into competitors' sites was my way to learn about the space and follow patterns and trends in a fast-changing technology. Looking at traditional ticketing practices and other ticketing and music apps advised the ecosystem we aimed to create.

 

One place for all assets

The YellowHeart ecosystem consists of 2 wallets and one website that interact together. We have a desktop wallet and a browser plugin. A mobile app, your wallet on the go, holds your currencies, tickets, and media together. And the marketplace where all the wallets can connect.

The marketplace was one of my first UI challenges; I had to unify and improve the existing site. I did a site audit and found lots of styles that could be more consistent. We improved the homepage, collection, and asset pages. 

The website also helped as a source of truth for transactions across your assets and wallets and eventually as a place to see all your NFTs regardless of the type. We needed a place to display your wallet's contents on the website. Modeled after Opensea's profile page, where you can connect with any wallet and see all your assets, we crafted the My assets page that included your name, photo, amount of assets broken down by category, a list of your NFTs as cards, and a history of your assets transactions across wallets. We did it through design sessions with the team that we used to define requirements and combine wireframes to create the first iteration of the page. I applied the UI components and solved additional requirements from the dev team before building it.

 

Payment flow improvements

A few months after launch, we needed to improve our payment flow. Onboarding to web3 is less seamless than other one-click checkout flows. Many users needed help creating their wallets and finding their recent purchases. 

I worked closely with the product team to create a modal flow with steps and clear messaging to bring guidance and ease. We added loading animations for better and clear messaging detailing the success or not of your transaction and clear next steps of where to find your assets.

Web3 Tickets

The first conference we ticketed was for crypto enthusiasts; they are familiar with wallets and keys. The most popular way to purchase the ticket for that event was on a computer. But to gain entry to the event, customers would have to transfer them to their mobile wallet. We sent email reminders explaining how to transfer assets or sync the wallets, but we still had to troubleshoot tickets held on external wallets the day of the event.

After the My Assets page was released, it enabled the dev team to treat the tickets in the marketplace like we did on the YellowHeart mobile app; with a click, they could display a QR to be scanned by our redemption app. Showing the QR from any browser opens the door to other mobile wallets like MetaMask to gain access to the physical event. We implemented all our ticket capabilities to be wallet agnostic. Eventgoers can see and redeem their tickets, listen to media, and register for an event from any wallet with a browser. I worked on the UI and user flows.

 

Beyond the fans

As we continued growing our client list, the requests and demands grew. Given that we were such a small team dealing with all these new requests piled up, for some, we failed deadlines, but for others, we delivered right on time. Our team took a step back and started defining new processes to define priorities and get a list of refinements and unique features that could improve our customer satisfaction, this time not for the fans but for the event creators.

We rolled out two significant milestones on ticket reporting; we added basic reporting per event in our redemption app (project here) and multiple profiles with different permissions for ushers and box office. Secondly worked on event creator ticketing reports on the website for all potential sales with redeemed and minted tickets. 

We also added badge printing capabilities and created leaderboards where tickets holder participate in gaining points through activations.