top of page
luckydraw_metahuman.png

NUWA- User experience of a Web3 metaverse social App

Nuwa is a fusion of Web3 Metaverse social app, which aims to provide a space where users can connect, socialize, and express themselves freely.

For more information, please check the website and feel free to download our App.

Company

NXG Labs

My role

Product Designer

Timeline

Aug 2022-Apr 2023

Tools

Figma, Illustrator, Photoshop, Unity

Workflow

01

Define
Demand

Define

Understand goal
and problem with PM

02

Interaction
Design

Design

User Experience Design

03

Visual
Design

Follow up

Give sugestion to visual design team

04

Develop

Follow up

Check the final effect and  make sure it align with our design

05

Usability
Testing

Optimazation

User testing and interview to make timely adjustment

User Research

Summary

User Interview

I conducted in-depth interviews with three distinct groups of target users: those familiar with Web3, those interested in Web3 but not yet involved, and habitual users of dating and social apps.

Jackie

Crypto Trader

Emily

Designer

Allen

Engineer

Painpoints

“I don't know how to join a community where I can talk to people about crypto and Web3 technologies”

“I would love to get into the Web3 space, but creating a virtual wallet is complicated enough for me”

"I'm tired of dating apps' "Swipe" matching mechanism and wish I could chat directly with the people I like."

Expectations

"I am thinking of a 3D visually appealing interface that offers a range of people I can chat with"

“I hope to understand more and even enter the web3 field in a simple and interesting interactive experience

" I would like to have private messaging, group chats, and video calls function"

Persona

User Journey Map

Problem Statement

persona1-01_edited.png

How might we design a user-friendly social metaverse platform that:

1. Have a smooth registration and login experience with a unique personality test.

2. Have creative interactions that fit the theme of the NUWA plane and enable seamless interactions between users.

3. Incentivizes users to create and share content while fostering a positive community.

Problem 1

"How might we design a smooth registration and login experience with a unique personality test?"

Solution 1: Login/Registion/Personality test Page Design

  • First time login with email flow

1. Landing page: Allow Apple account and email sign-up/sign-in.

2. Enter your email and verification code.

3. Create a profile: Collect the user's basic information like username, gender, and age.

  • Personality Test

4.

5.

6.

Transition page: Smooth transit from profile creation to personality test. 
 
Personality Test Pages: Five simple and interesting questions could help us categorize users by their personality and better match users with similar people.
 
Have positive feedback animations after selecting options for each question and a progress bar above the questions to increase the completion rate of users completing the test.

The last question in this personality test comes in the form of a multiple choice form to reduce the feeling of pressure on people to do the test, and these tags will appear in the user's personal profile so users can get a preliminary idea about others when visiting other users personal profile.

  • Get your SBT/Turn on notification

7.

8.

9.

Transition animation: Smooth transit from the test to a result page. A loading page is needed before presenting the test results to represent the analysis process in a real situation so that it is more logical and the results are more convincing.

Soulbound Token Page: The Soulbound Token is act like a test result in this phrase, it has the same function as an ID

Using the Account ID card form to demonstrate the concept of a Token in a vivid and graphic manner, 
reduce people's understanding of the cost.



Open access to notifications and location: The last step before getting into the homepage is "Turn on the notification and share location". This is very important in social App, turning on notifications will make users more active, keep them engaged with your app, showcase its value, and convert your user into a paid customer. Sharing the location will allow us to better match users by distance and improve the user experience.

Problem 2

"How might we design creative interactions that fit the theme of the NUWA plane and enable seamless interactions between users?"

Solution 2: Home page and chatting pages

We've made an innovation in the interaction design of our home page, setting it apart from conventional social apps and the swiping mechanism seen in dating apps.

Our approach aligns seamlessly with the planetary theme and Web3 technology, enabling users to assume the role of planet inhabitants represented by light points. Users can freely rotate the planet, explore online players, click on these light points to access user profiles, and initiate direct chats or follow one another.

NUWA Planet Homepage

The filter allows you to choose whether to display individuals on the planet as male, female, or both.

Filter

You can tap the icon or shake the phone to switch the batch of people displayed on the planet.

Shack

You can rotate the planet and click on the dots above to view the user's profile, follow them, or chat.

NUWA Planet

Quick Match

1. Click on "Quick Match"
2. Loading animation
3. Positive feedback animation

4. Chat directly with your "Matchers"!

Chat Pages

1. Click on the "Chat" icon below.
2. You can easily find all the chat history you saved.
3. You can always see their profile when chatting with others.

4. Send "gifts" to someone you like! 

Problem 3

"How might we incentivizes users to create and share content while fostering a positive environment?"

Solution 3: User Post Flow and Personal Profile Page

​1. We have developed a well-established engagement mechanism for promotion incentives. 

Finish tasks to upgrade, and win game coins and NFT, coins can be withdrawn through the exchange platform (Binance), missions include:

  • Daily Check-In

  • Invite Friends

  • Share your stories (post)

  • Comment on other users' posts and initiate interactions

2. We have implemented features that encourage engagement, such as likes, comments, shares, and direct messaging. These interactions are easily accessible and add value to the user experience.

  • The Moment Page

This is the "Moment" page in the app, where we post new events and news in the banner area, where users can share moments of their lives, as well as insights and information about web3.

People can swipe those posts through like swipe in TikTok to see videos or images posted by other users and interact directly with creators they interested in.

  • Post Process

1. Tap the round button at the bottom right corner of the screen, you can choose to take a photo with the camera or post a photo in your album.

2. If you click to post a photo in the album, it will jump to the album, and you can choose the video or photo you want to post.

3. After selecting a photo or a video, you can add text to the photo to make the photo or video more attractive. We provide 10+ fonts and any color to choose from.

4. Once you have edited the photo you can edit an interesting title or description for your post.

5. Click "submit". You can see your new post on the moment page right away.

 

​Easily like and comment

To increase interaction, there is an entry point for clicking on likes and comments both when the post is clicked on and in the preview state.

Directly chat with others

If the user wants to chat with someone directly from the post, the user needs to send a gift to start conversations.

Next Step

1. Add novice guide to first-time login. 


2. Add necessary text to Icon and some pages as an explanation to assist understanding


3. Make the post process more smooth and interesting:
 

  • Use AI tools to help people post smoothly, effectively, and in a higher quality. For example, AI generates covers and titles for you. (Catton style, tech style, NUWA avatar style...) 

  • Add more edit functions: Template, and text, add stickers, filters, clips, Tags, or edit sound/add music.


​4. Make communication and interaction between users smoother and more fun:
     Add more functions like voice calls, video chats, chat rooms, and virtual parties.


5. Enriching Avatar usage scenarios

  • Customize and dress up your avatar.

  • AR Avatar Camera.

  • Use Avatar stickers in chat.

After conducting a comprehensive usability test and gathering invaluable insights from the user community,I have summarized the following points for improvement:
 

Create your own PFPS
3D Animated Avartar Sticker
AR Camera
Virual Party
Avatar Chat
Dress Yourself Up

Social Media Posts

bottom of page