Avida.
En nylanserad bankapp fick designstöd, ett eget designsystem i Figma och en pixel-perfekt genomarbetning.
Före: nylanserad app där väldigt lite UX hade gjorts – gränssnittet saknade gemensam röd tråd, vilket bottnade i en otydlig varumärkesgrund där personlighet, värderingar och positionering behövde definieras.
Efter: genomarbetad app där varumärket bär upplevelsen – pixel för pixel, från kort till kontoutdrag. Med det egna designsystemet i Figma som grund kunde Avida ta designarbetet vidare själva.
Bakgrund.
Avida är ett fintech-bolag som nylanserat sin app med väldigt lite UX-arbete bakom sig. Nora klev in som designstöd och insåg snabbt att behovet var större: Avida behövde också stöd i arbetssätt, och ville stärka och lyfta varumärket till en ny nivå för att hålla en enhetlighet mellan app, hemsida och internetbank – både internt och mot slutkund.
Utmaningar.
Varumärket skulle hålla ihop app, hemsida och internetbank på en nivå som fungerade både internt och mot slutkund – och allt skulle hända mitt i en pågående förändringsprocess där Avida behövde stöd för att utveckla app, hemsida, internetbank och branding åt rätt håll. Eftersom appen var nylanserad behövde också datatrackinget komma igång redan från början. Behovet av UX visade sig finnas på fler avdelningar än först tänkt, och Nora blev snabbt en väl använd resurs. Det kändes kul att få se hur bolaget insåg värdet av vad en UI/UX-designer kan bidra med.
Process.
Genom workshops definierades värderingar, varumärke och arbetssätt, och ett arbete med att definiera målgrupper påbörjades. Det lade grunden för en mer strukturerad produktutveckling och ett enhetligt visuellt uttryck, och hela appen kunde sedan genomarbetas till pixelperfektion. Nora tog fram ett helt designsystem i Figma – nya färger, typsnitt, bildspråk och komponenter – så att Avida internt kunde fortsätta arbeta med designen vidare efter att insatsen var klar. Dialogen med utvecklarna och produktägaren var tät, och Nora hade deras tilltro att leda omformningen framåt.
Från appen.
Fler skärmar från det genomarbetade gränssnittet.
Inloggningen – varumärket i fokus, med BankID och landval på plats.
Inloggningsmetoder: BankID, Face ID, fingeravtryck eller PIN-kod.
Stor knappsats för PIN-kod, med biometri som genväg.
Kortkortet – tillgängligt belopp, genvägar och tjänster samlade på ett ställe.
Flera kort i samma vy, med fryst status och byte mellan kort direkt på kortet.
Kortets alternativ – frys tillfälligt med ett toggle och få bekräftelse direkt.
Fakturaflödet – nästa betalning, bankgiro och OCR samlat på en skärm.
Betalning med OCR eller meddelande, med datum och villkor inom räckhåll.
Kontoväljaren – byt kort direkt i ett mellanlägg.
Notiscentret samlar transaktioner grupperade per dag.
Ett tomt läge med mjuk grafik i stället för en kall vit bakgrund.
1 / 11
Vilka är Avida?
Utdrag ur den färdiga brandbooken som Nora tog fram – för att göra det enklare och tydligare för alla inblandade vilka Avida är.
Försättsbladet – Avidas brandbook.
1 / 14Från processen
Utdrag från olika moment i processen – workshops, analyser och arbetssätt.
Workshop – kärnvärden: alla fick skriva ner ca 5 lappar med varsitt ord som beskriver Avida, som sedan grupperades, namngavs och röstades fram.
1 / 9