Relay

ABOUT

Relay is a web3 startup building a suite of tools focused around decentralized communication and educating the next generation of web3 users.

During my time at Relay, I designed and shipped Receiver, an end-to-end encrypted, Ethereum based messaging widget that can be installed on any website. As Relay's first designer, I was responsible for curating a consistent design system that could be referred back to as a source of truth for future Receiver versions. In this case study, I share highlights from Receiver v0.

challenge

Web3 users are lacking a native method of communicating using their decentralized identities.

There are many times where a user sees a wallet address or ENS name on a page and wants to send a message to that address– NFT sales, POAP events, DAO activities, etc– yet the website has no form of chat and there’s no way to find the user elsewhere. This gap effectively breaks the user's journey, and leads the user to web2 messaging outlets, such as Discord or Telegram.

Skip to Solution

objective

Create a MVP for sending and receiving DMs, with the following in mind:

Spam Protection

Wallet messaging does not require a pre-existing connection between two users, like most web2 messengers. Thus, it’s important that anti-spam measures are taken so an inbox isn’t flooded with unwanted messages at any point.

Spoofing Protection

Character spoofing in user handles has become more of an issue in web3, mostly as a means of scamming people in NFT sales. Its important to protect Receiver users against this, since NFT transactions is a primary use case.

Informative & Intuitive UX

As a new technology in the web3 world, its important to keep the user’s of Receiver informed at all points during their experience if anything goes wrong.

creating the flow

ideation

branding

Receiver is a messenger widget that can be hosted on various web3 sites, so it should have minimal branding that won't conflict with host website.

Flattened existing symbol mark to remove 3D look from logo. The flattened logomark looks much smoother across many use cases.

Making the Logo

Using the edges of our symbol mark to mask over the 'r' and 'y' in 'relay', a custom logomark was created.

COMPONENTS & Variants

Curating all necessary variants including loading, error, success states to ensure smooth prototyping experience.

Icons & Buttons

Cells & Lists

Inputs & Headers

designs

Initializing Receiver

To start sending messages, a user must first connect their wallet, then sign the XMTP request.

Home & New Message

Existing conversations will display on the home screen. A user can send a new message by clicking the '+' icon on the top right. A user can also check their connection and disconnect from the XMTP network by clicking their avatar, also on the top right.

Message Requests

Users can access incoming messages from non-existing contacts in the Message Requests page. The primary reason for implementing this was to prevent spam and cluttered inboxes.

ADDING AI: RELAY ROBOT

The rise of AI introduces many opportunities that could provide great value to web3 platforms looking to adopt Receiver

Relay Robot uses OpenAI's API to train itself on web3 company documentation and code base. User's of any web3 site can then interact with that specific robot using Receiver to execute on-chain interactions, get customized user support, seamless onboarding experience, and much more.

RELAY.CC LANDING

To really sell our new AI enabled chatbot integration, we needed a strong marketing site.

Version 1 of relay.cc marketing site contained a live demo so interested customers can see how the software could be beneficial to their company and could lead to greater user acquisition. The timeline to push this was tight, and so we needed a one-pager that could get the message across.

Further developing the landing page to include value propositions and how it works.

Next Project

Relay Receiver

Designing a MVP for Receiver, an end-to-end encrypted messaging tool built on Ethereum using XMTP protocol.

role

tools

timeline