GAME ART, UI, UX & LEADERSHIP
Build your railway empire to dominate your opponents in this redefined adaptation of the classic board game, Ticket to Ride, by Marmalade Game Studio. I played the critical role of Lead UI/UX Artist throughout the production and releases in 2023.
Shortcuts
Roles: Lead UI/UX Artist, Team Manager, UI/UX Project Manager
Production Time: February - December 2023
Platforms: Steam PC, Mobile (iOS & Android)
Game Modes: Single Player, Pass & Play, Online Multiplayer, Online Async Multiplayer, Online with Friends
Softwares: Miro, Adobe XD, Photoshop, Adobe Illustrator, After Effects, Unity
Overview
The Ticket to Ride Board Game is a world renowned family favourite which was adapted into a PC and Mobile game by Twin Sails game studio in 2011 in collaboration with IP holder Asmodee Entertainment (formerly known as Days of Wonder). In 2023, our challenge was to redefine the legacy UI/UX of the previous game, introduce modern features and bring the board game to life!
Ticket to Ride by Marmalade Game Studio is a casual game with a couple hardcore features which caters to both the laid back, family and existing online fan base audiences. The game features multiple game modes, accessibility features and stunning DLCs across multiple platforms.
Game Play
Being a 2-5 player game, the game play is competitive when you’re placing trains and completing tickets. But you have a choice of playing casually or strategically meaning the game fits a wide audience margin. Playing Ticket to Ride involves collecting train cards to use when placing trains onto routes. Claiming routes help you complete tickets to increase your score and expand your round the world railway!
Project Goals
-
Bring the board game to life!
-
Create an engaging and immersive player experience
-
Cater to a wide audience group - from kids and families to hardcore gamers and players of different disabilities
-
Resolve all the pain points of Twin Sail’s version
-
Bring the iconic game to the modern age through contemporary UI/UX features
Competitive Analysis
Before ideation, I conducted research and generated a competitive analysis.My research consisted of critically learning from competitors against the game designers top level benchmarks and audience research. Key focuses included an extensive critical UI and UX review of the 2011 Ticket to Ride game, takeaways from direct and indirect competitors and conclusions with some key achievements we should aim for. This analysis was crucial throughout the entire workflow to ensure our quality was kept up to or above the market standards.
UX FLowcharts
The main challenge of creating UX flow designs for a wide audience is balancing complex features and backend logics with simplicity and accessibility that caters to all. Challenges of the in game UX flow surrounded game play edge cases, backend logic and harmonising game play speed against cinematic moments. Whereas, in the front end UX flow we were concerned with introducing a first in studio history new game mode - online asynchronous multiplayer.
UX Wireframes
Low fidelity wireframes for the entire game were created and optimised for the more challenging mobile experience due to close mobile and PC release constraints. Additionally, a grid composition rule for interactive elements was introduced to troubleshoot future sighted keyboard and console focus navigation.
UX wireframes were produced and reviewed against competitive analysis, industry standards, internal needs and in collaboration with the entire UI/UX team under my direction. They were the blueprint for the programming team’s prototype which was a crucial tool for our internal testing of experience, composition, logic and interaction designs.
In Game UX Wireframe Samples
Front End UX Wireframe Samples
Accessibility
From a very early stage, I was keen to incorporate as many accessibility focused solutions as possible and in the end we achieved a game which can be played by colour vision impaired players. In the in game conceptual stage, I introduced the idea of being able to play with no reliance on colour and we kept to it.
UI Art Style
The UI art style of Ticket to Ride is sleekly modern while existing in the metaphors of another time in history. Its apparent contrasts between vintage iconography content, soft and sharp edging, universal typography and complementary palette shows hints to the board game steampunk brand but stays current with today’s casual game styles. The UI is a direct style contrast to the 2D and 3D art making it stand out and timeless.
UI concepts were conducted using global art key words, moodboards, the competitive analysis and in collaboration with the entire UI/UX team under my direction.
UI Art Style Guide Samples
UI Mockups
UI mockups were created only for key wireframes and to a PC game scale by all UI/UX artist team members. The mockups were our gateway to achieving a final looking game by pulling together UI, 2D and 3D art into a real screen. While staying within restraints of the style guide, we put high focus on the challenge of colour contrast to heighten legibility for vision impaired players and thorough consistency.
In Game UI Mockup Samples
Front End UI Mockup Samples
Animation
Few transition and sequence animation samples were made to establish the animation style rules. And during the last polish run through in Unity, we applied a plethora of idle, onload and interaction UI animation to make the game look more premium.
Board Selection Onload Animation
Purchase Success Animation
The UI/UX artists were present at the end of the game development work funnel by implementing and conducting final polish for the game’s UI and animations. Our key focuses were to recreate UI mockups, animation sequences, performance optimisation and responsive implementation onto cross-shared platform prefabs that works for all mobile, tablet and PC devices.
Due to time constraints, the programming lead and I ideated multiple technical solutions to speed up workflow. Some of which included; custom platform size controller, animation plugin, custom mobile device detection controller and, most importantly, a design system of Unity prefabs making the process more agile and global changes easier.
Production
The scope included 4 game modes, 2 device platforms and 1 comprehensive DLC with a beta production time of 9 months. I managed the UI/UX pre-production and production in collaboration with producers. This included conducting time estimations, production plans, risk management and multiple types of problem solving to ensure deadline and stakeholder expectations were met.
In our workflow, we adopted the double diamond work process of discover, define, develop and deliver which is cyclical and adapts well to the dynamic iteration needs of the project.
Team
Throughout the project, I lead and onboarded 4 UI/UX artists - 3 junior and 1 senior level. The artists joined the project and company at different times throughout 2023 and I oversaw their tasks, deliveries, training and professional development. Leading this team and seeing their progression is one of my proudest achievements!
As UI/UX artists we had a strong presence throughout the entire game development work cycle. And we collaborated closely with:
-
Producers and stakeholders to set time lines to hit tight deadlines
-
Game designers and the creative director to refine their feature ideas and our UX design
-
Concept artists, 3D artists and the art director to define the global art style and UI
-
Programmers to set technical requirements and implement the UI onto Unity Canvas
