top of page
Feature_Graphic_Google.png

Fantasy Codek

Design process of making the interactive short story library app. 

Pitching an idea.

First Pitching

Start with pitching this project to our CEO and investors.

FantasyCodek_Pitch.webp

First Pitching - Game mechanics presentation slide.

Second Pitching

It seems that my CEO and investors are not sure about the idea, so I conducted additional  market research and analysis to show them again in order to strengthen the project idea.

Artboard-1-copy.webp

Second pitching - Market research and analysis presentation slide.

Alpha-Test Mission

Okay, we have two months to complete this alpha-test game.

In addition, I only have one month for one programmer and one more month for 2D & 3D artists to work with. 

So, I must properly organize tasks and timelines.

Task List

  • Playable library

  • 1 playable horror story with Visual novel, cut-scene animation, minigames.

  • 1 playable fantasy story with Visual novel, cut-scene animation, minigames.

  • Mockup UI

  • Collectable User data

User Experience Research

User flow Diagram.

Start design by identifying a user flow diagram.

Flow.jpg

Figma - User flow

UX Design Wireframes

After identifying a user flow, I start to create a UX design wireframe to test with the target group.

And discuss with the backend programmer about the flow and game architecture.

ScreenFlow.jpg

Figma - On screen flow

Sketch Design

Mood board & Color Palettes

Create a mood board and color palettes that fit our design emotions.

Artboard-1.webp

Sketches

Explore design ideas quickly, generate the ideas via AI, and then redraw them again.

Artboard 1 copy 2.jpg

Rough sketches - AI. Generate - Redraw

Mockup Design

Create UI mockup design for alpha-test version

made in Photoshop for further implementation.

Choose a magical medieval theme for our library.

Magic Library.jpg
Book.jpg
Setting.jpg
Loading.jpg

Choose Black & White flat design that can match with every game theme.

Storytelling.jpg
Top-Down Isometric.jpg
Rhythm Game.jpg
First Person Exploration.jpg

Unity implement

Create UI assets

Don't forget to make them in the power of 2 and 9-slices system.

Screenshot 2023-10-14 194924.png

Name every UI asset according to the date and type.

Shaders & Textures

Old paper textures

0815_Texture_Scroll__Pattern_512x512.png
0815_Texture_Scroll01_512x512.png

Final Design

Alpha test version

Our two-month journey ends here. We are waiting for the green light from the CEO and investors.

Summary

We added and removed plenty of features during development, therefore we must redesign and refresh a lot of components and assets, but we're out of time. We are aware that our design is not perfect and that many elements need to be improved and retested, but it is our best within the constraints.

bottom of page