HyperBRIDGE
Hoe je een onbekende technologie als de Hyperloop uitlegbaar maakt én studenten activeert om mee te bouwen.
Opdrachtgevers
Concept7, HyperBRIDGE Consortium
Type
Afstudeeropdracht
Cijfer
8 (onderzoek en Concepting) 9 (prototype)
0
1
2
3
4
5
Uitdaging
Meer dan de helft van de Nederlanders heeft nog nooit van de Hyperloop gehoord, en studenten weten al helemaal niet dat ze eraan kunnen bijdragen. Hoe maak je die technologie begrijpelijk én activeer je studenten om mee te bouwen?
Gezamenlijk met Concept7 en HyperBRIDGE ben ik bezig geweest om deze vraag te beantwoorden.
Onderzoek
Ik wilde vanuit meerdere invalshoeken naar hetzelfde probleem kijken, dus combineerde ik drie deskresearches met fieldresearch. Via deskresearch onderzocht ik de doelgroep, de acceptatie van de Hyperloop en de psychologie daarachter, en design principes via een best practice-analyse.
Daarnaast deed ik rapid interviews met studenten en een expert interview met de directeur van het European Hyperloop Center. Een inzicht nam ik pas mee als ik het in meerdere bronnen terugzag, zo bleek bijvoorbeeld het thema veiligheid niet alleen uit de literatuur, maar ook uit mijn interviews en uit het expert interview.
Branding
Uit mijn best practice-analyse bleek dat technologiewebsites vaak steriel aanvoelen, met generieke stockfoto’s en zonder onderscheidend visueel DNA.
Precies dat wilde ik voorkomen, want een project dat vertrouwen moet winnen kan zich geen anonieme uitstraling veroorloven. Ik ging gezamenlijk met Concept7 daarom bezig met de branding en het Design System, we kozen voor een warme oranje primaire kleur die de snelheid en energie van de Hyperloop draagt, met helder blauw voor de technische en betrouwbare kant, en zette daar een display font tegenover een rustige sans-serif zodat pagina’s ritme krijgen zonder rommelig te worden.
Design System
Uit de expert reviews kwam dat mijn mid-fi’s aanvoelden als een mix van drie verschillende websites. In plaats van dat per scherm te repareren, heb ik de branding eerst uitgebouwd tot een volledig design system volgens Atomic Design:
Kleurschalen van 50 tot 900, typografie met responsive breakpoints en een 8pt-grid als basis, daarboven buttons, cards en input fields, en uiteindelijk organismen als de navigatie, de simulator en het job board. Alles staat als variabelen en componenten in Figma. Daardoor kon ik pagina’s die eerst een week kostten in een paar dagen neerzetten, en kan het hele werkpakket er verder mee werken.
Prototype
Het prototype telt elf pagina’s die allemaal dezelfde narratieve opbouw volgen, van introductie naar probleem, oplossing, impact en actie, zodat een bezoeker altijd weet waar hij in het verhaal zit.
Testing
Ik heb niet één keer aan het eind getest, maar doorlopend en op drie niveaus, omdat elk niveau iets anders oplevert. Vier rapid tests gebruikte ik om snel vragen over navigatie en vindbaarheid te beantwoorden.
Daarnaast deed ik drie rigorous sessies van een uur, waarin ik Think Aloud combineerde met een Likert-schaal die ik direct aan mijn ontwerpvereisten had gekoppeld, zodat ik per vereiste kon zien of die zijn doel haalde. Elke ronde eindigde in concrete iteraties in plaats van een lijst opmerkingen.