about

Metaforo

An open source community platform run on Web3 Community Protocol.
role

Interaction Design
Visual Design
Design System

Project Duration

Jan - Mar 2022

Project Type

Identity
Product Design

01.

Overview

Context

Problem

This project was done during my internship at Airfoil studio. We were approached by the company, which requested we rebrand and redesign their product, Metaforo. Metaforo is a 100% open source discussion platform built for the next decade of the Internet. The redesign included the explore forum, admin group management, and a few other user-flows. Additionally, we organized an adaptable and expandable Design System for their future designers and developers.

With the limited time given, we wanted to ship as much as we could. We not only needed to identify the usability issues with the current version, but we also wanted to focus on removing frictions from the overall user journey. Secondly we redo the visual branding, lastly we built a design system for client. We also made the designs responsive, and ready for development.

Outcome

At the end of this two-month project, we hand off the design specs of the product, with optimized user flow and brand new visual system. The researchers and designers in the company are conducting more usability test and survey, we will iterate based on the test result and feedback we received.

02.

Process

Following the Human Centered Design process, we first need to mapped out the user needs and conducted user interviews, then we were able to define the problems.

03.

Understand

What is Web3.0?

In order to understand the current product better, I did some research on Web3 design. I browsed through articles on Medium and Gaby’s Web3 Reading List. By researching about this concept, I was able to understand the framework behind Web3 design decisions better.

Web3, the future internet we are moving towards, it is a decentralized internet. The Web3 world is one that has open-source protocol at its foundation, additional features and Web3 is about rearchitecting internet services and products so that they benefit people rather than entities.

Web1.0: Read
Web2.0: Read-Write
Web3.0: Read-Write-Own

10 years from now, in the Web 3 era, 80% of companies exist in the form of  DAO (decentralized autonomous organization), and a general DAO protocol supports these "companies". What will happen in online communities? What can we do now to unlock their potential through Web 3 ideas and technologies?

DAO:
Decentralized Autonomous
Organization

What is the user need?

Blockchain networks are driven by systems of aligned incentives. A well functioning public blockchain requires a community of users, node operators, developers, and miners, who all play roles in a mutually beneficial network ecosystem.

Why Metaforo?

Roadmap

04.

Goals

The company has two main business goals for us, which is to improve their current product by making new visual branding and user flows. In addition, we decided to compose a component library for them in figma to make their future development easily scalable.

• Make composable web3 specific UX flows - provide efficient navigation

• Engage users - make design consistent, appealing visual branding

• Rearrange infrastructure 

• Organize a library of components for designers and developers -Make a scalable design system

What's with the current product?

Inconsistent navigation, discourages members’ participation.

No content cultivation. Fragmented daily activities for DAO members.

How can people find what they are looking for?

Explore Forum

No streamlined cross DAO Dashboard, user could not easily switch between groups.


DAO group page

Missing clear CTA.

Create Group needs a separate page.

Create group modal

05.

Discover

User Interview

In order to understand Web3 native better, I asked a group of friends of mine who are active crypto trader and NFT enthusiast to try out the current product, and do an interview. User persona and empathy map was needed to describe our potential users, based on the research that has been done. This persona describes user personality, the frustration and goal of using the product.

Empathy map

User persona

Overview
Caden is a real tech geek. He started get into crypto back in 2019. His love for technology, open sources and innovation initially drawn him into this big world. Like many other, he started invested in BTC and ETH before diversify, he likes to try new exchanges, wallets and tokens but keep most of his main holding in hardware wallet. He uses Twitter and join various of discord groups to keep up with crypto news.

Goals
· Join qualified community to be part of the decision making.
· Keep up with the newest technology.
· Find new NFT project to invest.

Pain points
· Hard to find crypto community in real life.
· Want to discuss about hype around crypto and NFT.
· Hard to find reviews on the newest investment tool.

Competitors

We downloaded some popular DAO platforms from the market, and learned from their pages. We realized even more now that we are designing a micro-blogging platform, we are providing a platform where user can express their voice freely and communicate with other voices in the community.

Diamond/Community forum
‍
· Legible usability
· Offers both dark and light mode for readability
· Multi-languages option available
· Clean and consistent UI

Supernova/Feed/NFT Gallery
‍
· Clear page structure
· Easy to navigate

‍
· No dark mode option
· Inconsistent UI

06.

Define

Iteration

The chosen design followed the same style & pattern as the original with a login status at the top that was complemented with a chosen profile picture, which can kept the design of the website consistent and chic.

Lo-fi Wireframes: Metaforo explore forum/Before Joining/Joined

Mid-fi Wireframes: Metaforo explore forum/Before Joining/Joined

UX for Group navigation

Metaforo Explore Forum

• Navigation change.
• Remove the “explore” tab, no more “portal” style.
• Ability to set different display name for each group.
• Remove mentioning Metaforo logo in the navigation bar, so always keep one group icon and then group name, if user didn’t set up group icon, then use Metaforo group icon.

DAO forum simplified view

• Add a “groups” icon at the upper right corner to let user switch between different group, instead of drop down.

Iteration

Metaforo explore forum/Joined

Metaforo group page/Before Joining

Metaforo create new group

User Testing

A usability study was conducted to determine where improvements could be made. I asked a group of six to complete a task, which is to insert a poll in the group page. I recorded their reactions during the test, also asked them to a rating afterward.

Task Card

Poll Insert

Result

· All 6 of them were able to complete the test.
· 50% of the testers think the poll icon is a bit hard to find,   especially when they aren’t familiar with the icon prior.
· 80% of the testers gave 5 out of 5 for the user flow, they think   it’s clear which field to fill in next.

‍

· All 6 of them gave 5 out of 5 for the improvement in user flow and visual design.

“I like the look a lot”
“The poll icon is difficult to locate”
“Can’t this be a button?”

Design Decision

I took this question to the client and ask about their opinion, they mentioned a similar suggestion brought up by a member. Consider the priority level of this function and after the discussion, we decided to keep the original design.

07.

What I learned

Defining the project scope with team members was the first right thing we did for the project. It is essential to understand the context and technical constraints before designing.

Communication is Key, I learned through the project that it is important to keep proactively participation in team meetings, and feedback sections with the clients, know that we all want to make something great and meaningful.

Take visual hierarchy as an example, I should always keep the“why” question in mind, what is the reason behind the design decision I made and why I need to understand them. In doing so I am hoping to become more sympathetic as a designer. 

Previous

Scale AI

Next

Design System for Metaforo

© Yun Yao - 2022
‍