Fiona Gurnes

The Roan Game

as UX | UI Designer

— PROJECT NAME

The Roan Game


— ROLE

UX | UI Designer


— DATE

01/2020 – 06/2021

"1 year and half"

Developed by The Blue Tech World, ‘The Roan Game’ is an innovative hybrid of a travel app and an augmented reality game.


It encourages players to explore their local surroundings and travel destinations through immersive AR mechanics and geolocated challenges.




My Role & Responsibilities


I served as the lead UX/UI Designer, bridging the gap between functional app navigation and engaging game aesthetics. I worked in close synchronization with the Game Designer, Lead Artist, and the engineering team to ensure a fluid implementation of the interface.


  • - End-to-End Design: Responsible for the full design cycle, from initial research and flowcharts to wireframes and high-fidelity mockups for every screen.

  • - Art & Usability Balance: Crafted a visual language that maintained the “game feel” without compromising the clarity required for a geolocation app.

  • - Asset Creation: Designed 2D assets, custom iconography, and UI elements optimized for mobile performance.

  • - Technical Documentation: Authored comprehensive UX/UI style guides and documentation to streamline the hand-off to the programming team.
  • Iterative Design: Refined the interface based on playtesting feedback and the evolving art style of the project.



The Challenge


Harmonizing App Logic with Game Aesthetics


The core challenge of The Roan Game was its dual nature. It needed to be as intuitive as a travel app but as visually stimulating as an AR game.




The Solution:


To achieve this balance, I implemented a hybrid design system:


  1. - Simplified UX: Used clean, app-like iconography and a clear typography hierarchy to ensure readability while the player is moving outdoors.

  2. - Vibrant UI: Applied a high-contrast, “game-centric” color palette and interactive button states to maintain a sense of play and motivation.

  3. - Adaptive Interface: Redesigned key screens (like the “Routes Screen”) to accommodate real-time AR data without cluttering the user’s field of vision.



UX Programs

- Figma

- AdobeXD

Art Programs

  • - Adobe Illustrator
  • - Adobe Photoshop

Game Engine

  • - Unity

Other Programs

- Trello

- Kraken

- Slack

Routes screen

Wireframe

Routes screen

Mockup