About the ProjectProblemResearchIdeation + PrototypingTesting the DesignSolutionResults
Hire me

NftyTunes

Redesigning concert streaming WEB3 platform

info

About the Project

NftyTunes is a WEB3 startup offering a new way to watch live concerts, transforming them into NFTs

It allows people to enjoy owning stuff connected to their favorite artists without the physical constrictions of the local scene or tour schedules.

We needed to recreate the excitement and anticipation of attending a live show and allow people to own those moments and eventually transcend the limitations of the digital nature of the NFT, its inherent intangibility.

My role:

UI/UX Designer

Tools:

Figma, Whimsical

Agency:

kidults agency

help

Problem

The existing website is hard to navigate and needs a cohesive visual identity

The first MVP is developed, but users don’t participate in live auctions and don’t watch live streams, which are the main feature of the platform.

flag

Project Goals

Goals set to overcome existing issues:

Create a clear website structure

We need to highlight the platform's main feature and create a clear route for the users, leading them to complete the main action on the website: creating a bid on an NFT in a live auction.

Design a user-friendly interface

By making the interface consistent and recognizable by users, we need to make the experience close to the existing NFT platforms with an auction.

Apply a new visual identity

Excellent visual design is a part of a good user experience, so there is a need to apply a cohesive style that would highlight the music concert theme of the platform.

search

Research

Web Analytics

I decided to check web analytics to address the issues that stopped users from going further than the main page. What was hard to use on the website?

At first glance, analytics showed that the page depth numbers are pretty low.

Analyzing session recordings and the click map helped identify the website's confusing areas, which are the bidding process itself and the navigation. Also, there were missing pages — people tried to click on the non-clickable items.

Usability Testing

To test the assumptions based on quantitative data, I conducted several usability tests, asking people close to both NFT and the music fields to make a bid on the platform. My goal was to figure out what frustrated users the most while using the website.

The participants were asked the following questions:

Try to make a bid of 0.01 ETH on the NftyTunes Live concert page, choosing the «Epic» tier.

What was easy and what was challenging about completing this task?

Here are the insights from the tests:

When making a bid, participants were lost because of the many steps they had to take to get to the auction page and understand how to make a bid. Users had problems with the rating system, finding the button on the live auction page, and the process of filling out the bid form.

Competitive Analysis

Analyzing how the process of bidding and buying NFTs is designed on popular NFT marketplaces, I figured out the optimal solutions that suit in case of our platform and to which users are used to.

Competitive analysis was performed to learn more about how similar platforms integrated live auctions and item pages.

lightbulb

Ideation and Prototyping

From Wireframes to Clickable Prototype

To begin, I made user flows to create use cases and cover missing steps, decreasing the number of clicks needed to complete the main action.

After that, I came up with wireframes and a new website structure, deleting the excessive elements on the original website.

brush

Design

Applying the new visual identity to wireframes

Based on my wireframes, the brand designer made a visual identity, showing it on several pages as an example. The main idea for this project was to resemble the atmosphere of the concert, so visual clues such as festival bracelets, tickets, and bright colors were used.

You can explore the ideas behind the brand design on kidults agency website.

science

Testing + Improvments

Testing and Improvements

I developed a click-through prototype in Figma to conduct a new round of usability tests to understand how users interact with the new interface.

I observed users completing the tasks through screen sharing on zoom and asked for feedback at the end. I received excellent and surprising reactions and some improvement areas, which I later implemented into the final design.

I conducted tests with the potential users. I asked users the same questions I did in the initial testing in the research phase. We developed two variants of the live auction page to see which one performed better.

As a result, we found that showing the table on the screen right away works better than showing different NFTs and hiding the rating table in the popup.

Version with hidden table

Version with exposed table

We tested the desktop version because the analytics showed that more users preferred this device.

flag

Solution

See the research arrow_forward

The main page

Displaying the opportunities of the platform

We restructured the main page, adding clarity for the user about the main feature of the platform and leading him to explore NftyTunes Live concerts.

Nftytunes Live

Easy navigation between the live streams

As live streams are the platform's main feature, it was essential to provide users with straightforward navigation. The division between upcoming, live, and past streams was organized using tabs.

concert live stream page

Native auction process

According to research, making a bid on the auction was the most confusing process, so we decreased the number of steps. We designed the tables with the user’s status on the top section, so it’s easier to stay on track with the rating. Finally, we added the opportunity to withdraw or upgrade the bid if needed easily.

Nft item page and marketplace

Adding the missing pages

In the new design, we included the NFT pages that research proved were missing, and the marketplace page, a feature that clients want to implement in the future.

task

Results and Next Steps

At the moment the website is in the development stage

To measure the future design's success, we’ll have to look for the quantitative metrics that were low before the redesign and, of course, the conversion rate. Additionally, I would like to highlight that the success of this project as a startup highly depends on the marketing strategy as well.

insights

Reflection

This project initiated me to dive deep into the WEB3 world, as I didn’t have a chance to interact with it before.

What would I do differently?

As the clients rushed us to finish the project by the curtain deadline, I feel like I didn't consider all the needed user flows. For example, I would spend more time on the profile page and the NFT item page. We can return to refining the existing features and adding new ones in the future as the platform develops.

What was challenging about this project?

It was interesting to see which patterns and interface solutions are used in online auctions: finding the optimal way to organize the innovative functionality of the platform was a challenge. Also, it was one of the first international projects in my career, so presenting my decisions to clients in English tested my communication skills.

arrow_back

Back to the main page

arrow_upward