Narcissa
gamified leaderboard
My Role
UX/UI Designer
Timeline
Apr 2022 - Jul 2022
project introduction
Narcissa aims to address the current lack of gamified leaderboard platforms that reward user activity with cryptocurrency and allow communities to set custom marketing goals.
This innovative app will provide users with personalized profiles to track their progress, a user-friendly interface for easy navigation, and the ability for profile owners to set specific marketing goals and offer crypto rewards. By integrating seamlessly with Web3 technologies, Narcissa will offer a secure and engaging experience for users within the Web3 ecosystem.
research
A key challenge in our research was the scarcity of marketing apps offering gamified experiences, particularly leaderboards. To address this, we primarily drew inspiration from existing video games. These apps often implement gamification elements effectively and intuitively.
Additionally, since our platform is designed for collaboration and social interaction, we analyzed popular social media platforms to understand how they handle user information, establish hierarchies, and present content in a user-friendly manner. This helped us design a platform that effectively balances gamification elements with social features.
findings
Leaderboard
After conducting a thorough UX/UI analysis of the leaderboard, we identified the most essential information to display and the optimal methods for presenting it. This ensures a seamless and intuitive user experience.
A table format is the most effective way to present leaderboard information. This allows users to quickly scan content and enhances readability.
After a detailed analysis of user cards, we identified the three most critical pieces of information to display: ranking number, username, and XP achieved. This ensures that the leaderboard effectively conveys essential user data.
Overall community profile page
To enhance user engagement and community growth, we conducted a comparative analysis of Instagram and Facebook profile pages. This research focused on information prioritization, user experience optimization, mobile-friendly design, and action-oriented call-to-actions.
Our analysis of profile screens revealed that the most crucial information to display includes profile picture, banner, name, and a brief description. Additionally, offer a good understanding on effective layout and organization, accessibility, mobile-friendly design, and the use of clear patterns to incorporate additional information like social links and key metrics in a user-friendly manner.
the solution
We began by creating sketches to visualize information based on our research findings. These sketches helped us determine the optimal organization and placement of elements. We then conducted usability testing with a focus group to identify any pain points or misunderstandings within the page design.
Once the structural framework was established, we proceeded to develop a high-fidelity prototype. This prototype incorporated essential features designed to guide users seamlessly through the page and ensure intuitive navigation.
Community Profile Page
To provide users with the most relevant information upfront, we divided the first section into two distinct boxes. Box 1 displays community-specific details, while Box 2 focuses on earning XP and climbing the leaderboard.
This structure allows users to quickly access the information they need upon opening a community profile.
The leaderboard section is positioned at the bottom for easy accessibility. It features a user-friendly design that allows for quick scanning and identification of key information. The user's own card is prominently displayed at the top, regardless of their ranking, enabling them to quickly view their position, username, and total XP (Box 1).
Below the user's card, a comprehensive list of other members is presented. To facilitate efficient navigation, we've included a search bar and social filters, allowing users or community owners to locate specific individuals or analyze rankings based on social criteria (Box 2).
main page
The main page will provide a comprehensive overview of the application, along with a search feature that allows users to easily discover and explore available communities (Box 1).
Additionally, the main page will feature community cards that offer a simplified overview of each community. These cards will include the profile picture, community name, description, and active social media links. This streamlined approach provides users with essential information without requiring them to visit the individual community profiles, enhancing accessibility and improving navigation (Box 2).
v2
This project was initially presented at the 2022 Ethereum Hackathon. Based on valuable user feedback and insights gathered during the initial launch, we introduced significant updates and enhancements in Version 2 to optimize the overall user experience.
The most significant changes were implemented on the profile page, beginning with a revised layout. Our initial design, which divided information into goals, profile details, and a bottom-placed leaderboard, proved less than optimal for user navigation. Many users found themselves scrolling frequently and navigating back and forth between sections.
To address this, we adopted a two-column view. This allows users to simultaneously view community-related information and the activities required to earn XP and achieve goals (Box 1).
In the right column after testing, we observed that users primarily focused on the top 3 and their own rank so we further enhanced the gaming experience and enhanced for a dashboard experience by introducing a top 3 card and a personal rank card. This provides users with a quick overview of the most relevant leaderboard information, making this new section a valuable addition. The search, filter, and full leaderboard sections remain accessible for more in-depth exploration (Box 2).
takeaway
By strategically combining Web3.0 elements with gamification, we successfully created an application that not only rewards users but also cultivates a strong sense of community and belonging.
Adaptability to emerging technologies is a crucial skill for any designer seeking to deliver cutting-edge and user-centric applications. This project underscores the importance of staying abreast of technological advancements to create innovative solutions that resonate with modern audiences.