Intro

Designing Fun.xyz – Simplicity and configurability for web3 dev tools

Designing Fun.xyz – Simplicity and configurability for web3 dev tools

app.fun.xyz

Date & Time

Transaction Type

Status

Apr 4

Bridge

Reverted

Apr 4

Stake

Success

Apr 4, 7:02 PM

Token Swap

Success

Apr 4

Token Transfer

Reverted

Apr 3

Create FunWallet

Success

Apr 4

Arbitrary Transaction

Reverted

Apr 4

Token Swap

Success

Apr 2

Stake

Success

Apr 4

Stake

Reverted

Apr 4

Token Transfer

Success

Apr 4

Stake

Success

Apr 4

Token Swap

Success

Token Swap

0x9fd3…cF9

ETH

0.69

$1346.45

USDC

1,312.65

$1346.45

Authentication

Twitter

Target Blockchain

Polygon

Gas Payment

Gasless Paymaster

.04 ETH

Frontend Framework

Typescript

Block Explorer

Search & Filter

Fun’s API Key

Executed Transactions

Onboarding

Wallets

Transactions

Sponsors

Alex Fine

Team

William Starr, PM

James Rezendes, SWE

Daniel Steigman, SWE

Timeline & Status

Launched

September 4th 2023

My Role

Product Direction

Brand

Marketing site

Web App

Intro

Fun.xyz imagined a decentralized financial future

Fun.xyz was founded in November 2022 to create a smart contract wallet SDK. When I joined, the team was been building without much consideration for the user experience.

Back then, most account abstraction companies didn’t think about about user experience. Most products in the were catered towards web3 developers but not accessible to web2 developers. Fun.xyz’s mission is to connect the web2 developers with the valuable tools of blockchain. It was obvious to me that a thoughtful user experience would be crucial.

Fun’s landing page - Feb 2023

Branding

The Brand & Marketing

When it comes to branding for new tech startups, simplicity is the main goal.

Although branding is important, spending excessive time and energy on finding the perfect brand or logo when you're still developing your story (which doesn’t exist) won't necessarily help you achieve product-market fit.

It's important to understand the internal and external goals achieved by a strong brand. It provides customers with a memorable identity, fosters trust, and conveys your company's values. Additionally, the brand plays a symbolic role by uniting employees around a common mission.

As a financial infrastructure company, we wanted to portray trust and simplicity.

Let the Fun Begin

Start building with the future of wallet development

Slides & brand icons

After aligned on brand and direction, I designed our marketing pages. You can explore the full site at Fun.xyz.

fun.xyz

FunKit

Powerful Wallets.

Astonishingly Fast.

Introducing FunKit: the best SDK for building smart wallets. Harness the power of account abstraction to build groundbreaking apps. Integrate into your project this evening.

Get started

Explore the docs

Authentication

Secure. Familiar. Fast.

FunKit blends advanced authentication frameworks with intuitive end-user experience. We support most popular sign-in methods, like Google, Twitter, Discord, MetaMask, and WalletConnect, expose custom signature methods, including MPC, BLS, OAuth, and passKey to create custom auth schemes. We also support third-party authentication providers like Privy, Turnkey, Web3Auth, and MagicAuth.

Two Factor Authentication

8

0

3

4

5

6

Two steps ahead of threats

􀡅

Authentication Modules

Sign in with

Apple

Apple

􀡅

Account Recovery

􀎡

Recover

your

crypto

See how FunKit enables account recovery

􀡅

Session keys

One signature.

Limitless play.

With session keys, end users can sign a transaction once, and then play a game with frictionless transactions. FunKit enables session keys with advanced permissions & security.

􀡅

Sign Up

Login

Docs

Demo

fun.xyz

Fun’s landing page - Now

Web Product

Developer portal

When I joined, Fun.xyz had an early design of their developer portal but it wasn’t intentional both in terms of functionality and design. Around June 2023, we began to redesign and build the web application.

The new developer portal was launched in September 2023 and is currently supporting over 100k monthly transactions.

Web App Design Process

We aimed to empower web2 developers with web3 features while abstracting blockchain complexities and providing visibility into their activity. We undertook the ambitious project to design and build the app in less than three months.

We started by determining critical information to use our SDK. Since our team comprised of both crypto-native and web2 developers, I met with web2 developers to understand their questions and how to connect web3 concepts to their existing knowledge.

Block

#9581537

Overview

Consensus Info

[ This is a Goerli Testnet block only ]

Block Height:

9581537

Status:

Finalized

Timestamp:

33 days 18 hrs ago (Aug-26-2023 02:10:36 AM +UTC)

Proposed On:

Block proposed on slot 6375653, epoch 199239

Transactions:

39 transactions and 83 contract internal transactions in this block

Withdrawals:

16 withdrawals in this block

Fee Recipient:

0x94750381bE1AbA0504C666ee1DB118F68f0780D4

in 12 secs

Block Reward:

0.003121414089306222 ETH

Total Difficulty:

10,790,000

Size:

137,464 bytes

Gas Used:

5,717,942

(19.06%)

-62% Gas Target

Gas Limit:

30,000,000

Base Fee Per Gas:

7 wei (0.000000007 Gwei)

Burnt Fees:

🔥 0.000000000040025594 ETH

Extra Data:

؃ �geth�go1.20.4�linux (Hex:0xd883010c00846765746888676f312e32302e34856c696e7578)

Transaction info

Highlight what’s happening rather

than diving into technical details

Etherscan Transaction

After establishing clear requirements, I moved into app sketches and then iterated through Figma prototypes with our web engineers. After several rounds of iteration, we had established a strong foundation of user flows and moved into high fidelity designs.

Creating your first FunWallet

Creating your first wallet can be intimidating because it requires a lot of configurations. We took an opinionated stance and helped our users create a wallet with just a few clicks. We show them how to transfer this action to leverage the SDK in their own applications.

Wallet creation & transfer tutorial

Wallets & Transactions

Representing wallets & transactions was an interesting and challenging exercise. We wanted to make something technically quite complicated (a gas-less, multi-signature wallet) into something accessible to web2 developers.

We wanted our developers to quickly identify a wallet's configuration and activity.

Wallet & transaction details

Gas Sponsors

Gasless transactions: In addition to wallet creation, Fun.xyz offers tools for business to offer gasless transactions. Our goal is to power builders who wanted to make crypto apps mainstream. Our gas sponsor launched in September 2023 and are now used by 500+ companies.

Sponsoring gas fees

Retrospective

Building a design culture in web3

At the startup, we often worked under tight schedules and evolving requirements. I learned that 'design work' extended beyond logos and user interfaces; it involved nurturing the company's design culture. This included teaching others the value of design, assembling a design team, and promoting a design-friendly atmosphere.

Since Fun.xyz, I've noticed several account abstraction companies embracing design's potential for both their growth and the industry as a whole. Building the design foundation for a rapidly growing startup in a dynamic market was an intriguing and fulfilling experience.