Matilda Forss

I believe design is about more than just solving problems. I wan't to believe it is full of depth and humanity and a lot of good people thinking really hard. 

[soccermommy4]

Conclusion:

This spring course of interactive design 2022 has really pushed and matured my design skills - especially regarding my skills on devices (i.e. how we move on the internet, what seems fast, what works, what doesn’t). I am personally not very good at documenting things in projects (a skill I’m working on!!!) but I’ve had the pleasure to work alongside som truly wonderful fellow classmates this year who are. 

Challenging elements in this course have for me been the game design and zoom lessons. I found them to be a stark contrast to what we did for the rest of the school year. However I did retain some very important information about storytelling, onboarding and the importance of play in design. 

I’d say the things that I found myself most intrigued by were coding our own websites and the last project in collaboration with Tekniska Museum. These taught me how to try to engage the public, user testing and to trust one’s own creative abilities. The website was also a nice skill to learn independently, considering that a lot of what we’ve done has been done in groups - where you delegate and learn separate things. 

I am however fairly sure that I am not going to continue in the fall with design. I realised in 2021 that although this course has brought me new friends and skils I am not inclined to be a designer, more so an artist. I find myself wanting to disrupt and bother the public instead of helping them, wanting as hard as I can to go against what the assignment was. I don't think that makes a very good designer. My mind is not completely made up. I thank you however for this course and for all that I’ve learnt.

Thank you.

[astrixandersen]

Brukertesting og endringer basert på testresultat

Prosjekt: Interaktiv læring for I/O på Teknisk Museum

Gruppe: @tuvajs @soccermommy4

Brukertest 1

I uke 2 gjorde vi en brukertest i klassen for å teste lengden på spørsmålene og om resultatet passet.

Tilbakemelding:

“Spørsmålene er morsomme!”

“Resultatet var gøy og passet bra”

“Følte meg truffet”

“Bra med mange svaralternativ”

“Litt mange svaralternativ”

“Vil ha større variasjon i svar”

Obervasjon:

Enkelte spørsmål tok lengre tid å svare på.

Konklusjon:

Vi burde korte ned på antall svaralternativ. Da vi gjorde det og testet quizen i klassene etterpå, observerte vi at det tok kortere tid å svare.

Brukertest 2

I uke 3 dro vi på Teknisk Museum for å teste quizen på ungdomsskoleelever. Vi måtte la elevene teste løsningen vår på PC, selv om det er meningen at løsningen skal brukes på nettbrett.

Tilbakemelding:

"Det var morsomt!”

“Gøy!”

“Vil ta den en gang til!”

Observasjon:

De fniste, lo og smilte.

Flere kom bort og ville prøve

De sammenlignet svarene med hverandre

Da resultatet kom opp, var det flere som ikke skjønte at de måtte scrolle ned for å lese resultatet

Ingen fant knappen som sendte de videre til konkurransen

Konklusjon:

Løsningen er engasjerende

Vi må flytte teksten over bildet og gjøre knappene større

Her er endringene vi gjorde etter brukertest:

Brukertest 3

Vi gjorde en kjapp brukertest etter endringene for å teste om resultatet endret seg.

Observasjon:

Brukeren kunne lese testresultatet uten å måtte scrolle. At brukeren bare kunne se litt av bildet, indikerte at det var mer innhold lengre ned. Endringen av størrelsen på knappene og fargen på "Start konkurranse"-knappen gjorde at det neste brukeren gjorde etter å ha lest resultatet, var å trykke på knappen for å starte konkurransen.

[astrixandersen]

Uke 3

Prosjekt: Interaktiv læring for I/O på Teknisk Museum

Gruppe: @tuvajs @soccermommy4

Etter tilbakemelding forrige fredag kortet vi ned på antall svaralternativ på quizen vår. Uka har vi brukt på brukertesting, implementering av designet fra Figma og gjort endringer basert på testresultater.

Quiz

Vi prøvde først å kode designet fra Figma fra bunnen av, men oppdaget fort at det ville ta alt for lang tid. Derfor bestemte vi oss heller for å eksportere frames i Figma som bilder, bruke disse som bakgrunnsbilde på nettsiden og deretter bruke kode til å gjøre knappene klikkbare. Dette gjorde at vi hadde en fungerende nettside i løpet av få timer.

Konkurranse

Vi har også arbeidet mye med innhold til konkurransen (eks: Hvor mye kan du om mobiltelefonen?) som brukeren kan ta etter at de har funnet ut hvilken gjenstand de er på Teknisk Museum. Vi har fokusert på spørsmål knyttet til informasjonen elevene vil finne i utstillingen, men også litt fun facts for å bryte opp. Kombinasjonen tekst og bilder viste seg å fungere bra. Konkurransen laget vi i Figma, som vi lenket til fra nettsiden vår.

Endringene vi har gjort på konkurransen i løpet av uka:

Først hadde vi en konkurranse per resultat, det vil si at dersom du ble en Sony Ericsson W995, måtte du ta en quiz om hvor mye du kunne om Sony Ericsson. Men vi endret det underveis, slik at det er en felles konkurranse uansett hvilket resultat du blir, sånn at elevene kan sammenligne resultatet med hverandre – litt som Kahoot!

Her har vi lagt til farge på knappene for å gjøre svaralternativene mer synlig, og flyttet tiden (brukeren skal ha 20 sekunder på å svare) i midten og endre fargen til rød for å gjøre det mer tydelig.

Vi testet også ulike varianter for å illustrere hva som er riktig eller feil svar, og etter et par iterasjoner landet vi på at det var best å også vise rett svar hvis brukeren svarte feil.

[astrixandersen]

Uke 2: Digitale prototyper, koding og testing

Prosjekt: Interaktiv læring for I/O på Teknisk Museum

Gruppe: @tuvajs @soccermommy4

De siste dagene har vi brukt til å lage prototype i Figma og kode selve quiz-funksjonen vår.

På fredag hadde vi kodet ferdig en fungerende quiz som vi fikk testet på syv personer i klassen.

Vi fikk tilbakemelding på at spørsmålene var morsomme og at resultatet var gøy og passet fra. Noen synes det var for mange svaralternativ, mens andre synes det var fint med mange alternativ og at man må ta et bevisst valg. Det var også noen som ønsket seg større variasjon på svaralternativene. Vi observerte at enkelte spørsmål tok ganske lang tid å svare på.

Etter testingen konkluderte vi med at vi bør korte litt ned på antall svaralternativ.

Ble du nysgjerrig på hva du hadde blitt? Ta quizen her!

https://hvilket-objekt-er-du

[astrixandersen]

Dag 3: Innsiktsarbeid på Teknisk Museum!

Prosjekt: Interaktiv læring for I/O på Teknisk Museum

Gruppe: @tuvajs @soccermommy4

Vi dro tilbake til Teknisk Museum for å gjøre mer innsikt. Vi var heldige og fikk være med en 8. klasse som skulle lære å lage algoritmisk kunst. Det var interessant å se de store forskjellene blant elevene på hvor raskt de tok ting.

Blant annet observerte vi at det skulle lite til før elevene falt av. Hvis noe ikke funket, var for vanskelig å gjennomføre eller tok for lang tid, var flere av elevene rask med å gjøre andre ting.

Vi tror det er viktig å lage en interaktiv løsning som fanger elevene raskt og som er enkel å forstå.

[astrixandersen]

Dag 1-2: 10 idéer 💡

Prosjekt: Interaktiv læring for I/O på Teknisk Museum

Gruppe: @tuvajs @soccermommy4

Før besøk: "Plasser elementer/ting i en tidslinje" (for eksempel: sorter mobilmodellene etter tidsperiode – gjetter du riktig?) 

Før og etter besøk: "Hvor mange husker du?" (få opp bilder/videoer av ting og vær først til å gjette riktig tittel på alle – se hvor mange flere du husker etter besøket)

Før/etter besøk: "En telefon ble brukt av en morder – hvilken?" (gjettekonkurranse med hint, der læreren har svaret)

Før besøk: "En AI har gjort et analogt spill digitalt, klarer du å gjette hvilket?" (gjettekonkurranse: vi viser bilder av analoge spill laget digitalt og spilleren må gjette hvilket)

Før besøk: "I hvilken film ble denne spillkonsollen brukt?" (quiz)

Før besøk: Introduksjon til Internett som en figur (viser fakta på en gøy måte, inspirert av prosjektet til Astrid og Erikka)

Før besøk: Hør 10 sekunder av introlyd fra spill – klarer du å gjette hvilket? (gjettekonkurranse basert på drikkelek)

Før besøk: Mafiaspill online og i klasserom (kanskje med elementer fra utstillingen)

Før besøk: "Gjett hvor i verden spillkonsollen er fra" (Type Wordle-spill)

Før/etter besøk: Analogt "pokemon"-spill men med elementer fra utstillingen

[astrixandersen]

Dag 3: Konseptutvikling, testing, research, wireframes og innholdsarbeid 🤓

Prosjekt: Interaktiv læring for I/O på Teknisk Museum

Gruppe: @tuvajs @soccermommy4

Etter å ha vært på Teknisk museum fredag forrige uke, kom vi fram til hvilken idé vi ville bruke denne uka til å teste ut.

Har du alltid lurt på hva du hadde vært hvis du var en gjenstand på Teknisk Museum? Nei? Hadde det ikke vært litt gøy å finne ut?

Prototypen vi skal lage denne uka er en nettside der du kan ta en quiz for å finne ut hvilken dings du er! Når du har funnet ut det, kan du teste ut kunnskapene dine om dingsen. Hvor mange poeng klarer du å få?

Vi kom fram til flere ulike løsninger :)

I løpet av dagen innsnevra vi konseptet vårt og gikk for den enkleste løsningen.

Disse tingene kan du bli! Hvilken tror du at du er? Er du en iPhone 4s, Sony Ericsson W995 eller kanskje mer en robotstøvsuger?

Vi har også jobba mye med tekst og strukturen i løsningen vår :)

[astrixandersen]

Dag 1: Tur til Teknisk Museum og fokusområde

Prosjekt: Interaktiv læring for I/O på Teknisk Museum

Gruppe: @tuvajs @soccermommy4

Fokusområde

Vårt fokusområde er spill! 🎮 Vi skal tenke på opplevelsen både før og etter museumsbesøket, men kanskje fokusere mest på opplevelsen før, slik at elevene er mer våkne på museumet.

[soccermommy4]

INTERACTIVE PLAY WITH SOUNDS course! The course where we with coding, laser cutting and iterative testing made a circus-themed trolley with multiple different elements of sounds. The brief was to make an interactive playful sound-toy and this was the product we ended up with - all of the ideas mixed together. 

[designida]

Brief 6: Urban Game, Result

Group: 12 (Mia G, Ingrid HH, Matilda og Ida)

We made the first 15 minutes of a game, where you are a student at a magic school, and your teacher has been kidnapped. In order for her to be returned safely, you have to locate her spellbook and bring it to her kidnappers! You have 60 minutes to do this, or your teacher will be killed, and you would have lost the game. We only made clues to cover the approximatley first 15 minutes.

At the beginning of the game, you are led to belive that you will attend a potions class, but instead you gat a ransom call on your teachers phone!

You then have to solve the puzzle to unlock her phone: count the ingredients of potion bottle 1,2,3 and 4, this will reveal the code.

When the phone is open, there are uread messages, from the kiddnappers and from your teachers friend. You are to go to the friend to get the next clue.

From the friend you get a book they read in bookclub together, on the phone the teacher has left a code that you can use to spell out a sentence that leads you to the next clue.

At the bridge you have to use the potionbottles again, this time matching the colors with the content inside to open the lock.

Inside the lock there is a note, suggesting music which leads you to the playlist on the phone where the song "under the bridge" is playing.

This leads you under the bridge where you find a map leading to the location of the next clue. This was the last clue we made for the game, so our playtest ended here, but the idea is that the game would continue for another 45 minutes, and you would race the clock to see if you managed to save your teacher on time!

Video of final gameplay:

Link to the Figma app that the players see when they play:

Figma

Created with Figma

Iteration prosess:

We playtested sevral times, some of the changes we made was:

- Changed the location of the witch they were meeting, at the beginning she was at the other side of the river, and that was to much walking for the flow of the game. We ended up having her stand at a specific spot, not sit at a bench to avoid missunderstandings.

- we changed the spotify part of the app, and added more songs there, as one playtest group looked at the playlist to soon and skipped some of the clues.

- We altered the codes sevral times, to find a way that would work both with the technology, and also not be to hard, to missleading or to easy.

[soccermommy4]

Photos from the website!

[soccermommy4]

Second website W17

Second week of coding! This time we were assigned to make a website regarding something on the internet. Me and Erik made a website about how language is changing because of the internet. I did most of the coding and Erik most of the research with a lot of helping each other. 

The website isn’t very long but the main focus for us was to try new features and learn more about atom, html and css. Features included: 

- different fonts

- buttons with shadow and music

- basic java script

- form questionnaire

- spinning pictures and the hover effect

- grid with pictures

All in all: A lot of new things! Very fun!

[soccermommy4]

Introduction to coding! Made a simple website about myself 

https://matildaforssportolio.netlify.app/

[soccermommy4]

Figma

Created with Figma

The finished product - a hat app called “Hattraction”

[soccermommy4]

Process pictures from brief5!

Things that I iterated along the way were: 

- the colour scheme and the primary colours, along with the fonts (however I did realise pretty quickly that details wasn’t the right thing to get stuck on).

- the fact that the accounts didn't have any “faces” at first, it made the hats seem impersonal and after changing it the app felt more like a community which was one of the big things I was going for in this project. 

- how to do the onboarding - in the early Marvel version I had a button that took you through the most important information but I got the feedback that the movement felt monotone. Therefore I changed it to a scrolling-feature but quickly understood that the sliding-up-the-page-movement was hard to explain without placing buttons that people wanted to click on upon the screen. Therefore I ended up with a slide-to-the-side-kind of feature with small circles at the bottom to symbolise pages and the occasional click, this I felt worked best. 

[soccermommy4]

Messy messy Figma but fun!

[soccermommy4]

Figma

Created with Figma

The second week’s finished Figma result! Interesting to work with interactions and with a sort of large story board :D

My hat app has become a little bit more grown and sophisticated, I’m so proud!!!!