contact
resume
home
github
macy toppan
unlock the tools of the
design process in this
client-education game.
june-august 2022 / 10 weeks
Subvrsive is a digital design and marketing company specializing in interactive ‘metaverse’
technology like Augmented Reality, Virtual Reality, and immersive websites. As their 2022
creative intern, I managed all design on this client-facing project, from user research to
game design to 3d modeling and tech art.
Subvrsive is a digital design company specializing in
interactive tech like AR, VR, and immersive websites.
As their 2022 Creative Intern, I managed all design on this
client-facing project, from user research to game design
to 3d modeling and tech art.
Team
1 designer
1 developer
1 project manager
Role
UX designer
Level designer
Asset creator
Technical artist
Tools
Roblox Studio
Figma
Autodesk Maya
game design
ux process
subvrsiveland
download the game
SubvrsiveLand
on Roblox
a step-by-step of the interactive design process
told in mini-games, prizes, and success stories.
meet the project
background
The concept of the 'metaverse' is a collective of interactive virtual
spaces with persistent user identities.
Let’s look at Roblox as an example: one platform, housing multiple corporations and
experiences, all accessible with a single avatar.
400 million
people use the metaverse.
80%
of metaverse users are younger than 16.
problem
Clients are interested in reaching the young metaverse market, but
many struggle to understand it.
Most information online is inconsistent or overly technical, and few resources actually
clarify the options at hand.
The process required to make a successful metaverse platform is
also a pain point.
Users don’t anticipate the time and cost of researching, designing, creating assets, and
developing a complete project.
opportunity
How might we teach clients (e.g. Digital Marketing Managers) about
the metaverse so they can comfortably explain it to others?
How might we convince clients of the value of this medium?
How might we portray the time and process needed?
How might we spotlight subvrsive as a strong ‘metaverse’ partner?
solution
click to play
sky’s the limit!
Players spawn on a platform in the sky,
overlooking a simple obstacle course that
leads to another floating island.
There, they undergo a quick but clear
onboarding to learn the key motions and
motives of the space.
When they reach the Main Island, they equip a
toolbelt that’ll carry the prizes they’ll find and a
‘Clear Roadmap’ to help navigate the world.
showcase island
The central hub is designed to give a clear
understanding in a short time for those clients
on a time crunch.
It houses six showcase zones highlighting
past Subvrsive projects.
Every spot is marked by a glowing sign, a brief
description, and a looping gif that shows off
the experience.
bridge-the-gap
When players have fully explored the world,
they put their learning to the test on Squid-
Game inspired steps.
On every landing, they face a question. They
then choose between two platforms, each with
a different answer.
Jumping on the right response means solid
ground: the wrong one sends them falling
through the sky, then respawns them at the
question.
mini-game milestones
Once they’ve crossed the bridge, players
unlock the first tool for their belt: a pair of
‘Relevancy Shades’.
Donning their reward reveals the rest of the
world!
Each new island features a mini-game
representative of another stage of the design
process (just as the first did the ‘Discovery
Phase’).
Players herd cats, navigate thick fog and
bouncy clouds, and slice through vines,
finding new tools as they go.
npcs
Don’t worry, they’re not alone in their journey!
Characters representing real people at
Subvrsive are there to provide encouragement
and advice on the way.
When the player has unlocked their full toolkit,
the CEO Anthony awards them the ‘Subvrsive
Special Sauce’.
behind-the-scenes
internal research
-----
We began by studying previous Subvrsive projects to identify our
favorites, observe platform options, and form our own definitions of
‘the metaverse’.
The results of this stage guided our choices of projects to highlight in-world.
See some of our favorites below!
industry research
We looked to competitors, articles, and leading voices in the field to
see how others explain the metaverse.
Most wordy references alluded to digital identities, and similar companies opted for
examples rather than written out explanations. For example:
roblox research
Our task was to build the product in Roblox, both for accessibility and
to document methods for the company.
Therefore, we dove into the platform itself, checking out successful games and noting fun
designs and game mechanics.
user interviews
In addition to consulting widely available web resources, we also
chatted with client-facing staff at Subvrsive about their typical
explanation process.
With their help, we identified helpful tips as well as pain points, including the following:
Clients have a hard time understanding “simple dev phrases.”
“One of the biggest obstacles is splitting it up into two phases [discovery and
development] to estimate the budget allocation.”
It helps to “provide example outputs.”
user personas &
journeys
Based on the intel from interviews, we charted out personas and
journeys for digital marketing directors, agency representatives, and c-
suite executives.
c-suite
agency
marketing
pov & hmw
brainstorming
After some Crazy 8s, Google-style, I sketched up some milestones and
gameflow ideas.
Throughout this stage, I referenced the Bartle Test to attempt to appeal to a broad range
of users.
In light of this prep, I designed the below gameflow to introduce users
to the metaverse with Subvrsive’s projects as the primary teaching
method.
We managed to complete all first and second priority goals, and finished the assets for
the third priority for hand-off!
The Discover Stage is the primary marketing material for Subvrsive. It introduces the concept of and options in the
metaverse while also implying the importance of research.)
This would be designed as an experience that is more direct and brief than the game overall, as most clients need to
see demonstrated success as ‘proof of concept’ in a short time
The gamification beyond this exists to:
in greater detail, explain the processes and considerations at hand in such an experience
further demonstrate Subvrsive’s effectiveness in these processes
fully showcase the capacities of Roblox, as an example of the space, in activity and gamification.
be entertaining, and to engage users (both client and otherwise)
Note:
P1
P2
P3
Intro Island
Lobby/Intro
Spawn in and cross on obstacle course bridge
to the main island.
Learn about Roblox mechanics (i.e. how to move,
jump, pick things up, speak to NPCs).
Pick up the toolbelt.
Unlock the main island (discovery).
Main Island
Discovery
Explore a large island with lookout points
highlighting different Subvrsive projects and
explaining other platforms.
Learn about the discovery stage of the design
process.
---
Unlock the quiz bridge.
Quiz Bridge
Teaching Trial
Cross a bridge made up of ‘question landings’
and ‘answer platforms’ by jumping on the
correct answer.
Learn about popular metaverse definitions.
Pick up the Relevancy Shades. All other islands
spawn.
Unlock the Fog and the Clouds (competitive and
business analysis).
The Deep Woods
Business Analysis
Make your way through a maze-like jungle,
weaving through dense flora.
Pick up the Machete (Clear Through The
Nonsense). You can cut through the vines for
a direct path back.
Unlock the Clouds.
The Clouds
User Journey
Cut through vines at the entrance to reach
the Clouds, a tall path of bouncy clouds and
roaring winds.
Pick up the Noise-Canceling Earmuffs. The
winds fade out and beautiful piano fades in.
Trail to Austin
Subvrsive Support
Reunite with your NPC guides, who
congratulate you on your success and open
up the road to Austin!
Pick up Subvrsive’s Special Sauce, which spawns
the path to the distant skyline of Austin, TX.
The Fog
Competitive Analysis
Navigate swirling fog on a crumbling
pathway to reach a stone cliff. Watch your
step!
Pick up the Anti-Cringe Spray. You can use the
spray to dissipate the fog as you go back.
Unlock the Cat Den.
The Cat Den
User Personas
Spray away fog blocking the steps and visit
the Cat Den where you’ll herd cats! Approach
them and guide them into a paddock. If you
use the Anti-Cringe Spray, they’re especially
drawn to you.
Pick up the book (Understanding Cat Culture).
level design
I mapped out and set up all models in the scene to form the
environment: a central showcase island with room to explore, with
smaller islands branching off.
The primary world serves as an informational hub for clients with minimal time, while
the smaller islands feature games and achievements loosely representing the design
The physical and unlocking order aligns chronologically with the steps of a typical
design flow.
assets
To supplement the environmental assets, I built all UI assets and new
interactives.
These achievements, icons, and game characters mesh well with the clean, stylized
aesthetic of the game and the poly-count constraints of the platform itself.
tech art &
challenges
The biggest challenge on this project was the platform itself— we had
an ambitious concept, and Roblox had a lot of constraints.
This required a lot of 'hacky' coding: for example, I implemented systems to play
videos and simulate fog from scratch.
Not everything had a solution— I designed a full inventory UI that ultimately didn't work
with the default system, and as Roblox prohibits URLs and QR codes, we couldn't link extra
project info.
thank you for reading!
like what you read and want to hear more? please get in touch below.
built with framer by macy [2024]
