top of page

CAST BY LIGHT

GAME UX/UI DESIGN

Cast By Light UI/UX Game Desgn: Text

DATE

June - July 2021

TYPE

Conceptual Project

PLATFORM

Mobile

TOOLS

Adobe Illustrator, Adobe Photoshop, Adobe XD, Figma, Diagrams.net

Cast By Light UI/UX Game Desgn: List

MY ROLE

I worked on this solo project as the lead UX/UI designer. Main areas of responsibility:

  • UX research (competitive audit)

  • UX/UI design (user flows, sketching, wireframes, mock-up, prototyping)

Cast By Light UI/UX Game Desgn: Bio

PROJECT

​Cast By Light is a 2D puzzle platformer created for arcade where the player takes the role of Ann as she searches for her missing partner in a post-apocalyptic world. The game was developed by Shadow Walkers, a team of seven Game Design students, over the course of a ten-week period at Uppsala University. 


While the game was made for arcade, a working prototype was also made for a possible mobile release. While this mobile version was never fully finished, I wanted to challenge myself and design the user experience for it. The original arcade version did not have any visible UI, as it had no need for it but in the mobile version, the user experience could be expanded upon by bringing the player a few more choices.

Cast By Light UI/UX Game Desgn: Bio

CHALLENGES

The mobile user experience needed to address the user needs caused by the change of platform from arcade to mobile. The original arcade experience debuted on a show floor where a member of the development team was always nearby to help the user. However, in the mobile experience, the user needed to be provided with the tools that would allow them to perform certain actions on their own.


The target audience of the game was defined as players who are interested in a serene and calming experience that immerses them in a world, and who enjoy solving challenging and complex puzzles which require experimentation and thoughtful consideration. The user experience needed to evoke the same serenity and calm that the gameplay does without distracting the user from the immersion of the gameplay experience.

Cast By Light UI/UX Game Desgn: Bio

SOLUTION

I began the project by performing a competitive audit. During the competitive audit, I researched both the most popular mobile games in the market at the time but also smaller games that were comparable to Cast By Light in gameplay and/or aesthetic. After collecting this data, I analyzed the original arcade experience and listed down features commonly seen in mobile games which would allow the user more control over the experience than in the original arcade game.

The original arcade experience had a straightforward user flow of going from the in-game screen to the credits after the user had completed the game. The game could also only be restarted by a member of the development team present at the show floor where the game made its debut. The mobile experience required quite a few extra steps which were based on the data from the competitive audit. 

Cast By Light UI/UX Game Desgn: Bio
Cast By Light UI/UX Game Desgn: Pro Gallery

After determining the steps the user could take during the experience, I sketched down my ideas for each potential step. During this phase, I also explored ideas for a visible interface for the in-game stages but scrapped the idea in order to stay true to the vision of the original arcade experience that highlighted immersion.

Cast By Light UI/UX Game Desgn: Bio
Cast By Light UI/UX Game Desgn: Pro Gallery

After sketching out my ideas, I created medium-fidelity wireframes in Figma to better visualize the layout and the elements that each step required.

Cast By Light UI/UX Game Desgn: Bio
Cast By Light UI/UX Game Desgn: Pro Gallery

My next step was to create a high-fidelity mock-up. The basic ideas from the wireframes are still in place in the mock-up but I chose to add a title at the top of each screen for a more structured layout and a more cohesive look across the different screens. For the interface, I chose a minimalist style that fit the aesthetic of the game but would also leave room to showcase the art of the game which received plenty of praise when the game debuted at Gotland Game Conference 2019. 

The majority of the mock-up was done in Adobe Illustrator, but the background graphics were done in Adobe Photoshop. The background illustrations and the character art were made by, and in some cases in collaboration with Tove Wahlberg.

Click on the images to open them in Expand Mode.

Cast By Light UI/UX Game Desgn: Bio
Cast By Light UI/UX Game Desgn: Pro Gallery

In the final stage of this project, I created a prototype of the mobile experience in Adobe XD. The prototype does not include final animations but showcases the basic flow of the user experience.

Cast By Light UI/UX Game Desgn: Bio
Cast By Light UI/UX Game Desgn: HTML Embed

RESULTS

The project forms a base for a new way to experience Cast By Light where the user is in full control of their experience. Going forward, it would crucial to test the design with users with special attention being paid to the accessibility of the design.

Cast By Light UI/UX Game Desgn: Bio
Cast By Light UI/UX Game Desgn: Text

©2021 by Anette Essel. Proudly created with Wix.com

bottom of page