About the project

🤔 What is it?

L2Faucet is meant to be a straightforward token faucet service that allows users to redeem multiple testnet tokens at once, through different networks, while also giving L2 networks the chance of hosting their faucets with a simple and non-exploitable authentication method called device attestation (backed by proof of machinehood).

🧠 Rationale

At the time this project was conceptualized, token faucets were a dime a dozen, all being pretty much the same linear experience: access the website, add your wallet address, get some tokens, rinse and repeat. The biggest selling point of these tends to be the low-depth experience of going in, getting what you want and leaving, but… Where is the real thought on keeping user retention? Where's the desire for giving more depth to this linear experience? This is where my work came in when conceptualizing and helping Automata to create L2Faucet.

🎯 The challenge

• Create a straightforward, multi-redeem token faucet;

• Identify room for improvement on the user retention side of using these faucet systems;

• Make sure the multi-redeem feature doesn't complicate the user journey;

• Create sub-pages focused on SEO optimization, so L2 networks joining us can share around the platform too;

Developing the concept

🔬 Research and analysis

Since this project sought to understand how to add more depth to an already optimized and linear experience that revolves around token faucets, a good starting point was checking out other pages of the sort! With dozens and dozens of these to choose from, finding suitable examples of the main practices was easy, so we chose Polygon Faucet, Quicknode Faucet & Faucet Circle, which were at the time the best examples of functioning faucets with a bit more of thought placed into their experience & looks. By checking them out, we got what we needed to kick-off our key-features study.

🔍 Finding the edge

After some research, the next step was defining key-features and concepts that we would be offering to our users! Many ideas and verticals were brought up, and here are the best ones:

• Multi-select made easy: One of the main edges that this faucet platform would hold on others at the time, was the capability of featuring multiple networks and tokens at once. To solidify that, the main design for this interface was created to focus on fully leveraging the concept of a shared and versatile environment, creating a simple "pick your poison" interaction;

• Attestation as core: To create not only a service, but also a platform, and even more relevant when thinking about hosting other networks, security and a solid method of authentication are needed to ensure exploits don't run rampant. Luckily for this project, we had our tech stack ready, utilizing our proof of machinehood (an attestation method focusing on devices) to ensure no one could cash in more than others;

• A place for networks: Having locked in the security measures, the next decision was making sure that we could represent the wide reach of network choices, while offering them their own exclusive display to feature their testnet tokens. For that, this project went in the direction of having a main collective page, while also having individual pages for each testnet network, allowing for SEO optimization;

• Keep'em coming back: To keep user retention on such a stream-lined experience, the plan is simple: a constant growth of the network list, creating a centralized faucet environment, paired with lower cooldowns for redeeming tokens, allowed by the non-existing rate of exploits, keeping faucet vaults healthier and filled for longer;

Understanding the user

👤 Using personas

Now with a solid grasp obtained by researching and defining concepts, we were ready for the refinement step: creating our persona! As a quick reminder, personas are vital for understanding who your target user is, and what pain points you will be resolving for them. Your ideas and concepts brought up in the previous stage of research will be tested!

👨‍💻 Jane, 28 years (Testnet power user)

"Many new products and test networks have been coming up, and I love being a beta tester for ALL of them! That being said, there's no such thing as holding too many testnet tokens. That usually takes me through dozens of faucets at a time, only to stock up a bit on resources for my testing. Well, I wish there were an easier and quicker method of stocking up on my tokens, maybe a single website or some interconnected ecosystem…"

💭 Motivations

• Wants to keep on exploring testnets and products;

• Wants to save time when redeeming tokens from faucets;

• Would like to have a centralized place to discover new faucets;

💔 Pain points

• Doesn't like the scavenger-like nature of gathering tokens on faucets;

• Is tired of not having enough tokens when exploring testnets and platforms;

Defining the user flow

📖 User stories

After understanding our persona, we created the user stories, which is the final step to tying our new design proposals with our end-user needs. Some examples below:

• Token buffet: "As a user, I would love to be able to redeem multiple tokens in a single faucet access";

• Solid security: "As a network owner, if I'm putting my network testnet faucet into a platform, it better be safe";

• The ecosystem: "As a user, I would love this platform to hold as many networks as possible, and even further, feature selected views of each network";

• Keep users hooked: "Yeah, if I can redeem more tokens here, while also having a growing catalogue of networks, surely I'll keep coming back!";

🫚 User flow

Having all of these done, we created our definitive user flow! This tool shows a simplified view on how we expect the user to interact with the platform proposed:

🔗 L2Faucet Flow

Working on the structure

✏️ Wireframes

With a working user-flow, the creation of our wireframes was the next step! This is a vital part of the UX process that allows us to understand some key interactions on our project, and get some screen ideas flowing:

Working on the visuals

😎 Setting the mood

With our wireframes done, now we needed to define a visual style. This would be our compass through all the UI decisions throughout the rest of the process. For this project, the key words are: color-fluid & clean, also featuring a broad usage of glassmorphism.

🎨 Colors

When it comes to colors, this interface needed to be as fluid as possible! For the main pages, a dark mode, color-infused palette was developed to keep neutrality, with an animated fade to give a nice touch to it; As for network-specific pages, the main approach was blending in project-tied tones, to ensure each ecosystem member would have their own home inside L2faucet.

✍️ Fonts

For fonts, we went with the main neutral choice for Automata's product suite, Work Sans! The usage of this font delivers great readability, with great neutrality, which perfectly matches the visual concept this platform was aiming at.

🫟 Shapes

The choice for shapes was pretty straightforward for this interface. A heavy focus on user-friendly flows, a visual focus on fluid colors and clean structures. There were no choices other than some beautiful rounded borders with a sleek block structure.

The results

Within this project a total of 33 desktop screens, and 34 mobile counterparts were created. Within these, here are some of the results achieved:

1️⃣ A unified faucet

Featuring multiple testnet environments, all inside a single ever-growing interface, L2Faucet became the first token faucet to hold different tokens for different networks, all a few clicks away;

2️⃣ As straightforward as ever

Even though there's now a multitude of token options, we still kept the same simple flow of: selecting your tokens, giving your wallet address and attesting your identity; the user doesn't have to learn anything new, just enjoy more power and versatility!

3️⃣ No exploits for you

With the successful deployment of proof of machinehood-backed device attestations, the faucet was as secure as one could get. Since its launch, no exploits have ever been recorded, allowing the platform to make available more tokens for everyone since no one is getting more than they should.

4️⃣ Reasons to come back

With lower-than-average cooldowns, and an evergrowing ecosystem of networks adding their testnet resources to the platform, L2Faucet becomes the go-to for testnet token redeeming.

The outcome

With the completion of this project, L2 Faucet was delivered and launched, holding 25+ network faucets and delivering testnet tokens to an est. 35k+ real users, ensuring that bots don't join in the fun;

You can check a few selected screens from this project on the figma link below:

🔗 L2Faucet Preview