Game UI System
Set up the foundational dialogue UI designs for two interactive storytelling games
My Role & Process
I led the following processes as a lead UX/UI designer. I collaborated closely with stakeholders, a product manager, and a technical game designer during the process.
Stakeholder Workshop
Competitor Research
UI Design
Accessibility Check
Prototyping
Interaction Design
Developer Hand-Off
Company / Product
Pixelberry Studios / Storyloom
Timeline
February 2022 - May 2022
Category
Mobile Application
Gaming
Design System
UI Design
UX Design
Project Overview
Pixelberry Studios has two interactive story games - Choices (launched in 2015) and Storyloom ( launched in May 2023). Since both products are narrative and conversation-heavy games, dialogue and buttons are the most important UI elements. At the time of Storyloom's launch, the stakeholders requested my team to design the core UI set for the product.
Product Goals
Goal: Primary UI set that could apply universally to the interactive storytelling games
Product Goals
-
Primary UI set that mainly applicable to Storyloom and the improvement to Choices
-
Applicable to any reading genres but mainly focuses on modern romance
-
Keywords: Modern, Simple, Responsive, Variable, Accessible
Existing Choices dialogue & buton UI
Challenge of Existing UI Set
As a starting point, I considered what to improve from the existing UI set from Choices.
-
The angular shape was too tailored to the hexagon character container. With the introduction of the full-body character format, we needed different aesthetics.
-
The angular shape also took unnecessary spacing. I suggested creating a simple form for more room for the content writing.
-
The dialogue box was only designed with 3 set sizings. It caused inconsistent spacing and was not responsive to the content length.
Anatomy of existing dialogue design
Example of inconsistent spacing with content
Design Solutions
Evolution of UI elements and approved design
Iterations
Below images show design options that I shared and feedbacks from the stakeholders.
Along with the iterations, I set color and font design systems that considered contrast, readability, and connectivity to Choices and Storyloom branding.
Final Version & Interaction
After finalizing the UI sets, I worked closely with a technical game designer to put a finishing touch to the interaction. A few design principles for the interaction:
-
The interaction should be active enough to be interesting but not too much to distract the user's reading experiences.
-
It should give satisfying feedback to players whenever they press the choice button.
-
The dialogue loading speed should be slightly faster than the average reading pace, so users don't get dragged by the slow speed.
Interaction Recording of Storyloom.com Live Product
Variations
New UI set the base of many other designs
Device Ratio
I set the ratio and scaling rules to make sure the game UI looked great on every device type.
Variations & Impact
Later on, I added darker color themes to the dialogue based on the product's request to support multiple genres of books.
The dialogue UI design sets the tone of the product's design direction. All the other gameplay features that designed after followed the principle.
Takeaways
The UI set was applied to the Storyloom product when it launched in May 2023. Although user feedback was generally positive around the game UI, I am always seeking to make improvements. Below are iterations I am planning to accomplish based on the user feedback:
-
Dialogue formats to support longer narrations.
-
Additional UI sets suitable for specialized genre books, such as fantasy and sci-fi.
-
Dynamic dialogue placement height based on unusual character types, such as pets and children.
-
Special text and UI effects to make the reading experience more compelling.