terug naar UX/UI-projecten

De Verwoeste Stad

CMD jaar 1  |  2018  |  Opdrachtgever: Hogeschool Rotterdam |  Duur ± 3 maanden

BEKIJK DE GEBRUIKSAANWIJZING

Wat is ‘De Verwoeste Stad’?

“De Verwoeste Stad” is een interactief bordspel voor eerstejaars Fotografiestudenten aan de Willem de Kooning Academie. Het spel dient als hulpmiddel voor deze doelgroep om hun nieuwe medestudenten en de stad Rotterdam te leren kennen.
Het spel speelt zich af in 1940, vlak na het bombardement van Rotterdam. Het wordt gespeeld met 4 teams van 4 personen, die allemaal de route van de Brandgrens volgen. Het is hun taak om de stad zo fotogeniek mogelijk opnieuw op te bouwen. 
Aan de hand van wederopbouwkaarten bouwen de teams de stad opnieuw op. Twee teamleden spelen het bordspel, en twee gaan de stad in om de locatie te zoeken en te fotograferen met een polaroidcamera. Ze kunnen met elkaar communiceren met walkie talkies, en iedereen krijgt de kans om een keer de stad in te gaan.
Het is mogelijk om tegenstanders te dwarsbomen met Obstructiekaarten, of het eigen team een steuntje in de rug te geven met het Klavertje Vier. Ook kunnen de teams bonuspunten verdienen met de Bonuskaarten. Alle punten per team worden bijgehouden in de bijbehorende applicatie, dit is voor iedereen inzichtelijk.
Het spel eindigt automatisch na 90 minuten, het team dat binnen die tijd de meeste punten heeft behaald wint!
Bekijk hieronder de gameplay video!

Onderzoek

Ik heb samen met een teamgenoot deskresearch gedaan naar onder anderen Rotterdamse architectuur, Rotterdamse iconen, de geschiedenis van de stad, het bombardement in 1940 en Port of Rotterdam. Ook heb ik interviews afgenomen bij fotografiestudenten, waarbij ik erachter wilde komen wat voor opdrachten ze kregen op hun opleiding, wat hun interesses waren en hoe hun introductieprogramma er op dat moment uitzag. In eerste instantie zijn we uitgegaan van Rotterdamse iconen in ons eerste spelconcept: Waaro?Daaro!, maar we kregen te maken met een Kill Your Darling waarna we het roer hebben omgegooid.
Het bombardement in 1940 sprak mij en mijn team ook erg aan omdat dat het begin was van Rotterdam zoals wij het vandaag de dag kennen, we hebben er dan ook voor gekozen om uiteindelijk met dit onderwerp verder te gaan.

Belangrijkste punten

Online + Offline
Het spel moet zowel een online als offline aspect bevatten. Deze balans zoeken we op door een combinatie te maken van een fysiek bordspel en een applicatie.
Probleem
De doelgroep zijn nog niet bekend met hun nieuwe studie, klasgenoten en stad. Deze nieuwe veranderingen zijn erg spannend, en heb ik met mijn team minder eng gemaakt met een spel.
Thema
Het bombardement op Rotterdam in WWII heeft bijna de hele stad platgegooid, en heeft plaatsgemaakt voor de fotogenieke iconen binnen de Brandgrens.
Sfeer
Het gaat om fotografiestudenten, en het is dus belangrijk om fotografie terug te laten komen in het spel. Ook is samenwerking van belang om elkaar te leren kennen.

Situatie: huidig vs. gewenst

Huidig
De doelgroep komt terecht in een hele nieuwe situatie en dat kan veel spanningen met zich meebrengen. Ze zijn een nieuwe studie gestart, waar ze te maken krijgen met nieuwe mensen in een voor sommigen nog onbekende stad. 
Gewenst
De doelgroep maakt kennis met hun nieuwe situatie en spanningen maken plaats voor plezier. Ze kunnen proeven van wat de studie ze gaat brengen en leren nieuwe mensen kennen. Ook zijn ze wegwijs in Rotterdam en kennen ze veel hotspots.

Ideevorming: ‘Waaro? Daaro!’

Na voldoende informatie te hebben verzameld was het tijd voor een brainstormsessie. We hebben hiervoor gebruik gemaakt van verschillende methodes, waarna er twee concepten uitrolden. Ik heb deze concepten met mijn team naast elkaar gelegd en we hebben vervolgens het beste idee gekozen. Ons eerste concept, “Waaro? Daaro!” was een spel-app die draaide om het veroveren van verschillende iconen van Rotterdam. Door middel van battles en creatieve fotografieopdrachten konden de teams zoveel mogelijk gebieden veroveren.

Wat is ‘Waaro? Daaro!’

Waaro? Daaro! is een stategisch spel dat bedoeld is om Rotterdam en fotografie samen te brengen. De spelers, in dit geval eerstejaars fotografiestudenten van WdKA, strijden in teams van 4-5 personen tegen elkaar om zoveel mogelijk gebieden te veroveren. Door verschillende fotografiechallenges te doen en te battelen tegen andere teams kunnen Het spel staat tevens vol met Rotterdamse uitspraken om de sfeer te benadrukken. Na 90 minuten stopt het spel automatisch en wordt het winnende team bekend gemaakt. Het team met de meeste veroveringen wint het spel! 

Testen: ‘Waaro? Daaro!’

Natuurlijk moest ‘Waaro? Daaro!’ getest worden. Dit heb ik gedaan door een aantal respondenten voor het gemak het spel te laten spelen binnen het gebouw van de Hogeschool Rotterdam, aan de hand van het paper prototype dat ik met mijn team heb gemaakt (we wezen bepaalde plekken in de school aan als ‘Rotterdams icoon’, dit werkte erg goed om de flow van het spel te testen. Er kwamen veel bruikbare testresultaten uit deze test die we mee konden nemen naar de volgende iteratie. Of nou ja, dat dachten we…

Kill Your Darling

We waren net lekker op dreef met ‘Waaro? Daaro!’ toen ons werd opgedragen een kill your darling uit te voeren: het concept moest de prullenbak in. Dit was natuurlijk jammer, maar gelukkig was de teleurstelling maar van korte duur. We hebben hierdoor namelijk een nóg leuker spel kunnen maken: De Verwoeste Stad!

Ideevorming 2: De Verwoeste Stad

We zijn opnieuw gaan brainstormen met de onderzoeksinformatie die we eerder hadden verzameld. We waren het er allemaal over eens dat het bombardement in 1940 een interessant onderwerp was, en we hebben er dus voor gekozen om dit als uitgangspunt te nemen voor het nieuwe concept. 
Tijdens deze brainstormsessie heb ik met mijn team een aantal bestaande spellen te analyseren door ze te spelen en gaandeweg verschillende elementen die we goed vonden opgeschreven. Daarnaast heb ik een mindmap gemaakt rond het bombardement , waarna ik ben gaan kijken naar hoe sommige dingen daaruit ingezet konden worden. Zo ligt de Willem de Kooning Academie erg dichtbij Plein 1940, een monumentaal plein ter herdenking van het bombardement, het leek me dus leuk om dit de spellocatie te maken. Tot slot heb ik in kaart gebracht welke hedendaagse Rotterdamse iconen binnen de Brandgrens vallen, zodat we die konden gebruiken in ons spel. Langzaam maar zeker kwam De Verwoeste Stad tot leven!

Prototypen

Tijd om prototypes te maken! Ik heb de eerste wireframes gemaakt voor de app die bij het bordspel hoort. Daarna heb ik met mijn team het bordspel opgezet. Dit hebben we gedaan aan de hand van verschillende schetsen, waarbij het spel steeds verfijnder werd. Ook heb ik de Wederopbouw-, Obstructie-, Klavertje Vier en Bonuskaarten bedacht en gemaakt met een van mijn teamgenoten (bekijk hieronder de betekenis van de kaarten). 

De kaarten

Wederopbouw
Met deze kaart mag het team dat aan de beurt is een locatie opbouwen. Twee teamleden gaan op pad om binnen de tijd een polaroidfoto te maken van de betreffende locatie!  
Obstructie
Met de obstructiekaart mogen de spelers hun tegenstanders dwarsbomen, door bijvoorbeeld hun wederopbouw af te pakken en zelf uit te voeren.
Klavertje Vier
Het Klavertje Vier dient als een steuntje in de rug voor het eigen team. Met deze kaart kun je bijvoorbeeld extra tijd krijgen op de timer voor een wederopbouw missie. Handig!
Bonus
De Bonuskaarten bevatten extra punten. Hoeveel dit er zijn is niet zichtbaar voor de andere teams totaan het einde van het spel. Hierdoor weet je pas aan het einde wie er gewonnen heeft.

Testen

We hebben zowel het bordspel als de wireframes getest met een aantal respondenten. Deze respondenten waren zowel mede-CMD’ers als fotografiestudenten. Het spel werd erg goed opgevangen en de spelers waren al snel enthousiast. Wel konden we er nog een aantal bugs uithalen dankzij deze test: zo was het bijvoorbeeld nog onduidelijk hoe het werkte met het oversteken van de haven. Ook ontstond er wat onduidelijkheid over hoe de punten op de bonuskaarten werden verrekend. Dit heb ik meegenomen in het maken van het volgende prototype.

High-Fid Prototype

Aan de hand van de testresultaten heb ik een set High-Fid wireframes opgezet. Helaas had ik hier de kennis van Sketch of Figma nog niet, dus heb ik gewerkt in Adobe Illustrator. Ik vond het belangrijk dat de flow goed verliep en heb de High-fid wireframes dan ook nog een keer getest bij de doelgroep. Zij konden er nog een paar kleine dingetjes uitfilteren.
Na de wireframes was het tijd om het final bordspel op orde te maken. Dit bord heb ik eveneens in Adobe Illustrator gemaakt. Om het bord compleet te maken heb ik ook de kaartjes en de draaischijf opnieuw gemaakt. We hebben het spel nog een keer helemaal gespeeld toen het helemaal klaar was, ons ontwerpteam tegen andere ontwerpteams. Dit ging heel goed: het spel was eindelijk klaar!

Expo

Het spel heb ik met mijn team gepitcht tijdens een expo. Het project werd goed ontvangen: we werden beloond met een dikke 10 en het spel is gepresenteerd op de open dag van de opleiding!

Het eindresultaat

bekijk de gebruiksaanwijzing

Benieuwd naar meer?

bekijk mijn andere UX/UI-projecten
Privacy Settings
We use cookies to enhance your experience while using our website. If you are using our Services via a browser you can restrict, block or remove cookies through your web browser settings. We also use content and scripts from third parties that may use tracking technologies. You can selectively provide your consent below to allow such third party embeds. For complete information about the cookies we use, data we collect and how we process them, please check our Privacy Policy
Youtube
Consent to display content from Youtube
Vimeo
Consent to display content from Vimeo
Google Maps
Consent to display content from Google