Brief
In my role as a Lead UI/UX Designer, I've been through multiple project phases – from initial research and user flow design to low-fi and hi-fi prototypes, culminating in the final UI.
I'm also collaborating with diverse designer teams across the US, India, Italy, and Canada. Together, we're shaping and implementing various platform sections like plot builders, avatar creators, and the main UI.
My Roles
- Lead UI/ UX designer
- Pipeline and Road map designer
- UX researcher and product designer
- UI artist
- Implemented UGUI grey box
- Pipeline and Road map designer
- UX researcher and product designer
- UI artist
- Implemented UGUI grey box
Plot Builder
Plot Builder is a powerful tool that allows you to customize your own virtual land using pre-made buildings as a foundation and constructing your unique virtual space. You can also purchase various furniture and assets to enhance and decorate your space.
Below is the interactive Figma prototype with the placeholder assets.
Below is the interactive Figma prototype with the placeholder assets.
- All these designs have been tokenized within Figma, with consistent UI kits carefully developed for each platform segment.
- All the menus and buttons are fully interactive and responsive.
- All the placeholder assets are clickable and designed in three states:
-Hovered
-selected
-deactivated
- We developed a full guideline for the icon ratios, margin sizes, colors, etc.
Implementation in Unreal Engine:
During the implementation stage, my responsibilities included exporting assets and integrating UI widgets within the UMG.
During the implementation stage, my responsibilities included exporting assets and integrating UI widgets within the UMG.
Market place
In the Marketplace, users have the opportunity to buy and trade various assets, including avatar wearables, parcels of land, event tickets, and more.
Asset Page:
By clicking on a specific asset, you will be directed to the next page where you can access additional information about the creator and view the item's trade history. From there, you will also have the option to make a purchase.
By clicking on a specific asset, you will be directed to the next page where you can access additional information about the creator and view the item's trade history. From there, you will also have the option to make a purchase.
Implementation in Unreal Engine 5.2:
The next step involved implementing all the screens into UMG. We meticulously transferred the tokenized Figma files into Unreal Engine 5.2
The next step involved implementing all the screens into UMG. We meticulously transferred the tokenized Figma files into Unreal Engine 5.2
Login Page
On the login page, users have three options:
1- Login: Existing users can log in to their accounts.
2- Sign Up: New users can create an account to access the platform.
3- Continue as a Guest: Users can explore the platform without creating an account.
Challenges:
1- Introducing Wallet Connection: We need to effectively introduce new users to the concept of "connecting their wallet" and explain how it works.
2- Streamlined Credential Entry: We aim to provide users with various simplified methods for entering their login credentials while maintaining a clean and minimalist design.
