DreamMaker
DreamMaker
Transform Music NFT StartUp to Filmmaking Metaverse
Transform Music NFT StartUp to Filmmaking Metaverse
Client
ATTA
Role
Web Design, Branding, Growth
Timeline
2021-22, 9 months. Lunched.
O V E R V I E W
S E R V I C E S
O V E R V I E W
O V E R V I E W
This is a Transformative Story
This is a Transformative Story
My Role
My Role
UX Lead — Interaction Design, Visual Design, User Flows, Rapid Prototyping
UX Lead — Interaction Design, Visual Design, User Flows, Rapid Prototyping
Team
Team
Vivian Liu, Brand Identity
Char Zhang, Creative Directing
ZhiMan Su, Product Management
Sai Jiao, Entertainment
Vivian Liu, Brand Identity
Char Zhang, Creative Directing
ZhiMan Su, Product Management
Sai Jiao, Entertainment
Timeline & Status
Timeline & Status
9 Months. Launched in May 2022
9 Months. Launched in May 2022
Following the announcement of Facebook’s name change, questions remained on what would happen with ATTA’s NFT legacy —— wether they could keep attract existing users or become irrelevant.
I led the end-to-end design direction of the web redesign for announcing this metaverse transition and played a pivotal role in building trust with new design system.
The websites launch was met with outstanding public sentiment form the east asian film community, attracted over 5000+ Discord members along side 2 million follow up fund and collaboration with Pusan International Film Festival.
Following the announcement of Facebook’s name change, questions remained on what would happen with ATTA’s NFT legacy —— wether they could keep attract existing users or become irrelevant.
I led the end-to-end design direction of the web redesign for announcing this metaverse transition and played a pivotal role in building trust with new design system.
The websites launch was met with outstanding public sentiment form the east asian film community, attracted over 5000+ Discord members along side 2 million follow up fund and collaboration with Pusan International Film Festival.
Following the announcement of Facebook’s name change, questions remained on what would happen with ATTA’s NFT legacy —— wether they could keep attract existing users or become irrelevant.
I led the end-to-end design direction of the web redesign for announcing this metaverse transition and played a pivotal role in building trust with new design system.
The websites launch was met with outstanding public sentiment form the east asian film community, attracted over 5000+ Discord members along side 2 million follow up fund and collaboration with Pusan International Film Festival.
H I G H L I G H T S
S E R V I C E S
H I G H L I G H T S
Introduce ATTAverse
Introduce ATTAverse
0.1
DreamMaker Website
Video
0.1
DreamMaker Website
Video
0.1
DreamMaker Website
VIDEO
0.1
DreamMaker Website
VIDEO
0.1
DreamMaker Website
VIDEO
0.2
NFT Game Prototype
VIDEO
0.2
NFT Game Prototype
VIDEO
0.2
NFT Game Prototype
VIDEO
0.2
NFT Game Prototype
VIDEO
0.3
GameFin Prototype
IMAGE
0.3
GameFin Prototype
IMAGE
0.3
GameFin Prototype
IMAGE
0.3
GameFin Prototype
IMAGE
0.4
Website Design System
IMAGE
0.4
Website Design System
IMAGE
0.4
Website Design System
IMAGE
0.4
Website Design System
IMAGE
C O N T E X T
C O N T E X T
C O N T E X T
An opportunity to be put on the map
Transform under tight a schedule
Transform under tight a schedule
Following the introduction of Metaverse , questions remained on wether we could keep be relevant and keep attract users.
Following the introduction of Metaverse , questions remained on wether we could keep be relevant and keep attract users.
0.5
NFT Website Before
VIDEO
0.5
NFT Website Before
VIDEO
0.5
NFT Website Before
VIDEO
0.5
NFT Website Before
VIDEO
The message was loud and clear
ATTA need a design direction for the end-to-end web redesign, so we can announce this transition and played a pivotal role in building trust with new business model.
A 3 month deadline, because we had to launch and prove before pitch for film festival collaboration.
A 3 month deadline, because we need response before pitch to Film Committee.
A 3 month deadline, because we had to launch and prove before pitch for film festival collaboration.
A 3 month deadline, because we need response before pitch to Film Committee.
Ongoing Collaboration. The transition had to be familiar yet transformative, to retain current user.
Ongoing Collaboration. Transition had to be transformative yet retain current DNA.
Ongoing Collaboration. The transition had to be familiar yet transformative, to retain current user.
Ongoing collaboration. Transition had to be transformative yet retain current DNA.
Unclear business model. No certain way to verify the viability of new business model.
Unclear business model. No certain way to verify the viability of new business model.
Unclear business model. No certain way to verify the viability of new business model.
Unclear vision. No way to certainly verify the viability of new business model.
Piles of constrains
I led the end-to-end design of the web redesign for announcing this metaverse transition and played a pivotal role in building trust with new design system.
North Star design principles
North Star design principles
Design with clarity, proactive feedback and streamlined workflow
Design with clarity, proactive feedback and streamlined workflow
0.6
Project process within timeline.
IMAGE
0.6
Project process within timeline.
IMAGE
0.6
Project process within timeline.
IMAGE
0.6
Project process within timeline.
IMAGE
0 1 E N G A G E A N D C O N V E R T
0 1 E N G A G E A N D C O N V E R T
0 1 E N G A G E A N D C O N V E R T
0 1 E N G A G E A N D C O N V E R T
Grow Community
Grow Community
1.1
DreamMaker Universe Concept Video
IMAGE
1.1
DreamMaker Universe Concept Video
IMAGE
1.1
DreamMaker Universe Concept Video
IMAGE
1.1
DreamMaker Universe Concept Video
IMAGE
Opportunity in new direction:
Opportunity in new direction:
Connect Community
Celebrate the journey together with partners and community.
Connect Community
Celebrate the journey together with partners and community.
Connect Community
Celebrate the journey together with partners and community.
Connect Community
Celebrate the journey together with partners and community.
Test in Roadshow
Tailer pitch-deck with NTF track record and audit wins.
Test in Roadshow
Tailer pitch-deck with NTF track record and audit wins.
Test in Roadshow
Tailer pitch-deck with NTF track record and audit wins.
Test in Roadshow
Tailer pitch-deck with NTF track record and audit wins.
An Effortless Experience
Explain by the folding line, offload heavy reading and make change easy.
An Effortless Experience
Explain by the folding line, offload heavy reading and make change easy.
An Effortless Experience
Explain by the folding line, offload heavy reading and make change easy.
An Effortless Experience
Explain by the folding line, offload heavy reading and make change easy.
Celebrate with Community
• Introduce Avatar NFT with Game Community
• Preheat community events with 10,000 NFT released
• Seek future collaboration with current partners
1.2
E-Sport NFT Event, Mobile Website
VIDEO
1.2
E-Sport NFT Event, Mobile Website
VIDEO
1.2
E-Sport NFT Event, Mobile Website
VIDEO
1.2
E-Sport NFT Event, Mobile Website
VIDEO
Preheat community events
Preheat community events
Introduce DAO Voting Mechanism
Introduce DAO Voting Mechanism
Explain community ruling right
Explain community ruling right
Pitch and Audit
• Audit track record with NFT
• Tip toe for DreamMaker
• Attract investors and partners
1.3
ATTA Roadshow 2021
IMAGE
1.3
ATTA Roadshow 2021
IMAGE
1.3
ATTA Roadshow 2021
IMAGE
1.3
ATTA Roadshow 2021
IMAGE
Audit track record with NFT
Audit track record with NFT
Tip toe for DreamMaker
Tip toe for DreamMaker
Attract investors and partners
Attract investors and partners
One More Thing
Smooth Landing
Smooth Landing
Release the serial avatar NTF to put and end toward past brand legacy and prepare community with the next chapter.
Release the serial avatar NTF to put and end toward past brand legacy and prepare community with the next chapter.
1.4
IHG Avatar NFT
VIDEO
1.4
IHG Avatar NFT
VIDEO
1.4
IHG Avatar NFT
VIDEO
1.4
IHG Avatar NFT
VIDEO
0 2 D E V E L O P C O N C E P T
0 2 D E V E L O P C O N C E P T
0 2 D E V E L O P C O N C E P T
0 2 D E V E L O P C O N C E P T
A Play-to-Earn Model
A Play-to-Earn Model
2.1
DreamMaker Metaverse Concept Trailer
VIDEO
2.1
DreamMaker Metaverse Concept Trailer
VIDEO
2.1
DreamMaker Metaverse Concept Trailer
VIDEO
2.1
DreamMaker Metaverse Concept Trailer
VIDEO
Pinpointing the issues:
Pinpointing the issues:
Where to Start?
What’s the MVP prototype to get all design team started?
Where to Start?
What’s the MVP prototype to get all design team started?
Where to Start?
What’s the MVP prototype to get all design team started?
Where to Start?
What’s the MVP prototype to get all design team started?
Keep Community
How do we test idea with community within our current roadmap?
Keep Community
How do we test idea with community within our current roadmap?
Keep Community
How do we test idea with community within our current roadmap?
Keep Community
How do we test idea with community within our current roadmap?
Clear Concept
Where will entertainment, Web 3.0 and Crypto Currency intersect?
Clear Concept
Where will entertainment, Web 3.0 and Crypto Currency intersect?
Clear Concept
Where will entertainment, Web 3.0 and Crypto Currency intersect?
Clear Concept
Where will entertainment, Web 3.0 and Crypto Currency intersect?
Reference
Existing Model
• Research top companies like Flovatar, Roblox, Sandbox.
• Focus on relevancy - Character Generator
• Test randomized NFT minting
2.2
Early Prototype
VIDEO
2.2
Early Prototype
VIDEO
2.2
Early Prototype
VIDEO
2.2
Early Prototype
VIDEO
Competitive research on Roblox, Sandbox
Competitive research on Roblox, Sandbox
Identify top relavency
Identify top relavency
Test randomized NFT minting
Test randomized NFT minting
Feedback From
E-Game Event
• Introduce community ruling right
• Community Metaverse response test
2.3
Online Tournament Concept
IMAGE
2.3
Online Tournament Concept
IMAGE
2.3
Online Tournament Concept
IMAGE
2.3
Online Tournament Concept
IMAGE
Introduce community ruling right
Introduce community ruling right
Metaverse response test
Metaverse response test
Pitch future collaberation
Pitch future collaberation
Kick Start with Rapid Prototype
Nicely focused concept
Nicely focused concept
Nicely focused concept
Quick Prototype for workload and pipeline estimation, tested randomized mint process for Play-to-Earn NFT.
Quick Prototype for workload and pipeline estimation, tested randomized mint process for Play-to-Earn NFT.
2.4
Character Generator Concept Mock
VIDEO
2.4
Character Generator Concept Mock
VIDEO
2.4
Character Generator Concept Mock
VIDEO
2.4
Character Generator Concept Mock
VIDEO
0 3 D E S I G N S Y S T E M
0 3 D E S I G N S Y S T E M
0 3 D E S I G N S Y S T E M
0 3 D E S I G N S Y S T E M
Build Trust with Consistency
Build Trust with Consistency
3.1
Website Design System
IMAGE
3.1
Website Design System
IMAGE
3.1
Website Design System
IMAGE
3.1
Website Design System
IMAGE
Why startup want to care about design system?
Why startup want to care about design system?
Anchor the Change
StartUp needs a backbone for quick pivot and reinventing.
Anchor the Change
StartUp needs a backbone for quick pivot and reinventing.
Anchor the Change
StartUp needs a backbone for quick pivot and reinventing.
Boost Credibility
Big logo is not enough to make people felt trustworthy, but consistency does.
Anchor the Change
ATTA needs a backbone during the quick pivot and reinventing process.
Boost Credibility
Big logo is not enough to make people felt trustworthy, but consistency does.
Boost Credibility
Big logo is not enough to make people felt trustworthy, but consistency does.
Boost Credibility
Big logo is not enough to make people felt trustworthy, but consistency does.
Boost Credibility
Big logo is not enough to make people felt trustworthy, but consistency does.
Welcome New Members
Extended the user experience from website to our discord channel.
Welcome New Members
Extended the user experience from website to our discord channel.
Welcome New Members
Extended the user experience from website to our discord channel.
Welcome New Members
Extended the user experience from website to our discord channel.
Anchor the change
Nicely focused menu
Nicely focused menu
Optimized navigation menu and prioritized home page content, delete, merge and achieve with secondary menu.
Optimized navigation menu and prioritized home page content, delete, merge and achieve with secondary menu.
3.2
Navigation Menu
IMAGE
3.2
Navigation Menu
IMAGE
3.2
Navigation Menu
IMAGE
3.2
Navigation Menu
IMAGE
Make Logo bigger then it actually is
“Bigger” = legible logo card
“Bigger” = legible logo card
Boost credibility with unified logo card, use subtle change in color, stroke and shadow to make it looks “bigger”.
Boost credibility with unified logo card, use subtle change in color, stroke and shadow to make it looks “bigger”.
3.3
Card Component
IMAGE
3.3
Card Component
IMAGE
3.3
Card Component
IMAGE
3.3
Card Component
IMAGE
From Browsing to Follow
Be present for next member
Be present for next member
Gently reminds user about community event with CTAs, showcase discord, social media and collabertion email.
Gently reminds user about community event with CTAs, showcase discord, social media and collabertion email.
3.4
Embed Call-To-Action
IMAGE
3.4
Embed Call-To-Action
IMAGE
3.4
Embed Call-To-Action
IMAGE
3.4
Embed Call-To-Action
IMAGE
B E H I N D T H E S C E N E
S E R V I C E S
B E H I N D T H E S C E N E
B E H I N D T H E S C E N E
Shout Out to
Shout Out to
Creative Direction
Creative Director
YuanChao Zhang
YuanChao Zhang
Visual Designer
Visual Designer
Vivian Liu
Vivian Liu
Product Manager
Product Manager
Zhiman Su
Zhiman Su
Concept Artist
Concept Artist
Sai Jiao
Sai Jiao
Special Partnership
Special Partnership
C A S E S T U D Y
C A S E S T U D Y
C A S E S T U D Y
C A S E S T U D Y
Learn More
Shout out to
Create your next big idea.
© 2025.v1.1 Connie Zhou Design
Create your
next big idea.
© 2025.v1.1 Connie Zhou Design
Create your next big idea.
© 2025.v1.1 Connie Zhou Design
Create your
next big idea.
© 2025.v1.1 Connie Zhou Design