Gyllensten Design

               Mia Adele Gyllensten Joahnsen                                               Designstudent ved Arkitektur- og Designhøgskolen

[gyllenstendesign]

Oppsumering av semesteret

Som et siste innlegg vil jeg si at semesteret har bydd på varierte, utfordrende og morsomme oppgaver. Jeg har lagt mye tid i hver oppgave, men oppdateringer på tumblr ble et stressende element for meg da jeg ofte ikke hadde mer å gi på slutten av dagen. Dette kunne jeg regulert selv ved å godta dårligere sluttresultat mot bedre tumblr side, men slik ble det altså ikke.  Semesteroppgaven var også spesielt utfordrende ettersom ett av gruppemedlemmene var syk på starten, og et annet mot slutten. Det gjorde at de dagene jeg virkelig hadde trengt å ta det rolig, ikke var mulig, ettersom noen måtte jobbe med oppgaven. I ettertid fikk jeg vite at der var meningen at alle med tilrettelagt skulle hatt et ekstra medlem på gruppa, men at dette ble glemt for meg. Dette tror jeg hadde hjulpet masse. For dagen etter innlevering krasjet jeg fullstendig, og tilbragte hele dager på mørke rom uten stimuli. Dette er også grunnen til at tumblr ikke ble oppdatert på det siste prosjektet, ettersom jeg brukte hele helgen og litt til på å komme meg. Når jeg endelig kom meg tenkte jeg at det var for sent, samt at var Diplom-oppgaver og AHO-works. Dette var spesielt for semesteroppgaven. Oppgaven rett før, hvor vi skulle lage nettside for et internett-fenomen, gikk helt fint. Der fikk i velge grupper selv, og vi fikk også være en ekstra på gruppen, så jeg tror det hjalp mye.  Ellers er jeg fornøyd med læringsutbytte og at oppgavene har vært såppas variert. Favorittoppgaver var game-design oppgavene. Disse ga virkelig mersmak! Takk for et ellers fint halvår, og flott semester.

[sandt22]

Result

A video explaining and demonstrating our project.

Affiliates

@williamdalsto @gyllenstendesign

[gyllenstendesign]

Obs: Film kan ikke legges ut grunnet personvern av barna på filmen. Men regner med at lærere har tilgang på videoen.

[sandt22]

Lesson plan

As per the brief, the learning experience will ultimately happen inside a classroom, meaning it will be incorporated into a school module, even though we were not required to heed any of official learning outcomes on UDIR or elsewhere in our design. Meaning we will have to consider our learning experience within the confines of a lesson plan.

Bringing it all together, the lesson begins with an introduction to the overarching concept and some general rules which applies to both the analogue and digital games. Afterwards, the class is split in half: Team Analogue and Team Digital, where the teacher will quickly brief the students on the narrative. Then each team is split in two yet again: one group will be defusing the bomb, while the other group has access to the bomb manual which they have to decode. After 25 minutes, the team will have the opportunity to switch games, so that both teams gets to experience both the analogue and digital bomb. After yet another 25 minutes, the two teams are disbanded, returning to being a class as a whole. The teacher then gives the students some prompts to make them reflect on the experience and how it applies to their lives as a whole beyond the classroom.

Pedagogical theories

Vygotskys proximal learning zone.

Reflection

During playtesting we experienced that engagement dropped in the first and last part of the lesson, because it followed a traditional lecture format. An interesting iteration on the lesson plan would be to try incorporating the reflection prompts into the game itself, in attempt to circumvent the traditional teacher-student lecture dynamic.

Affiliates

@williamdalsto @gyllenstendesign

[gyllenstendesign]

Refleksjon: Vi fant at det ofte var 2-3 elevene som engasjerte seg i refleksjonen etter endt spill, mens resten var mer stille. Til gjengeld var disse elevene veldig engasjert.

[sandt22]

Communication modes

The key aspect of our concept is the communication happening between the bomb defusers and bomb manual decoders.

Team Analogue

We made a thread track device to simulate snailmail. How slow physical communication is and thus how deliberate one has to be in what information one sends.

Notifications with a honking horn.

They are only allowed to communicate through drawings.

Team digital

We handed the students our smartphones to communicate with.

Students cannot communicate in Norwegian.

The students are allowed to arrange for what kind of code language they wish to use.

Affiliates

@gyllenstendesign @williamdalsto

[sandt22]

Bomb manual

The second part of our concept was the bomb manual which holds the key to defusing the bomb, hidden in encrypted puzzles.

Although not the primary feature of our design, it was inspired by escape room puzzles.

Analogue puzzles

Professor Rumlegås has gone missing! Homemade sketchy aesthetic.

Digital puzzles

Google street map

Inspect wikpedia page — make the students feel like real hackers

Code hidden in console of a webpage

USB disk containing various files

Ctrl f through a faux vg front page

Prowling through suspicious posts in a social media hashtag

Visiting the internet web archived page of a dead link website

Looking for hidden messages in the web search history of a web browser

Looking through a youtube video for recurring iconography

Listening for morse in an audio file or blinking lights

An idea was to make the students plug in their phone to the computer with a USB cable for narrative immersion.

Affiliates

@gyllenstendesign @williamdalsto

[gyllenstendesign]

Analoge puzzles innebar kodespråk i morse, tall-puzzles, og gjemte lapper rundt om i Professor Grislingås sitt kontor (klasserommet)

[sandt22]

Digital bomb

We unfortunately didn’t achieve as high finish on the digital bomb as we did on the analogue bomb. We originally planned to make the digital bomb into an actual interactive website, but our teacher urged us to stick to Figma, since that’d make it easier to iterate our design.

In hindsight, we should have been more stubborn about following our original plan, because all the pupils figured out they could cheat by pressing the arrow keys, instead of actually doing the escape room puzzles to properly defuse the bomb.

Narrative

The narrative of the digital game was that the police have arrested some members of a hacker group who have created a virus bomb that will publish all the pictures on their phones, essentially «face raping» the players as it’s called, unless they defuse the bomb.

Visual design

For ease of iteration we initially decided on a simple flat UI look, although we later on also played with the idea of adding a more hacker aesthetic through the use of binary, ASCII art, 1337 hackerspeak, and hiding the answers inside of actual javascript code.

Coding

Although unfinished, this is what the plan for the code was.

Nb!!! This post is a work in progress!

Affiliates

@williamdalsto @gyllenstendesign

[sandt22]

ALT

Analogue «bomb» with Arduino

Making the physical bomb was a challenging and very rewarding experience. It’s created with Arduino placed in a suitcase. None in the group had ever touched Arduino before, and we only had one person who had a little experience with MicroBit, so huge props to @gyllenstendesign for figuring it out in the end!

ALT

ALT

Arduino

Since we had no experience with Arduino, we scoured the internet for tutorials. Initially we wanted to recreate this bomb made by Alastair Aitchison, but we unfortunately didn’t have the same exact materials that he used, and trying to adapt the code to fit the materials we did have would be too over-ambitious for this project. Therefore our quest continued for a tutorial that fit the electronics we had on hand. Eventually we began looking through GitHub and discovered this tutorial made by Raphaël Champeimont, which is what we ended up using in the end. We even got in touch with the creator, who helped us figure stuff out.

Suitcase

After the "guts" was settled, we began working on the "shell". We bought a suitcase off Finn.no, and created a wooden mount to place the electronics on. One challenge was that the breadboard we used had already been taped onto a lasercut frame by the people we purchased it from, so some of the wires which were not supposed to be cut were unfortunately visible. To signal to the players that these wires should be left alone, we wrote a note in the suitcase and color coded these wires black and red. Meanwhile the wires that should be cut, we made colorful and wrote a note telling the players that these wires could be cut.

To add to the narrative, we filled a soda bottle with green soap water and pasted a sticker on it to make it look like a biohazard bomb. We also used some gold and black striped tape, which added to the narrative flair.

Reflection

Given more time, we could have tried out connecting our bomb to a speaker, and thus added sound effects like the final explosion and the ticking countdown timer, which could make the game more responsive to user input.

As for the suitcase, we could have tried getting our hands on another breadboard, which would have allowed us to hide the guts fully underneath the "shell". Or even better, we could have gotten to actually solder everything together. Although we tried to avoid permanently soldering anything, because we wanted to preserve the parts for use in future projects.

We also had a little fun talking about glitter bombs when ideating the analogue bomb, and talked about maybe creating a confetti explosion. Since an actual glitter bomb is a bit much, and having glitter stuck everywhere forever probably wouldn’t be very popular with the people who has to clean it up.

Affiliates

@gyllenstendesign @williamdalsto

[gyllenstendesign]

Merk! Bomben hadde en tikkelyd som gikk i takt med nedtellingen på displayet. Dersom feil ledning ble kuttet var straffen at tiden gikk dobbelt så fort nedover. Dvs at også tikkelyden gikk i dobbel hastighet, og dermed fungerte som et ekstra stresselement for spilleren. 

[gyllenstendesign]

Fortell noe interessant om internett. Av: Mia, Ursula og Elise. Vi lot oss inspirere av personlige tilpasninger. Vi har alle et minne om at man tidligere gjorde det som hobby å tilpasse brukergrensesnittet til et tema. Kanskje var menylinjen i en farge, og bakgrunnsbilde med et matchende motiv? Eller var internettleseren av bevegende bilder?  Var søke-ikonet noe annet enn ett spørsmålstegn? Det var så mange måter i tilpasse både nettleseren sin, og brukergrensesnittet på maskinen sin på, og dette lot vi oss inspirere av. Vi valgte å fremstille dette ved å lage en internettside med søkefelt (typ google), hvor man kan tilpasse utseende etter ulike Marvel karakterer. Vi har brukt både illustrator, atom og figma for å få til dette prosjektet.  Ovenfor ser dere endelig resultat. Vi innser at vi kanskje ikke hadde trengt å lage en egen side for absolutt alle marvel-karakteren, men sånn ble det! Vi er uansett fornøyde. 

[gyllenstendesign]

Personlig Nettside.

Jeg har aldri tidligere arbeidet med HTML-koding, så dette viste seg å være utfordrende. Heldigvis har jeg fått blålysbriller som hjelper noe. Jeg må likevel begrense meg til antall timer jeg kan jobbe over skjerm per dag. Dette prosjektet ble vanskelig da det kunne gå oppimot 2 timer fra du ba om hjelp til det var din tur i køen.  Jeg føler at jeg har et godt utgangspunkt, men at jeg ikke er i nærheten av der jeg ønsker å være.  Ettersom samboeren min nylig også satt seg på Macen min, og knuste skjermen, så er det få bilder jeg har fra tidligere prosjektet på maskinen. Disse forsvant under Reprasjon. Jeg synes likevel siden treffer de punktene jeg ønsket designmessig. Jeg ønsket noe tidløst, og minimalistisk.  Likevel er jeg i tvil i om det var rett avgjørelse. For etter en samtale med Steinar poengterte han at nettsiden var ren og fin, men hvordan skiller den seg ut fra andre sine sider?  Dette har hengt ved, og jeg ønsker derfor å forandre siden til å bli mer lik det unike ved meg, men dette hadde jeg altså ikke tid til i denne omgang.

[gyllenstendesign]

HTML og CSS koder fra personlig nettside.

[gyllenstendesign]

[gyllenstendesign]

Endelig resultat Slik ble altså spillet til slutt! Enjoy :)

[gyllenstendesign]

Urban Game Figma-Filen til Heksespillet vårt. Vedlagt ligger link til Figma-fil.

https://www.figma.com/file/BemHbYNh6lwy0B1ASxEQLC/Untitled?node-id=0%3A1

[gyllenstendesign]

Vi bestemte oss for å kun lage de 15 første minuttene av spillet, men spillerne får instruert i begynnelsen av spillet av at spillet vil vare i 60 minutter.  Det vil derfor ikke være noen slutt på prototypen av spillet vi lager. Dette er et bevisst valgt. Spillet begynner med at “elevene” (dvs. spillerne) møter opp til timen ute ved den store steinen. Der står kun en kurv med eleksirer i, men ingen professor. Plutselig begynner en tlf å ringe fra kurven. De svarer anropet, og et forvrengt stemme forteller at professoren er kidnappet, og at de må bringe professorens hemmelig formelbok til dem innen 60 min, ellers vil professoren blir drept. Derifra begynner jakten.

Mobilen de holder er låst med en 4 sifret kode, og første oppgave blir å finne koden for å låse opp mobilen. Dette må de bruke kurven med eliksirer til. Når dette er gjort vil de komme inn i en figma-fil, spesielt tilpasset spillet. Figma-filen er laget som et vanlig brukergrensesnitt på en iPhone, hvor apper som notater, bilder, meldinger osv, kan gi hint til oppgaver å løse, og steder å gå. På veien vil man møte levende karakterer som også kan gi hint til hvordan å løse oppgaven.  Hint kan også være gjemt i naturen.

[gyllenstendesign]

Urban Game Vi fikk tema MAGIC.

Vi diskuterte litt frem og tilbake om hva slags spill vi ville ha. Noen ville ha en innviklet og fysisk versjon av Secret Hitler, mens andre mente at det kom til å bli for komplekst i forhold til tiden vi hadde til rådighet. Vi endte opp med et heksespill som finner sted på en magiskole. Plottet er at løperen Professor Vulcana er forsvunnet, og det er nå opp til elevene (spillerne) å finne henne før det er for sent. Det viser seg at hun er kidnappet, og for å få henne tilbake må elvene gjennom en rekke ulike oppgaver som tar dem rundt omkring i nærområdet.

Vi brukertester spillet med klassekammerater, og noen av forandringene vi gjorde var: - Flyttet møteplassen mellom elevene og hekse-venninnen Wilma. Vi fant ut at det ble for langt å gå mellom hver post. Dette tok for lang tid. Derfor kortet vi ned.

- Ett av cluene finner man i appen Potionfy (Spotify på heksespråk). Vi forandret dette ved at vi la til flere sanger, da kun en sang ble for enkelt.

[gyllenstendesign]

Endelig har jeg fått kjøpt meg blålysbriller.  Får håpe dette hjelper noe på hodepinene.

[gyllenstendesign]

Endelig resultat. Brettet er laget slik at “armene” kan flappes inn og ut, avhengig av hvor mange spillere det er. Maks antall spillere er 8. Konseptet er likt, men vi har laget flere pressekonferanse-kort og munnbind-kort, slik at det skal skje mere og bli mer gøy.  Vi la også inn en virus-test på starten, for å la en spiller starte med viruset, uten noen spesielle symptomer, men som altså kan smitte et annen spiller ved å stå i samme felt.  Vi opplevde spillet som morsomt å lage, og engasjerende for andre. Men kanskje litt kleint å spille edru? Spillet hadde kanskje fungert bedre i en sosial sammenheng hvor man er med nærme venner og drikker litt vin og koser seg.