OVERVIEW
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.
GOAL
Develop a straight forward yet cyberpunk styled user interface for an educational platform.
Create characters that matched the UI design aesthetic.
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.
DEFINE
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.
Key User Goals
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.
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.
Make it interesting
The UI and UX experience will be cyberpunk-styled but still navigatable based on familiar experiences outside of the game.
IDEATE
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.
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.
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.
PROTOTYPING
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.
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.
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
Illustrations
MATERIALIZE
Mockups and final designs
High-fidelity mockups
Final Product
In-game Screenshot
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:
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.
Thank you for reading!
OVERVIEW
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.
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.
GOAL
Develop a straight forward yet cyberpunk styled user interface for an educational platform.
Create characters that matched the UI design aesthetic.
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.
DEFINE
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.
Key User Goals
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.
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.
Make it interesting
The UI and UX experience will be cyberpunk-styled but still navigatable based on familiar experiences outside of the game.
IDEATE
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.
Takeaways
Aesthetic
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.
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.
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.
PROTOTYPING
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.
Illustrations
Character Chat/Mission system
Skill Tree windows
LVL X
LVL X
LVL X
LVL X
Basic information window
Settings
setting
setting
setting
setting
setting
setting
setting
setting
setting
setting
setting
setting
setting
setting
setting
Low-Fidelity Wireframes
Each window for the game closely resembles common interfaces used on computers of all kinds as well as instant messengers found on social media.
MATERIALIZE
Mockups and Final designs
High-fidelity mockups
Final Product
In-game Screenshot
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:
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.
Thank you for reading!
PRODUCT
App Design
SCOPE
2 weeks
ROLE
UX/UI • Logo
SITE
OVERVIEW
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.
GOAL
Develop a straight forward yet cyberpunk styled user interface for an educational platform.
Create characters that matched the UI design aesthetic.
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 Research and Visual Designer
Developed wireframes and
usable prototypes.
Facilitated usability testing and synthesized data for recommendations on iterations toward the final product.
DEFINE
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.
Key User Goals
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.
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.
Make it interesting
The UI and UX experience will be cyberpunk-styled but still navigatable based on familiar experiences outside of the game.
PROTOTYPING
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.
Low-fidelity wireframes
Character Chat/Mission system
Skill Tree windows
Settings
Basic information window
Illustrations
IDEATE
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.
Aesthetic
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.
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.
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.
Takeaways
MATERIALIZE
Mockups and
Final designs
Final Product
In-game Screenshot
High-fidelity mockups
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:
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.
Thank you for reading!