About the project

🤔 What is it?

1RPC is meant to be a one-click relay experience focused on giving an extra layer of protection for users interacting with Web3 networks. The product revolves around a simple, single-click connection between the user's crypto wallet and our TEE (Trusted Execution Environment) security layer.

🧠 Rationale

Browsing through Web3 has always been a dangerous affair when it comes to connecting your wallet (the most common auth. method for this side of the internet) to third-party services. When connecting to a website, your data might become vulnerable to ill-intentioned actors, and the safety measures that the user could take tend to be too technical and hard to apply. With that being said, I ask you: why did no one think about an easier solution for protecting your wallet and vulnerable data, and why is the technology needed for this so hard to apply? This is where my work came in when conceptualizing and helping Automata to create 1RPC.

🎯 The challenge

• Create a security tool for crypto wallets that ANYONE can use;

• Bridge the gap between cutting-edge security technology and the average Joe;

• Develop features that can add depth to this experience, adding in more tools for advanced users;

• Ensure a truly simple experience for users;

Developing the concept

🔬 Research and analysis

At the time this product was conceptualized and developed, the industry did not have anything similar to an RPC service provider for web3 services, so the research ended up being less market-based, and more concept-based. An extensive study on design literature focusing on branching complex tools to the common folk, IE: "Don't make me think" & "Rocket surgery made easy" by Steve Krug, was conducted, leading to some fresh approaches on creating a high-complexity easy-to-use solution from scratch.

🔍 Finding the edge

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

• One click experience: One of the main identified issues on the concept brought up was the technical knowledge needed for users to apply said security solutions to their crypto wallets, as it was not the type of technology that average people would be able to operate. As a silver bullet for that, we came up with a one-click approach, where we abstract all the technical steps from the process, leaving the user with a single choice: "to add, or not to add 1RPC to your wallet instantly?"

• Your network, your service: Such a powerful and usable tool wouldn't be worth much if the coverage offered by it wasn't broad enough; For that, the second main focus was ensuring multiple Web3 networks, no matter the complexity of their setup, could fit into the one-click approach proposed above; For that, a unified work front between backend (technical validation) and design (UI roll down) was conducted. As a result, the platform featured 20+ networks on release, and kept expanding to house more and more endpoints;

• Knowledge base: Since we were talking about a new concept, with a now really low entry barrier, we couldn't just expect users to blindly trust us and our tech. For that, a heavy focus on building consciousness through our landing page and external knowledge bases was also applied! With that in mind, our pages featured various bits of info about the service, and detailed documentation was created and shared around multiple points on the user flow, to ensure the user trust is backed by facts;

• Pro features: Even though most users were new to the concept, there was still a small percentage of power-users that would have to be accounted for; Those were already using their own solutions for wallet security, and needed a selling point for hopping on 1RPC! As an answer to that, features focused on adding more layers of security, such as personal API keys, transaction sanitizers, contract verifications, etc. were added.

Understanding the user

👤 Using personas

Now with a solid grasp obtained by researching and defining ideas, 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!

👨‍💻 Daniel, 32 years (Web3 enthusiast)

"Man, there are so many cool projects out there, and they won't stop coming! It's so great to be living in the golden era of web3… NFTs, airdrops, new networks launching every week, I'm having a full plate every day! On the not so bright side though, I think I've been scammed like what? Five or six times this year already… They took my wallets, shared my data around; it's kind of a risky business after all, isn't it? I just wish there was a safer way of dipping my toes into all of these shiny new projects!"

💭 Motivations

• Wants to explore all the glory of Web3;

• Wants to protect their data when connecting to third parties;

• Wants to roam around the new web free of security concerns;

💔 Pain points

• Is tired of getting their data stolen or getting scammed;

• Doesn't feel completely safe to enjoy their Web3 passion;

• The risks of connecting to third parties take away from the bliss of finding new projects;

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:

• One-click approach: "As a user, I don't want to worry about the high entry barrier that comes with technology, I just want the solution for my problem";

• Multitude of choices: "If I'm using this product, I want it to fit into my needs. In this case, the more networks I use that can be covered by this, the better";

• Information everywhere: "As a user, even though I love the easy access to this tool, since it's security we're talking about, I'd want to know a bit more about the background work so I can really feel safe about using this";

• Advanced tools: "I'm what some would call a power-user! I already have my own measures for security on Web3, so if I'm using this product, it has to have that extra something to convince me…";

• Ecosystems: "I'm not much of a generalist myself, so I'd like to have direct access to my main network of choice, and nothing more";

  
  

🫚 User flow

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

🔗 1RPC Preview

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 need to define a visual style. This would be our compass through all the UI decisions throughout the rest of the process. For this interface, the key words are: minimal and tech-cool, with a focus on some darker derivatives of glass-morphism;

🎨 Colors

When it comes to colors, we wanted to go for cool darks and some highlights of orange at the time (was a theme between older projects, using the main Automata orange), so we came up with a minimalist palette with overtones of white opacity on a dark blue surface. Some secondary colors focused on illustrations were also selected so we could make them pop on our infographics!

✍️ Fonts

For fonts, we went with a familiar font to Automata's ecosystem, Work Sans! The usage of this font delivers great readability, good device support, and a multitude of font weights and other quirks that can be great for a modern looking interface!

🫟 Shapes

For shapes, we wanted a really user-friendly and clean look, so the go-to choice was round and smooth borders, existing inside a card-heavy and bento box-oriented structure hierarchy;

The results

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

1️⃣ One-click experience

All the studies conducted earlier led us to achieving the magnum opus of tech experiences facing base users, the one-click does all solution. Users can simply choose their network and add the endpoint to their wallets!

2️⃣ All the networks

Starting with 20+ networks, and now reaching 62+ networks, users of this tool will surely find their endpoints, raising the bar for their crypto wallet security!

3️⃣ Info that matters

With a heavy focus on information throughout the landing page, and a nicely fleshed out documentation site, there's no space for doubts, only for the certainty of a secure and trustworthy service!

4️⃣ Tools for all levels

As mentioned before, even power-users would get something for them! We have an internal dashboard with multiple, easy-to-use features that raise the bar even further on security measures.

5️⃣ A focused ecosystem

For users seeking their own specific networks, 1RPC features dozens of network-specific pages, all SEO-optimized, and easily findable on browser searches.

The outcome

With the completion of this project, 1RPC was launched, achieving the exact objective that it wanted: reaching millions of users and protecting billions of relays. As of recent data gatherings, we've amassed over 40 billion relays to date, with over 5 million monthly active users. More info on that can be found with a simple Google search :)

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

🔗 1RPC Preview