Game Design
Physical Prototyping
Coding
UI-UX Design | Mar 2024
WHAT
We aimed to develop an engaging video game experience to raise awareness about a local social cause to be showcased to public within a span of 8 weeks.
IMPACT
The impact of my work fostered an engaging gaming experience raising awareness about protecting local wetland ecosystems. Players left the experience more informed and aware, and their positive feedback demonstrated the effectiveness of the gameplay.
ROLE
TEAM
1 UX Designer (me)
1 Visual Designer
2 User Researchers
MY CONTRIBUTIONS
I led the project's narrative, ideation phase, custom controller prototyping and early game coding.
As the lead UX designer, I played a pivotal role in defining the design process. I defined the direction of each phase of the project.
Public Plays Pond Patrol
PART 1
GAME PLAY
PART 2
The MVP Video showcasing Cece, and Alex's (primary persona) journey with her.
WHY IS THIS IMPORTANT?
An opportunity to educate the public about conserving the delicate Washington wetland ecosystem.
150
The number of western pond turtles left in Washington in 1993, on the verge of extinction. The number increaser to 1500 a decade later needing dire conservation efforts.
(source)
1 inch
The size of a baby turtle snacked on by invasive bullfrog species, the main predator whose overpopulation has been the main cause for turtle endangerment.
(source)
PROBLEM SPACE
APPROACH
IDEA GENERATION
I proposed using the "crazy 8" method to direct our ideation process, where each person generated 8 ideas, prioritizing quantity over quality. This yielded a variety of "good," "bad," and "wild" ideas. Using affinity mapping and dot voting, we narrowed our options to 12 key ideas.
I developed sketches during the initial brainstorm for peer critique to lead us to further down selection.
Sketches depicting diverse ideas during brainstorming.
We sketched the selected ideas to highlight the main concepts and conducted a round robin critique with peers in the cohort to gather feedback on our initial ideas without investing too much time in development.
DESIRABLE
FEASIBLE
Diverged about which idea to pick.
At this stage the team was divided between the two ideas. We decided to step aside for some individual time to contemplate on the two ideas.
1 [FINAL IDEA]
The two players take on the roles of a conservationist and a baby turtle, navigating obstacles to meet in the middle while facing menacing invasive bullfrogs along the way.
2
A 3D spatial 2-player game featuring physical goal markers on the floor and waves projected on the walls. Players start at opposite ends of the room and navigate through obstacles to meet in the middle.
APPROACH
1 Customizing
Controllers
We designed low-fidelity prototypes for the controllers as a rapid prototyping approach.
2 Video
Prototyping
We refined the game's storyline through bodystorming.
3 Wizard of Oz Testing
We gathered quick feedback using the Wizard of Oz (WoZ) method, developed and tested lo-fidelity prototypes.
4 Interactive
Controllers
To check technical feasibility, we then created mid-fidelity prototypes incorporating user feedback.
5 Final Fabrication and User Testing
To prepare for the public showcase, we developed high-fidelity prototypes and conducted a final round of user testing.
1 Customizing Controllers
We jumped right into low fidelity custom controllers to understand the basic mechanics of hardware programming. We conceptualized controllers that could be hooked on to the computer screen and trigger certain actions.
I programmed the CPX microcontroller to sense left, right, up and down physical movements of the controller and latched it to the screen interactions with the help of my team.
FINDINGS
Interaction was simple and had scope of development into multiplayer controllers. The story is missing and needs more thought so that game characters, functions and UI can be developed.
Custom CPX controller, sketch of early storyline, programming the motion in Makecode.
2 Video Prototyping
At this stage we realized the need for refinement of our story. We took the approach of storyboarding and identifying each touchpoint. We took the approach of bodystorming and enacted various parts of the story to understand the intricacies of the gameplay.
I sketched and storyboarded the narrative as well as acted as one of the main game characters alongside my team for bodystorming the narrative.
FINDINGS
The story is clear, but the gameplay was not well conveyed. The storyline so far doesn't illustrate how the controllers and players' actions will appear or how the characters on the screen will respond to different actions.
Bodystorming and storyboarding the narrative
3 Wizard of Oz'ing Our Way Into Building
Recognizing the complexity of both hardware and software, we opted for rapid prototyping using Wizard of Oz type testing. By creating low-fidelity controllers, we conducted user testing seamlessly, with players believing they were controlling the game allowing for early feedback incorporation relating to overall first cut of the gameplay.
I coded the basic game by programming in P5JS aided by help from ChatGPT and handed over to the team to build upon it. I moderated user-testing to check the feasibility of the game at this stage.
FINDINGS
The physical form did not meet participants expectation and some participants found the triggers unintuitive and unnatural. The narrative needed more intention. The act of shooting the frogs was confusing to participants, some even found it violent.
The Wizard of OZ testing experience with three participants.
4 Interactive Mid-fidelity Controllers
Responding to WOZ feedback, we iteratively refined the controllers by incorporating new elements such as different forms, buttons, and potentiometers, resulting in mid-fidelity prototypes. Concurrently, we enhanced screens and assets based on reviews, addressing interface, graphics, and interactions to ensure seamless integration between controllers and screens in the final design.
My role at this stage involved coding the game, which included multiple complex interactions for the four main characters of the game. The goal was to achieve a high-fidelity working game with all interactions and UI elements in place.
FINDINGS
The overall scale and form functioned well as expected but required more detailing and finesse. While the game interactions were clear, the UI assets needed improvement. The game's information experience was lacking.
The mid-fidelity controllers for testing the gameplay software.
5 Final Fabrication And Testing
At this stage, we developed the final game and controllers. We conducted the final round of user testing with four participants to gather final feedback before the public showcase. Based on their input, we refined the start and end screens and added informational elements to the game.
I took over the fabrication and integration of the crossbow controller. Additionally, I designed a detailed plan for all touchpoints in the physical space to enhance the overall information and experience design.
FINDINGS
Participants raised concerns about the sturdiness of the joystick and crossbow controllers. They found the game interactions and UI impressive, and the message was clear.
Soldering the joystick (TL), Designing the movement of laser cut crossbow (TR), 3D printing the frog button (BL) and the final fabricated controllers.
P1:
"Once you start playing, felt too easy, and that was not fun".
P2:
"… killing frogs… that's not a good practice, removing the frog is a better practice".
P3:
"Couldn't see them (turtles) spawning… the speed isn't corresponding with movement of the hero character" .
User testing of the final controllers to gather feedback on hi-fidelity controllers before showcase.
The final experience
I defined the step-by-step customer experience journey creating a quick journey map to detail out all the touchpoints in the public showcase setup.
I defined the critical touchpoints for the whole experience.
FINAL SHOWCASE
Time for final public showcase
In the week leading up to the final public showcase, we added the finishing touches to the fabricated controllers, refined the game, prepared informational materials such as posters and memorabilia giveaways, and set up the physical space.
I utilized my architectural background to assist with fabrication work and spatial design to polish the end-to-end experience.
The final Pond Patrol video game setup.
Adults and kids enjoying the game created by the happy team (BR).
Impact - What players said
”Oh really? I didn’t know that WA State recommends killing bullfrogs”
"What! Are the baby turtle really the size of a quarter? I had no idea! They must be saved!!"
"The game was so engaging! I wish it had more levels and elements like boss battles!"
“The crossbow is so cool. Removing the bullfrogs was so fun”.
Click to see how people reacted at the showcase!
WHAT I LEARNED
I acquired the ability to go from an idea, and build out the entire experience from design, software, and hardware.
I recognized the complexity of creating a seamless user experience, especially in the backend of games and applications, fostering a deep appreciation for the work of computer engineers and software developers.
I gained insight into the challenges of programming physical designs, highlighting the need to collaborate across various teams in an organisation for optimal design solutions.
WHAT I'D DO DIFFERENTLY
I’d settle on a design idea sooner to allow more time for game development and early focus on controller and UI design.
I’d prioritize experience design from the beginning instead of treating it as an afterthought.
I’d refine gameplay by adding elements like increasing difficulty levels and “boss battles” to enhance engagement.
I’d Increase sophistication with visual representations of health bars and turtles being bred in labs.