top of page

Platform Design

EcoVerse, A NextGen MarTech Platform 

An Enterprise Blockchain Marketing Suite for Brand Marketers, Publishers, and Content Creators at large. The platform has two sides: one for Brands to create an event page that provides event information and the brand's NFTs for users to participate in and claim as a reward. The other is for normal users to create an account, claim, bid, and follow their favorite brand's event.

Project Overview

Designing new features that are more engaging to both users and Brand Marketers by improving user interfaces to incorporate functionalities that can be easily understood by individuals unfamiliar with the Blockchain and NFT industries.

Challenges: Enhancing user interactions and experience through design, troubleshooting the design limitations, and discussing design possibilities with engineers and managers.

Tools Used: Figma, Illustrator, Photoshop, Adobe Premier Pro, Linear, Vercel, Github, Slack, Google Analytics

Role: UXUI Designer    

RESEARCH, SITE AUDIT + PROBLEMS FINDING 

We gathered our research insights by communicating with the stakeholders and examining their industry's most significant pain points and their customers by reviewing comments and reviews.

Our team also conducted an in-depth study of their current customer's experiences using Google Analytics to see user activities in real time.

PROBLEMS ON BRAND MARKETERS SIDE

UNCLEAR OF NAVIGATIONS

In order to create an event, the navigation bar wasn't clear about whether it was for enterprise or common users

CONFUSING IN EDITING MODE TOOLS

The functionality in the Editing Mode for the Event Page was confusing. Users were uncertain about how many NFTs they should create due to the abundance of frames provided, and the command tool to add NFT information remained complicated. This caused brand marketers to spend some time figuring out where to input their information in the Editing Mode.

LIMITED OPTIONS TO DECORATE NFTS + LOW INTERACTIVE FEATURE

There is no option for brands to choose their own NFT frames, which does not align with the concept of different events. Additionally, there is no functionality in the template to allow them to create interactions, making their NFTs more attractive.

PROBLEMS ON USERS SIDE

USERS SPEND ONLY SHORT TIME IN PLATFORM

The dashboard does not create a compelling experience that encourages users to spend more time on the platform. The features in the platform primarily focus on individuals collecting tokens.

 

ONLY COMES TO THE PLATFORM WHEN THERE IS A SPECIFIC EVENT

Many users already have specific events to participate in, making it easy for them to lose interest after claiming their brand NFTs.

.

INFORMATION ARCHITECTURE

Website sitemap template.png

STYLE GUIDE AND DESIGN SYSTEM

Style Guide.png
Components.png

IMPROVEMENT ON HOME PAGE AND NAVIGATIONS

Interactive interface

homegif1.gif

ADDED BETTER INTERACTIVE INTERFACES + ENHANCED THE CLARITY OF CALL-TO-ACTION 

Added interactive buttons and presented our products on the Home page. In this case, users will have an idea of what our product is about. We have designed our Home Page to be as simple as possible so that even new users unfamiliar with the blockchain industry can quickly understand it.

Signup to see the platform

IMPROVEMENT ON ENTERPRISE MODE

ENHANCED FUNCTIONALITIES IN EDITOR MODE + REORGANIZED TOOLS FOR IMPROVED CLARITY

ENHANCED FUNCTIONALITIES IN EDITOR MODE + REORGANIZED TOOLS FOR IMPROVED CLARITY

I have enhanced the Event Template to facilitate a better understanding of each section and its functionalities for enterprises. With our new version, each section is now more clearly separated, and I have relocated the advanced settings inside the edit mode. 

I have optimized the Editor Mode for Brand Marketers, making it easier for them to create NFTs. Instead of drag-and-drop files, we have implemented dropdown functionalities. This approach allows users to easily delete or change frames. Additionally, users can specify the number of frames they want to create and request Ecoverse for more interactive features, such as adding a flipping feature or advanced frames.

EDITING MODE OLD VERSION

EDITING MODE NEW VERSION

Advance NFT's editing

Hide advance menus & highlighted main features

screencapture-ecoverse-dashboard-dev-vercel-app-app-templates-new-2023-06-21-08_49_33 1.pn
template page.png

Reorganized event section

Added smart selection navigation

ALLOW BRANDS TO CUSTOMIZE CALL TO ACTION BUTTON INFORMATION

We optimized our platform to support GIF and video files as backgrounds when the page got published, allowing brands to upload videos to interact more effectively with their users. Additionally, we added a call-to-action button at the top position to make it clearer. Brand marketers can now include their website and enable users to sign up for the event by filling in the information in the Editor Mode before publishing.

BETTER VISUALIZATION ON NFTS +

ADDED INTERACTIVE FUNCTIONALITY 

After brand marketers have added their information to each NFT in Editing Mode, each NFT will be presented as a high-resolution rendered card. In addition to the flipping functionality we have incorporated, it will also display the rarity level of each NFT, incentivizing customers to register for the event if they cannot claim these rewards.

yourmomdie.gif

Event's start date

New hierarchy of buttons and template

Event's NFTs showcase

IMPROVEMENT ON USERS MODE

IMPLEMENTED A FOLLOW FEATURE +

PRESENTED USERS' DATA ON THEIR LEVEL OF ENGAGEMENT AND PARTICIPATION

Each user will be able to follow either a brand account or an individual account to receive updates and interact. All the news updates and accounts that each user is following will be displayed on the Market Page. We have also added the option that allows users to showcase their achievements on our platform. For example, the number of NFTs minted, moments they have claimed, the number of events they have participated in, or trading prices. We see this as a long-term vision where if brand marketers observe that their users are well recognized in the platform and are loyal to their brand, they can also interact with them to help promote their events.

IMPROVED MY COLLECTIONS FEATURE AND INTRODUCED AN EXPLORE FEATURE

We have designed each NFT that users have collected to display information more clearly. Additionally, we have added an Explore feature to allow users to discover events outside of their favorite brands. We expect that this will encourage users to spend more time on our website, providing other brands' events with an opportunity to be noticed.

My Account2.png

CLEAR AND ORGANIZED VISUAL INFORMATION WITHIN THE EXPLORE FEATURE

The most updated event will be displayed in the first section, where users can view the starting time of each event through the countdown number displayed on the banner. Below are the details of various upcoming and ongoing events. Users can click on 'View Event' to see more details or save it if they are interested. These saved events will be shown in the Saved Feature.

ezgif.com-optimize.gif

RESULTS & NEXT STEPS

As part of a significant redesign and new implementation in the design, the platform is currently undergoing coding by our engineers. Some features, such as the Explore Feature, have not been launched yet, as we plan to release them with full functionality at the beginning of 2024. Despite this, the feedback has been extremely positive, with users appreciating the simplicity, style, and ease of navigation. The imagery resonated with users' senses and encouraged exploration of new events to try. On the brand marketer side, there is satisfaction with the improved organization of tools.  So far, this platform is now just signed Riot Games and Stranger Things as their clients where Stranger Things has planned to show this new marketing platform in London Store in 2024.

Testing the prototype gave me a window into how user think — what they enjoyed about the app and even what added frustration. I asked the participants to speak aloud while performing a set task. I noted all my observations on the PostItNotes. Then I used affinity mapping to find similarities among my observations and to group them by issue with respective potential solutions. I used a nifty app called MockinBot to create revised iterations of my prototype and reconnect any links between the screen journeys.

bottom of page