Developing Cityzen // Part II by Nagaoka

studio air,

Developing Cityzen // Part II MA Architecture // Complexity, Planning & Urbanism Lab at the Manchester School of Architecture Reiji Nagaoka

Table of Contents

Introduction 4 Our site, our challenge, and our atelier.

From Studio One

Studio Two Introduction

A quick reintroduction of the main argument from Studio One.

Our approach for an online multiplayer serious planning game.

User Experience & User Interface Design

Fundamentals principles of UX and UI design, with selected case studies.

Our Approach, Cityzen

An overview of our approach and our aims.

Game Creation

Technical construction of our game.

Core Gameloop Construction

A walkthrough of the technical construction of the core gameloop.

Web Development, Cityzen

150

From Buildings to Game Pieces (Typology Library)

178

Technical construction of the website.

Translation of real-world typologies for use in our game.

Cityzen, Game Demo

204

A full start-to-finish walkthrough of our game with annotations

Studio Two Conclusion

252

A reflection upon what we have achieved in thus far and next steps.

Bibliography 268

The Northern Gateway Victoria train station

Northern Gateway Site

Our Involvement in the Northern Gateway Development We are a group of students within the CPU atelier at Manchester School of Architecture working with the Manchester City Council and the Far East Consortium as consultants on the Northern Gateway project. Tasked with identifying how to develop zero-carbon future cities, we have formulated an online serious participatory planning game to ensure that sustainable urban developments are designed with existing communities from day one.

“CPU engages with planning for evolutionary and emergent city systems, digital participation and inclusion.” (CPU, 2020:online)

Atelier CPU.AI at the Manchester School of Architecture “Complexity, Planning and Urbanism (CPU) is a research laboratory and related masters atelier at the Manchester School of Architecture. CPU uses a complexity framework to develop new digital tools, computational thinking and urban theory addressing future ict disruptions and spatio-temporal dynamics in urban processes. The research is multidisciplinary and spans future cities, smart cities, the internet of things, agile governance and cities as complex adaptive systems. CPU research engages with planning for evolutionary and emergent city systems, digital participation and inclusion, data platforms for resilient cities and urban simulations for sustainable future scenarios.” (CPU, 2020:online)

01 6

Our Challenge page title

How to design zero-carbon future cities (is urban morphology adequate)? How do you understand the environmental impact of future cities? The identified challenge from the brief that we are addressing

How do we ensure that future cities are formulated to be inclusive, equitable and just spaces? How our site research & problem definition has shaped our challenge

Thesis Statement

We aim to empower bottom-up approaches to urban planning to better balance environmental sustainability and social equity in the built environment. We to aim improve the participatory design process in large scale, low-carbon urban development through the creation of a serious digital planning game, which is able to formalise and mediate divergent stakeholder ambitions. This interactive participatory approach is supplemented by a data-rich digital hub for participants to play, discuss and analyse previous interactions. In doing so, we aim to improve existing participatory processes through supplementation with an engaging, intuitive and data-driven digital game. To address the balancing of social equity and climate action in urbanisation we are guided by Doughnut Economics, a contemporary development theory by economist Kate Raworth. Doughnut Economics provides principles of practice for simultaneously tackling wicked problems of climate change and creating foundations for social equity.

Image: Lifewire, 2021

From Studio One

Here we briefly re-introduce the key aspects from Studio One which informs our approach for Studio Two. Despite our agreeement with the ambitions of the Northern Gateway’s low-carbon development, this has created additional issues where the existing communities are in danger of being displaced as a direct result of the Northern Gateway.

Existing Site

Lower Irk Valley

Collyhurst

New Cross

Existing Areas within the Northern Gateway Development Zone The Northern Gateway is a site covering three existing neighbourhoods, the Lower Irk Valley, New Cross, and Collyhurst. Currently, the Lower Irk Valley is distinctively industrial, New Cross commerical and Collyhurst residential.

Northern Gateway Site Boundary

Collyhurst

Lower Irk Valley

New Cross

Current City Periphery Boundary Not to Scale 13

Existing Site

Collyhurst, the most populous area to be regenerated, currently contains a high volume of poor environmentally performing dwellings.

F 3%

G 0.5%

B 10% 40%

E 12%

C 38%

D 36%

40% of UK Emissions are generated by homes

EPC Rating ofof Residences EPC Rating existing housing stock

Poor Environmental Performance of Current Housing Stock Collyhurst is one of the three regeneration areas within the Northern Gateway’s site constraints however, it is the most populous with a high volume of low rise residential with some medium density scattered throughout. As shown, a survey of the dwelling’s Environmental Performance Certificate (EPC) shows that there is an urgent need to increase the environmental performance of the residential areas.

Residential Commercial Civic Buildings

Not to Scale 15

The Northern Gateway

Airtight & Well Insulated

Low Energy Ventilation Systems

Dedicated Bike Storage

Electric Car Charging

Green features of new Northern Gateway developments

Green Credentials of the Northern Gateway As shown above, new residential developments within the Northern Gateway focus on the implementation of environmentally sustainable features.

Image: Northern Gateway, 2018

“[There] will be new homes, schools, healthcare, connected public spaces and improved travel links. Together, we’ll make the Northern Gateway a more united, greener place to call home.” (Northern Gateway, 2020:online)

Community Consultation

“Together, we’ll make the Northern Gateway a more united, greener place to call home.” (Northern Gateway, 2020:online)

Involvement of Existing Community in the Northern Gateway The participatory process of the Northern Gateway involved a series of consultations across the site. As the images above show, this involved participants viewing the pre-conceived masterplans then answering a questionnaire. The verbal responses to the questionnaires were recorded in the original report but were unpublished in the Strategic Regeneration Framework (SRF) which was used to approve the plans for the Northern Gateway. Images: Northern Gateway, 2019

% of people who agreed or strongly agreed.. 70%

With the proposal to deliver a unique and high quality residential-led regeneration scheme.

83%

That a social and community infrastructure will enable local employment opportunities and provide facilities for community benefit.

74%

That the regeneration of the northern gateway provides an opportunity to improve the way people travel between new and existing neighbourhoods.

78%

With proposals to improve the pedestrian experience and local amenities on Rochdale Road, which is a main transport route into and out of Manchester.

78%

That the SRF should aim to capitalise on the presence of the River Irk and the irk valley, making this the green heart of the area and linking it to a network of parks and green spaces that run through the northern gateway neighbourhoods.

78%

That the delivery of high quality public realm, and its long-term management, will play a pivotal role in the area’s regeneration.

78%

That the proposed development of the Northern Gateway fully supports Manchester’s carbon emissions reduction plan. Published results of the Northern Gateway Consultation (Northern Gateway, 2019)

Disregarded Responses

“[I] Think the concept behind the proposal is great however it disregards the ethics aspect towards the people that are current living in the proposed area.. It will cause financial crisis for many families. It would be better to regenerate the area which does not compromise the shifting of houses and quality of life for others.” (Counter Context, 2018:20)

Verbal Consultation Feedback

As the above demonstrates, despite apparent high levels of support for the Northern Gateway development, the published questionnaire results do not adequately reflect all concerns and criticisms.

given &

published

To what extent do you agree with the proposal to deliver a unique and high quality residential-led regeneration scheme? 70% Strongly disagree

Disagree

Neither

Agree

Strongly Agree

Publicised Consultation Responses

The prescribed questions were inflexible and recorded verbal answers were unpublished in the publicised Northern Gateway report (Counter Context, 2018; Northern Gateway, 2019).

Further Responses

+£

Housing affordability

Affordability of living

Community Displacement

Summary of Community Concerns

Post-Consultation Responses to the Northern Gateway The Manchester Evening News interviewed several residents and workers in Collyhurst after the inital consultation in 2018 and revealed the general sentiment towards the plans to be more of fear than hope. Current residents expressed their concern that newer, more environmentally friendly housing will increase house prices, resultantly replacing the community (Manchester Evening News, 2019)

“The feedback I got from [residents] when they went to some of the consultation meetings was quite upsetting [...] some of the affordable private housing that’s being built now is beyond the reach of this community. It’s something like £220,000 for a small house..” (Manchester Evening News, 2019:online)

image: Northern Gateway, 2019 23

Community Concerns

Image: Zoopla, 2021

A three bedroom house in Collyhurst = £180,000

3 Double bedrooms, 2 Bathrooms < 1 mile to City Centre, Parking & garden to rear.

Image: The Meteor, 2018

Three bedroom apartments in FEC’s Meadowside Development start at £697,000 3 Double bedrooms, 2 Bathrooms < 1 mile to City Centre, Balcony

Image: Northern Gateway, 2019

No prices have been published yet, but the community responses show anxieties towards the regeneration 3 Double bedrooms, 2 Bathrooms < 1 mile to City Centre, Balcony

Our Wicked Problem “We think that some bits of it are going to be so good for the area, but other bits will crucify us [...] This is the whole point, come and consult with us, ask the residents, ask the people that have lived here. It’s always people that don’t come from the area that make these decisions. The ones that don’t have to live with it. Trying to make us something we are not is not a help for anybody. We’re a hard lot of working people round here, not all on the dole, we’re not all taking drugs, and we’re not drinking, which is a lot of the way the area is presumed, and I am absolutely sick of the label of that. You’ve got good and bad everywhere and I’m sick of the bad rep we get in Collyhurst. We’re a good little area with good green open grounds and spaces for families and that’s what we want to keep.” A further resident response to the Northern Gateway development plans (Manchester Evening News, 2019:online).

Unintended Consequences of Zero-Carbon Developments As the included quote illustrates, there is a serious concern that the Northern Gateway’s sole focus upon zero-carbon development has led to unintended consquences of housing affordability in Collyhurst.

Climate Change

Reduced domestic CO2 emissions

2038 Carbon Neutrality Target

Site has high volume of high-carbon housing

15,000 low-carbon homes planned

Rise in property prices

Displacement of existing community

Housing affordability

Site is an area of high deprivation Majority of homes socially rented

Key Unintended consequences Intended Consequences Existing Conditions

Doughnut Economics

Theoretical Framework for Our Approach We are using Doughnut Economics as a theoretical framework to simultaneously tackle the issues of climate change & social equity By steering away from measures of financial growth (i.e. GDP) as a goal, Doughnut Economics revises market economics as an instrument for the creation of greater social, financial and environmental equity and sustainability. The goal is for global and local communties to reside within doughnut through ecological preservation and social stability.

phosphorus cyc and le s /o

ce a

bs / energy / so / jo c ia l

ts oo sh er ov

ical pollution / at m hem o sp /c

h e ric a e r

/h e

saf ea n r e e d q n u e

pletion / b one de iodi z o / ver g n i sit d a yl o l os l s so

n ac i

ion at fic di

ce oi u eq

g en

on / resilien cati ce

alit y

o itr

/ water / ood inc f / om h t l e a

ity an /e

al tf or

/ ity

e us

ace fo p s t rh jus d

/ climate change e g / fr ha n c es e hw us at nd er la

Expanding Participation

book book book

Technological Advancement

Educational Gap

Lack of Digital Tools Adoption

Current Limitations in Participatory Planning

A Digital Approach to Participatory Planning Through the adoption of a digital approach to participatory planning, we formulate a new strategy for participatory planning. In doing so there is an opportunity to mediate top-down & bottom-up planning through formulating a mutually beneficial solution which utilises collective intelligence whilst embodying top-down structures and big-vision thinking.

1010101010101 0101010101010 1010101010101 0101010101010 Collective Intelligence

Extensive Data Incorporation

Multimodal Information

Identified Opportunities for Digital Participatory Planning

“[D]igital tools [have] the ability to incorporate larger volumes of data and information of different types [...] and present them in user-friendly formats” (Ampatzidou et al., 2018:35). 31

Expanding Participation

The use of digital participatory planning game incorporates benefits of digital participation & reduces the existing limitations of digital division.

Knowledge Dissemination

Increased Participation

Meaningful Expression

Overcomes Digital Divide

Advantages of Using Digital Games in Participatory Planning

Application of Serious Games to Digital Participatory Planning A games approach to participatory planning enables the dissemination and transferrence of expert knowledge through a designed interface. As previously mentioned, the impact of increased participation has beneficial results for environmental change through enabling meaningful expression.

Our Approach

Our approach is the construction of an online multiplayer game where participants mediate zero-carbon ambitions and socially equitable development.

Statutory Masterplanning Process

Vision

Concept

Framework Masterplan

Detailed Masterplan

Detailed Design

Scope of Our Approach Scope of Northern Gateway Strategic Regeneration Framework (SRF)

Aims & Intended Scope of Our Approach Our approach is a serious game, acting to empower bottom up participatory planning and to be used as a tool that allows passive stakeholders to become active in the planning of their urban environment.

Equitable Zero-Carbon Future Cities

Participatory Urban Planning

More Participation

Data for Research

Doughnut Economics

Dissemination of Expert Knowledge

Design Recommendations

Climate Change as a Wicked Problem

Transparent Platform for Public Display

Policy Recommendations

Bottom-Up Benefits

Top-Down Benefits

Cityzen Website

Input Data

Our Approach, Cityzen Game

Output Data

Input / Output for our Game, Cityzen

Our Approach +

Knowledge Dissemination

Increased Participation

Meaningful Expression

Collective Intelligence

Multimodal Information

Entertaining & Educational

Overcomes Digital Divide

1010101010101 0101010101010 1010101010101 0101010101010 Extensive Data Collection

Benefits

Benefits & Limitations The digital divide is the primary limitation to this approach, despite our efforts to expand participation by making it accessible to a larger portion of the population through creation of an engaging platform. As mentioned in Studio One, formatting digital participation as a game has been proven to overcome issues of digital literacy in previous experiments with digital games for planning.

Top-down Right of Refusal !! !! !! !! !! !! !! !! !! !! !! !! !! !! !! !! !! !! !! !! !! Maintenance Required

Supplementary to Physical Process !@#£$ Moderation Required

& Limitations

The translation of complexity within a serious game facilitates all stakeholders to fully engage with the masterplanning of the Northern Gateway without an explicit requirement for expert knowledge of formal planning practices.

Our Approach Outcomes

Utilising game theory for analysing previously played games enables strategic analysis, where meaningful play can be discerned for potential application to the Northern Gateway.

End Start

Incorporates temporality

Maps all possible actions

Enables backwards induction

Characteristics of Decision Trees

Utilisation of Game Theory for Strategic Post-Game Analysis The use of game theory for post-game analysis enables the dissection & examination of the player actions to be fully investigated and mapped across all games to identify strategies that are potentially applicable to the Northern Gateway’s planning process.

Round 1

Round 2

Round (n-1)

actio

action 2

hig

actio

low

action

2 end.

high = a1. low = a2.

action 1, action 2.

b a

b round one.

action 1, action 2. a

b a

b round two.

b round (n-1).

Decision Tree Notation, with strategic form with player moves and payoffs.

Our Approach

Developer

Environmentalist

Player Roles

Entrepreneur

Game Goals

Game Board: Northern Gateway

Common Player Goal (Collaborative)

Individual Player Goals (Competitive)

climate change

r ye la e ion on let oz ep d

ac oc id ea iﬁ n ca tio

food

inco m & wo e rk

pe ju ac st e ic & e

nit ph rog os en ph or & us

tion educa

er y nd lit ge ua eq

ity

ers

div

bio

soci al equit y la con nd vers ion

l chemica n pollutio

netw orks

th al

housi

air pollutio

en er gy

r wate

Housing

Environment

Commerce

ical polit e voic ter hwa l fres drawa h wit

Game Pieces Prototypes

Cityzen Game

Cityzen Website

Studio Two Introduction

Core Game Loop

Primary Features

Prototype Development

Studio One Scope

Aims and Objectives Continuing from the development of our prototypes in Studio One, we now gain deeper insights into how to design a game to achieve the aims outlined previously. As illustrated above, the core game loop and primary features have been established and now we can begin to design the user experience and interface. The aim of this portfolio is to construct a full iteration of the game, in technical construction and architectural functionality.

User Interface Design

User Experience Design

Refinement of Core Features

Technical Construction

Architectural Validity

Studio Two Scope

“An immersive, role-playing experience can give participants in a community meeting a strong feeling of connection to the neighbourhood and a deep understanding of the issues in play.” (Gordon & Schirra, 2012:183)

Image: Play the City, 2017

UX & UI Design “[I]n the accessible environment of games, free from professional jargon, players engage with each other and reach shared solutions.” (Play the City, 2021:online)

As we are adopting a serious digital game within our approach, this section describes and analyses how previous approaches have designed the User Experience (UX) & User Interface (UI) using the fundamental principles.

UX & UI Design

For our application, the design of the game and website needs to be informed by their intended use and how we can implement the basic theories for ease of access. In this section we provide a framework for UX & UI design.

ABC DEF Fundamental UX design

Fundamental UI design

Inclusive UX/UI design

Ghi JKL

UX/UI design examples

Summary of UX & UI

User Experience & User Interface This section contains the fundamentals of UX & UI design. To illustrate the UX & UI design principles, we analyse this document’s (the portfolio) implementation of the UX & UI fundamentals to demonstrate their usage.

UX & UI Fundamentals

To understand what is meant by ‘good’ design, the designer must place themselves into the shoes of the user

C A B User behaviour

Design strategy

A B C

Design usability

Design validation

Fundamental elements of the UX design process

Fundamental User Experience (UX) Design Fundamentals of user experience can be reduced to: (1) User behaviour, where visual elements should behave in a way that users expect. (2) Design strategy generated by the designer: Who is our user? What are their motivations (outside of the game)? (3) Design Usability, ood design is invisible; the users should navigate intuitively. (4) Design Validation, this involves road-testing the design to ensure that its acheiving what it should (Hargreaves, 2020).

UX & UI design are interconnected so we explore them simultaneously using the language of graphic design

click Interface libraries

Pattern libraries

Atomic design

Fundamental elements of the UX design process

Fundamental User Interface (UI) Design Related to the UX design, UI design is the way in which designers enable, disable and encourage certain user behaviours. The fundamental elements of UI design stem from the intention of the user experience and layouting, the latter eminating from graphic design principles, but adapted depending upon the application (e.g. game design has a different ruleset to web UI design) (Hargreaves, 2020; DesignLab, 2018). 49

UX & UI Design Strategies

Baseline grid

Column grid

Modular grid

UX & UI Design: Structuring Information The most common system for organising information is the grid. Readin right-to left and so the taxonomy of grids is as follows: baseline, column grid, modular grid, manuscript grid, pixel grid, and hierarchical grid (Designlab, 2018). All of these have more appropriate applications than others (although this does depend on the skill of the designer. In our work we have deployed a modular grid as the types of information we are displaying (images, text, diagrams) have variable sizes and placement can depend upon the constrast of the images/text/diagrams, hence with some consistent arrangement & a modular grid we are able to control the user experience.

Manuscript grid

Pixel Grid

Hierarchical grid

We have used a modular grid for our portfolio as it enables arrangement to be flexible whilst maintaining consistency when there is multi-modal information

Above: Types of layout grids

UX & UI Design Strategies

Alignment

Repetition

Contrast

UX & UI Design: Graphic Design Lexicon These graphic design definitions describe the basic building blocks of graphic design (putting colour to one side for the moment). Building upon the grid layout system, a graphic design lexicon enables us to consider the flow of the designed artifact. The use of repetition in the page layout enables readers to quickly (and intuitively) locate key information on the page. Furthermore, pictorial information (e.g. diagrams) has been considered to be read first, enabling readers to gain all the necessary information in 30 seconds or, if they wish more detailed information, more time can be spent to gain more detailed information.

Hierarchy

Balance & Symmetry

Balance & Tension

These broad design principles connect single-page documents together and enables complete user experience design through designing the ‘pace’ and ‘rhythm’ of the document (DesignLab, 2018).

Above: Basic Graphic design principles enabling more detailed UX design

UX & UI Design Strategies Onyx Spanish Grey

Navigation

Image

Maximum Blue Unbleached Silk

Paragraph text

2nd line text

White Limited colour palette

Considered Functionality

Whitespace

UX & UI Design: Colour Palettes The introduction of colour increases the cognitive load of the user and should be used carefully in order to keep the users’ attention intentionally focused. (Tyrkiel, 2021; DesignLab, 2018; Hargreaves, 2020). The rules that have been utilised in this portfolio are: keeping number of colours to a minimum (there are 5 in total.. if counting shades), reducing the number of colours on a single page, functionality of elements & appropriate colouring (e.g. text is dark), and dedicated section colours For interactive design, the use of colour for feedback (e.g. close window button is red) & interactions are made visible (e.g. hover over the google search button).

X X X X X

Dataset #1 Dataset #2

Accent colours

Button?

Button

Perceivable interactivity

The use of colour has been restricted to reduce the cognitive load of the user & interactive elements have visible interactivity

Above: Basic colour rules we’ve utilised in our approach (& portfolio)

UX & UI Design Strategies Title Work Sans (Light) Work Sans (Regular) Work Sans (Bold) Work Sans (Italic)

Annotations

Sub-Title Paragraph Text

Limited font selection

Second Line

Sizing & Text hierarchy

UX & UI Design: Typography We have chosen to utilise only one font (a sans-serif) as it is more inclusively readable (neurodiverse UI design is detailed further after this page) with distinctive sizing to further aid legibility (Tyrkiel, 2021). We’ve touched upon the use of colour to prioritise content, and this has been reflected in our use of strong contrast for any text (to increase legibility), and also weighted text to enable the reader to discern the hierarchy of a page through the use of: title text, sub-title text, second line text, paragraph text, and annotations. Furthermore, paragraph breaks and diagramming all paragraph text aids legibility.

Sub-Title Paragraph text point one. Paragraph text point two. Paragraph text point three.

Paragraph formatting

Summative diagrams

Our typographic design decisions have been chosen to simplify presentation.

Above: Typographic rules followed in this portfolio Note: some layouts may differ but we have endeavoured to keep the number of alternate layouts to a minimum

Neurodiverse Design

Neurodiverse design is based upon the social model of disability which argues that it’s the barriers and structures that make an individual disabled (Singer and Blume cited in Tyrkiel, 2021).

Accessibility Criteria: Typography Language Colour Palette Colour Contrast

Designing for Neurodiversity Using neurodiversity to better design accessibly, the website has been designed to encourage the participation of as many users as possible (Tyrkiel, 2021).

CLICK HERE CLICK HERE CLICK HERE CLICK HERE CLICK HERE CLICK HERE

CLICKHER HE CLICK 59

Neurodiverse Design The quick brown fox jumps over the lazy dog Odipiet explis mo te ium, exerfer umquas ut aut que cum reiciam voluptatur ra volorporpos aut et eic te nis ad unt voluptatem. Itas dus, quas eserrovitius dolut quid qui autem que maionsedi nimus, susae preium as et quianduciis mos volorumetum as vollest, ut volenim atur? Es doluptae eniminctor

The quick brown fox jumps over the lazy dog Odipiet explis mo te ium, exerfer umquas ut aut que cum reiciam voluptatur ra volorporpos aut et eic te nis ad unt voluptatem. Itas dus, quas eserrovitius dolut quid qui autem que maionsedi nimus, susae preium as et quianduciis mos volorumetum as vollest, ut volenim atur? Es doluptae eniminctor

17pt 10pt

18pt 11pt

21pt 14pt

Typographic Recommendations 1. Sans Serif Typefaces 2. Large Text Size 3. Large Letter Width

Using sans serif fonts, having appropriately sized text with enough letter spacing are key characteristics of neurodiverse design (Tyrkiel, 2021). 61

04 62

Neurodiverse Design page title

Here is a paragraph containing some text and a list: 1. list item one 2. list item two 3. list item three for more information this is press ‘click here’ relevant Click here Inaccessibly Designed

This is Here is relevant a paragraph containing some text and a list: 1. List item one 2. List item two 3. List item three View More Accessibly Designed

Use of Intentional & Descriptive Language Accessible language is simple, clear, non-metaphorical, and with an active voice. Any buttons that appear need to be descriptive for their function (Tyrkiel, 2021).

Pass

Suitability

11.53 : 1 9.39 : 1

2.27 : 1

4.12 : 1

2.79 : 1

2.27 : 1

4.73 : 1

2.43: 1

1.98 : 1

Normal Text: Pass Large Text: Pass Graphical Objects: Pass User Interface: Pass 4.12 : 1

Colour Contrast Ratios & Suitablity for Use

Colour Palette & Use of Contrast Soft & Mild Colours are recommended and abundance of too many colours can also be a distraction. Furthermore, too much black & white contrast can be more distracting than focusing. It is better to use sparingly for key objects and reducing the starkness of contrast elsewhere (Tyrkiel, 2021). 63

UX & UI: B3

B3 - Design your marketplace was analysed by prominent games scholar Poplin to determine limitations of usability and scope.

image: billstedt-center.de

B3 - Design your Marketplace Conducting a review of B3, the challenge lay in designing the design of an entertaining game that could be used for real-life application. There was positive feedback in regards to the useability and likeability of the tool from the majority of test subjects from a range of age demographics. (Poplin, 2013).

User Experience 1. Register a Profile Players begin by registering as a user of the game, where they are prompted to enter personal details to create their profile. This enables them to safely interact with other registered users.

2. Introduction to the Game Users are then shown an introduction screen, with additional information about the real-world site and project they will be engaging with and the objectives for the game.

3. Login After logging in, users can see the leaderboard for the top-ranked designs and the most recently completed designs. they can view, vote for and comment on these designs.

UX & UI: B3 4. Selection of Game Guide Users are then prompted to select a ‘little helper’ to assist them in their in-game design. They can also select the level of help they need, ranging from ‘basic’ to ‘substantial’.

5. Main Game Screen Users design their proposal market. The buildings in the game represent the real marketsquare. users then use a drag-and-drop tool to place street furniture, vegetation and lights, which can then be rotated. Once done, users click submit to post their idea.

5. Submitted Idea The players can also chat with available experts, planners, or municipality employees, or other registered users. The top three designs and the most recent three designs are available for viewing by the general public.

Game Flow

Introduction

Registration

Game Guide

Game Screen

Submissions

Key Design Elements

#1 #2 #3 Ranked Designs

User Generated Proposal Gallery

Public Forum

This example of real world application reveals benefits of interaction within participatory planning between those that will use the space. It also suggests a way in which the process can be playful and fun whilst achieving the objectives of engaging the public in civic design. 67

page title

Interactive Interface for Generated Designs Delve compounds experience from designers, architects, tech backgrounds, real estate and city users, amongst many more, into a digital tool that generates multiple options for a site that can be chosen from based on a projects requirements.

Image: Sidewalk Labs, 692021

UX & UI: Delve

Summative Viewing of all Design Iterations The multiple alternative design solutions can then be ranked based on their performance in these metrics. The subject of the hierarchy can be selected based on the client’s design objectives.

Generated Design Analytics Data is generated from the design and juxtaposed with the same metrics for the original design to highlight improvements.

Images: Sidewalk Labs, 2021

UX & UI: Delve

Stakeholder Discussion Others stakeholders in the project may be granted access to the designs in order for discussions surrounding each one’s merits to take place.

Application of Delve Delve was used to design residential units at a development in London’s Wembley park. Key performance metrics: • • • •

Sustainability (energy use) Cost Insolation & Daylighting Accessibility

(Delve, 2020)

Key Design Elements

Statistical Readouts

Stakeholder Discussion

Comparable Design Options

The examination of an existing interactive user interface exemplifies how designs may be ranked, presented and discussed in order to be selected base on individual merit. This is something that we would like to include within our approach for testing generated games . Images: Sidewalk Labs, 2021 73

UX & UI Design

Using the fundamentals of user experience & user interface design, we have found the principles of practice that we can utilise for our game (Cityzen) & our online platform (Cityzen Hub). Furthermore, reviewing existing games & web applications has highlighted several key features for implementation.

Our Approach, Cityzen

Cityzen is the name of the serious digital game that we are creating. The following sections give a detailed explanation of the technical construction process.

Aims for Our Game

Addressing key issues outlined in the brief and addressing them in our game

Using doughnut economics for equitable zero-carbon future cities

Translation of real-world mechanics into gamespace for balancing education & entertainment

Key Aims for Our Participatory Planning Game The most important element is the creation of a online & collaborative platfom for the general public to be able to conduct urban design using Doughnut Economics

Communicating to the user what type of considerations go into desinging cities

Creating discussions between users that influences masterplanning of the site

Generate library of varies neighbourhood profiles for designers to analyse and use.

Core Game Loop Player shown doughnut for neighbourhood

Player 2 joins Player 1

Log into game

Randomly assigned a role

Player 3 joins

key Start/End Process Decision Input/Output Information

Player given toolset for role

Hover over toolset

+/- impact of tool revealed

Player shown map of neighbourhood

Role objective explained

Role objectives same in each neighbourhood Map shows existing, immovable amenities

Skip turn

Player takes turn

Place asset

Overwrite

Not possible on first turn

Other players take turns

Role objective changes in response to move Doughnut changes in response to move

After twenty turns

Game concludes

Final doughnut score calculated 81

Systems Architecture Component

Entity

System

Entity Component System (ECS) ECS is a modular architecture which seperates logic from data and ensures that the data is only stored on the entity and logic on the component. The system then manages both of these. This approach is used as it reduced duplicate code.

Game Controller

Facility UI

Entity

Road Network

Block

Point

Game Architecture

Doughnut UI

Path

UI state machine

Facility placement state

Default state

State machine is seperate from the ECS approach and relies on states to hold data as well as logic. This is due ease of state switching on input.

Now that we understand what ECS is here we have a structure of all of the components, entities and system. Game controller is the overarching system that manages the loop of the game. with UI and data connected to it.

Doughnut UI

Road network Block

Entity

Facility UI

Prototype Game UI The sections that have been highlighted in the game architecture are also visible here. this is the visual part that the players would be able to interact with and see.

Game Creation

Here we explain the process of creating the gameboard within the game itself. We are implementing this feature as it enables Cityzen to be redeployed without expert knowledge of game development.

Game Creation Design gameboard

Generate gameboard

Define game pieces

Farrell’s masterplan to be used as basemap

Play the game

Setting the Game Board Due to our game being also a tool for the developers and designers which can be used to design create variations of games based on their specification, we are using unity’s editor module to create custom tools that will help user to create a gameboard and game pieces.

Point: Stores position & is a connection between paths. These are stored in network class and modified by custom editor class Path: Stores two points, to & from. The network is non-directional and paths also store what type they are (e.g. dual lane road, river, pedestrian path etc). This enables detailed paths. Block: Areas players see & interact with once game commences. Blocks have several variables to define densities (e.g. residential). Importantly it can store entity which defines the amenities that will be stored on street block.

Defining the Game Board The gameboard is stored in network class, it is defined by a network of nodes and paths. These can then be used to generate board for the game, however before that, user must define roads and blocks that player can play on

Editor Tools

Waiting for user input

no Did user click left mouse no button and held shift

Did user click left mouse yes button and held control

yes Was it on the point

Was it on the path

yes

Reference clicked point and wait for the next input

Grab nodes connected to clicked path

If clicked on another point create path connecting the two

Delete clicked path add new point

If clicked on point, delete it. If clicked on path, delete it

Add new point at mouse position

Add new path between last created point and new one Connect three points in succession

Designing the Gameboard this part showcases the logic flow of the editor tools. user would be able to place points, connect existing ones, add points on paths, as well as delete all of the above.

Defining Paths This is how we will translate the site into digital format, and into a playable gameboard. Path defined as river: Due to our site having a body of water, we are having it as an option. this would affect adjacent blocks and paths that are connected over it would be converted to bridges. Path defined as single lane: Secondary road type that splits neighbourhoods into smaller blocks that players can then use to place their facilities. Path defined as dual carriage way: Primary road type that would split up the cite into neighbourhoods. these could potentially affect blocks in terms of noise and polution.

Editor Tools

Generating polygons from network

Triangulate polygons into meshes

Assign block class to new meshes

Generate roads based on defined path types

Polygon generation pseudocode: //this code is converts network into polygons var polygons[] //list containing all found polygons var sp = network_paths[] //copy all paths from network into new list while(sp.count > 0) //once list is empty the generation is complete var polygon[] //one single found polygon, populated by points var cur_pa = s // do(cur_pa != s) var next_pa[] = get_neighours(s) var s_angl var l_pa foreach path in next_pa var angle = angle(cur_pa, path) if (angle < s_angle) s_angl = angle l_pa = path polygon.add(l_pa) cur_pa = l_pa sp.remove(cur_pa) polygons.add(polygon);

Gameboard Generation Once the gameboard has been defined we must convert all of the data into visual and physical form, this would allow us to do collisions and visual highlighting.

To keep system flexible we are defining the pieces that players can place as entities. These only store data and zero logic, it is up to other parts of the code to manipulate game board.

Defining Pieces Just as with designing of the gameboard, creation of entities is in built in the unity as a custom option. this would allow for fast creation, prototyping and changes. Currently the entities support definition of their name, colour of the marker, as well as minimun and maximum residential density of the block. it also contains array of the doughnut segments that the entity modifies once it is placed on the game board.

Game Creation

The creation of the game board is a process that only has to occur once for a given site. By including the capability of game creation within our game we have constructed a tool which enables the game to be redeployed for different sites without any pre-requisite game development or coding knowledge.

Core Gameloop Construction

In this section we presente an annotated step by step explanation of the core gameloop.

An Online Game

Logging into an Online Game Users would be able to play the game through the website using internet enabled devices One of the important aspects is the online element of the game. due to several design decisions that we will be discussing in the next few pages, we decided to implement a turn based multiplayer game. The reason being we wanted to implement cooperative/competitive gameplay to adequate reflect real-world zero-carbon mediations.

Multiplayer / Singleplayer

Positives

Multiplayer: Postives & Negatives

Requires communication & formulation of inter-user actions

Gives greater context into the players’ decisions and easier pattern analysis.

Harder to implement & relies on internet connection

Requires multiple people to start the games.

Vulnerable to griefing.

Negatives

Improves player engagement, (co-operatively or competitively)

The very important aspect of the multiplayer games is the social aspect. if you take a look at any strategy or social deduction games, players usually make alliances and group decisions after game long discussions. This allows for more narrative driven gameplay and in our case it is very beneficial as it is much easier to document. however it relies on everyone to participate in the good faith of the game. It also heavily relies on other people and games cannot be played by a single user.

Positives

Singleplayer: Positives & Negatives

Simpler to implement and balance the game around

Doesn’t rely on multiple people to start the game, is self contained

Harder to document reasons for the player’s actions in their design.

Higher chance to stop playing in the beginning of the game.

Negatives

Allows for player to take their time in making their deicisions

Engagement relies on the game’s artificial intelligence/gameplay.

Main draw of the single player is its independence from any other aspects. Whilst this works for tools and single player games, in our case we still need to collect data from the client in order to analyse the play of the game. However, its benefits also include being able to take time in learning the game and replaying it to improve the score, which also eliminates negative players from the equation. Negative being the fact it eliminates all players from the 99 equation and is self reliant.

Multiplayer Game Choice

Linking Positives to Our Aims

Aims

The positives link back to the aims we have established in the beginning.

Improves engagement for the players, be it cooperation or competition.

Requires communication and formulation of thought for every action that affects other players

Gives greater context into the players’ decisions and easier pattern analysis.

Gamifying aspects of urban planning in order to make it easier for the players to participate.

Creating discussions between users that influences masterplanning of the site.

Generate library of varies neighbourhood profiles for designers to analyse and use.

The main reason for picking the multiplayer is because of the real engagement that comes from interactions between the players and does rely on the game’s mechanics as much as single player. Another important aspect is our requirement to document actions and reasons for said actions. By having players explain their decisions to the group in the chat makes it much easier to document it. We hope to address the issues with the multiplayer by having local design parties that will have more weight in decision making.

Addressing Negatives Main issues stem from other players, however we believe we can outweigh these issues.

Harder to implement and relies on internet connection

Requires a pool of people to start the games

Vulnerable to griefing

We also planned to introduce physical forums and provide computers to some who might not have access to them

By focusing on strong local communities we can increase user count through word of mouth and council

By having users have an ability to overwrite and win by majority can address this issue

101

Implementation

Server Approach to Multiplayer Focusing on the client-server implementation due to its security and potential future expansion

Secure connection

Decreased bandwidth

Easier infrastructure

As part of the implementation we need to decide as to which type of multiplayer we need to implement. there are two main ones: peer-to-peer and client-server. We need to decide which one of these is the most important to our game and fits what we need to achieve.

Key Client - a desktop computer or workstation that is capable of obtaining information and applications from a server. Server - a computer or computer program which manages access to a centralized resource or service in a network. Data packet - data sent across the network between two locations.

Client

Server

Peer-to-Peer

Client-Server

Peer-to-peer is a network where there are only clients which send data packets to each other, making them a client and server at the same time. once a player performs an action, the client sends data to all the other players and then waits for them to compute the outcome.

Client-server on the hand, relies on the server to process the actions and then send results to all the clients. This effectively makes it easier to verify the sent data as we only need to know what action the user wants to perform, and then perform it on the server.

Whilst it performs relatively well in slow/turn-based games, in our case we don’t want to send information across the network without checking it.

Another great thing is we can connect servers to other parts of our workflow, such as databases, websites and more. This is why we are choosing this approach for our game.

103

Role Assignment

Random Assignment of Roles By having different roles we can create dynamic situtations between players which improves participatory design. As part of our aims we need to create a dynamic environment for the players. One of the ways we’re trying to achieve this is by looking at how different roles interact with each other based on their own backgrounds. This way the users would be able to put themselves in stakeholders shoes and tackle the issues presented to them.

105

Defining Roles Linking back to our aims Creating discussions between users that influences masterplanning of the site. By having multiple roles with various goals we can create situations where discussions are neccassary to continue the game.

Using doughnut economics to design thriving cities. By defining the metrics that the player’s must manage based on the doughnut we can drive design towards more sustainable result.

Addressing key issues outlined in the brief and addressing them in our game. By using brief as a starting point as to which roles and goals are required, we can address the issues defined within the original brief.

Communicating to the user what type of considerations go into designing cities. By having the dynamic between players, conversations are inevitable in order to determine the best outcome for the city.

Brief

Improving city growth

Zero carbon cities

New residential units

Entrepreneur

Environmentalist

Developer

Calculating revenue of commercial

Promoting green energy and space

Increasing newly built homes

Defining Roles In order to define which roles we need to represent, we took a look at the brief. We needed to make sure that we have answered the challenge presented to us; due to roles defining what is placed on the game board and which metrics roles need to check, the brief is feeding directly towards rule and mechanics creation. Our main focus are the entrepreneur, environmentalist and developer. they all answer to the challenges that were presented by the brief and client. Such as a requirement for the 16,000 new homes for the population, which developers can monitor and manage.

107

Doughnut Values climate change

r wate

food

soci a equi l ty

ical polit e voic

ac oc id ea iﬁ n ca tio

th al

er gy

r ye la n o e i on let oz ep d

pe ju ac st e ic & e

er y nd lit ge ua eq

ity

l con and ver sion

ni ph trog os en ph or & us

inco m & wo e rk

n air pollutio

ation

ing

hous ers

div

bio

City Doughnut

al chemic n pollutio

educ

netw orks

Design Brief

ter hwa l fres drawa h wit

Data Research

Using research documents we’re calculating values and targets that players must balance. By highlighting and focusing several categories of the doughnut we can narrow down several aspects of the game in order to help us in designing Cityzen. these categories are also based on st1 snapshot of the city that we have researched and designed.

Target value

CO2 Climate change

50% percent decrease in emissions

Calculating value

= carbon footprint per capita * population

10% increase in net

= biodiversity units per hectare

Maintaining existing ratio

= total area / green space area

Biodiversity

Land conversion

0% full decrease

= unemployment rate (%)

0% full decrease

= premature deaths + benefit claims + emergency admissions + mood and anxiety disorders

Income & work

Health

Housing

20% of houses must be affordable

= housing / affordable housing 109

Roles’ Profile

Explanation of Each Role The most important part that drives the players to interact and come up with strategies together is their different unique goals and variety in toolsets. For example, when the developer is focusing on the development of the residential sector, the environmentalist is busy with making sure the climate score is maintained in a well balanced area.

Top-down Organisation

Farrells

Manchester City Council

Far East Consortium

Role (real-world)

Housing Developer

Green Policies

Commercial Interest

Developer

Environmentalist

Entrepreneur

Role (game-space)

In Studio One we established that if players embody top-down actors, it provides a more fair test in citizen participatory planning. 111

Player Roles Key

Role Description

A brief description explaining what is the strategy for the role is.

Key Doughnut Categories

What categories of the doughnut the role is affecting the most

Unique Goal

Revenue is calculated based on how many blocks are commercialised minus the infrastructure cost such solar panels and etc.

Role Profile Breakdown Roles have different goals and ways to achieve them, reason being to drive discussion and keep game dynamic. Each role has its own set of unique goals, which are based on the client’s requirements and brief. They also have a specific set of categories of the doughnut that their tools are going to affect the most. in addition each role has its own toolset of topologies that they can utilise in designing the city. All of these combined are used as a driver in making users interested in how they would design their city, using these tools.

Tool Profile

Doughnut Effects Key Doughnut category Doughnut category

This means that the tool has a positive impact on the said doughnut category, as well as how great of an impact it is.

Doughnut category

This can only be placed on the other type of the block.

This means that the tool has a negative impact on the said doughnut category, as well as how great of an impact it is.

Based on the area this has more value for the players

Block Effects Key Modifying - this means that the tool is reliant on a already populated block and is used to mod/upgrade the block. Scaling values - this means that the tool’s influence of the doughnut and other metrics changes based on other parameters, such as area. Proximity based - this means that when placed it has an effect on adjacent blocks and can modify their values Negative impact - this means that the tool has some kind of negative impact on other blocks. be it neighbours or itself. 113

Entrepreneur Role Description Entrepreneur’s main purpose is revenue and profit, they can place new builds as well as rent out spaces in the prebuilt. Their main purpose is driving the economy and providing work for the population, however it is a delicate balance between two other people, developers might not be happy with you cutting into their housing numbers and environmentalist’s green energy initiatives can cut into your profits.

Key Doughnut Categories Income & work

Land conversion

Health

Unique Goal Revenue

Revenue is calculated based on how many blocks are commercialised minus the infrastructure cost such solar panels and etc.

High Street

Offices Income & work

Income & work

Climate change

Housing

The more area this tool covers the more revenue is generated and more jobs are provided.

Can only be placed on top of mid to high residential blocks.

Fitness Centre

Shopping Park Health

Income & work

Climate change

The more area this tool covers the more revenue is generated and more jobs are provided.

The more residential there are near the fitness centre the more efficient it is in improving health and revenue.

The more residential there are near the fitness centre the more efficient it is in improving revenue.

115

Environmentalist Role Description Environmentalist’s main focus is sustainable approach to city planning, their main purpose is ensure that city has plenty of green spaces, as well as low carbon footprint. They synergise well with other roles, however in small doses, once density increases, the emissions and non-sustainable practices do as well.

Key Doughnut Categories Climate change

Biodiversity

Health

Unique Goal Green score

Calculated by combining carbon footprint, bio diversity and land conversion into one score which would allow for environmentalist to keep a close eye on sustainability.

Urban Park

Urban Forest Land conversion

Land conversion

Biodiversity

Climate change

The more area this tool covers the more impact it has on the doughnut and unique goal.

The more residential there are near the urban park the more efficient it is in improving doughnut values.

The more residential there are near the urban forest the more efficient it is in improving doughnut values.

Community Park

Green Energy Infrastructure

Land conversion

Climate change

Health Climate change

The more area this tool covers the more impact it has on the doughnut and unique goal.

The more residential there are near the urban forest the more efficient it is in improving doughnut values.

this tool can be placed on any residential and commercial blocks, as well as green spaces.

Community park cannot be next to high density residential, only low to mid.

If this tool is used on green spaces it would decrease their efficiency in biodiversity, climate change and health.

117

Developer Role Description Developer’s main goal is providing housing to the population, their main options is steady growth of the residential and its density. However they can get a push back from environmentalists due to lack of green spaces or having residential be converted to mix use by the entrepreneur who wants to capitalise on the high density spaces.

Key Doughnut Categories Income & work

Housing

Land conversion

Unique Goal Homes provided:

This is calculated by residential blocks and their densities. It combines all of them and modifies this score.

Low Density Residential

Mid Density Residential

Housing

Land conversion Biodiversity

The more area this tool covers the more impact it has on the doughnut and houses provided goal.

These cannot be placed next to high density residential blocks.

Can only be placed on low density residential block, allowing that block to level up and increase in density.

High Density Residential

Health Centre

Housing

Health

Land conversion

Housing

Biodiversity

The more area this tool covers the more impact it has on the doughnut and houses provided goal.

This tool can be placed on any block, even the already defined ones.

Can only be placed on mid density residential block, allowing that block to level up and increase in density.

It decreases efficiency of the block it has been placed onto.

If there are any low density adjacent to the block they will be converted to the mid density without wasting a turn.

Based on how many residential and commercial are in the area, it has greater impact on health category.

119

Toolset Overview

Low density residential

Shopping park

Mid density residential

Urban park

High density residential

Offices

Green energy infrastructure

Health centre

Urban forest

Fitness centre

High street

Community park

Diagram of Toolset Placement Requirement

Key Simple tool that can be placed on an empty block. Modify tool/topology that cannot be placed on the block by itself, requires an already defined block. Which tool/topology can be placed on top of each other.

121

Neighbourhoods

How Players Play On-site By using the proposed masterplan by Farrells, we split site into neighbourhoods, simplifying the gameboard. In order to distribute the amount of blocks that players can play on, we decided to utilise the proposed new neighbourhoods to break the site into more manageable pieces. This way we have three players per neighbourhood and the game would be much faster and exciting, retaining the interest of the involved.

New Cross

123

Site & Neighbourhoods

Design Brief

City Doughnut

Data Research

Link to our aims

Gameboard Hierarchy Based on roles we defined we highlighted key categories, using research documents we’re calculating values and targets that players must balance.

One game per neighbourhood

Players are randomly given one of the neighbourhoods per game. Neighbourhoods are broken into blocks

Interconnected scoring

Other neighbourhoods

All neighbourhoods share same doughnut to keep dynamic between themselves.

Other neighbourhoods also have influence over the doughnut in order to spread out planning.

Makes design decisions less centralised and more unique per game

Other neighbourhoods are semi-randomly selected from the database to influence players.

125

Block Assignment

Neighbourhoods as well as blocks are determined by the designers, whilst the actual purpose of them is determined by the players.

Neighbourhood gameboard split from the site

Neighbourhood split into blocks

Neighbourhoods Our arrangement of the blocks is based on the existing proposal by farrells, this is due to the fact that we are making a tool/game that is predesigned by the designers and architects. Road design and layout is a complicated topic, especially regarding the traffic. By allowing the professionals to establish a skeleton of the game board, the general public can decide on what actually goes there.

Blocks are several hectares in size and each contains a type of topology, such as residential, commercial, park, etc.

Example Block The block is roughly 1.93 hectares in size which allow for the placement of several buildings in just one block. We use non-uniform blocks compared to tiles, due to the fact there can be oddly shaped blocks which still can be used by the players. Currently on site it contains nine buildings with several secondary roads that allow access to them. The current arrangement gives us an idea as to how the buildings in our game will be laid out on the game board. 127

Players’ Turn

How do Players Play? A turn based game, allows players to take their time in placing the game objects Game dynamic stems mostly through the placement of the topologies from the toolset on to the gameboard of blocks. they each take turns in placement of the pieces but as the game progresses the topologies start to get replaced as there are no more empty pieces on the gameboard. The game loop is equivalent to a three way chess or any other strategy game, goal of which is to design a thriving city.

129

Turn Based Approach

Positives

Why Make a Turn-based Game?

Easier to implement in terms of server programming.

Due to game being online, player has to wait for others to finish their turn

Game design approach usually veers off into puzzle like territory

Gives more time to reflect on the actions made by other players and act on them.

Negatives

Easier for player to manage their actions, making it more accessible

Overall a much slower type of game so players’ retention is lower

Linking back to our aims Creating discussions between users that influences masterplanning of the site. due to it being turn based it allows for players to construct messages in order to communicate with each other without worry. Gamifying aspects of urban planning in order to make it easier for the players to participate. Due to turn based being akin to playing chess, this is the most basic and simple way to design a game. Generate library of varies neighbourhood profiles for designers to analyse and use. By having turns segmented we can have a very simple log of how the game was played. Communicating to the user what type of considerations go into designing cities. By allowing players to take one action per turn they get a chance to slowly learn how the neighbourhood should be designed. Whilst we believe that the positives outweigh the negatives we are looking to address some of the issues that might appear. One being player’s wait for other players which might break the flow of the game. It might be beneficial to either introduce a timer so the player has a limited amount of time to think about their step or have other players plan out their next move in order to create a cascading effect of pre planning actions which can speed up the process. However, that would hinder a player’s reaction to the other player’s actions. 131

Game Stages

To understand the gameflow we need to look into how long does the game last as well as which stages does the game go through in the long run.

Game Start The beginning of the game where the main focus is for the players to learn how to place and use their toolsets. This period can’t be overly complicated and must be streamlined in order to not scare away players from engaging with the game. Duration of this stage is reliant on how many free blocks there are in the neighbourhood.

Mid Game The middle of the game is where the most interesting discussion will happen. at this point the game board will run out of the spaces for players to place their pieces, so it is up to them to engage in conversation about which tools should be used to balance the doughnut. This is the longest stage of the game and the most versatile.

5 20 turns

End Game By the end of the game players have already established the general layout of the game board, however it takes several more turns for the game board to settle to its final profile.

Total Playtime Whilst the final turn count might change in the future after some play testing, we believe that 20 turns would be enough of a game time to gain a lot of insight and engage the players.

This stage is possibly the shortest and has the least amounts of changes.

133

Placing Topologies

Game UI Example This screenshot showcases start of the game where players have started placing their topologies down.

Step by Step Breakdown On the developer’s turn they select which topology they want to place. in this case let’s say it is the low density residential as it can be placed on the empty block.

Developer then decides where to place the low density residential, due to the fact that the gameboard is still empty player can place it anywhere they like, in this case close to the main road, near city centre.

Once the topology is placed, the unique goal of providing houses increases as well as parts of the doughnut become more lighter. Due to the game only beginning there is little change in doughnut or the score but as the game progresses the values will fluctuate more rapidly.

Since the player has already placed the topology all they can do is to end the turn and let others place the topologies. In this example environmentalist is placing a urban park further back.

During the beginning there is little interaction between players, main focus is to only test tools given to them.

135

Upgrading Topologies

Game UI Demo At this stage we are looking at how the tools that upgrade existing blocks work

Step by Step Breakdown After several turns developer can now take a look at other tools that they have, in this case, mid-density residential which can only be placed on top of the existing low-density blocks

By selecting the tool and then hovering over the blocks the user would be able to see that they can’t just place it anywhere and only on already developed blocks. then user clicks on the block the previous low-density block is overwritten and new mid-density one is placed in its stead.

Doughnut would also be affected as more houses are provided so the score would improve for the housing category, however the score for land conversion would drop.

By decreasing parts of the doughnut that environmentalist is focusing on can potentially cause them to place more parks, which would decrease how much land is available for the developer to place their own topologies.

With initial placement out of the way, players would experiment with other topologies.

137

Synergising Topologies

Game UI Demo Another part of the game is the bonuses that topologies recieve when they’re next to each other.

Step by Step Breakdown The game has developed much further and there is now a good amount of blocks developed, it would now be a good time to look how can we improve current score by capitalising on existing blocks. In this case its the health centre that can be placed on one of our residential blocks.

Once the hospital is hovered over the blocks it can be placed, the ui would give a brief read out of how good the synergy is based on the the adjacent blocks. With this it will be much easier for user to determine their moves.

The doughnut would also see great improvement due to the fact that the health centre is placed next to a lot of residential blocks, increasing the effect. however if any of those blocks are replaced it would also impact health centre’s effects.

By having health centre next to the residential blocks it gives incentive for other people to not replace the residential blocks, they can still do it however it would affect the neighbourhood’s score in turn.

An important step is to be aware of the best placement for the synergies to be efficient.

139

Overwriting Topologies

Game UI Demo The midgame and endgame’s main focus is overwriting and min-maxing the existing blocks.

Step by Step Breakdown with the game board running out of the space, players must now interact and converse in order to min max their neighbourhood. developer, for example, might still lack necessary number of houses. so they can decide to overwrite several parks.

There are two parts to the overwriting the existing block. first is the actual placement, the rule for which are the same as the simple placement on the empty block.

The player must give their reason as to why they want to overwrite the existing block. it is up to other players to decide whether the replacement is justified in the chatroom or when they overwrite the change themselves. they might even agree on overwriting other blocks to even the score,

The doughnut is also affected by the overwriting which would also impact as to how players react to the fact that another player overwritten their block. the game would continue one where changes are made to each block, trying to balance the doughnut.

141

Finishing the Game

The Handover As part of our aims, we need to collect the information on how the games were played. The game ends on the 20th turn, by the endgame the game board would be more or less stable in terms of the design, at which point we are collecting the information as to how and why the players have ended up with this masterplan. This would allow for designers to go through the comments made, decisions as well as calculation of the doughnut values. Our hope that this tool will drive the interest in incorporating a more participatory design approach to urban planning.

143

Results Submission

Doughnut

Category score (0-100)

The categories scores are scaled in order to make it easier to read the final doughnut score. the break down of each category would also benefit in player’s understanding as to which areas they have lacked.

Which categories were exceeded

This aspect of scoring would help in cataloguing the neighbourhood in the database as well as give an idea to the players what type of neighbourhood they ended up with and who would benefit from it the most.

Combine total score (0-2100) + bonus

Easier readability for the players, giving an incentive to try to improve their scores. Certain bonuses can be awardedbased on any achieved unique goals as well as specialisation of the neighbourhood.

Data Submission Due to the fact we want to process the data in order to help designers understand the thinking behind the public’s choices regarding urban planning. Which is why documenting chat logs and what actions a player has taken from the beginning is just as important as the final proposal. This would allow us to take slices in the timeline, check pivotal changes in the neighbourhood and other data crunching exercises.

Neighbourhood Played Date Played Client

Server

Database

Actions of Players Doughnut Score Neighbourhood Played Blocks Placed Final GameBoard Image Game Data

Participant Consent Because we’re collecting data from the public we must state and confirm that the participants are aware of what data is being collected as well as how it will be used. We are planning to make data anonymous in order to further improve turnout for our game. It will be clear from the start that the user has a choice to participate in these exercises. 145

Conclusion

Reviewing our aims for the game Based on what we have discussed, we believe that we were able to address all of the key aims we are trying to achieve.

Addressing key issues outlined in the brief and addressing them in our game

By defining roles with unique goals we were able to address main challanges within the brief and our theories from studio one

Using doughnut economics to design thriving cities

Gamifying aspects of urban planning in order to make it easier for the players to participate

Roles and their toolsets affect the doughnut and giving instant feedback allows for seemless integration

By using elements from the strategy games we were able to gamify and make urban planning simple

Throughout the section we have gone through the entire game loop as well as explained why we made certain decisions. our main goal is creating dynamic between players in order to create an environment where a lot of discussion can take place. we believe we achieve that by designing the game where a lot of altercation can happen between players that will also benefit the designers.

Communicating to the user what type of considerations go into designing cities

Creating discussions between users that influences masterplanning of the site

Generate library of varies neighbourhood profiles for designers to analyse and use

By having turn based game approach players are given a change to experiment with designing the city

Through multiplayer players are given an opportunity to interact and play with other players, driving the conversations.

By creating a more slow paced game we are able to document player moves, neighbourhoods and chat logs

147

Core Gameloop Summary

The complexity of the game derives from the interrelationship that we have established between tools/topologies. The players must competitively and collaboratively play towards a shared goal. The collaborative game goal is to achieve the highest Doughnut score whilst the competitive goal are individual targets based upon the player roles.

149

Cityzen Online

Web Development The website is designed to take data from the game and display it in a designed and user friendly format. The website hosts the game itself and acts as the comprehensive portal for participation and inter-personal discussions. Furthermore, the website crucially enables the use of the game as a source of data as it could be used by top-down actors to analyse the community generated masterplans.

Data Flow

Neighbourhood Played Date Played Actions of Players

Cityzen Game

Doughnut Score

Game Analytics

Neighbourhood Played Blocks Placed Final GameBoard Image Game Data

Output Data from Cityzen Game Summmative diagram of data flow from game to website This high level overview summarises the process which connects the game to the acquisition of meaningful data which can improve the participatory process of zero-carbon urbanisation.

Back End Processes

Final GameBoard Image

Front End Processes

Neighbourhood Played

Doughnut Score

Date Played

Neighbourhood Played

Actions of Players

Blocks Placed

Community Score

Final Display of Game Data 153

Website titleDevelopment 08 page 154

Game Data

Game Data Output JSON

Basic Display HTML & CSS

Relational Database PostgreSQL

Web Server Connection

Web Server

Advanced Display Javascript (React)

Back End

Front End Full Stack

Summary of Web Development Process Full stack development is the combination of designing front and backend processes. The above is a summary of the web development process for the game. Backend development focuses upon the functionality of the website. In this case extracting game analytics from the game and sending it to a database for storage. This focuses upon the User Interface (UI) and typically uses HTML (Hypertext Markup Language), CSS (Cascading Style Sheets) & Javascript enabling a designed experience for viewing information.

155

Back title End Development 08 page 156 User Experience in Game

Doughnut Score: 00 Action: None

Game Data 1 2021-03-04 null 00 00 00 00:00:30 0

Game Id Date Played Final Score Community Score Social Score Environment Score Game Runtime Number of Messages Sent

Recording Game Data JSON (Java-Script Object Notation) is simply the description of how data is saved (just like a pdf is a certain type of file). The JSON file type makes it easier to access information as the information is stored cleanly and in a human-readable format.

{

“gender”: 0, “neighbourhood_id”: “1”, { “housing”: 0, “date”: “2021-01-01”, “id”: “3”, “networks”: 0, “turns”: [ “type”: “mid_res”, “energy”: 0, { “mods”: [] “climate”: 0, “player_role”: “developer”, } “ocean”: 0, “doughnut”: { ], “chemical”: 0, “water”: 0, “block_types”: [ “nitrogen”: 0, “food”: 0, “low_res”, “freshwater”: 0, “education”: 0, “mid_res”, “land”: 0, “income”: 0, “high_res”, “biodiversity”: 0, Game Data (updated) User Experience in Game “peace”: 0, “health”, “polution”: 0, “justice”: 0, “pub_park”, “ozone”: 0 “political”: 0, “urb_forest”, 1 Game Id }, “social”: 0, “com_park”, “blocks”: [ 2021-03-04 Date Played “gender”: 0, “fit_centre”, null Final Score { “housing”: 0, “shop_centre” “id”: “1”, 00 Community Score “networks”: 0, ], 08 Social Score “type”: “high_res”, “energy”: 0, “block_mods”: [ 07 Environment“mods”: Score [ “climate”: 0, “health”, 00:00:40 Game Runtime“high_street”, Doughnut Score: 15 “ocean”: 0, “green_energy”, “offices”Sent 0 Number of Messages Action: Residential Placed “chemical”: 0, “high_street”, ] “nitrogen”: 0, “offices” }, “freshwater”: 0, ], { “land”: 0, “overwritten”: true, “id”: “2”, “biodiversity”: 0, “overwrite_data”: { “type”: “mid_res”, “polution”: 0, “block_id”: “2”, “mods”: [] “ozone”: 0 “reason”: “Lorem ipsum }, Game }, dolor sit amet, consectetur { Data Output JSON “blocks”: [ adipiscing elit, sed do eiusmod “id”: “3”, { tempor incididunt ut labore et “type”: “mid_res”, “id”: “1”, dolore magna aliqua.” “mods”: [] “type”: “high_res”, }, } “mods”: [ “metrics”: { ], “high_street”, “residential”: 0, “block_types”: [ “offices” “green_score”: 0, user interacts “low_res”, Behind the Graphical User Interface that the with, game ] “revenue”: 0 “mid_res”, data is recorded in tables and turns }, } updated as players take their “high_res”, { }, “health”, “id”: “2”, { “pub_park”, “type”: “mid_res”, “player_role”: “developer”, “urb_forest”, 157 “mods”: [] “doughnut”: { “com_park”,

Back title End Development 08 page 158 A relational database is used as information can be kept in seperate tables but can be identified with a common attribute (Game Id in this case).

Game Id

Date Played

Final Score

Community Score

Social Score

Environment Score

1 2 3 4 5

2021-03-04 2021-03-15 2021-03-21 2021-04-07 2021-04-08

56 67 89 34 18

6 12 55 2 0

36 33 45 18 10

20 34 44 16 8

Game No. Messages Runtime Sent 00:34:15 00:42:01 00:22:45 00:40:38 00:15:23

12 7 15 20 0

Table Layout: Basic Game Data

Relational Database Design for Cityzen Information is stored in a table format with rows and columns. Each column is only able to hold one type of data (e.g. number, text) and each field contains the value of the attribute. Rows contain a horizontal slice of the information for that specific game. In the table above game id #1 was played on 2021-03-04, had a final score of 56 etc. Information from each game is accessed through checking that the Game Id is the same through all tables.

Basic Game Data Game Id Date Played Final Score Community Score Social Score Environment Score Game Runtime Number of Messages Sent

Chat Log

Game Id Number of Messages Sent Message 1 Message 2 Message (n-1)

Detailed Doughnut Score Game Id Water Food Education Income Peace Justice Political Social Gender Housing Networks Energy Climate Change Ocean Acidification Chemical Pollution Nitrogen Loading Freshwater Withdrawal Biodiversity Pollution Ozone Layer Depletion

Detailed Turn Data Game Id Turn 1 Action Turn 2 Action (..) Turn 10 Action

Community Feedback Game Id Community Score Total Upvotes Downvotes Comments Database Design for Game Analytics 159

Back title End Development 08 page 160 Server Data Requested on Load

Image

Text

Data Sent To Website For Viewing

The Role of the Server in for Viewing Webpages

Accessing the Database for Game Data The general use of a server in web development is illustrated above, as a user clicks on a link to a website the browser (e.g. Google Chrome) requested the website information from the server and posts it onto the screen. For our website, the website requests the game data from the database via the server. This information is then processed by the front end which designs the user interface.

Database

Server

Requested Game Data Information from Database

Final GameBoard Image

Neighbourhood Played

Doughnut Score

Date Played

Neighbourhood Played

Actions of Players

Community Score

The Role of the Server in Retrieving Game Data from the Database

A server acts a key relay which listens for requests to access data and responds with the requested data.

161

Front title End Development 08 page 162 After receiving information from the back end, the front end development focuses upon the design of the user interface

Game Data

Game Data Output JSON

Basic Display HTML & CSS

Relational Database PostgreSQL

Web Server Connection

Web Server

Advanced Display Javascript (React)

Back End

Front End Full Stack

Purpose of the Front End The front-end has the purpose of displaying the finished game information. This data is presented through a gallery, which details that specific game, and an analysis page - which displays all data from all completed games.

Final GameBoard Image

Neighbourhood Played

Doughnut Score

Date Played

Neighbourhood Played

Actions of Players

Community Score

Key Game Data to be displayed

163

Front title End Development 08 page 164 Home

About

Title Ovid magnihil maio ipsum con nectori te numqui ut ea nem hitectatquos a con eniscit, torit as expernate pel ius aut rerovit quae nus diatio iumquam, sit rernataspis dolupti stionsequunt optatur

React is a Javascript framework developed for responsive web-design by Facebook. (React.org, 2021)

Development Framework for Front End Development React is a javascript (a common programming language for web development) which enables the designer to break down websites into their basic components. In addition to HTML and CSS, using React enables designers to quickly create functional and responsive websites.

Image Component

Title Title Component Ovid magnihil maio ipsum con nectori te numqui ut ea nem hitectatquos a con eniscit, torit as expernate pel ius aut rerovit quae nus diatio iumquam, sit rernataspis dolupti stionsequunt optatur Text Component

Home

About

Navigation Component

React’s strength is in the construction of re-usable components that can be re-used without recreating the component. 165

Website titleWireframe 08 page 166 Home

About

Play

Gallery

Contact

Cover Image

Introduction to the Website Brief description of the website: • • • •

Who is it meant for, Who has created it Why it has been created Brief Description of the Game

How To Use the Website • • • •

Instructions for how to navigate through the website, Where the game is, How the gallery function works Direct to About for more information

#01 Homepage

Home

About

Play

Gallery

Contact

About the Game • • • •

How to Play the Game What Doughnut Economics is How Doughnut Economics is being used for the Northern Gateway Why it is being used for the Northern Gateway Detailed Explanation of Game Data Usage:

• What data is gathered (and what isn’t) • What the data will be used for • How the data will be used (and how it won’t) • Who to contact for any questions

Game Image

#02 About

Game Image

167

Website titleWireframe 08 page 168 Home

About

Play

Gallery

Contact

The Game

Game Instructions: • Controls for the game

#03 Play

169

Website titleWireframe 08 page 170 Home

About

Play

Gallery

Contact

Detailed Breakdown of All Game Sessions: • • • • • •

Number of Masterplans generated Highest Total Score Lowest Total Score Total Number of Messages sent Longest Game Time Shortest Game Time

Game Image

Game Id: Date Played: Final Score: Community Score: View Masterplan

Game Image

#04 Gallery

Home

About

Play

Gallery

Contact

Game Image

Community Score

Game Id Detailed Breakdown of Game Session: • • • • • •

Final Doughnut Score Community Score (Voted on by website users) Social Foundation Score Environmental Boundary Score Game Runtime Total Number of Messages Sent

#05 View Masterplan

Chat Log: Shows the messages sent in-game

171

Website titleWireframe 08 page 172 Home

About

Play

Gallery

Contact

Game Image

Contact Contact Information for Developers, MCC: • Email, • Phone • Other

#06 Contact

Home

About

Play

Gallery

type here...

Contact

Query Box • Unscripted text box for shorter questions

Feedback Form Question #1

• Qualitive feedback form, semi-structured questions.

Question #2

#07 Contact - Feedback

173

Website titleDeployment 08 page 174 Hosting each process is akin to saving files in an online location (e.g. Google Drive) which enables users to access the website

Online Database, Heroku

Online Server, Heroku

Website, Heroku

Each process is hosted online so they can be accessed from the internet

Game Analytics Database

Back End Server

Front End Website

Hosting the Website Online for Access The website is hosted using Heroku, which is a limited plan free cloud storage solution, this enables us to store the entire game & website pipeline online for continous access. The limitations of the Cityzen hub is the requirement for it to be hosted using a server capable of handling the server loads. This is affected by the content of the website, the number of users, and complexity of the back end processses.

Server capacity

Secure information storage

Constant monitoring

Further considerations for full deployment

Further considerations for full deployment centralise around the establishment of creating a secure web development process which has adequate server capacity, is a secure server (as we are storing some user information),

175

Cityzen Website Summary

The website is the hub for our project, it enables participants to view all relevant information, play the game, view other games & compare data across all games.

177

From Buildings to Game Pieces

This section contains the process of translation that has occured to develop the game pieces from real-worl typologies.

Game Tile Creation

Blank Game Tile

20m

Conversion Process.

Parameter (units) x

1. Use typology data from atelier typology booklet

2. Appropriate form parameters chosen

3. Game piece created through translation

(with some artistic liberties)

181

Typology to Game Piece Private garden to rear Attached garage Street offset Red brick

Detached Housing A detached house is a stand-alone residential structure that does not share outside walls with another house or building. Detached houses give you the advantage of not sharing party walls with neighbours, which means you should be able to make more noise in your property without attracting complaints, an important advantage if you like to sing or play music at high volumes. At the same time, if you prefer peace and quiet, you should hear considerably less indoor noise from your neighbours, though you may still hear plenty of lawnmowers and hedge trimmers.

Unrendered real-world typology

Overall width (m) 4.25

5.9

4.3

1.4

Window coverage (%) 15

Overall depth (m)

Overall height (m) 7

Floor plate ratio (d/w) 0.4

Resultant game piece

8 Number of stories

5.25

11.5

Floor to floor height (m) 4

2.3

2.35

Form Parameters 183

Typology to Game Piece Private garden to rear Half plot width Street offset Red brick

Semi-Detached Housing A semi-detached house is a single family duplex, divided by one shared wall. the semidetached typology came about in the mid 18th century, when economic pressure in the construction sector made this the most cost-effective way of building. It became a symbol of middle-class aspiration. As of 2008, 7 million dwellings in the uk are classified as semi-detached, representing one of the most common dwelling type in the suburban region.

Unrendered real-world typology

Overall width (m) 5.25

6.5

Window coverage (%) 15

8 Number of stories

4.3

1.4

Overall depth (m)

Overall height (m)

Floor plate ratio (d/w) 0.4

Resultant game piece

9.5 11.5

5.25

Floor to floor height (m) 4

2.3

2.5

Form Parameters 185

Typology to Game Piece

Small patio to rear

Three per plot Red brick

Terraced Housing Terraced housing is a row of attached dwellings which share side walls with one another. they are a medium-density form of housing originating in the early 17th century. They are favoured due to their efficient use of space, especially in cities and high density urban areas where land is more expensive. The design became a popular way to provide a high quantity of accommodation for the working class in the 19th century.

Unrendered real-world typology

Overall width (m) 4

Overall height (m) 8

4.5

Floor plate ratio (d/w) 0.4

Window coverage (%) 15

Overall depth (m) 15

10 Number of stories

4.3

1.2

Resultant game piece

Floor to floor height (m) 4

2.6

4.5

Form Parameters 25

187

Typology to Game Piece

Limited material palette Direct street access

Mid-Rise Apartments Mid rise residential are scaled up low-rise, usually utilising the same material palette and form. These are more common near urban centres and tend to offer in-house amenities.

Unrendered real-world typology

Overall width (m) 15

Overall height (m) 80

Floor plate ratio (d/w) 1

Resultant game piece

30 Number of stories

Overall depth (m)

Floor to floor height (m) 12

Window coverage (%) 1

100

Form Parameters 189

Typology to Game Piece

Multiple circulation cores Limited material palette Direct street access

High Rise Apartments Tower blocks were first built in the uk after the second world war, in many cases as a “quick-fix” to cure problems caused by crumbling and unsanitary 19th century dwellings or to replace buildings destroyed by German aerial bombing. initially, they were welcomed, and their views made them popular living places. Later tower blocks particularly lost popularity after the explosion and partial collapse of Ronan Point in 1968. After a gap of around 30 years, new high-rise flats are once again being built in cities.

Unrendered real-world typology

Overall width (m) 15

Overall height (m) 80

Floor to floor height (m) 3

Resultant game piece

Floor plate ratio (d/w) 48

Overall depth (m) 7

Number of stories 20

Window coverage (%) 1

100

Form Parameters 191

Typology to Game Piece

Utility & storage to rear Glazed frontage

Low Density Retail The most common retail and commercial format. It is flexible to accommodate different types of commercial activities such as retails, offices and hotels. Low rise retail can fall into two categories, existing buildings converted for retail or new construction. The former is typically similar to terraced housing while the latter tends to incorporate higher floor to floor heights and use of transparent materials.

Unrendered real-world typology

Overall width (m) 4

Overall height (m) 20

4.5

Overall depth (m) 15

Number of stories

Floor plate ratio (d/w) 1

Resultant game piece

Floor to floor height (m) 5

3.5

Window coverage (%) 15

Form Parameters 193

Typology to Game Piece

Glazed perimeter Varied ground floor

Mid-Rise Offices and Retail. A low-rise office building is a building that is only a few stories tall or any building that is shorter than a high-rise one. Low rise offices offer more privacy and negotiability of rent and utilities than high-rise offices. Typical for the northern quarter, low rise offices are easier to maintain and easier to put out fires.

Unrendered real-world typology

Overall width (m) 12

Overall height (m) 20

Floor plate ratio (d/w) 1

Resultant game piece

Overall depth (m) 40

Number of stories 10

Floor to floor height (m) 6

3.5

4.5

Window coverage (%) 15

Form Parameters 195

Typology to Game Piece Visible core & service Repeated facade

High-rise Offices Modern skyscrapers are built with steel or reinforced concrete frameworks around cores, and curtain walls of glass or polished stone. They use mechanical equipment such as water pumps and elevators. One common feature of skyscrapers is having a steel framework that supports curtain walls. Some early skyscrapers have a steel frame that enables the construction of load-bearing walls taller than of those made of reinforced concrete.

Resultant game piece

Unrendered real-world typology Overall height (m)

Overall width (m) 9

24 Number of stories

Number of cores 1

Overall depth (m)

Floor to floor height (m) 20

4.5

Window coverage (%) 0

100

Form Parameters 197

Greenspaces

Community

Urban Park

Low-D Urban

The green spaces tiles represent the different types of park one might find in an urban setting. they enhance biodiversity in an area as well as the attractiveness, but take space away from other building typologies that may provide other merits such as residential density. The density of greenery within the tile reflects the impact the tile will have, with the dense urban forest providing the highest biodiversity values whereas the community park contributes more to the social credentials of an area.

Density Forest

Mid-Density Urban Forest

High-Density Urban Forest Density of Greenspace

199

Amenities

Existing Amenities

Fitness Centre

Green Infra

These tiles reflect the amenities that might be found in an urban masterplan, which users will be able to place within their masterplan to alter the distribution of their doughnut score, with the exception of the 'existing amenities'. These represent the landmarks and buildings that are to be retained within the masterplan, around which the users must place their tiles. The depicted retained amenity shows wing yip, the chinese supermarket located on oldham road at the edge of the southern site boundary.

astructure.

Health Centre

Shopping Centre

201

Typology Library

The process of turning buildings to game pieces has been conducted through the construction of detailed architectural models, which have been analysed and characteristics identified. The process of conversion from typlogy to game piece is conducted through identification of the significantly identifiable characteristics of each typology. The resultant game pieces are simplified versions of real-world typologies.

203

Cityzen Demo A full walkthrough of the current game & website.

This section is a guided tour of the current game build. In addition to the game itself, it shows the data submission viewable on the website.

206 page title

Zero Carbon

Welcome to You’ll be playing in the No other players to develop yo

Pla

Future Cities

o the game. orthern Gateway with two our zero-carbon future city.

207

208 page title

Entrepreneur The main motive of the entrepreneur is to maximise the amount of land dedicated to commerce.

Devel

Housing the city is objective, make su equitably for makin

Waiting for other players to join the lobby...

loper

the primary ure to zone land ng a walkable city.

Environmentalist Make sure to keep the city green through building green spaces and greenify-ing existing buildings.

209

210 page title

The aim of

The aim of the game is to attempt to balance the doug they affect the doughnut. Each player a Balance is indica

A balanced doughnut lo

f the game

ghnut before the end of play. When players place tiles action affects the doughnut differently. ated graphically.

ooks like the one above. 211

212 page title Chat window This is the starting game board.

type here.

Toolset:

Low Density

Med Density

High Den

nsity

Some existing buildings are already on the game board and are immutable.

Healthcare

213 End Turn

214 page title Chat window Game: “Welcome to the game! Please use this chat window to confer with the other players. Before you start play, please take a moment to read the brief explanations of the game User Interface (UI).”

type here.

This is your toolkit. Click to open then on your turn drag and drop a zone upon the gameboard to place it.

Toolset:

Low Density

Med Density

High Den

nsity

Here is the doughnut, click on it to show a detailed breakdown.

These icons on the right show you whose turn it is.

The circles show the number of remaining tools (20 in total). When you are done with your turn click ‘end turn’ to allow the next player to take their turn.

Healthcare

215 End Turn

Social Foundation

Game Menu Detailed Doughnut Roles & Toolsets Game Rules

Environmental Boundary

Current Score

00 To increase your score try to use your turns to bring the black rings within the peach coloured central ring. 217

Developer

Developer Too

Housing the city is the primary objective, make sure to zone land equitably for making a walkable city. Developer Entrepreneur The main motive of the entrepreneur is to maximise the amount of land dedicated to commerce. Developer Environmentalist

Game Menu Detailed Doughnut Roles & Toolsets Game Rules

Make sure to keep the city green through building green spaces and greenify-ing existing buildings.

Low Density

Typically 2-3 storeys, this zoni includes detached, semi-detac and terraced houses. Doughnut Effect:

+ Housing + Land Conver + Bio-Diversity

olset

ing ched,

rsion y

Med Density Typically 3-8 storeys, these apartments and flats often found at city peripheries Doughnut Effect:

+ Housing + Land Conversion + Bio-Diversity

High Density Large apartment buildings common in the city centre and its peripheries. Doughnut Effect:

++ Housing - Land Conversion - Bio-Diversity

Healthcare Small healthcare centre, found throughout the city centre and its peripheries. Doughnut Effect:

+++ Health - Housing

219

Developer

Entrepreneur T

Game Menu Detailed Doughnut Roles & Toolsets Game Rules

Make sure to keep the city green through building green spaces and greenify-ing existing buildings.

High Street

Typically 3-4 storeys and boas shops with some offices. Doughnut Effect:

++ Income & W - Climate Cha - Housing

Toolset

sting

Work ange

Offices Taller buildings, these are often glass and are not very environmentally friendly. Doughnut Effect:

++ Income & Work - Climate Change - Housing

Fitness Centre Large centre boasting a range of health facilities. Doughnut Effect:

++ Health + Income & Work

Shopping Park Large shopping centre typically found the city centre and its peripheries. Doughnut Effect:

+++ Income & Work -- Climate Change

221

Developer

Environmental

Game Menu Detailed Doughnut

Make sure to keep the city green through building green spaces and greenify-ing existing buildings.

Urban Park A semi- planned greenspace.

Roles & Toolsets Game Rules

Doughnut Effect:

++ Land Conver + Bio-Diversity + Climate Chan

list Toolset

rsion

nge

Urban Forest

Community Park

An unplanned re-wilding of urban space. Very good for biodiversity and wildlife.

Small parks usually owned and used by the local community.

Doughnut Effect:

++ Land Conversion +++ Bio-Diversity ++ Climate Change

Doughnut Effect:

++ Land Conversion ++ Health + Climate Change

Green Energy Used to add a renewable energy source to existing buildings, these decrease their carbon footprint. Doughnut Effect:

+++ Climate Change

223

20 tu Game Menu

Turn System,

Detailed Doughnut

Each player has 20 turns per game. A turn is taken when

Roles & Toolsets Game Rules

urns left

19 turns left

n a player does an action.

225

226 page title Chat window Game: “Welcome to the game! Please use this chat window to confer with the other players. Before you start play, please take a moment to read the brief explanations of the game User Interface (UI).”

type here. type here.

Typically 2-3 storeys, this zoning includes detached, semi-detached, and terraced houses. + Housing Doughnut + Land Conversion Effect: + Bio-Diversity

Toolset:

Low LowDensity Density

Med Density

High Den

nsity

To zone a block select the block by clicking on it. After selecting the block drag the desired tile to the block.

Healthcare

227 End Turn

228 page title Chat window Game: “Welcome to the game! Please use this chat window to confer with the other players. Before you start play, please take a moment to read the brief explanations of the game User Interface (UI).”

type here.

W co

Toolset:

Low Density

Med Density

High Den

Note how the doughnut is black. This means that it is not balanced. At the start the effects of building are small but higher density means larger effects.

After taking your turn, click ‘End Turn’ to allow the other players to go.

When you end your turn, note the ounter shows how many are left.

nsity

Healthcare

229 End Turn

230 page title Chat window Game: “Welcome to the game! Please use this chat window to confer with the other players. Before you start play, please take a moment to read the brief explanations of the game User Interface (UI).”

type here.

Toolset:

Urban Park

Urban Forest

Commun

nity

Now the next player takes their turn.

Green Energy

231 End Turn

232 page title Chat window Game: “Welcome to the game! Please use this chat window to confer with the other players. Before you start play, please take a moment to read the brief explanations of the game User Interface (UI).”

type here.

Toolset:

Urban Park

Urban Forest

Commun

nity

Then the other player has taken their turn.

Green Energy

233 End Turn

234 page title Chat window Entrepreneur: “I’m going to take the big square so we can max out income & work”

type here.

Toolset:

High Street

Offices

Leisur

Note that the doughnut is now being perceivably influenced. Keep in contact with each other to ensure the doughnut is balanced.

Retail

235 End Turn

236 page title Chat window Entrepreneur: “I’m going to take the big square so we can max out income & work”

type here.

Taller buildings, these are often glass and are not very environmentally friendly. Doughnut Effect:

Toolset:

High Street

++ Income & Work - Climate Change - Housing

Offices

Leisur

Retail

237 End Turn

238 page title Chat window Developer: “I am going to overwrite bottom row of houses” Environmentalist: “upgrading our own is good idea. biodiversity is not looking good atm” Environmentalist: “whatu gonna do dev?”

type here.

Taller buildings, these are often glass and are not very environmentally friendly. Doughnut Effect:

Toolset:

High Street

++ Income & Work - Climate Change - Housing

Offices

Leisur

Strategise and negotiate with the other players to balance the doughnut.

Retail

239 End Turn

240 page title Chat window Developer: “I am going to overwrite bottom row of houses” Environmentalist: “upgrading our own is good idea. biodiversity is not looking good atm” Environmentalist: “whatu gonna do dev?” Entrepeneur: “I’ve taken up lots of space with offices, might need the space for parks to balance doughnut”

type here.

Toolset:

Low Density

Med Density

High Dens

sity

Notice that the board is full. Players now must overwrite an existing zone.

Healthcare

Finish241

242 page title

Gam

You

For more d

me Finished!

our Score: 54

The player can click the link ‘studio.air’ to go to the website. In the ‘Game Gallery’, the game’s statistics can be found. Other masterplans can also be viewed.

ur Ranking: #107

detailed game information go to: studio.air/gallery 243

Studio Air

Game

Gallery

About

Graphs

Game Gallery

Use the sidebar to scroll through the masterplans generated so f

They are ranked from #1 which is the highest scoring masterplan (the lowest scoring).

For more detailed information about any masterplan please click or the image. The Game Time is formatted in hours : minutes : seconds. Number of Masterplans Generated

Highest Total Score (Doughnut)

Total Number of Messages Sent

Longest Game Time

213

344

1:20:23

Lowest Total (Doughnu

Shortes Game Tim

00:15

2020-21 | St

Sort by: Ranking (High-Low) Masterplan #107 Doughnut Score (High-Low) Game time (High-Low) Community Score (High-Low)

far.

n to #213

k the title,

80 Masterplan #108

l Score ut)

st me

5:67

tudio Air

45 Masterplan #109

245

Studio Air

Game

Doughnut Score (Total)

Gallery

About

Community Score

Graphs

Social Foundation Score

2020-21

Masterplan #107 The game commenced at 14:04 on 14/02/21. The game finished at 14:32 on 14/02/21. The Developer sent 3 Messages in chat. The Environmentalist sent 6 Messages in chat. The Entrepreneur sent 3 Message in chat. The Masterplan scored 54/100 points on the Doughnut in total. This is calculated by adding the Social Foundation Score to the Environmental Boundary Score. Scored 23/50 for Social Foundation, Scored 21/50 for Environmental Boundary.

8080

Community Score is generated by Visitors scoring a masterplan based upon the aesthetics. The Community has voted this masterplan a score of 80/100. The Game Time shows how long the game was in session.

Environmental Score

1 | Studio Air

Game Time (hr/mins/secs)

00:28:23

Total Messages Sent

247

Studio Air

Game

Gallery

About

Graphs

Game Graphs

Pick the data you want to graph.

You are able to choose the axis for the data by checking the corresponding x/y box. x

y Doughnut Score (Total) Community Score (Aesthetics)

Number of Messages Sent

This page allows you to compare all currently generated masterplans.

20 15

Social Foundation Score Environmental Boundary Score

Game Time (hr/mins/secs) Number of Messages Sent

0 0

2020-21

100

Doughnut Score (Total) | Studio Air

249

Game Demo Summary

This section has shown a guided playthrough, describing the roles, toolsets, pace of play, and how the masterplans are displayed afterwards. Key areas of improvement found from this process have been: (1) The user interface, which needs to be more detailed and intuitive, (2) an increased level of detail for the game pieces and (3) a more comprehensive online hub which is able to analyse all previously completed games.

Version 1.0

Version 2.0

//todo +++ Building level of detail +++ Existing buildings +++ Traced neighbourhood gameboard

//todo + Building level of detail + Existing buildings ++ Other neighbourhoods + Contextual game environment (non interactive)

251

Studio Two Conclusion

We can begin to adapt for zero carbon future cities by understanding what it will take to get there. However, as a wicked problem, climate change is unstable, not easily understood, and therefore devising a method to combat it is made more complex.

Doughnut Theory

Gamification Research has shown the impact an individual can make when involved in the efforts towards mitigating climate change therefore the challenge lies in guiding citizens towards understanding climate change and what it will take to achieve a zero-carbon city. The doughnut is a device by which the complexities of a wicked problem maybe be seen to be broken down into component parts which must be balanced. This doughnut can be adapted to represent a wicked problem to make it possible for citizens to contribute their ideas of how it may be tackled. Employing the use of this doughnut within a serious game generates an interactive platform within which citizens may engage in the process...

Game Theory

zero carbon cities

Our Ambition:

To create a serious game, informed and guided by the doughnut theory, as a bottom up participatory planning tool that allows passive stakeholders to become active in the planning of their urban environment. The game will provide a fun and engaging way that educates individuals on the challenges a city faces in becoming zerocarbon. 253

Studio Two Conclusion

How the Doughnut Educates Users on Zero-Carbon Future Cities Turn 1

no data

Turn 2

no data

The placement of a game piece to increase this category of the doughnut...

Has the knock on effect of also increasing this category of the doughnut. Climate Change no data

The doughnut is used to highlight to users that it is impossible to develop a city to benefit an isolated objective, such as climate change. The aim of the game is to convey to citizens that the actions necessary for Manchester to achieve zero-carbon status by 2038 will impact upon many more factors than just climate change, and it is a delicate balancing act to ensure that progress s achieved but not at the cost of something else. 255

Studio Two Conclusion Climate Change Major Overshoot

Ozone Layer Depletion

Ocean Acidification

no data Chemical Pollution Air Pollution

Nitrogen & Phosphorus Loading

Biodiversity Loss

Land Conversion

Freshwater Withdrawal

Manchester’s Doughnut

Contribution to Zero Carbon Future Cities using Doughnut Economics

A balanced doughnut

The doughnut is used to highlight to users that it is impossible to develop a city to benefit an isolated objective, such as climate change. The aim of the game is to convey to citizens that the actions necessary for Manchester to achieve zerocarbon status by 2038 will impact upon many more factors than just climate change, and it is a delicate balancing act to ensure that progress is achieved by developing shortfalls without exaggerating overshoots.

257

Studio Two Conclusion

+ 1010 1010101010 1010

{}

£ Greater Participation

Meaningful Data Analysis

Low cost deployment

Re-usable game code

Benefits of Cityzen for top-down actors

Beneficiaries of Our Approach, Top-down In constructing a serious digital online participatory planning game with an online hub to view, compare & analyse the results, we aim to add value to both top-down & bottom-up processes of environmentally sustainable development. For top-down actors, the benefits include the potentiality for greater participation, the ability to view and compare all games to quantify the meaningfulness of participant involvement, a low-cost participatory process that only requires digital access and the ability to re-use the majority of the game’s architecture for different sites.

1010101010101010 Knowledge Translation

Data Transparency

Meaningful Expression

Quantitive Backing

Benefits of Cityzen for bottom-up actors

& Bottom-up As previously discussed in Studio One, a current limitation of bottom-up actors is the inability to formulate viable alternatives. For the Northern Gateway, the consultation process was found to inadequately involve the meaningful inclusion of existing communities. Whilst we provide insights for top-down actors using player generated data, the online hub is designed for complete transparency - enabling bottom-up actors to campaign for viable alternatives backed by quantitive information.

259

Studio Two Conclusion

Benefits for bottom-up actors • An active role in the regeneration and development of their local area • An unbiased platform to express views and concerns about developments • An insight into the complexities of developing a city and achieving zero carbon status • An opportunity to engage with other stakeholders and exchange ideas and opinions

Desired Outcomes Of The Game

Users play the game & submit their design

Benefits for top-down actors: • Insight into the contributions from the local community Game result

Game result

MCC

FEC

• Enhanced local support from citizens who feel have expressed their views freely • Design options to help identify a ‘balanced’ proposal, satisfying multiple aspects of a thriving city doughnut FAR

• An equitable development

Developers view all completed masterplans

261

Studio Two Conclusion

End Start

Incorporates temporality

Maps all possible actions

Enables backwards induction

Previously identified benefits of Game theory for analysis

Current Limitations & Further Iterations of Cityzen At present, the key limitation of our approach in aiding the development of future cities is the functionality of the post-game process. As discussed in Studio One, we are designing the game metrics in tandem with the game in order to effectively provide meaningful data. A key feature that requires implementation is the ability to analyse games turn-by-turn using game theory as our guiding methology for post-processing. In doing so, this enables the aggregation of all games turn-by-turn to discern whether the order of construction, in addition to location, results in a more enviromentally friendly development.

Game Game Game GameGame Game GameGame Game GameGame Game

End Start

Commonality

Aggregated player action information

Decision Tree game analytics

Detailed turn information

Required features of further iterations for addressing our aims

As a full iteration of the game itself has been constructed, our next iteration requires the implementation of more detailed analytical tools to enable insights which inform sustainable city development.

263

Studio Two Conclusion

What have we achieved in s2?

In Studio Two we have produced a digital tool that manifests our theoretical framework and concept into a playable format. This digital tool is usable as a participatory planning serious game, with the goal of generating iterations of the Northern Gateway masterplan to find design solutions that address different areas of social and environmental sustainability.

How

have we achieved it?

Why

have we developed these aims?

We have been guided by our chosen challenge and our chosen theoretical framework, Doughnut Economics. The game itself has been modelled in unity software and will be playable by users in Studio Three, where we hope to test the tool and its usability.

We have developed this tool to test the ideas of making the Northern Gateway masterplan a device by which existing and future residents can become more knowledgeable and more accountable for their role in Manchester’s becoming a zero-carbon city by 2038. A by-product of this educational process are the alternative masterplans for the site, reflecting the ideas of the citizens that will be living there and providing a plurality of views to planners and the projects clients, MCC and FEC.

User Interface Design

User Experience Design

Refinement of Core Feature

Technical Construction

Architectural Validity

Studio Two Scope

265

Studio Two Conclusion Identify

Define

The problem:

Biased development with prioritisation of singular objectives beneficial to ‘active’ stakeholders.

Giving citizens a role in the efforts towards achieving a socially symbiotic, zero-carbon city.

Outline

Identify

Our ambitions:

Our method:

What do we want to achieve with this tool? Who will it benefit and how?

How will this tool achieve these ambitions?

Refine

Test

Our digital tool:

Test the tool:

Tailor it to the northern gateway and accurately represent the site.

Create opportunities and its usability.

Conclusion

Propose Mitigation: Provide a tool that allows citizen to engage in early design stages of city masterplanning.

Digitise Our concept: Create a methodical digital tool that meets our ambitions and the goals set out in s1.

Collaborate With the clients: for users to test our tool

Take the results collected by the digital tool and put them in a usable format for our clients, FEC and MCC.

The aims, aesthetics & delivery of our game require further refinement, as we do not think that the game is engaging enough. However, the essential mechanics, dynamics and aesthetics have been refined to the point where the intentions of the game, its benefits, and the outcomes are clear. Our focus for studio three will be on enhancing the user experience and refining the detail of the game to make it an accurate and playable portrayal of the northern gateway development 267 within its urban context.

image: izzudinn, 2020

Bibliography

(2) PLAY THE CITY on Twitter: ‘Playing the #affordablehousing game in Amsterdam! @eliz_rapo @ULIEurope https://t.co/BpGSQcSFUa’ / Twitter (n.d.). [Online] [Accessed on 15th February 2021] https://twitter.com/play_the_city/ status/913381977407000577. ‘20200406-AMS-portrait-EN-Single-page-web-420x210mm.pdf’ (n.d.). “27 Pre-Written Templates for Your Toughest Work Emails”. (2019) I Do Grants.org. [Online] [Accessed on 27 April 2021] https://idogrants.org/2019/02/07/reblog-27-prewritten-templates-for-your-toughest-work-emails/. Amazon (2021) What is a Relational Database? – Amazon Web Services (AWS). Amazon Web Services, Inc. [Online] [Accessed on 27 April 2021] https://aws.amazon. com/relational-database/#:~:text=A%20relational%20database%20is%20a,be%20 represented%20in%20the%20database. A Wicked Problem: Controlling Global Climate Change (n.d.) World Bank. [Online] [Accessed on 21st February 2021] https://www.worldbank.org/en/news/ feature/2014/09/30/a-wicked-problem-controlling-global-climate-change. Axne, J. (2016) Peer-to-Peer vs. Client-Server Networks - Veterinary IT Support. Veterinary IT Support. [Online] [Accessed on 27 April 2021] https://www. veterinaryitsupport.com/peer-to-peer-vs-client-server-networks/. Axon, S. (2018) How ARKit 2 works, and why Apple is so focused on AR. Ars Technica. [Online] [Accessed on 18th February 2021] https://arstechnica.com/ gadgets/2018/06/arkit-2-why-apple-keeps-pushing-ar-and-how-it-works-inios-12/. BCH (n.d.). [Online] [Accessed on 19th February 2021] https://www.billstedt-center. de/en/.

Be careful with your KYC documents | by Harry | MyCrypto | Medium (n.d.). [Online] [Accessed on 22nd February 2021] https://medium.com/mycrypto/be-careful-withyour-kyc-documents-978ab532f2be. Beaumont, J. R. (n.d.) ‘The Palimpsest: Changing cities with virtual reality | Interactive Architecture Lab.’ [Online] [Accessed on 17th February 2021] http://www. interactivearchitecture.org/the-palimpsest-changing-cities-with-virtual-reality. html. Byskov, M. F. (n.d.) Climate change: focusing on how individuals can help is very convenient for corporations. The Conversation. [Online] [Accessed on 18th February 2021] http://theconversation.com/climate-change-focusing-on-how-individualscan-help-is-very-convenient-for-corporations-108546. Castle, R. (2021) HS2 consultation ‘sham’ claim as rail line is approved. burtonmail. News. [Online] [Accessed on 17th February 2021] https://www.staffordshire-live. co.uk/news/hs2-consultation-sham-claim-rail-4997746. 2021] http://theconversation.com/climate-change-focusing-on-how-individualscan-help-is-very-convenient-for-corporations-108546. Castle, R. (2021) HS2 consultation ‘sham’ claim as rail line is approved. burtonmail. News. [Online] [Accessed on 17th February 2021] https://www.staffordshire-live. co.uk/news/hs2-consultation-sham-claim-rail-4997746. Chapman, C. (2010) Color Theory for Designers: How To Create Your Own Color Schemes — Smashing Magazine. Smashing Magazine. [Online] [Accessed on 27 April 2021] https://www.smashingmagazine.com/2010/02/color-theory-for-designer-part3-creating-your-own-color-palettes/. Crawford, C. (2003) Chris Crawford on Game Design. USA: New Riders.

271

Bibliography

Collaborative Place Design — Citizen Block (n.d.). [Online] [Accessed on 15th February 2021] Cost of UK’s HS2 rail project soars…again (2020) KHL Group. [Online] [Accessed on 17th February 2021] https://www.khl.com/news/Cost-of-UK-s-HS2-rail-projectsoars-again/1146544.article. Council, M. C. (n.d.) Manchester City Council download - Deprivation Reports | The Council and democracy | Statistics and intelligence. Manchester City Council, Town Hall, Albert Square, Manchester, M60 2LA, UK. [Online] [Accessed on 22nd February 2021] https://www.manchester.gov.uk/downloads/download/414/research_and_ intelligence_population_publications_deprivation. Definitions | Manchester housing strategy | Manchester City Council (n.d.). [Online] [Accessed on 22nd February 2021] https://secure.manchester.gov.uk/info/100007/ homes_and_property/7638/manchester_housing_strategy/2. Download for free United Kingdom vector map SVG (n.d.). [Online] [Accessed on 17th February 2021] https://mapsvg.com/maps/united-kingdom. Drachen, A. et al. (2013). Game Analytics - The Basics. In Seif El-Nasr, M., Drachen, A. and Canossa, A. (eds.) (2013) Game Analytics - Maximizing the Value of Player Data. USA, Springer. Duckworth, A. (2019) Playing games? It’s a serious way to win community backing for change. [Online] [Accessed on 15th February 2021] https://theconversation.com/ playing-games-its-a-serious-way-to-win-community-backing-for-change-116171. Employment rates in Manchester - Office for National Statistics (n.d.). [Online] [Accessed on 22nd February 2021] https://www.ons.gov. uk/aboutus/transparencyandgovernance/freedomofinformationfoi/ employmentratesinmanchester.

England, N. (n.d.) The Biodiversity Metric 2.0 - JP029. Natural England - Access to Evidence. [Online] [Accessed on 22nd February 2021] http://publications.naturalengland. org.uk/publication/5850908674228224. English indices of deprivation (n.d.) GOV.UK. [Online] [Accessed on 22nd February 2021] https://www.gov.uk/government/collections/english-indices-of-deprivation. Faylock, C. (2020) Front End Developer vs Back End Developer – Definition and Meaning In Practice. freeCodeCamp.org. [Online] [Accessed on 27 April 2021] https:// www.freecodecamp.org/news/front-end-developer-vs-back-end-developer-definitionand-meaning-in-practice/. Foot, T. (n.d.) Beam me up! Scotty leaves HS2 protest tunnel after 20 days. Camden New Journal. [Online] [Accessed on 17th February 2021] http://camdennewjournal.com/ article/beam-me-up-says-scotty-as-he-leaves-hs2-protest-tunnel-after-20-days. Games for Cities (n.d.). [Online] [Accessed on 15th February 2021a] http:// gamesforcities.com/challenges/conference/. Games for Cities (n.d.). [Online] [Accessed on 17th February 2021b] http://www. gamesforcities.com. Green, C. (n.d.) 10 Graphic Design Rules You Should Never Break - Blue Steele Solutions. Blue Steele Solutions. [Online] [Accessed on 27 April 2021] https:// bluesteelesolutions.com/graphic-design-rules/#:~:text=Color%20palette%20 %E2%80%94%20use%20no%20more,stick%20to%201%20font%20family. Griffin, D. P. (n.d.) ‘CDP Carbon Majors Report 2017’ p. 16. Hargreaves, K. and Anderson, J. (2020) User Experience Fundamentals: 4 Key Elements of the UX Design Process -. General Assembly Blog. [Online] [Accessed on 27 April 2021] https://generalassemb.ly/blog/user-experience-fundamentals-4-key-elements-uxdesign-process/. 273

Bibliography

Harvey, K. (2015) 5 Basic Principles of Graphic Design. Shillington Design Blog. [Online] [Accessed on 27 April 2021] https://www.shillingtoneducation.com/blog/graphic-designbasic-principles/. Hazan, E. (2013) Contextualizing Data. In Seif El-Nasr, M., Drachen, A. and Canossa, A. (eds.) (2013) Game Analytics - Maximizing the Value of Player Data. USA, Springer Hunicke, Robin & Leblanc, Marc & Zubek, Robert. (2004). MDA: A Formal Approach to Game Design and Game Research. AAAI Workshop - Technical Report. 1. https://users. cs.northwestern.edu/~hunicke/MDA.pdf Importance of Grid Systems in Graphic Design [Tips & History]. (2018) Trydesignlab.com. [Online] [Accessed on 27 April 2021] https://trydesignlab.com/blog/grids-ui-ux-graphicdesign-quick-history-5-amazing-tips/#1. Introducing the Amsterdam City Doughnut | Kate Raworth (n.d.). [Online] [Accessed on 16th February 2021] https://www.kateraworth.com/2020/04/08/amsterdam-city-doughnut/. Klabbers, J. H. G. (2009) ‘Terminological Ambiguity: Game and Simulation - Jan H. G. Klabbers, 2009.’ Simulation and Gaming, 40(4). Klimaatspel, City of Amsterdam (n.d.) Play the City. [Online] [Accessed on 15th February 2021] https://www.playthecity.eu/playprojects/Klimaatspel. Madeley, P. (n.d.) MP brands HS2 consultation a ‘total sham’ and an ‘insult’ to residents. [Online] [Accessed on 17th February 2021] https://www.expressandstar.com/news/ transport/2021/02/10/mp-brands-hs2-consultation-a-total-sham-and-an-insult-toresidents/. Mäyrä, F. (2008) An Introduction to Game Studies. USA: SAGE Publications Müller, S. M. and Mattissek, A. (2018) ‘Green City: Explorations and Visions of Urban Sustainability’ p. 96.

Murphy, C. (2019) The Fundamentals of UI Design - Part 1 | Adobe XD Ideas. Xd Ideas. [Online] [Accessed on 27 April 2021] https://xd.adobe.com/ideas/guides/fundamentals-ui-designpart-1/. Poplin, A. (2014) ‘Digital Serious Game for Urban Planning: “B3—Design Your Marketplace!”’ Environment and Planning B: Urban Analytics and City Science, 41(3). Rickard, L. N., Yang, J., Seo, M. and Harrison, T. M. (2014) ‘The “I” in climate: The role of individual responsibility in systematic processing of climate change information ScienceDirect.’ Global Environmental Change, 26, May, pp. 39–52. React – A JavaScript library for building user interfaces. (2021) Reactjs.org. [Online] [Accessed on 27 April 2021] https://reactjs.org/. Robson, S. (2020) Latest Northern Gateway plans include new park and 270 homes - but 28 existing homes WILL be demolished. Manchester Evening News. [Online] [Accessed on 16th February 2021] https://www.manchestereveningnews.co.uk/news/greater-manchester-news/ latest-northern-gateway-plans-include-18946963. Shakeri, M. (2016) The Use of Digital Games in Participatory Planning Practices. University of Manchester. Staffordshire (n.d.) Staffordshire. [Online] [Accessed on 17th February 2021] https://www. google.com/maps/place/Staffordshire/@52.7883471,-2.3667981,9.25z/ Tyrkiel, K. (2021) Web design for neurodiversity: Creating a more inclusive web. Editorx.com. [Online] [Accessed on 25 April 2021] https://www.editorx.com/shaping-design/article/whatis-neurodiversity-in-web-design?utm_source=facebook&fbclid=IwAR08_IAvN7YzTLZz5Dwsk P2GXjMcaA3RaduiNB92CYo-cpI4Smmt0kNAi9k&utm_campaign=fb_pp%7Cp_edx-topfunneltraffic-jan18&experiment_id=23846822426000429%E2%80%8B&utm_medium=cpc. 275

276 Bibliography Von Stengel, Bernhard & Turocy, Theodore. (2003). Game Theory. Encyclopedia of Information Systems. 2. 10.1016/B0-12-227240-4/00076-9. WebAIM: Contrast Checker. (2021) Webaim.org. [Online] [Accessed on 25 April 2021] https:// webaim.org/resources/contrastchecker/. What is a Server?. (2020) Computerhope.com. [Online] [Accessed on 27 April 2021] https:// www.computerhope.com/jargon/s/server.htm. Zimmerman, E. and Salen, K. (2004) Rules of Play: Game Design Fundamentals . Cambridge: MIT Press.

277