UPSTREAM is an international research project aiming to understand how the planning and execution of urban developments can have an effect on current and future health implications and how this can be made a priority for ‘up-stream’ decision makers. Shape our city is UPSTREAM’s public engagement project based in Bristol, the project sought to pilot different creative ways in which the public can contribute to urban decision-making. Check out their video for more information.
Phase one was to develop a website to showcase the UPSTREAM project and house phase two; an interactive web app to encourage public engagement and gather useful data.
The client came to us with the concept and the content, it was our job to work out how it would all fit together, and functionally work as a fun and interactive game on all platforms.
First we had to work out how to visually organise all of the content without losing meaning and the educational focus of the interaction. We worked closely with a well-known artist for the illustrations of the city.
What we came up with was a page that used its space very economically. The user would have a budget to spend with a list of city and neighbourhood initiatives. Each time the user made a selection, a pop-up graphic would appear with snippets of information about its impact on the city. Each initiative could be chosen as a city or neighbourhood spend, the user’s remaining budget and the illustration of the city changing according to their selection. For example, they could choose to invest in green spaces, at a city-wide level, which added more green space to the illustration.
In order for the interaction to be effective, each outcome had to be visually distinctive. For the game to be engaging we had to clearly show many of the different outcomes. If only one or two initiatives maximised savings then every user would have chosen those, and the value of the game would have been oversimplified and lost. We had to closely work with the project members to look at all the various outcomes and permutations to ensure the game was both engaging and challenging.
For the design to be successful we had to carefully understand how to visually occupy all of the space available with productive content. It was also a challenge for the various hotspots of information to pop up and disappear without obscuring the outcomes on the image.
The development stage involved many image changes and a huge consideration for the many variables. We layered image upon image and included the ability to alter any particular outcome with different selections.
The final result was an interactive site that was able to convey a lot of information whilst remaining fun, engaging and effective. Users were able to pledge to make positive contributions to their city, as well as clicking on the ‘checkout’ button to submit their responses. Try it for yourself at https://urban-health-upstream.info/shapeourcity
Soto did a great job of pulling our new research project website together – and great level of responsiveness to ongoing edits needed. Would recommend them.
UPSTREAM- Shape Our City
This was such an exciting project to be a part of – it had some really unique challenges that the whole team enjoyed working on and we’re thrilled with how it turned out.