top of page
NUWA- User experience of a Nuwa Official Website
Designed the user experience for the Nuwa Project's official website on multiple platforms, including mobile responsive and web versions.
For more information, please check our website.
Company
NXG Labs
My role
Product Designer
Timeline
Mar-Apr 2023
Tools
Figma, Illustrator
Workflow
01
Discovery
Explore the problem
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
Define
Problem Statement
"How might we design a Web3 Website to align with product tone, effectively showcase information, and enhance view and download metrics on mobile and Web Platforms?"
Design
The Nuwa product comprises three primary elements: the Nuwa metaverse, Avatar, and SoulBound Token(SBT).
Each element serves distinct functions and offers unique gameplay experiences. Understanding their individual costs is crucial, and therefore, it is important to explain what they are and how to engage with them in alignment with our product goals on our official website
Avatar
Nuwa Metaverse
SoulBound Token
Wireframe
After discussing with product team, we have identified three key interfaces that need to be designed, The Nuwa page, The Avatar page, the SBT page. I outlined the interfaces we need to design.
Nuwa Metaverse
Avatar
SoulBound Token
Nuwa Metaverse page
This interface introduce users to the product's features and project goals, providing an overall understanding of the application.
The Avatar page
This interface focus on gameplay mechanics and features related to the Avatar section of the game.
The SBT page
The SBT interface describes what it is, how it works and why SoulBound Token is necessary in this App, and how the upgrade system associated with it.
User Testing Feedbacks
01 The download portal needs to be more visible
02 The videos should not play with sound by default settings
04 Add a road map page
05 On PC, use iOS and Android QR codes for easy scanning on mobile devices for download the App
Desktop High-fi
Before
After
1. Highlighted and add a new bigger “Download now” button, because leading people to download our app is at highest Priority.
2. Changed fonts and sizes to make text more eye-catching.
1. Highlighted and add a new bigger “Download now” button, because leading people to download our app is at highest Priority.
2. Changed fonts and sizes to make text more eye-catching.
1. When the user needs to slide the module left or right, the mouse will present the swipe icon, prompting the user to interact with the action.
Adding a roadmap will give users a more complete picture of our product timeline.
Highlighted the QR code for downloading NUWA App on different devices.
Final Design
Web Version
Phone Version
bottom of page