top of page

Project G.A.R.D.E.N.S.

Project G.A.R.D.E.N.S. Project Image

Role

UI/UX Artist

Level Designer

Timeline

6 months

(Spring 2023)

Skills and Tools

Visual Design, Prototyping, Experience Design, Collaboration, Figma, GDevelop

Targeting the Imagine RIT Creative and Innovation Festival, my team at Scarlet Equinox and I created and self-published a chill, futuristic puzzle game where players are part of a revival space mission saving dying alien plant life.

How might we...
build community?

With an open-ended prompt, the team and I found the opportunity to create an immersive story in space, facilitating the collaboration of kids, teens, their parents, and grandparents alike in solving a series of interactive puzzles starting one Saturday afternoon. 

Project Details

Finalized UI visual comps. Not all puzzle levels shown.

A Sense of Belonging

Through the concept of a collective space mission, we focused our creative energy to produce an immersive gaming experience online and at Imagine RIT.

Project G.A.R.D.E.N.S. mushroom puzzle level
Project G.A.R.D.E.N.S. flower puzzle level
Project G.A.R.D.E.N.S. title screens

Engaging Play

Our visually striking designs inspired by unusual plant species and future UI captivated our audience in addition to the challenging puzzle gameplay at hand.

Our Stats

500+

Playtesters

We had over 500 people come to our exhibit at Imagine RIT to play Project G.A.R.D.E.N.S.

350+

Views

Since game launch on April 29, 2023, our itch.io page has received over 350 views.

70 

Downloads

Project G.A.R.D.E.N.S. has had 70 downloads onto Mac and Microsoft devices since launch.

My Role As The UI/UX Artist

As a team of only 3, we played to our strengths. I began by establishing the logic of our gameplay along with the visual feel of our puzzle levels. My task then became building out each level and assisting in their implementation.

UI/UX artist portait

Hannah  UI/UX Artist, Level Designer

Motion designer portrait

Emily  Visual Artist, Motion Designer

Emily's Portfolio

Gameplay designer portrait

Sebastian  3D Artist, Gameplay Designer

Sebastian's Portfolio

Process

From Holograms to Solving Puzzles

We initially planned for Project G.A.R.D.E.N.S. to be an interactive hologram installation. When mapping out the full depth of user interactions, we decided a puzzle gameplay model would be a more rewarding and participatory experience with the story we wanted to tell.

Project G.A.R.D.E.N.S. plant hologram sketch
Project G.A.R.D.E.N.S. puzzle sketch

Rapid Prototyping

Creating interaction maps like the one below helped me determine the behaviors of our game's interface, which I then tested in our initial UI prototypes in Figma.

Project G.A.R.D.E.N.S. puzzle interaction diagram

This initial prototype demonstrates how our plant holograms would animate when receiving certain natural resource inputs triggered by the user interacting with the holograms through a controller or physical gestures. 

After moving forward with a puzzle gameplay model I introduced the connection of natural resources in our game's interface. Though not perfect, this iteration allows the user to have a more measurable impact. 

As our square grid design evolved into a hex grid, I saw an opportunity to incorporate more decision-making into our gameplay. This design change led to deciphering pre-determined paths through rotation as opposed to forming paths between resource elements. 

Designing Our Interface

Emily and I worked tangentially to develop Project G.A.R.D.E.N.S.'s visual and UI style by workshopping our universal screen elements to simulate a laboratory diagnostic screen with vibrant notes from our plant designs. 

Project G.A.R.D.E.N.S. hexagon puzzle black and white

Version 1

Project G.A.R.D.E.N.S. hexgaon puzzle level wireframe plant

Version 3

Project G.A.R.D.E.N.S. hexgaon puzzle green

Version 2

Project G.A.R.D.E.N.S. hexgaon puzzle green and orange

Version 4

Asset Prep With Styles and Components

With a more finalized visual style, I assembled a mini design system within Figma to efficiently build out the remaining screens of our user flow. 

Project G.A.R.D.E.N.S. puzzle tile components
Project G.A.R.D.E.N.S. plant card icons
Project G.A.R.D.E.N.S. plant card Figma components
Project G.A.R.D.E.N.S. Figma design grid styles
Project G.A.R.D.E.N.S. Figma design color styles
Project G.A.R.D.E.N.S. Figma design effect styles

This decision also accelerated implementation as Sebastian was able to download the prepared screen components and styles straight from the design file.

Game Walkthrough

The first thing our players see is our introductory cut scene made by Emily, which utilizes motion graphics and voiceover to explain the game's mechanics and objectives.

A full gameplay walkthrough is coming soon. In the meantime, you can play Project G.A.R.D.E.N.S. here or contact Hannah hannahrbailin@gmail.com

Process
Prototypes

Takeaways

Relying on our prior knowledge of the product space and our development limitations served us well in building initial interest for our demo release.

 

Though being more art-oriented wasn't a bad thing, we recognized more advanced back-end knowledge would give us the necessary headroom to make highly adaptable game art elements in-engine.

Next Steps

  • Create new, adaptable puzzle levels adjusting time limits to correspond to difficulty with the possibility of auto-generation down the line. 

  • Increase ease of access for our players by researching alternate distribution platforms and developer verifications.

  • Grow our audience and playtest pool by attending indie showcases and festivals.

That Damn Goat

NR: Marathon

bottom of page