Avanza-meetup: En användarupplevelse i världsklass med webbteknik i appar

Referat från Avanzas meetup “En användarupplevelse i världsklass med webteknik i appar” 4 april 2019 som jag besökte, skrivet för mina kollegor som inte var där.

Avanza är en bank med fokus på sparande och att göra den upplevelsen billigare, bättre och enklare. Det startades i slutet av 90-talet och började med att göra aktiehandel tillgängligt digitalt. Företaget har därför ett stort arv från en desktopvärld, specifikt anpassad för daytraders med många och stora skärmar med mycket information.

Numera har Avanza en tydlig mobilstrategi där mobila enheter ska utgöra den primära kanalen för kontakt med kunderna. För att göra det möjligt har de insett att de behöver bygga en bra plattform för att kunna leverera en riktigt bra upplevelse.

Avanza har idag ungefär 15 produkt-team, med totalt cirka 130 medarbetare på utvecklingsavdelningen, som arbetar med var sitt produktområde.

För ungefär ett år sedan började Avanza fundera på hur de kunde få ihop sina tre teknikplattformar (webb, Android och iOS) till en, för att effektivisera och minska utvecklingstiden.

De började med 15 hypoteser kring vad de kunde göra för att slå ihop tekniken. Utifrån det valdes 4 teknik-kandidater ut och utvärderades tillsammans med omvärldsbevakning. Dessa 4 tekniker bestod av React Native, Flutter, Spotify HubFramework, samt “vanlig” inbakad web-vy med PWA teknik. Därefter valde de att bygga en produkt som proof-of-concept, för att se vad som fungerade rent tekniskt.

Användarupplevelsen var dock inget de prioriterade i den versionen, så för att kunna förklara värdet och motivera en större satsning för alla delar
av organisationen valde de därefter att bygga en skarp version. Tanken med den var att visa hur en riktig produkt faktiskt känns och fungerar.

Som resultat av arbetet valde de att fokusera på Progressive Web Apps. En PWA är en webbplats, bygger på modern webbteknik och fungerar oavsett plattform: en dator, en platta, en mobil, Android eller iOS etc. Upplevelsen blir progressivt bättre, så att tekniken gör bästa möjliga upplevelse utifrån enhetens förutsättningar.

Konceptet innefattar typiskt tre viktiga värden: reliable, fast och engaging. En PWA ska laddas omedelbart och fungera oavsett uppkopplingen, den ska reagera snabbt och ha mjuka animationer, och den ska engagera eftersom den känns och fungerar precis som en native-app. Kort sagt ska känslan vara precis densamma eller bättre än en native-app för Android eller iOS.

Idag bygger Avanza sin PWA med ramverket Angular av bekvämlighetsskäl, men det finns inget krav på att använda just det för att bygga en PWA.

De använder dock fortfarande tre olika “kanaler” för att leverera tjänsten till användarna: en webbplats avanza.se, en Android-app och en iOS-app. Visionen är att Avanzas webbplats ska kännas och fungera helt som en app i mobiler, och därigenom kunna bäddas in i native-apparna.

Den första produkten som byggdes som en PWA var “Flytta värdepapper”. Den integrerades i native-apparna för att framstå som en integrerad del, samtidigt som den som vanligt fanns på webbplatsen.

Därefter byggdes tjänsten “Värdepapperskrediten” om. Den var ursprungligen anpassad för en mycket stor skärm, och när den gjordes responsiv visade det sig att det blev en oändligt lång sida på mindre skärmar. Teamet valde att designa om den och dela upp informationen
med en tydlig Call-to-action på en mycket kortare sida.

Utifrån detta har Avanza dragit slutsatsen att det är viktigt att skilja på vad tekniken kan göra och hur gränssnittet och användarupplevelsen designas. Att den ena aspekten har gjorts dåligt kan inte skyllas på den andra. Webben upplevs typiskt som klickigt, där du klickar för att interagera med sidorna, medan appar använder sig mer av gester. Webbtekniken har däremot alla möjligheter att använda sig av gester, något som Avanza nu använder sig av för att göra sin PWA mer “appig”.

De ville dock inte återigen tvingas bygga och underhålla två separata versioner av tjänsterna, för mobil respektive desktop, när de redan lyckats reducera ner webb/Android/iOS till en plattform. Därför behövde de dela kunskapen hur de skulle bygga användargränssnittet på ett enhetligt sätt inom organisationen. Klientplattforms-teamet bygger bland annat bryggan som gör det möjligt att bädda in en PWA i en native-app och vägleder hur tekniken ska användas. Designsystems-teamet tar fram hur komponenter ska se ut och fungera för att få en enhetlig känsla i alla kanaler, och ansvarar för komponentbiblioteket. Utöver dessa team finns även ett native-team kvar som fortsatt hanterar de nuvarande native-delarna.

Nyligen byggdes produkten “Fondanalysen”. Tack vare automatisering och en välstrukturerad plattform kunde den byggas och lanseras i alla kanaler av produkt-teamet utan någon uppdatering av native-apparna.

Det finns en medvetenhet att framförallt Apple har en motvilja mot appar som bara är en paketerad webbsida, men Avanza har inte upplevt några problem och tror att deras lösning är tillräckligt bra.

Idag är cirka 90 % av Android och iOS-apparna skrivna i native-kod, men på sikt kommer det att minska till cirka 5-10 %. Tanken är att enbart bygga de funktioner som verkligen kräver det i native-kod, medan all annan nyutveckling görs med webbteknik. På så sätt kan de native-utvecklare som jobbar där fokusera på att bevaka utvecklingen av Apples och Googles plattformar och testa de möjligheter som de ger, samtidigt som produktteamen kan fokusera på att bygga användbara tjänster.