Please use Chrome or Firefox. IE explorer will encounter some format issue.
Please use Chrome or Firefox. IE explorer will encounter some format issue.
The Black Girls Equity Alliance (BGEA) is an organization that strives to improve the outcomes for Black girls in child welfare, juvenile justice, education, and health. My primary responsibilities were to develop an interactive landing page and to create an embedded WebGL game that further extends the interactivity.
The first part of my work was a WebGL game created using GDevelop 5 and JavaScript. It was a 2D platformer game where the players needed to jump the black circle to the destination. The primary idea the client wanted to convey was the importance of reaching out for help when facing difficulties. A surprise moment was prepared at the end of the game.
Game link:
https://max24217.itch.io/life-bgea-experience?secret=pPXD4W0sd9klpSOSR4guQ8wVH5E
Since the experience was a metaphor instead of a gamer-focused entertainment, I configured the user inputs to be as simple as possible. The game used keyboard inputs, and the difficulty of reaching the destination was manageable if not trivial.
The last platform was designed to be so high that the black circle could not jump onto it. After the circle fell into the abyss, the audience could press a key to reach out for help. Then a golden lifter would appear to help the circle to get to the last platform.
This game was configured onto different platforms with responsive layouts and virtual joysticks. I spent plenty of time testing the game on various operating systems and hardware devices to ensure its accessibility for most audiences.
The second part of my work was to create a landing page with interactive elements and a back-end database to receive the audience's feedback. The webpage was hosted on Amazon EC2, and I used MySQL to record the data.
Landing page link: (URL may change)
I constructed a graphic story of a Black girl's living experience with issues and solutions suggested by the clients. Through clickable items, the audience could interact with the story and switch between reality and the ideal world. I also added a blinking animation effect to foster the immersive feeling.
Using MySQL, I coded a section where the audience could input how they felt about the landing page and the information presented. Both the client and audience could see how others felt about the content, and the client could adjust the webpage based on the feedback.
Same with the WebGL game, the landing page needed to run on all operating systems and hardware devices. The development process for configuring the responsive layouts was the primary bottleneck for this project as the client had high anticipation of this feature.
Copyright © 2023 Zhisheng Xu - All Rights Reserved.
Some videos use loyalty free music from Bensound.