FORWARD - SocialFi App UIUX

David Huang

UX Designer
UI Designer
Affinity Photo
Figma

Designing for an All-In-One Web3 social platform, aiming to lower the barrier for Web3 startups and newbies.

ABOUT

FORWARD is an All-In-One mobile application designed for Web3 users, integrating features like dynamic feed, Web3-based community, built-in wallet, instant messaging, and more. This App eliminates the need for Web3 users to frequently switch between Apps and simplifies the process of building communities.

01 Design Objectives

Provide all-in-one Web3 services within a mobile app.
Lower the barrier for Web3 newcomers to use Web3 services.
Offer various smart contract features without coding.
Provide users with a seamless and smooth experience.
Since FORWARD offers a multitude of complex features, this case study focuses on the following four areas:
Community Creation
Instant Messaging
Built-in Wallet
Using smart contracts without coding (Using NFT Minting as an Example)

Target Users

FORWARD aims to address pain points for two key user groups:
High development costs for early-stage Web3 startups in creating communities (robots, contract engineers, marketing, voting tools, etc.).
High learning curve for Web3 newcomers on how to create and use hot wallets, as well as tasks like transferring tokens or purchasing NFTs.
FORWARD's goal is to be a bridge for Web3 communities and newcomers, lowering the barrier to entry for Web3 services.

02 Design System

Partial view of the design system used by FORWARD
Partial view of the design system used by FORWARD
FORWARD employs purple as the main color with a colorful gradient as a complement.
The fonts used are the tech-inspired 'Orbitron' and the universally readable 'Inter' font, compatible with various functionalities and interfaces.
The application features gradient rendering, providing a lively and diverse color experience.

03 Community Creation

Through a simple process of clicking 'Create Community,' entering basic community information, and sharing, users can easily create a community.
In the initial design of the community creation process, we try to minimize the input parameters to reduce user time and operation complexity.
This ensures a step-by-step iterative update of content for Web3 startups. After users create a community, they can customize and add on-chain and off-chain governance as well as related dApp applications according to the community's needs.

04 Built-in Wallet

Depending on the login method chosen by the user at registration (Email login or anonymous login), a built-in wallet is auto-generated for users.
Once registration is complete, users can immediately use wallet-related functions and settings. When designing the UI for the built-in wallet, we integrated NFT collections and dApps allowing both experienced Web3 users and newcomers to use the wallet without the need for switching between apps and confirmation in the phone's browser or Metamask.

05 Instant Messaging

Unlike instant messaging apps in general, FORWARD enables users to seamlessly perform functions like sending tokens and NFTs, monitoring coin prices, and sending dApps directly into the chat screen.
By selecting your contacts, UI displays users' wallet addresses within the chat screen. Token sending to your contact is intuitive, eliminating errors caused by copy-pasting or typing.
In the chat interface, users can track and discuss token market prices and NFT floor prices, and provide the dApp functionalities needed within the community, making the user experience even easier and smoother.

06 Minting NFT without coding

Through a two-step process, users can invoke the smart contract provided by FORWARD to mint NFTs. They can then freely transfer the NFT to the secondary market for trading or keep it for their collection. In the design process, the complexity of parameters is reduced, allowing users to easily attempt NFT minting without the need for complex information input. This allows mobile users to easily complete the process.

07 UIUX Lead

In this project, I was responsible for the entire UIUX process, from designing the design system to wireframes, prototypes, flowcharts, etc. I also conceptualized and communicated product ideas, and continuously iterated the product through Usability Testing and UX research.
Throughout the project, I closely communicated with PMs and the development team, working together with a user-centric product mindset to solve pain points and create value for users.
Partner With David
View Services

More Projects by David