Wolf Planet: Investment Community and Education DAO

Rebrand a Chinese finance community app for a global relaunch and integrate Web3 DAO features into their education platform

Planet > Hall > Tribes > Curated
For You, NFT Article, Tribe & Teams Ranking List, and Tribe homepage
Assets home, send/ receive Tokens, and check transactions
NFT assets homepage, Courses tab, view Course NFT, Articles tab
Me homepage with scrolled down view, and My Wolf with scrolled down view
Task Centre, My Referrals, My Achievements SBT tab and milestones tab
WolFinance wants to bring its app and users into the Web3 world. Named Wolf Planet, it will have DAO functions and Gamified Tokenomics to foster an engaging investment education community.


Overview
‍

Timeframe
Nov 2023-May 2024.
Services/ Deliverables
  • Market and competitor research.
  • Information architecture and user flow charts.
  • Logo and branding design.
  • User Interface design.
  • Wireframing.
  • Hi-Fi User Experience design.
Client
WolFinance is a Hong Kong-based investment technology company. They aim to innovate investment education and community through their app.
Note
This project was conducted at Coded Solutions (V Systems), a blockchain services provider, specialising in tokenisation, infrastructure, and digital payments. For this project, we were the third-party vendor for our client, China Mobile.  

My Role
  • Lead the design team (2 x UXUI, 1 x 3D) through research, ideation, and design.
  • Work with product managers to create the information architecture for MVP1 and future phases.
  • Manage and produce designs with the 3D animation vendor.
  • Design and implement a new design system to key user flows.
  • Prepare design handover materials for developers and third-party designers.

Key Challenges and Learnings
  • Client requests vs UX UI standards: managing the client’s ideas and change requests, whilst maintaining user-friendly design.
  • Third-party collaboration: ensuring the 3D design vendors understand the aesthetic vision of the client.
  • Fast-paced environment: working with changing deadlines and adapting designs to fit new priorities.
Some Hi-Fi screen designs

Discovery

UI & Branding
Analysing the client’s existing app revealed overcrowded, repetitive and corporate-looking pages. Backed by our market and competitor research, we created a modern, Web3-style branding and UI design system.
Competitor research and design references, Money Masters and Orb Club
Information Architecture/ DAO Infrastructure
The client requested a multi-layered infrastructure, where planets represent different investment topics, and users can create discussion groups called "Tribes". For the information architecture, I focused on minimising the number of clicks to explore the app, and built instinctive user flows.
Hi-Fi Planet (Investment Topics) home screens - users switch planets by swiping the left
Gamified Tokenomics
The client requested a user-level-up system based on content sharing and their token, Wolf Tooth, to encourage engagement. For the Web3 flair, they also requested the level-up to be shown in the user’s avatar character. Whilst our technology team planned the Tokenomics, the UX UI team researched Web3 gamified social platforms and level-up systems.
3D wolf character features/ fragment selection (designed by our vendor, managed by myself)
Web3 gamified social platforms research - Orb Club and Warpcaster

Problem Statements

To focus on our client’s requirements and understand users better, the insights and requirements are summarised below. 
Investment Beginners need a way to engage with the online investment community through a trustworthy platform. Because they want to meet like-minded people and learn to make wiser investment choices.
Investment Experts need a way to predict the market trends and learn about the latest on-the-ground finance news, as what is published by the news comes out too late. Because they want to safeguard their investments and find new profitable opportunities or collaborators.
Investment Institutions need a way to monitor what their customers and future markets are interested in or struggling with in investment. Because their current customer surveys are insufficient in customer behaviour intel.

Redesigning the UI and branding for Web3

My team worked on modernising WolFinance’s corporate branding to differentiate the company from the Web3 app, Wolf Planet. To match the UI, they kept the blue-grey tones. Leading the design system, I implemented iconic Web3 elements: glass-morphism, gradients, neon highlights, and, to honour WolFinance’s roots, I used their original blue in various gradients.
Hi-Fi Login > Create Account screens
To portray the Web3 aesthetic, the client wanted 3D planet animations to represent the investment categories. For example, any topics or groups interested in investing in gold or silver would navigate to the precious metals planet. When the user zooms into the planet, the groups will be shown on the planet's surface. I was responsible for the creative direction of the planets and managing our 3D animation vendor (who would create the final GIFs).

The client also wanted a 3D wolf mascot and user avatar to visually showcase the level-ups. I worked with our product team to define the number of wolf variants and their gear, then created the design direction for the 3D designer.
 Precious Metals moodboard with AI-generated design reference
Moodboard showing colours, themes, and example designs for wolf avatar.
3D wolf mascot/ avatar moodboard
 Design development of Wolf Avatar and Me (My Account) home screen

Information Architecture/ DAO Infrastructure

To ensure a fair, safe, and transparent social community, I worked closely with our product team on DAO and Web3 features: creating or joining groups, posting content, receiving Wolf Tooth, managing wallets, and user referrals.

A decentralised autonomous organisation (DAO) is a blockchain governance system developed to distribute decision-making, management, and entity ownership. Through this, users can comfortably post, create groups and polls, without any external influence from outside stakeholders. The sitemap below shows how we integrated the DAO functions into our app infrastructure.
Please note, throughout development, the client requested changes or new features. The grey boxes represent additional features that would be developed in later versions.
Lo-Fi Create Tribe screens (flow by myself, lo-fi by the team)

Gamified Tokenomics

To foster an engaging community and deepen the Wolf Planet world, our client requested a native token for their app - the Wolf Tooth.
Wolf Tooth can be used as such:
  • After sign-up, a default Wolf Avatar is assigned to the user’s profile, and a starting balance of Wolf Tooth. 
  • To earn more, users can invite new users or complete in-game challenges (e.g. create a post, re-post, join a group, complete a class). 
  • Users can also mint their posts and earn Wolf Tooth if their NFT is purchased. 
  • As Wolf Tooth is accrued, the Wolf Avatar will level up, unlocking different wolf designs, outfits, or items. Users can also win new items via a lucky draw. .
  • Users can also win new items via a lucky draw. 
Design development of Assets (My Wolf Tooth) home screen
The challenge as a UX UI designer was portraying the Game-Fi features in an intuitive way for users. Referring to standard digital wallet flows, we kept the UI simple.

Below shows the user’s Wolf Avatar Inventory, where the SBT tokens are stored (levelled-up body parts, outfits, items). Due to time limitations, our animation vendor was unable to complete the badge gaining/ levelling-up visuals.

Final Designs

I  was responsible for:
  • Rebranding the UI design system.
  • Creating the visual direction for the planet and wolf avatar.
  • Managing the 3D design vendor.
  • Information architecture and user flows for all core functions (excluding Create and Lucky Draw), for regular and admin users.
  • Lo-Fi designs for all core functions (excluding Create and Lucky Draw), for regular and admin users.
  • Hi-Fi designs for all core functions (excluding Create and Lucky Draw), for regular users only.
Please note that at the end of our project term, the client decided to source their own wolf avatar design, and the “Create Posts” and “Teams” features were not explored due to time limitations. 
Planet > Hall > Tribes > Curated
For You, NFT Article, Tribe & Teams Ranking List, and Tribe homepage
Assets home, send/ receive Tokens, and check transactions
NFT assets homepage, Courses tab, view Course NFT, Articles tab
Me homepage with scrolled down view, and My Wolf with scrolled down view
Task Centre, My Referrals, My Achievements SBT tab and milestones tab

Reflection & Next Steps

This product is incredibly ambitious as it utilises almost every Web3 Fin-tech feature possible. Ideally, MVP1 should focus on making the core features functional, however our client insisted on producing the full-scale app. Due to the tight time frame, we provided Hi-Fi UI for most of the features, but some are missing the details to fully function. As an MVP, I would consider this unsuccessful. 

In the future, I would recommend the client to prioritise the core features; create tribe, create post/ course, earn Wolf Tooth, and level-up Wolf Avatar.

On an individual level, working with changing deadlines and adapting the designs to fit new priorities was challenging, though it taught me how to meet the needs of different client levels; our client, China Mobile, and their client, WolFinance. I also gained more experience managing our internal team of designers and our third-party 3D designers.
L
R