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
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.
Empathy map
Define
Persona
User Hypotheses
Design
User Flow
Users have two options for interacting with the page: - Begin with the home page - Directly engage with the game.
Sitemap
Wireframe
I proceeded to create wireframes for the website, outlining the layout and structure of each page, ensuring clarity and functionality in the design.
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.