Gapminder

Iteration av effektiva men enkla sätt för att besegra ignorans.

Hur bygger man ett verktyg som kan ändra människors världsbild? Ett verktyg som inte bara lär ut ny fakta utan också utmanar missuppfattningar kring livet i andra samhällen. Tillsammans med Antrop hjälpte vi Gapminder att implementera deras vision; att förändra världsbilden för den stora massan. Detta via den nya digitala plattformen: Gapminder Worldview Upgrader.


I korthet

  • En webbapp som enkelt kan skalas med innehåll och prestanda.
  • Ska utvecklas iterativt tillsammans med Antrop och Gapminder.
  • Tekniken sätter grunden för tjänstedesign-processen. Från början till slut.

Tech stack

Elixir - Phoenix framework Contentful CMS Jamstack App

Globala hållbarhetsmål

Sustainable Development Goals Icon Goal 4

Hur det började

I slutet på 2019 fick vi ett samtal från våra vänner på Antrop som undrade om vi ville vara deras tech-partner i ett digitalt designprojekt tillsammans med välkända och hyllade Gapminder Foundation. Och självklart innebar det ett rungande JA från vår sida!

“Vårt team är alltid angelägna att hoppa på projekt som främjar socialt ansvar. Gapminders viktiga uppdrag var så spännande att alla räckte upp handen för att få vara med i teamet.” - Erik Lindgren, Tech Lead

Gapminder hade publicerat flertalet böcker för att sprida en faktabaserad världsbild. Och på sin sajt hade de bland annat infört ett enkelt kunskapstest (med tillhörande certifiering) i syfte att “väcka” och utbilda allmänheten kring världen och dess utveckling. Men de behövde något mer för att få bort ignoransen i en större skala. Och då även på en global skala.

De var ute efter verktyg som dels kunde användas av nyfikna individer men även i utbildningssammanhang. En ny “testa din kunskap”-app som skulle vara nästa steg av deras nuvarande kunskapstest.

Exakt hur den skulle fungera och användas återstod för oss i teamet att iterera fram.

Teamet

Erik Lindgren
Tech Lead, Prototyp

Ismael Haddad
Developer, Prototyp

Maria Molander
Developer, Prototyp

Sanna Frese
Developer, Prototyp

Villiam Poignant
Developer, Prototyp

Anna Rosling Rönnlund
Co-founder, Gapminder

Ola Rosling
Co-founder, Gapminder

Kristin Lagerström
Operations Manager, Gapminder

Kat Spongberg
Project Manager, Antrop

Michel Adamek
UX Designer, Antrop

Jenny Dannstedt
Service Designer, Antrop

Kristin Guzman
Visual Designer, Antrop

Åsa Hammarström
Visual Designer, Antrop

En iterativ process

Från vision till koncept, från koncept till produkt

Antrop bjöd in vår Tech Lead Erik Lindgren till att vara en del av den fas som berörde konceptutveckling. Under dessa månader paketerade Gapminder och Antrop en bred och högt flygande vision till en potentiellt genomförbar digital produkt. User stories och tillhörande funktioner filtrerades och finslipades via Eriks tekniska input. Inte för att begränsa kreativitet utan för att ingjuta tech-perspektivet och faktiska möjligheter.

“När visionen var så ambitiös och fortsatt under utveckling så var det ovärderligt att få en förståelse för hur designbeslut påverkade det tekniska utförandet.” – Anna Rosling Rönnlund, Gapminder

Hur man har mindre fel

Det var en del grundläggande saker som redan var på plats. Men det fanns också en lista med idéer och funktioner som inte gått igenom en utvärdering. Och det är precis i det här stadiet vi på Prototyp trivs som mest – alltså när ett koncept har spelrum att få mogna och byta (till en nödvändig) riktning.

Projektet startade med en konceptfas full av brainstorming, design-studios och workshops. Fasen delades sedan upp i två fokusgrupper, bägge rustade med kompetens inom design och teknik från Antrop och Prototyp. Den första gruppens roll var att undersöka och utvärdera nya idéer som t.ex; funktioner för företagscertifiering. I takt med att idéerna validerades landade de i backloggen hos den andra fokusgruppen. En grupp som mer fokuserade på att bygga och testa dessa validerade idéer genom att designa och utveckla de delar av appen som redan utarbetats. Fortfarande iterativt men mindre undersökande.

Bra lyssnare

Iterativ utveckling handlar om feedback. Från användare, från team och experter. Det handlar också om flexibilitet och att skapa yta för nya och bättre idéer som dyker upp längs vägen. Gapminder-teamet var otroligt kreativa och genererade nya idéer hela tiden. Vår roll var att vara bränslet till dessa kreativa själar och hjälpa dem att förstå vad som var möjligt att genomföra, och hur man genomför det väl. Det betyder inte att de behövde komma till oss med färdiga svar eller specifikationer, snarare intressanta frågor som; “Skulle det fungera ifall ett klassrum med 30 elever skulle använda det här?”.

Det fungerade bra med Gapminder eftersom deras omfattande erfarenhet med digital produktutveckling innebar en förståelse för att idéer kan vara omedelbara men att implementering oftast kräver tid och arbete.

“Det var uppfriskande att ha utvecklare som inte bara sa att ens idéer var 'omöjliga att genomföra'.” – Anna Rosling Rönnlund, Gapminder

Den första prototypen

Den första prototypen kom precis innan jul. Det var första gången som teamet kunde “känna och klämma” på arbetsflödet i produkten. Det var inte snyggt. Och många funktioner hade fortfarande inte byggts. Men, även om det inte var klart ännu, så var det buggfritt.

“Det var inget som såg imponerande ut ännu. Men det var imponerande välgjort.” – Anna Rosling Rönnlund, Gapminder

Vikten av en buggfri prototyp glöms ofta bort! I detta projekt gav det Gapminder-teamet ett lugn. Alltså att, oavsett om det var långtifrån klart, så kommer det att hålla hög kvalitet och följa grafiska guidelines. Och för teamet som helhet gav det möjlighet till en utvärdering i var vi var, och vad som inte kommer att fungera i fortsättningen.

Den första demon

Den andra versionen av vårt koncept började ta form med olika testkategorier och enkla frågeflöden. Flödena var mer eller mindre kompletta från början till slut – men produkten var fortfarande väldigt avskalad. Så, vid detta läge handlade de flesta frågor och funderingar om design (UI) och användarupplevelse (UX). Frågor som t.ex: “Hur ska vi visa framsteg?” och svar som t.ex; Kanske med progress bars eller stjärnor som lyser upp.

Efterföljande iterationer inkluderade både nyutveckling och att återbesöka de delar av verktyget som redan hade utvecklats - för att förbättra prestanda, funktionalitet och användarinteraktion.

Perspektiv och helomvändningar

Låt oss bygga en webbapp

Webbtekniken har kommit en lång väg redan. Längre än vad många faktiskt tror. Partners kommer ofta till oss med en idé som de tänkt ska få liv i en native-app (appar för mobiler/surfplattor). Denna förväntan i att endast native-appar kan leverera en sömlös interaktion har hållit webbapparna tillbaka.

Native vs. webbapp var en frågeställning som lyftes redan i design studio-fasen. Erik och teamet kände sig säkra på att målet med produkten lättast och bäst skulle kunna uppfyllas via en webbapp. Inga “App store-väktare”, inga enhetsberoenden och inga nedladdningar – med andra ord bra förutsättningar för släppa en produkt globalt. Animationer, haptisk feedback och andra nice-to-have användarupplevelser som vanligtvis native-apparna har haft monopol på blir vanligare och bättre även i mobila webbläsare.

Snabba ramverk

För att vara en startup så har Gapminder en ovanligt stor räckvidd och ett etablerat globalt (och gott) rykte. Och med det en potentiellt väldigt stor upptagningsförmåga för en sådan produkt vi tänkt utveckla. Därav var snabba ramverk som kan ge produkten hög prestanda och snabb hastighet ett måste redan från start.

Det ledde oss in på Phoenix – ett Elixir-webbramverk som gör utveckling av webbappar mycket mer effektivt. Det erbjuder en bra utvecklingsmiljö och dess strikta kodstil gör det lättare att programmera på det “rätta sättet”, snabbare. Vi använde också av Jamstack för att förrendera filer och hämta de direkt från ett CDN – vilket tar bort behovet av att administrera och köra våra egna webbservrar. Dessa statiska sidor innebär högre prestanda när flertalet anrop görs.

Appliknande inloggning

Den huvudsakliga anledningen till att bygga en webbapp var för att minimera barriärerna vid återkommande användning. En webbapp kräver inte ett användarkonto för att spara framsteg via moduler. Lokal fillagring sparar en nyckel för ett anonymt konto som senare kan konverteras till användardefinierat inlogg – vilket gör att användarna kan nå sin progress även cross-device.

Färdig produkt

Gapminder Worldview Upgrader

Gapminder Worldview Upgrader är ett roligt och utbildande verktyg skapat för att hjälpa människor att få bort systematiska missuppfattningar om den globala utvecklingen.

Contentful CMS tillåter Gapminder-teamet att enkelt lägga till nya kategorier och testa att deploya dem på direkten. Verktyget kan hantera ett oändligt antal frågor och flöden – vilket gör det anpassningsbart för multipla användningsområden och möjliggör för Gapminder att bekämpa missuppfattningar på flera fronter.

👉 Testa Gapminder Worldview Upgrader och se ifall din världsbild behöver en uppdatering.

“Det här kommer att bli vårt primära verktyg för att bekämpa ignorans. Vi ser fram emot att fortsätta iterera, oavsett om det är att lägga till mer gamification eller att möjliggöra IRL-interaktion på t.ex. event." - Anna Rosling Rönnlund, Gapminder

Lärdomar

Dela visionen

Iterativ produktutveckling kräver en kristallklar vision. En vision som varje team-medlem kan ta till sig. När alla köper visionen kan du skapa en gemensam respekt för arbetet som krävs. Det gör att du undviker krånglig internpolitik och öppnar upp för bättre samarbeten – vilket såklart är en grundpelare i att lättare kunna omsätta en vision till en greppbar produkt.

Inte för alla

Alla utvecklare gillar inte att arbeta utan att ha alla svar på bordet från start. Det är faktiskt så att många byråer och produktutvecklare är obekväma med lite begränsningar – och särskilt att de som finns konstant förändras. Känslan av att det du gör aldrig blir färdigt kan upplevas obekvämt.

Att arbeta iterativt kan vara oerhört effektivt men det kräver en öppenhet och ödmjukhet, att göra om och ta bort flera timmars kodande är något som kräver träning och en särskild typ av kompetensprofil – vilket vi lyckligtvis har i överflöd 🙌.

Rädda maten-startupen Matsmart behövde stärka upp sin ehandelssida och brottades med svåra tekniska val. Känns det bekant?