Overview
Highloop.io is an all-in-one CRM designed to simplify the distribution of NFTs for brands, while also facilitating community engagement. It aims to reduce complex web3 terminology, making the process more accessible and user-friendly for everyone involved.
Goal
Create a platform for brands to launch unique NFT collections and engage their communities, allowing them to offer distinct experiences to customers while gaining insights through blockchain analysis.
Time frame
9 months
Team
UI/UX Designer
Senior/Lead Designer
Product Manager
Chief Product Officer
Business Analyst
Front-end developers
Back-end developers
Blockchain developer
My Role
UI/UX Designer, responsible for:
Visual design
Design systems
User research
Usability testing
Desirability testing
Developer handoff
UX writing
Discovery & Product Vision
Feature prioritization for our MVP
In the initial stage of designing this CRM, we brainstormed to define its core values and unique selling points. This step was crucial as the business objective was to develop a product enabling brands to distribute NFTs to their customers as rewards or loyalty tokens. These NFTs would offer tangible benefits like ticket giveaways, future purchase discounts, exclusive access to limited-edition products, and more.
Through these discussions, we identified three key aspects of the product:
Creating NFTs
Distributing NFTs
Engaging with communities
To start off, our focus for the MVP was on the first two aspects: Creating and Distributing NFTs. Therefore, the initial phase of our product roadmap centered around enabling brands to create NFTs.
Bridging the gap between Web2 & Web3
After we analyzed some competitors and other web3 products, we noticed that many of them weren't being widely adopted because they were more geared towards people who already knew a lot about web3. We saw this as an opportunity and decided to take a different approach by offering a more familiar web2 experience, while also offering the Web3 option
Rather than having users create a Metamask account and manage multiple wallets, we onboarded users with regular social logins to make it faster and simpler while managing their wallets in the background, making the process more seamless.
User flows
After gaining insight into what direction we were headed, we mapped the initial flows, detailing all business requirements and technical limitations.
We listed some potential users (non-validated personas), jobs to be done, features related to these goals, and a hierarchy between those features to visualize the big areas of the app.
This stage was crucial to have a good alignment between business and tech since we were able to design multiple scenarios for different use cases and user personas.
Branding
Due to our small team, I played a crucial role in Highloop's brand development, specifically in defining typography and colors. Through branding sessions, we pinpointed key themes and ideas we wanted the Highloop brand to convey.
Subsequent competitor analysis, focusing on visual elements, revealed opportunities to differentiate ourselves through color and typography. Consequently, we opted for a green and black color scheme, paired with a bold typeface, to create a distinctive visual identity.
Using these foundational branding guidelines, we then established the visual style of the platform to align seamlessly with the brand.
High-Fidelity UI & Handoff
During the UI design phase, we built a design system, defining the design tokens, basic components, and animation guidelines for the interactions.
All handoff processes were aligned with the developers to ensure good communication and avoid major misunderstandings.
In the end, our handoff files always had a screen flow, to indicate and explain every step of the flow, an interactive prototype to showcase the overall experience, notes explaining business rules, and extra links for complementary documentation.
In order to solve the brands’ desire to whitelabel the CRM by having a customized claim page, we decided to have placeholders for the logo and allow the brands to change the color of the buttons and the background.
Product validation & launch
During the validation phase, we presented the MVP to key stakeholders to gather feedback and validate the usability of both brand and collection claim journeys.
After completing several iterations based on the feedback received, we officially launched the platform on producthunt
Our launch was a significant success, as we achieved a Top 5 ranking and secured the No. 1 spot for Web3 products of the day.
Outcomes & Learnings
In tackling this project, our primary challenges revolved around designing multi-branded flows and simplifying web3 terminology and processes. These hurdles pushed us to work closely with our tech and marketing teams to develop the best strategies for creating specifications for the multi-branded flows.
Simultaneously, involving stakeholders from the project's early stages proved instrumental in determining the most effective communication strategies with brands.
Following the launch, we achieved significant milestones:
Over 200 NFTs successfully claimed and an impressive time of just 1 minute to claim an NFT using social login.
These outcomes not only validated our efforts but also provide valuable insights for future projects.
Runor Ekpagha.
