Design Thinking: World of Haiku
Design Thinking:
World of Haiku
Game-driven way to learn cybersecurity
Game-driven way to learn cybersecurity
PRODUCT
Game User Interface
ROLE
Game UI Design - Art
SITE
SCOPE
1 month
CONTEXT
CONTEXT
World of Haiku (now Haiku Online), merges education with a gamified experience in Cyber Security learning.
I was tasked with with developing the visual concepts and building out early versions of Haiku Online’s userflows, wireframes and prototypes for shareholders and early
game integration.
World of Haiku (now Haiku Online), merges education with a gamified experience in Cyber Security learning.
I was tasked with with developing the visual concepts and building out early versions of Haiku Online’s userflows, wireframes and prototypes for shareholders and early game integration.
PRODUCT
Game
ROLE
GUI
SITE
SCOPE
1 month
PRODUCT
Game
ROLE
Game UI Design
SITE
SCOPE
1 month
PRODUCT
Game
ROLE
Game UI Design
SITE
SCOPE
1 month
CONTEXT
World of Haiku (now Haiku Online), merges education with a gamified experience in Cyber Security learning.
I was tasked with with developing the visual concepts and building out early versions of Haiku Online’s userflows, wireframes and prototypes for shareholders and early game integration.
World of Haiku (now Haiku Online), merges education with a gamified experience in Cyber Security learning.
I was tasked with with developing the visual concepts and building out early versions of Haiku Online’s userflows, wireframes and prototypes for shareholders and early
game integration.
CONTEXT
OVERVIEW
Task
Task
I was tasked with with developing the visual concepts and building out early versions of Haiku Online’s userflows, wireframes and prototypes for shareholders and early game integration.
I was tasked with with developing the visual concepts and building out early versions of Haiku Online’s userflows, wireframes and prototypes for shareholders and early game integration.
GOAL
GOAL
Develop a straight forward yet cyberpunk styled user interface for an educational platform.
Create characters that matched the UI design aesthetic.
CHALLENGES
CHALLENGES
Aligning the UI design with the illustrations developed.
Ensure digital literacy was kept in mind during the design process.
Figuring out how characters will converse with the player.
MY ROLE
UX/UI assist and Visual Designer
Gameplay conceptualist
Developed wireframes and
usable prototypes.
Facilitated usability testing and synthesized data for recommendations on iterations toward the final product.
MY ROLE
UX/UI assist and Visual Designer
Gameplay conceptualist
Developed wireframes and
usable prototypes.
Facilitated usability testing and synthesized data for recommendations on iterations toward the final product.
MY ROLE
UX/UI assist and Visual Designer
Gameplay conceptualist
Developed wireframes and
usable prototypes.
Facilitated usability testing and synthesized data for recommendations on iterations toward the final product.
DEFINE
Problem Statement
Problem Statement
The cybersecurity workforce seems to be shrinking over time as well as well as being less diverse than other careers. Suppose the general public have the ability to access easy-to-navigate cyber security training from home. In that case, the workforce will be diversified and accessible to those who cannot afford higher education.
The cybersecurity workforce seems to be shrinking over time as well as well as being less diverse than other careers. Suppose the general public have the ability to access easy-to-navigate cyber security training from home. In that case, the workforce will be diversified and accessible to those who cannot afford higher education.
The cybersecurity workforce seems to be shrinking over time as well as well as being less diverse than other careers. Suppose the general public have the ability to access easy-to-navigate cyber security training from home. In that case, the workforce will be diversified and accessible to those who cannot afford higher education.
Key User Goals
Key User Goals
Make it interesting
Make it interesting
The UI and UX experience will be cyberpunk-styled but still navigatable based on familiar experiences outside of the game.
The UI and UX experience will be cyberpunk-styled but still navigatable based on familiar experiences outside of the game.
User-Friendly
User-Friendly
Users should not feel intimidated by the user interface and gameplay as they'll be greeted by fictional characters that provide simple instructions.
Users should not feel intimidated by the user interface and gameplay as they'll be greeted by fictional characters that provide simple instructions.
Make it fun
Make it fun
We want the users to feel excited to complete ingame missions and have a reward system that allows them to activate the completionist within.
We want the users to feel excited to complete ingame missions and have a reward system that allows them to activate the completionist within.
IDEATE
Competitive Audit
Competitive Audit
Before beginning any designs, I researched for both direct and indirect competitors to the concept of an educational game that provides real life skills that contribute to a career.
Before beginning any designs,
I researched for both direct and indirect competitors to the concept of an educational game that provides real life skills that contribute to a career.
Takeaways
Aesthetic
It's just a game
Real skills
All of the cybersecurity-related competitors have an aesthetic that leans into the fictional hacker trope found in movies and games.
Duolingo presents itself as minimalistic and user-friendly.
All of the cybersecurity-related competitors have an aesthetic that leans into the fictional hacker trope found in movies and games.
Duolingo presents itself as minimalistic
and user-friendly.
Hacknet and Greyhack focus on being a videogame vs. a real training product like TryHack me and Duolingo which focus on real life skills that can be applied in the
workforce.
Hacknet and Greyhack focus on being a videogame vs. a real training product like TryHack me and Duolingo which focus on real life skills that can be applied in the workforce.
Only Duolingo and Try hack me focus solely on the skill aspect of the type of education they provide not focusing on storylines or special visuals to hook the player.
Real skills
Only Duolingo and Try hack me focus solely on the skill aspect of the type of education they provide not focusing on storylines or special visuals to hook the player.
Only Duolingo and Try hack me focus solely on the skill aspect of the type of education they provide not focusing on storylines or special visuals to
hook the player.
It's just a game
Hacknet and Greyhack focus on being a videogame vs. a real training product like TryHack me and Duolingo which focus on real life skills that can be applied in the workforce.
PROTOTYPING
Creating the experience
Creating the
experience
After determining what features competitors had succeeded and failed with, I went into wireframing. I ultimately focused on blending both familiar interfaces to the typical desktop layout with cyberpunk-aesthetic. I wanted to users to feel comfortable with the format as it might be their first time learning cybersecurity skills.
After determining what features competitors had succeeded and failed with, I went into wireframing. I ultimately focused on blending both familiar interfaces to the typical desktop layout with cyberpunk-aesthetic.
I wanted to users to feel comfortable with the format as it might be their first time learning cybersecurity skills.
Low-fidelity Wireframes
Low-fidelity
Wireframes
Each window for the game closely resembles common interfaces used on devices of all kinds as well as instant messengers found on social media.
Each window for the game closely resembles common interfaces used on devices of all kinds as well as instant messengers found on social media.
Basic information window
Settings
setting
setting
setting
setting
setting
setting
setting
setting
setting
setting
setting
setting
setting
setting
setting
Character Chat/Mission system
Skill Tree windows
LVL X
LVL X
LVL X
LVL X
MATERIALIZE
Mockups and final designs
Mockups &
final designs
High-fidelity mockups
Final Product
Gameplay media
WRAPPING UP
Takeaways
Working on Haiku Online was an extremly insightful project as it was my first time experiencing Figma as a product. Luckily, the platform was straightforward and familiar to me as I've used many creative software during my design journey. Here are a few major skills I took from this project:
Working on Haiku Online was an extremly insightful project as it was my first time experiencing Figma as a product.
Luckily, the platform was straightforward and familiar to me as I've used many creative software during my design journey. Here are a few major skills I took from this project:
Wireframing of game UI components
Sharing ideas through prototyping with developers and shareholders.
Usability testing with shareholders, coworkers, and early access uers.
Realizing the benefits of competitor audits when developing a new product.
Wireframing of game UI components
Sharing ideas through prototyping with developers and shareholders.
Usability testing with shareholders, coworkers, and early access uers.
Realizing the benefits of competitor audits when developing a new product.
bottom