CASE STUDY:
RITE OF TITANS
Client: Apella Games
Duration: 5 months
Role: Senior UI/UX Designer
Tools: Adobe Illustrator, Adobe Photoshop, Figma, Procreate
PROJECT OVERVIEW
As the Senior UI/UX on this project, it was my job to evolve the approved visual style and language to align with the client's vision for their game across multiple game screens. Under my guidance, the style evolved and developed to match the colourful look and feel of the game while remaining elegant, clean and approachable. Multiple solutions were presented to the client to help solidify the direction for each screen. While UI design was at the core of the project, I was also responsible for working closely with the client to figure out the best UX for various features. Once the UX and UI were solidified and approved, I had the pleasure of working with a motion designer to bring the UI to life. A big part of this project was setting up the client's dev team with easily exportable assets, which was handled through Figma.
FINAL SCREENS AND VISUAL LANGUAGE
Rite of Titans is a hero-centric 3v3 action game where players and their titans engage in an arcade sport, ability-based competition across a series of fantasy-based arenas. To highlight the environments and characters, the UI needed to feel airy and light, with geometric ornamentation inspired by Art Deco style, as per the client’s request. The initially approved visual language for the UI was presented on placeholder art and, once placed on the final game art, didn’t complement it. It was my job to adjust the UI to ensure it complemented the game without overpowering it, while keeping user experience and intuitive navigation at the forefront. This was a highly iterative process involving many revisions and calls with the client to ensure their vision was brought to life. A mix of dynamic diagonals, straight lines and diamond shapes with a clean and minimal approach with a touch of Art Deco, was consistently carried out throughout the game screens.
LANDING SCREEN EXPLORATIONS
These were among some of the comps presented to the client. I started out by dissecting the screen and layering different worlds, which is something that is imporatnt to the game, which takes place across different magical settings. Some of my initial designs included characters, but in the end, the approved design maintained the torch as a nod to competition and winning and bright pops of colour to draw the user in. Subtle art deco elements remained in the flame of the torch as a nod to the styling of the UI.
FINAL DESIGN
Perfecting the button design and carrying that visual language through to the rest of the buttons in the game was quite a process! The buttons needed a modern feel with a touch of ornamentation and subtle decorative elements. I went through many iterations until the button design was finalized and consistently applied throughout the game. When designing, I always keep motion in mind and ensure to include visual cues that can be pitched to the client and later used by the motion designer to bring the UI to life.
BUTTON DESIGN + EXPLORATION
FINAL BUTTON DESIGNS
BUTTON EXPLORATIONS
ICONOGRAPHY
I truly enjoy working on iconography, and this game allowed me to be highly creative and have a lot of fun with the icons. Due to the mythical and magical nature of the game, I had a lot of creative freedom. I drew inspiration from Art Deco and subtly applied it to the icons while using the shape language of sharp geometric elements and the established colour palette. This approach enabled me to achieve icon designs that feel like little art pieces, seamlessly blending into the UI and enhancing the gaming experience.
FINAL FRAGMENT ICONS
FRAGMENT ICONS EXPLORATIONS + SKETCHES
Several options in similar styles were presented to the client. The complexity of each fragment increased with its rarity, with colour differentiation helping to denote more precious or rare fragments from more generic ones. As always, the icons were sketched out and then brought into Adobe Illustrator to create final, vector art.
OPTION 1
OPTION 2
OPTION 3
GAME MODE ICONS
Carrying a geometric motif through the game mode icons, I ensured they were simple and graphic, with just enough detail to give them personality. Several design and treatment options were explored and presented to the client. The process involved a fair bit of iteration, but the final set of three icons stayed true to some of the in-game assets and character art while maintaining a flat and modern look with a nod to Art Deco.
CURRENCY ICONS
EVEN MORE ICONS
Rite of Titans was a pretty icon-heavy project. Below are some of the icons used in the game. The top section showcases the final set, while the section below highlights some of the icon explorations shared with the client. It took a few rounds of feedback and several iterations of each icon before arriving at the final result. The final set reflects the geometric, sharp qualities of the UI, blending seamlessly into the overall design while remaining informative and clear.
COLOUR PALETTE
TYPOGRAPHY
KEY TAKEAWAYS
Rite of Titans was a project that challenged me in many ways. Although I started with an existing, established style, which acted as a strong foundation, I had to almost completely adjust the visual language once the client began sharing finalized character and environment art. It’s always a challenge to come into an existing project, take over for another artist, and build trust with the client. I was able to do so effortlessly and thoroughly enjoyed the process of owning the project and putting my own creative stamp on it while ensuring the client was happy.
Once the art phase was complete, with the help of a few UI designers on the team, we made all of the files implementation-friendly in Figma and handed off the project to Apella Games.
Despite the many iterations throughout the process, I feel the final result was worth the effort. Being open to feedback and trying new approaches to design is key to producing unique, user-friendly, and delightful work.
