WAGMeet

“What is this Web3
  that you speak of ?”

Web3, or Web 3.0, is what could be the next stage in the evolution of the internet, where the power is given back to the users through blockchain-based decentralized applications and services, providing more security, privacy and control over personal data and digital assets.

The internet as we know it today, or Web 2.0, is focused on centralized platforms like Google, Facebook, and Amazon, where a single company or organization controls a large portion of our online activities. Web3, on the other hand, aims to decentralize the internet by giving users more control over their data and online interactions.

Decentralization allows power and control to be distributed among multiple actors, rather than being centralized in a single entity. In the context of web3, this means that there is no single point of failure or control in the system, making it more resilient and resistant to censorship. It could pave the way for open, trustless, permissionless, self-governing networks. In addition, web3 products can utilize blockchain-based concepts like NFTs and smart contracts, and use native built-in cryptocurrency for transactions.

Designing for Web3

While adopting this technology, it is important to understand its principles, limitations and development architecture to effectively design the product makeup and user flows that can account for them. There will be changes in payment flows, disruptions in the sign-up and sign-in processes, new error prevention requirements, and new transaction flows for creating tokens. At the same time, web3's technical capabilities open up opportunities to design novel features using the blockchain like the Wagmeet Handshake ↓ we built for this product.

While the web2 was a frontend revolution, the web3 will majorly be a backend revolution. Even though there is considerable change in certain aspects of the product, the remainder of the application should look and function the same way on the surface for the average user. This will allow the overall user experience to remain fairly intuitive and accessible.

The Future of Ticketing

The product was commissioned by one of the earliest web3 communities in India, Crypto Capable, and was intended to help promote the discovery and collaboration of like-minded members in local web3 communities. The application was to be a platform to create, manage and participate in events like meetups, workshops, seminars and conferences that facilitate face-to-face interactions between users.

As a native web3 app hosted on the NEAR chain, Wagmeet can make use of blockchain-based features like NFTs and smart contracts to introduce new incentive systems that promote event attendance and networking. We were solving some of the ticketing industry’s biggest problems using NFT tickets. By minting tickets on a blockchain, we eliminate the possibility of scalping and also enable the creation of regulated secondary marketplaces. Combining the NFT collectible boom with event experiences, the platform can incentivize and engage event audiences by creating unique NFTs that can be airdropped to ticket holders during or after every event.

Instead of using traditional web2 event ticketing services, web3 communities can potentially pioneer web3 versions of these platforms, tapping into a massive potential for unique in-event engagement methods. Wagmeet was envisioned to be the global NEAR community’s official event technology partner and serve as a model for future industry-focused platforms to be built on. The product will also act as a port for entry for non-native web3 users, giving them a chance to trial utilities like NFTs and community tokens.

Event Ticketing in Web2
and Web3

To gain a deeper understanding of the current event ticketing landscape and take inspiration for best practices in UI/UX design, we studied both web3 and web2 event platforms.

In terms of web3 platforms, we looked at apps on Ethereum, Solana, Avalanche, Cardano and Near chains. While each of these platforms has its own strengths and weaknesses, there were very few web3-based event ticketing applications, and most of them were very nascent or unreleased, which made it difficult to gather useful data for the analysis. We did find two relatively mature web3 event ticketing applications that had been released — YellowHeart and BlockTix — that had a strong focus on community building and incentivization. YellowHeart allowed event organizers to reward attendees with tokens for participating in events, and BlockTix used blockchain technology to ensure that tickets cannot be counterfeited or resold at inflated prices.

On the other hand, we found web2 event ticketing services like Eventbrite, Universe and Event Genius to have more full-fledged products that are widely popular. These services are centralized and non-autonomous but have been around for several years. They offer a wide range of features, such as ticket sales, event management, and analytics, and have a proven track record of handling large-scale events. These platforms provided insight into standardized user flows and UI patterns that can be used as references while building Wagmeet.

Branding in the Fast Lane

We needed to design a functional brand identity to kickstart the design process in the short timeframe we had for the MVP release. Based on insights gathered from a comprehensive brand questionnaire filled out by the CEO and other key stakeholders, we formalized the brand's persona and its attributes like values, personality, target audience, USPs and different touch points. We put together a visual moodboard that included examples of other brands that align with Wagmeet's persona, as well as any other visual inspirations.

With the information from the questionnaire and moodboards, we began to explore different forms and symbols through sketches and explored typographic variations using Figma and Adobe Illustrator.

We landed on a simple, recognizable symbol, paired with slightly modified typography as the logo. We created a responsive identity system from the base logo to allow for usage across different media in different sizes. The vibrant colour scheme fit the web3 product colour scape and it looked good in light and dark themes, thereby working for both web3 and traditional web audiences.

Building an Event Platform
with Reward Systems

The standard user experience and best practices for event ticketing platforms were already out there to model Wagmeet after. The challenge was to integrate elements of web3 into the platform in a way that keeps them accessible to users of web2.

The first step in designing the product structure was to define our user personas — event hosts and attendees. From basic research, we learned about the needs and goals of the two groups to model the product around. One key difference between the user groups was that the attendees were mostly web3 newbies for whom Wagmeet would be the first native web3 experience. The event hosts on the other hand were web3 natives looking to use Wagmeet to build and engage the web3 community, while also possibly profiting from the process.

We detailed a product schema defining different kinds of entities in the product (like event, user profile, host profile, ticket, etc.), their attributes and interactions. This helped ensure all features and functionalities were covered, and also served as a blueprint to design user flows based on.

We identified interactions that are key for the user's engagement with the app and created user flows that made these interactions easily accessible to the user and achievable in the least number of steps.

Embedding incentive systems into event ticketing was key for the platform’s competitive advantage. Using the concept of physical airdrops, we incorporated event attendance motives like refunds, variable reward pots, and NFT collectibles. The product was primarily targeted at budding web3 communities with enthusiasts from fields like software development, finance, business and design. In order to promote networking among community members, we introduced an add-friend feature that allowed users to “mint a meeting” with other users.

Ticket Refunds

All you got to do is show up

The simplest form of incentivizing attendance is to return the money paid by a ticket holder when their attendance is marked.

Shared Reward Pots

Variable incentives for small events

Organizers can set a reward pot of a set amount which gets distributed equally to ticket holders who attend the event physically.

NFT Collectibles

Gifts for attending and participating

Digital artifacts like autographs, 2D/3D images, videos, sound bytes, exclusive access tokens, etc., can be airdropped to attendees.

Wagmeet Handshake

Minting a meeting

Attendees can register meeting a person IRL in a blockchain with time and scenario details by adding them on the platform.

While integrating the web3 aspects to the platform, we designed them to have the least possible disruption to the regular event ticketing experience. We placed the features in relevant and intuitive spots in the user flows so the platform remains simple to use and integration is seamless.

UI Design, Prototyping

Usability is a major hurdle to overcome in the web3 space. With the modified tech stack bringing in novel requirements, we worked with developers to best understand them and design interfaces to work for them while remaining intuitive for the user. We started with wireframing low-fidelity screens defining the hierarchy and layout of elements and the information architecture of the platform.

Before building higher fidelity designs, we defined a basic UI kit to ensure that the UI design remained consistent across the application. We added tints and shades to the brand colours to form a colour system for UIs to use. We ensured type sizes are legible on different mobile screen sizes and set up a modular type system with both point height and line height information. We borrowed a majority of our icons from the freely available Material Icons. We also decided we are going to stick to an 8px grid with a set number of spacing options so that the visual design looks harmonious.

Equipped with a basic design system, we began creating high-fidelity designs of the screens, adding more elements to the UI kit as we go. We designed the platform on a section-by-section basis, prototyping, testing and iterating within each section before pushing screens for development.

We designed the platform to be open for anyone to explore events, requiring registration only when the user buys a ticket or tries to use a feature that needs an account. For the user with an existing wallet, both sign-up and sign-in processes became simpler. They only had to link their wallet in a simple OAuth-like user flow to buy an NFT ticket. But if the user didn’t have a wallet, the sign-up process became considerably different from the traditional web. Creating a NEAR wallet needed some human-or-not verification, deciding the kind of wallet and its recovery method, and understanding what a seed phrase is. To remove these cumbersome steps from the event ticketing app experience, we decided to hold off the wallet creation until the user is at the event, marking their attendance. That way, they can be assisted by existing NEAR community members at the event, making the learning process way more interactive and thereby, effective.

We used the brighter colours from the palette to design UI elements that contained information or actions regarding incentives. This helped visually demarcate and draw attention to the UI cards and badges about an event’s rewards.

Collectibles got a designated space next to Tickets. Together they formed the Assets section of the app, which listed all the Wagmeet-related NFTs stored in the user’s wallet. Collectibles were designed to contain audio/visual media, text and a link, allowing for all kinds of promotional campaigns. We also considered a collectible trading marketplace but decided to shelve the idea for a later phase of the product.

We created the Wagmeet handshake action as a way for attendees to connect with each other on the platform, like an add-friend feature. This allows users to share their profile details and social links with other users they “wagmeet” at different events. To encourage networking, every time two attendees connect through the wagmeet handshake, the interaction is recorded as an NFT on the blockchain, along with the time and location details.

We designed the wagmeet handshake to be simple and easy to use. Attendees can connect by scanning a QR code, an interaction made so natural for today’s urbanites by means of the ubiquitous mobile payment apps. We also added an add-note feature that allowed users to record what they want to remember about they person they just added. With both appeal and utility, the feature was designed to be a great way for attendees to connect and network at events.

We played around with the colour palette to visualize the different states of a ticket for a user. While tickets for past events and tickets that were transferred to others were designed to have neutral backdrops, upcoming and live tickets flashed with vibrant colours and animated gradients.

Through an iterative design process, we made high-fidelity designs, prototyped and reviewed them with the business team, development team and other stakeholders.

The project was paused before the team could hire illustrators and make graphics for the application. So please excuse the random floating circles you see in these designs, they are meant to be placeholders for the illustrators to work on.

While the application was mainly tailored to offer the best experience for the event attendee, we made sure the event host’s requirements were also adequately met. Users will have to create a separate Host profile to create and manage events. The host interface also included live event features like marking attendance, broadcasting messages and releasing rewards. We tried to offer a slightly modified visual experience for the host by reserving purple as the accent colour for attendees and using the blue shades for hosts.