banner

Ped game


Category

  • UX/UI
  • Web developer

Tools

  • Adobe Illustrator
  • Adobe Photoshop
  • Figma
  • HTML
  • CSS
  • Javascript

Duration

42 hours

The "Ped Game" project aims to raise awareness about the ethical concerns surrounding foie gras production and its impact on geese and ducks. Through engaging web-based gameplay and storytelling, the project educates players on the ethical implications of foie gras production and encourages them to take action by clicking through to a duck charity website to donate.


Problem Statement

The charity website addressing the issue of foie gras lacks sufficient traffic and donations due to a lack of awareness among the public and reluctance to navigate to the donation page. Many individuals remain unaware of the ethical concerns surrounding foie gras production and are hesitant to take action.

Solution

We propose "Ped Game," a web-based interactive game that appears as entertainment but educates players about foie gras cruelty. By seamlessly integrating storytelling with gameplay mechanics, "Ped Game" effectively communicates the ethical issues involved. Importantly, the game serves as a gateway to the charity website, encouraging players to take direct action by making donations. Through this approach, we aim to increase awareness, engagement, and support for the cause of ending foie gras cruelty.

Design Process

Wireframe

Discover

I initiate the user research phase by conducting interviews with four individuals to gain a comprehensive understanding of users. Through these interviews, I aim to uncover insights into the scope of the problem. By observing their behavior on donation pages and exploring their perspectives on foie gras, aiming to understand their thought processes and motivations.

user interviews

Empathy map

 personas

Define

Persona

 personas

User Hypotheses

 personas

Design

User Flow

Users have two options for interacting with the page:
- Begin with the home page
- Directly engage with the game.

 personas

Sitemap

 personas

Wireframe

I proceeded to create wireframes for the website, outlining the layout and structure of each page, ensuring clarity and functionality in the design.

 wireframe

Game Flow

The game progression will lead players to two distinct endings:

Positive Ending:

Conditions: Players nurturing the goose responsibly.
Outcome: Players witness the good life of the duck on the website.

Negative Ending:

Conditions: Players making poor choices in caring for the goose.
Outcome: Players experience a distressing outcome for the bird.

Style guide

The style guide divided into three sections:

- Original Website
- Game
- Page After Game

Original Website
Game

Art Style: Pixel art, achieved through illustrations in Illustrator and Photoshop.

Game Genre: Virtual pet and choice-based game.

Character Animation: The duck character's movements using a sprite sheet.

Page After Game

Contrasting Styles for Positive and Negative Endings

Positive Ending Page: warm and inviting color palette, using soft tones and cheerful imagery to convey positivity.

Negative Ending Page:darker and somber tones to evoke a sense of seriousness and reflection.

Delivery

Final Wireframe

This dual-ending structure adds depth to the gaming experience, encouraging players to reflect on their choices and promoting an understanding of the ethical concerns surrounding foie gras production. Importantly, the website guides users to take meaningful action by encouraging them to donate or volunteer with genuine organizations dedicated to addressing these ethical concerns.

Prototype


Development

Build the website utilizing HTML, CSS with Bootstrap, and JavaScript, integrate a Mansory Gallery, and incorporate a game using the Kaboom.js library.

Reflection

Challenges:

- As I delved into crafting my first base game, the challenge of creating sprites and orchestrating the game's flow confronted me. This marked a pivotal moment in understanding the intricacies of game development.
- The initial non-responsiveness of Kaboom.js to HTML posed a hurdle. However, the satisfaction of finding and implementing a solution underscored my problem-solving skills and adaptability.
- Implementing Mansory and seamlessly fitting it into the responsive design of the website proved challenging. The journey involved persistence and a meticulous approach to ensure compatibility across various screen sizes.

Learnings:

- This project provided me with a comprehensive understanding of various tools, including becoming proficient in Kaboom.js for game development and navigating the complexities of Mansory for gallery implementation.
- The exploration of diverse methods to capture attention and shed light on unnoticed problems highlighted the significance of creativity in design and communication.
- Overcoming challenges in sprite creation, game flow, responsive design, and gallery implementation contributed to the enhancement of my problem-solving skills and adaptability in the realm of web development.