Developing an Interactive WordPress Game for WSUP

Water & Sanitation for the Urban Poor

We continued our work with Water & Sanitation for the Urban Poor (WSUP) and created an online game to increase engagement with visitors to their website.

• Industry: Non-profit
• Services: Design, Development
• Tech: Javascript
• Link: https://www.wsup.com/the-bottom-line/

Interactive quizzes and games can be a highly effective way for organisations to drive engagement with their audience.

In this WordPress-powered game, users take control of a waste management business in the fictional African city of Bafini. Through a series of multiple-choice questions and random events, WSUP’s audience learns about the challenges of waste management.

WSUP had never created a game before, so Highrise’s support in the development and implementation phases was invaluable in helping us to turn our concept into a workable, cost-effective tool which sits as a plugin to our existing WordPress platform.

Steve Metcalfe, WSUP Head of Communications

The brief

Following the launch of their new Highrise Digital-developed website, we were asked by WSUP to create an interactive quiz-based microsite to help people understand some of the issues behind operating a water sanitation business within cities in developing countries.

Through a familiar multiple-choice format, users would be able to simulate running a business, making decisions about the dilemmas commonly faced by business owners in the sanitation sector. Scoring during the game is represented by “health bars” in a number of areas, with users encouraged to share their outcome on social media.

In addition to the game mechanics, WSUP required the game to be editable within their existing WordPress website, allowing full control over the number of levels, questions, scoring and content within the game.

Our approach

• Flowchart logic
• Prototyping
• Component styling
• Animations
• WordPress development
• Testing

Flowchart logic

By flow-charting the game’s logic we were able to visually communicate our understanding of the game with the client and within the team.

This aided the build stage by identifying key processes that needed to be created and detailed any logic decisions.

Prototyping

With tight project timescales, we decided the best approach would be to create the front-end and back-end independently, integrating them in a later phase of the project’s development.

By building the front-end in JavaScript, development of the game logic could be progressed without waiting for the back-end to exist in order to rapidly prototype and demonstrate the game to the client.

This approach also had the benefit of the game effectively being a standalone application, allowing it to exist without WordPress behind it.Previous

Component styling

We created a number of key interactive elements as live mockups not only for client sign-off, but also as modules which could be reused within the game itself.

WordPress development

In the back-end, the game was developed as a plugin which added pages for all aspects of the game and supporting pages to be edited by the client.

Testing and feedback

When the majority of the functionality had been built, we loaded the site onto a staging server so that WSUP could start testing the game with real content.

As always, we also tested the website on the most popular browsers and devices to ensure maximum compatibility.

The results

The goal of the project was to drive engagement and educate people on the work that WSUP does and the challenges of running a sanitation organisation in the developing world.

• Continuous up-time and no bugs reported since launch
• Excellent engagement, with average session time at 5m 30s
• Global reach with engagement in Africa, Asia and Oceania as well as in Europe and the Americas.
• Positive social media feedback

The Bottom Line helps WSUP present our work in a completely new way – bringing to life the complexities of improving sanitation services through an interactive website.

We reached many more people than if we had produced something more traditional like a report or video, helping our audiences to think differently about how entrepreneurs can deliver sanitation services and demonstrating WSUP’s expertise in this area.

Steve Metcalfe, WSUP Head of Communications

Do you have an idea for an interactive game?

If you think that you could drive engagement and education through a branded game, we’d love to talk to you. Get in touch now.