homeless

Youth Homelessness:
Scenario Game

Operation Come Home approached our class with a challenge to promote their organization and raise awareness of youth homelessness through various projects. Our team decided to use Adobe's then beta XD UI/UX mock-up software to build a short, shareable "game". Basically, it's a browser-based text-based adventure game -- probably the most rudimentary of all games. It was well received by Operation Come Home workers.

Launch Game

or share with friends

QR code that redirects to the game page.

Research

Advertising methodology infographics chart.

The first step was to collect data on pre-existing mode of social awareness. From the list, we grouped it by the most frequently encountered, and the qualitative data on the levels of impact it has on the audience. Then, we clustered it by pathos, ethos, and logos. We decided to appeal to the pathos aspect in the campaign. Out of dozens of preliminary ideas, we decided to pursue a simple interactive game due to our limited timeline, the immersive nature of games, and interactive element being a superb way to tell a compelling story.

Design Considerations

To reach as many people as possible (including those that do not typically play video games), we decided to include a few limiters on top of the game being a simple interactive fiction. We wanted to give users the best experience possible without distracting them with too many unnecessary accessories. We saw that having the gameplay extend for over 3 minutes to be too much in our initial test-runs.

A series of three picture frame icons with a happy, sad, and meh emoticon faces on each frame.

Mood-modifier images to communicate
scenario atmosphere to the users.

Three pages icon with a, b, and c in Helvetica on each page.

Simplified English for inclusivity. To reach a bigger
audience, simpler English is used.

Longer load time may pull users out of immersion.
Maximum for one route is no more than 3 minutes.

Process

Game of Life inspired preliminary design.

As a proof of concept to show to our clients, this was the first iteration we showed them. We unanimously agreed to take a slightly more somber approach due to the dissonance of the comical visual style of the initial mock-up and the more serious nature of their work. Otherwise, the functionality did not deviate all that much.

Next, we decided on the length of the game. Due to limitations of the Adobe XD beta, we decided to keep it as simple as possible while maintaining the general premise of the game. We built a rudimentary flowchart and collected material for the scenario through interviews with the youths at the homeless shelter.

Complex but relatively well organized scenario page flow.

After the scenario was written out, I went ahead and began to organize it into digestible chunks and assigned them to separate screens in Adobe XD. After finishing one linear scenario, I added branches and reorganized to make it as efficient as possible.

Prototype

Game menu with sad looking girl in the background.

A game window, with a picture of a girl's back running. Text says, 'You decide to run away. Anywhere is better than this god-forsaken home...'

Credits page of the game window. With various people that worked on the project.

Launch Game

Conclusion

Due to the various technical limitations, changes that would be implemented in the future could be the inclusion of Google Maps with pins on all the homeless shelters for youth as well as an external link to the Operation Come Home website at the start and end of the game. The watermarked stock images would be replaced with properly licensed images. Responsive design to fit with other mobile devices would also be considered for future implementation.