Land of Livia - An Epic Fantasy

UI/UX & PRODUCT DESIGN | GAME DESIGN | ACCESSIBILITY RESEARCH

Best Game and Developer of the Year Nominee from AppleVis

'Land of Livia' by Split Atom Labs is a fully accessible-by-design casual adventure game developed for iOS created to improve inclusivity and accessibility in game development. Users grow their character through world exploration and quests where they can collect useful gear and items to help aid them on their adventure. The game features social play, accessibility options such as full voice-over, and ethical microtransactions.

Target Audience: Low-vision and blind users who use screen readers, casual gamers 17+

Platform: iOS

This case study is for Phase 1 of the design process, as this is an ongoing project, that is currently going through user testing. I will be updating this page as we receive more insights.

Project Goals - Phase 1

Make Land of Livia a beacon for accessible-by-design, social, and inclusive casual gameplay.

01

02

Scale user acquisition and market validation for primary target audiences: visualled impaired gamers and general audience of abled players.

The Solution

Update visual fidelity and design direction for the Map, Hero and Item views.

01

High-contrast dark mode.

02

03

04

Support for dynamic font scaling.

Expanded accessibility

Original Designs

Since this is a game that is currently available for download in the Apple store, I first played through it to get a sense of the current user flow. The designs were using the basic Apple Developer resources. While this worked for users who used screen readers, this would not be sufficient enough to expand to a general audience of abled players.

User Journey

After playing the game, my first step in the process was to establish an updated user flow. After researching current user pain points, I separated out the Hero and Item views into their own tabs. This would give each menu more breathing room and easier access.

Wireframes

For the Map view (the main view the player sees when they log in), the only new art that I had to work with was a gorgeous illustrated map created for Land of Livia by concept artist, Damien Mammoliti, of Witcher 3 notoriety. Eventually, the Map would be separated out into 4 quadrants that the player can journey through but for now, we wanted a very simplistic and casual design for the UI.

Medium fidelity wireframes for the Map, which includes the HUD (settings button, primary stats, money, location indicator, status popups, location information, location label, and an accessible slider for zooming in and out.

Medium fidelity wireframes for the Hero view. I went with a more traditional approach to better gamify the equipment swapping mechanic. The user can scroll down to view their primary and secondary stats which change based on their level and gear equipped.

Medium fidelity wireframes for the Item view. The player can scroll through their list of collected items and sell all or tap the item to view more details.

Color Palette & Font

When designing for low-vision users in mind, finding a very readable font to use was my highest priority. As someone who prioritizes accessibility, I have used many fonts that are readable and improve legibility but one of my favorite fonts is Atkinson Hyperlegible which was created by the Braille Institute specifically to improve accessibility for low-vision persons. Most of the type on my website uses this font, so it was a font that I was already familiar with.

Since Split Atom Labs' goal for this phase is to improve accessibility for low-vision or blind users, while still creating a casual visual aesthetic. For this new dark mode, I went with a primarily blue palette, even for the darkest darks, as pure black with white text can actually cause eye strain. I included a variety of accent colors to denote specific CTAs, item types, or notifications.

High Fidelity Mockups

Below are the polished high-fidelity mockups created for the three views as well as my Figma components and vector illustrations.

Components & Icons