Manana Interactive
(Accessibility)
Manana Interactive
Manana Interactive has built an evidence-backed self-regulation training game powered by the user’s breath that gives them the tools to become more emotionally aware and in control of their state.
Using a chest-strap heart-rate sensor, players regulate their emotions by slowing their breathing to lower their heart rate and progress in the game.
The goal of this project is to enhance game experience, player engagement and retention, improving the overall sales experience to communicate customer value.
Problem
The pre-designed screens contained several elements that did not meet the accessibility compliance requirements (AAA level), including text size, colour contrast ratios, and the use of icons alongside button text. In addition, the performance feedback screens were unclear and difficult for younger and/or neurodiverse players to understand.
Solutions
-
Improve the UI elements and surrounding screens with the goal of increasing motivation and retention.
-
Redesign the performance feedback screens that present data in a clearer, more age-appropriate manner to better support younger players’ understanding.
Accessibility guidelines
Although the product is primarily designed for children aged 9–12, accessibility guidelines were applied to ensure an inclusive experience for a broader audience.
A screen reader was already in place, reflecting the team’s strong commitment to accessibility prior to my involvement.
In line with WCAG 2.2, the team targeted AAA-level compliance through careful consideration of font choice and size, colour contrast, and the consistent use of labels and icons to support users with reading or visual impairments, including colour vision deficiencies.
Font change
Beyond text size, the typeface selection needed to better support accessibility while maintaining alignment with the game’s established space theme.
The typefaces used in the pre-designed screens, Roboto Mono and Lalezar, were not optimal from an accessibility perspective.
Following exploration of alternative options, Lexend was selected due to its high legibility, particularly for users with dyslexia and ADHD, while still complementing the space-themed visual identity. Its range of font styles also supported clearer text hierarchy across the interface.
Colour contrast & colour vision deficiency
Colour contrast ratios were carefully considered and consistently applied throughout the updated designs; however, selecting the most appropriate colour palette presented an additional challenge.
Given the team’s commitment to a high accessibility standard, colour vision deficiency was a key consideration throughout the design process.
Multiple colour combinations were explored to achieve a balance between thematic alignment and accessibility for users with colour vision deficiencies.
These options were then applied and evaluated to ensure they met the required accessibility criteria.
Red and blue combinations were deliberately avoided due to their potential association with gang affiliations, which could be inappropriate or distracting for younger players.
Ultimately, a green and purple colour pairing was selected, as it best complemented the game’s visual theme while maintaining accessibility.
Performance bar & data display
The player’s performance data is presented on the game results screen, making clarity and immediate comprehension essential for all players.
A performance bar is used to represent the player’s heart rate variability, and it must clearly communicate the quality of the score at a glance.
After exploring multiple approaches to presenting performance data, we selected a vertical bar format, as it closely aligns with the line graphs used on connected pages from the main results screen.
This consistency reduces cognitive load when interpreting different infographics, as the score is also presented vertically along the Y-axis.
In addition, the meter is required to display multiple metrics, including the current, highest, lowest, and average scores. A linear, vertical format was determined to be the most effective way to present this information clearly.
The score indicators on the bar required clear labelling to explain their meaning. A key challenge was presenting this information in a way that is immediately understandable to all players, while minimising cognitive load.
The previously selected colour palette was retained for the overall game screens. For the performance bars, a green-to-orange scale was maintained, as it provides a strong visual contrast to clearly distinguish positive and negative performance.
Although this colour choice does not fully accommodate colour vision deficiencies, it was a deliberate trade-off to enhance clarity and impact for the broader audience.
A substantial amount of player performance data needed to be presented. To reduce visual complexity and cognitive load, the information was structured into clear segments and sequences rather than displayed on a single screen.
Additional details were delivered through overlays, and line graphs were distributed across separate pages. Navigation was carefully designed to ensure a clear, intuitive, and efficient user flow.
Outcome & next steps
Next steps include adapting the content for responsiveness across various screen sizes, enabling multilingual text support to further enhance inclusivity, and conducting usability testing as a priority.