In this runner game, the player, as a trash can, will run through the forest and collect trash that’s been thrown away while avoiding obstacles along the way.

2023

Forest Cleaner

My role

This project took place while

working for Ray Games

I created the user flows and screens’ wireframes and set the hierarchy for the player’s attention. Then I made the art and UI, adding character and style to these guidelines.

01

Preliminary User Flow

I first like to create the flow only with the screens titles and basic cases. It gives me a better understanding of the amount of screens involved and the complexity of the whole project.

Later on, I will update these boxes with the wireframes and animations that will complete the best user experience.

02

Wireframes

This is where the Wireframe-Flow ping-pong game starts. The hierarchy for the screen components is set and applied in the WF, then tested in the flow. The WF is updated after testing the behaviour and considering the animations included. This process will continue until I’m happy with the results and ready to move on.

An area designated for artwork and logo

The most common and important action

One-time actions -

visible but not prominent

A group that contains the player's trail and bin information, along with everything they need to upgrade them

All the macro

information the player

needs for the run in one spot

A seamless, changing, forest-themed background

Items and obstacles are the most important thing for the player to see. A different highlight colour will help distinguish the collectible items and the obstacles.

The Bin should be big enough so the finger won't cover it

End cases such as the Loading screen, collecting trash, hitting an obstacle, upgrading, info and animations previews are at the bottom.

Forest Cleaner Info

03

Art and User Interface

Run Screen Components

Collectibles Trash Items

Obstacles to Avoid

Bin

Finish Line

Buttons

Primary

Secondary

Tertiary

Bars and Counters

Progression Bar

Coins Counter

Timer Countdown

Frames

Popup

Main

Icons

Run's Length

Bin Capacity

Coin

Watch Ad

04

Background

I have created three seamless background pieces and two transition pieces so the background can change. The players will feel they have come a long way and have a better sense of progression.

Piece no.1

(repeats itself until the finish line)

Transition 2-3

Piece no.2

(repeats itself until the transition)

Transition 1-2

Piece no.1

(repeats itself until the transition)