A blurred background with blue, purple, and pink colors

Design Thinking: World of Haiku

Design Thinking:
World of Haiku

Game-driven way to learn cybersecurity

PRODUCT

Game User Interface

ROLE

Game UI Design - Art

SITE

Haikuinc.io

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.

PRODUCT

Game

ROLE

GUI

SITE

Haikuinc.io

SCOPE

1 month

PRODUCT

Game

ROLE

Game UI Design

SITE

Haikuinc.io

SCOPE

1 month

PRODUCT

Game

ROLE

Game UI Design

SITE

Haikuinc.io

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

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.

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

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

Make it interesting

The UI and UX experience will be cyberpunk-styled but still navigatable based on familiar experiences outside of the game.

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.

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.

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.

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.

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.

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.

Basic information window

Settings

setting

Character Chat/Mission system

Skill Tree windows

LVL X

MATERIALIZE

Mockups and final designs

Mockups &

final designs

High-fidelity mockups

Final Product

Gameplay media

Awards

2023 - Winner of FastCompany's Innovation by Design Awards.

2023 - Cybersecurity Award for Workforce Development SDSU x Haiku Training

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.

Let's Chat