Harborgate
Designing more sophisticated solutions on top of a simple design system that works.
Role
Lead UX Designer
Team Member(s)
Chimezie (UX Designer)
Project Length
4 weeks, 2 days (2024)
Solution Type
Figma, Notion, Zeplin
Solution Type
Web App
Result
Hi-Fi UI Design, Research Insights
Implementation
The Overview
Design systems are like the backbone of any suite of apps or platforms; having a set of reusable components and UI elements that follow clear standards.
Now, let’s talk about Aptos Monkey—the biggest NFT project on the Aptos blockchain. They’ve got a whole lineup of platforms: Echo (now Harbor), The Jungle, and Rafflor. These apps are the utilities of Aptos Monkeys, used by thousands and tons of other projects too.
Thing is, when these platforms were being designed, a loose and simple design system was created because speed is most important in the NFT space. Now, Echo’s leveling up. It’s going from a peer-to-peer project token platform to a full-blown token launchpad protocol. The stakeholders, however, want us to stick to the existing design system to keep things familiar for all the existing users.
The Problem
Harborgate (formerly Echo) started out as a simple P2P market where users could swap Aptos community tokens. It was pretty modular from the jump, and we even added a token staking feature not too long ago but, taking a platform like Echo, which was built for simple features, and designing on a sophisticated feature like a token launchpad protocol on top of it is no walk in the park.
A token launchpad protocol is like a platform like Squarespace, but for community tokens. It lets users create their own tokens without needing to code. Plus, there are other features like presales and launchpads.
The main challenge is making this whole experience as user-friendly as possible while working within the constraints of our simple and loose design system. It’s like trying to build a skyscraper on top of a bungalow—tricky, but doable with the right plan.
The Design Process
We skipped user research from the get-go because we already had existing users on the platform. Our plan was to do a private testnet after the first round of tweaks.
With this information, we dove right in, aiming to seamlessly integrate the launchpad protocol features into the existing Echo platform’s architecture. We used abstraction to simplify the features down to three main functionalities: Token, Launchpad, and Airdrops.
We made these sophisticated features look as simple as a walk in the park for users at first glance. Each of these main functionalities is interconnected and packed with sub-features for users who wanna dig deeper; Basically, get the important stuff front and center—super easy for your average user, but still robust enough for the power users.
Interface-wise, we had to make some minor tweaks to the existing dashboard navigation to fit in the new feature. Nothing too drastic, but enough to make it distinct from the previous onee
Token Section
The token section has a page where users could check out tokens they created or contributed.There’s also a page to easily create a new token and another to verify and list tokens.
Now, the verify and list token functions were already part of the platform. But when it came to adding community tokens, we still needed to have them verified and listed if they weren’t created on the platform. So, we naturally slotted these functions right into the token section.
Launchpad Section
The launchpad section is definitely the most complex of the three sections. This is where users can set up pre-sales for their tokens and contribute to launching tokens themselves. It’s basically the heart and soul of the platform.
Now, within this section, we’ve got two subsections: View Launchpad and Create Launchpad. View Launchpad lets users scope out their own launchpads as well as check out what others are launching across the platform.
On the flip side, Create Launchpad is where things get a bit form-heavy. I mean, we’re talking about setting up token launchpads here, so you know it’s gonna get detailed.
To keep things simple for the everyday user, we streamlined the forms—only showing the crucial stuff upfront and saving the technical details for when users really need them; making the platform user-friendly without skimping on the power features. The details of the launchpad deserves another case study of its own; i’m definitely summarizing it heavily here. A lot of research went into it and that’s where the most iterations were made as you will see in the testnet phase.
Airdrop Section
The Airdrop section is pretty much straightforward compared to the other two.
Token owners on the platform can create token airdrops. They can even set up a list of eligible wallets for the airdrop. Then, those lucky enough to be eligible can claim their airdrop tokens right from the platform.
Testnet Phase
We ran two phases of the testnet, lasting about three weeks in total. 20 participants from the Aptos Monkey community were handpicked for the testnet. It was crucial to have a mix of folks who had experience with the previous version of Echo and some who were new to the whole token launchpad protocol scene.
During this time, the devs and I worked closely, ensuring all functionalities worked as intended and were simple enough for everyone to use. Most of the tweaks and changes were focused on the launchpad section, with a few adjustments in the airdrop section.
Additionally, we abstracted more information on the platform to simplify things further, based on the feedback we received from the testnet participants. It was essential to ensure the platform was as user-friendly as possible.
At the end of the testnet phase, all users were satisfied with the changes and had minimal concerns about the platform.
While we know iterations are an ongoing process in any platform, for now, the platform was good to launch publicly.
More UX Design Works
Graveyard
Allawe
More Work Categories
Visual Art
2 works, 3 Galleries
Visual Design
3 works