The 'Games By Jake' logo which when clicked, links back to the homepage.
The 'Games By Jake' logo which when clicked, links back to the homepage.

Slither n’ Sizzle

An asymmetrical platformer game, set in fantasy ancient Greece.

'Slither n' Sizzle' project logo.

Description

Three spartan soldiers are pitted against the mighty Medusa in a race to the top of a tower. Being chased by rising lava, the Spartans must climb, jump, and platform, all while Medusa places obstacles and weapons to slow down and block the path of the Spartans. “Slither n’ Sizzle” offers a fresh take on cooperative and competitive gameplay, setting up thrilling and strategic chases that test players all around.

Role & Context

  • Team Project
  • Period: Third University Year (2023)
  • Traditional Playground Inspired, 2-4 player Local Coop Game brief
  • 2 Programmers, 2 Artists, & Me  (UI Designer, UI Artist, Game Designer, Game Programmer & Team Lead)

(Click Images to Expand)

UI/UX Process

Game Concepting

After receiving our brief, I conducted a mind-mapping session to determine our game’s theme. This included creating nine separate mind maps for each suitable playground game and summarizing them into a slideshow so that my team could choose their favorite concept.

(Click Images to Expand)

A mind map illustrating the brainstorming process for various playground games.
A mind map illustrating the brainstorming process for the playground game 'red light, green light'.
A mind map illustrating the brainstorming process for the playground game 'the floor is lava'.
A mind map illustrating the brainstorming process for the playground game 'what's the time mr. wolf'.
A mind map illustrating the brainstorming process for the playground game 'dodgeball'.
A mind map illustrating the brainstorming process for the playground game 'simon says'.
A mind map illustrating the brainstorming process for the playground game 'marbles'.
A mind map illustrating the brainstorming process for the playground game 'swingball'.
A mind map illustrating the brainstorming process for the playground game 'tag'.
A mind map illustrating the brainstorming process for the playground game 'mother may I?'.

The concept we landed on was called Lava King; this was a:

  • The Floor is Lava Inspired
  • Asymmetrical
  • 2D Platformer

(Click Images to Expand)

A slide from the concept presentation, featuring a list of what each concept requires, these being: full multiplayer functionality, user friendly controls, a flexible difficulty, replayability, and round based gameplay.
A slide from the concept presentation, featuring a concept called 'red light, flash light', inspired by the playground game 'red light, green light'.
A slide from the concept presentation, featuring the positives and negatives to developing the concept: 'red light, flash light'.
A slide from the concept presentation, featuring a concept called 'lava king', inspired by the playground game 'the floor is lava'.
A slide from the concept presentation, featuring the positives and negatives to developing the concept: 'lava king'.
A slide from the concept presentation, featuring a concept called 'dodgeball arena', inspired by the playground game 'dodgeball'.
A slide from the concept presentation, featuring the positives and negatives to developing the concept: 'dodgeball arena'.
A slide from the concept presentation, featuring a concept called 'danger swing', inspired by the playground game 'swingball'.
A slide from the concept presentation, featuring the positives and negatives to developing the concept: 'danger swing'.
A slide from the concept presentation, featuring a concept called 'runner race', inspired by the playground game 'tag'.
A slide from the concept presentation, featuring the positives and negatives to developing the concept: 'runner race'.
A slide from the concept presentation, featuring a concept called 'space chase', inspired by the playground game 'hot potato'.
A slide from the concept presentation, featuring the positives and negatives to developing the concept: 'space chase'.

Requirement Analysis

Typically, I would have created a UI-focused mind map before starting the requirement analysis. However, after already developing nine mind maps for the game concept and being pressed for time, I opted to skip that step. Instead, I went straight into the requirement analysis, creating a flow diagram and a feature list. This approach helped me quickly understand the UI elements that needed designing and assess whether they were within our scope.

(Click Image to Expand)

A flow diagram demonstrating the UI flow that Slither n' Sizzle will follow.

Flow Diagram

Feature List

Mood Boarding

Once I finalised the requirements, I created mood boards to plan the UI style and effectively communicate my ideas to the team. I focused on three mood boards, as the main menu UI served as the foundational design for the other non-gameplay menu interfaces.

(Click Image to Expand)

A mood board featuring game user interfaces that will inspire the main menu of Slither n' Sizzle.

Main Menu

(Click Image to Expand)

A mood board featuring game user interfaces that will inspire the gameplay heads up display of Slither n' Sizzle.

Gameplay HUD

(Click Image to Expand)

A mood board featuring game user interfaces that will inspire the team select menu of Slither n' Sizzle.

Team Select

Digital Wireframes

After completing the mood boards, I began setting up the digital wireframes in Figma. This project marked the first time I utilized Auto Layout, a skill I had practised over the summer while on a break from university projects. Auto Layout significantly sped up the wireframing process and allowed me to achieve more precise and efficient designs.

(Click Images to Expand)

A concept digital wireframe of the title screen.

Title Screen

A concept digital wireframe of the main menu.

Main Menu

A concept digital wireframe of the settings menu.

Settings

A concept digital wireframe of the tutorial screen.

Tutorial

A concept digital wireframe of the team select menu.

Team Select

A concept digital wireframe of the gameplay heads up display.

Gameplay HUD

A concept digital wireframe of the pause menu.

Pause Menu

A concept digital wireframe of the team win menu.

Team Win Menu

A concept digital wireframe of the exit game check menu.

Exit Check Menu

Prototype

Once the wireframes were complete, I developed an interactive prototype in Figma. This prototype featured the finalized UI designs, incorporating AI-generated elements and fully functional and navigable UI components.

Final Result

The final UI design for Slither n’ Sizzle meets my expectations, especially considering the six-week timeframe and the multiple roles I held within the team, including game design, programming tasks, and team lead. However, given more time, I would revisit and refine various design aspects.

Achievements

  • Engaging UI art
  • Informative, fast-paced HUD
  • Consistent Typography

Shortcomings

  • Lack of mood boards
  • Certain unfinished UI parts (HUD progress map)
  • Lobby Menu (Lacks consistent styling with rest of UI)
  • Insufficient user research
  • Missed opportunity to follow design trends (No research)

← Previous Project (Lava Rama)

Next Project (Click & Mix) →

← Previous Project (Lava Rama)

Next Project (Click & Mix) →

Auto