Redesign av Æ-appen
Et redesignprosjekt som har som mål å forbedre brukervennligheten i en av Norges mest populære medlemsklubbsapper.
Plattform:
Mobilapp
Periode:
Sep - nov 2024
Bakgrunn for redesign
Prosjektet startet med å avdekke flere kritiske utfordringer i Æ-appen gjennom brukerundersøkelser og testing. Brukerne opplevde blant annet problemer med navigasjon, manglende personalisering og uklarhet rundt aktivering av rabatter. I tillegg skapte vage feilmeldinger og tekniske utfordringer, som at strekkoder forsvant og krevde ny innlogging, frustrasjon hos brukerne. Appens sterke fokus på merkevarebygging gikk også på bekostning av brukersentrert informasjon. Med disse innsiktene som utgangspunkt, satte vi i gang arbeidet med å heve brukervennligheten og skape en bedre opplevelse for alle Æ-brukere.
Evalueringsmetoder
For å forstå markedet og brukernes forventninger startet vi med en konkurranseanalyse. Dette ga oss innsikt i trender og muligheter for at Æ-appen kunne skille seg ut. Videre gjennomførte vi en heuristisk evaluering og brukertesting for å vurdere appens brukervennlighet. Den heuristiske evalueringen avdekket designproblemer basert på etablerte prinsipper, mens brukertesting med "tenk-høyt"-metoden ga oss verdifull innsikt i brukernes faktiske opplevelse.
Evalueringens resultater
Gjennom testing oppdaget vi at brukerne slet med scanning av rabattkoder i butikk, samt at personlige rabatter var vanskelige å finne. Hjemmesiden føltes overfylt, og plasseringen av "logg ut"- og "slett konto"-knappene skapte risiko for feiltrykk. Den heuristiske evalueringen avdekket også problemer som manglende flerspråklig støtte, uklare feilbeskjeder og navigasjonsutfordringer. Disse funnene har vært avgjørende i utformingen av et mer brukervennlig redesign.
Crazy 8's med prosjektgruppen
Lo-fi prototyping og wireframes
Etter å ha laget skisser i designøvelsen Crazy 8's, startet vi arbeidet med wireframes. Disse representerte en hybrid av gruppens beste ideer fra øvelsen. Wireframes fungerer som et "designkart" som visualiserer struktur og innholdshierarki i prototypen. Våre wireframes var lavoppløselige, med fokus på struktur fremfor detaljer, og inkluderte skisser for både hjemmesiden og profilsiden.
Wireframes laget i Figma
Designsystem og visuell profil
For å sikre at prototypen var i tråd med Rema 1000s visuelle profil, utviklet vi et designsystem. Dette inkluderte typografi, fargepalett, ikoner og designkomponenter, basert på eksisterende elementer fra Æ-appen. Ved å matche fonter, størrelser og farger direkte fra skjermbilder, beholdt vi den gjenkjennelige merkevarefølelsen samtidig som vi forbedret brukervennligheten.
Ved å følge etablerte designprinsipper og opprettholde visuell konsistens, gjorde vi appen intuitiv og enkel å bruke, uten å miste forbindelsen til Rema 1000s identitet.
Typografien for redesignet
Primærfargene for redesignet
Aksentfargene for redesignet
Prototypens første iterasjon
Første iterasjon bygde på wireframene, med bilder, riktig typografi og fargepalett. Denne iterasjonen ga oss en mer realistisk visning av ideene våre og fungerte som utgangspunkt for videre diskusjon. Basert på tilbakemeldingene bestemte vi at prototypen skulle gjøre det enklere å bruke appens hovedfunksjoner, alstå scanning av medlemskode, som vi mener bør være tilgjengelig i alle grensesnitt.
Første designiterasjon av hjemmesiden og profilsiden i appen
Prototypen
Den tidligere hjemmesiden i Æ-appen var rotete og skapte forvirring blant brukerne. For å gjøre den mer oversiktlig flyttet vi tilbud og kampanjer til en egen side, samtidig som vi beholdt dem synlige øverst på hjemmesiden. Vi la også til en snarvei i navigasjonsfeltet for rask tilgang.
Brukertesting avdekket utfordringer med appens varslingssystem, der uåpnede varsler var uklare og vanskelige å håndtere. Løsningen ble et bjelleikon øverst i venstre hjørne, som åpner et varslingssenter med tydelige forklaringer på hvert varsel. Dette forbedrer både brukervennligheten og effektiviteten.
Hjemmesiden viser personlige rabatter øverst for enkel tilgang, med en snarvei i navigasjonsfeltet.
Funksjonen for handleturer beholder mye av sin opprinnelige struktur, men med forbedringer som gir en bedre brukeropplevelse. Vi har lagt større vekt på å vise hvor mye penger brukerne har spart, med en lenke til "Innsikt" som gir en detaljert oversikt over utgifter hos Rema 1000.
Handleturer og kvitteringer er nå tydeligere organisert, noe som gjør det enklere å navigere og gjennomgå tidligere kjøp. Prototypen vår introduserer også en søkefunksjon som lar brukerne filtrere handleturer etter dato. Dette følger Jakob Nielsens heuristikk om fleksibilitet og effektivitet, som understreker viktigheten av å la brukerne skreddersy opplevelsen sin.
Varsler er plassert i sidemenyen og kan nås via bjelleikonet øverst til høyre. Dette holder rabatter i fokus og sørger for at varsler er organisert separat.
Elementene er gruppert i tydelige seksjoner for å redusere kognitiv belastning
Tiltak for å heve brukervennligheten
Listen over tilbud i Æ-appen var tidligere ufullstendig og vanskelig å navigere. For å løse dette lagde vi en egen side for rabatter, som vises i “Priskutt” i verktøylinjen. Aktivering av personlige tilbud i redesignet er også mer intuitiv, med en knapp som får gul kant når priskuttene er aktivert, slik at statusen blir umiddelbart synlig for brukeren. Dette følger Nielsens prinsipp om "Recognition Rather Than Recall", som reduserer brukernes kognitive belastning.
Vi introduserte også å vise rabatter i kroner i stedet for prosent, for bedre oversikt. Pågående kampanjer og generelle tilbud er nå tilgjengelige direkte på hjemmesiden for enkel tilgang.
Personlige rabatter vises i aktivert tilstand, med gul kant som fremhever aktiverte rabatter som en visuell påminnelse.
Lettere scanning
Våre funn viste at mange Æ-brukere opplever utfordringer når de skanner strekkoden sin i kassen. Det stilles høye krav til multitasking, som å håndtere varer, betaling og skanning av koden på kort tid, som ofte fører til stress og kognitiv overbelastning. Denne overbelastningen gjør det lett å glemme eller slite med strekkoden, noe som resulterer i frustrasjon og tapte rabatter.
For å løse dette sørget vi for at strekkoden alltid er synlig på tvers av alle skjermer, og vi lagde to nye, dedikerte visninger for medlemskapskoden.
Disse visningene, som kan nås ved å klikke på strekkodeikonet til venstre i toppmenyen, er tilgjengelige i både liggende og stående format som gjør skanningen mye enklere. De inkluderer også en funksjon som lyser opp skjermen for bedre synlighet.
Strekkoden er tilgjengelig i både vertikal og horisontal visning
Redusert risiko for feiltrykk
Profil-siden i Æ-appen var tidligere uorganisert og uklar. For å forbedre den introduserte vi tre distinkte seksjoner: snarveier, innstillinger og hjelp og tilbakemelding. Vi fokuserte på å overholde Gestalt-prinsippet om nærhet, for å gruppere relaterte elementer for enklere navigasjon. Snarveiseksjonen hjelper brukerne med rask tilgang til appens funksjoner, som tilbyr en annen vei til appens ulike fuksjonaliteter, mens innstillingsseksjonen nå inkluderer nye alternativer som språkvalg, tilpasning av hjemmeside og administrasjon av varsler.
Vi tok også tak i et viktig problem med plasseringen av alternativene "Slett meg" og "Logg ut", som tidligere så ut som lenker. Derfor plasserte vi dem i separate knapper med fargekoding for å redusere risikoen for utilsiktede feil. Disse endringene har som mål å gjøre profil-siden mer intuitiv og brukervennlig.
Den redesignede profil-siden har et klart og intuitivt oppsett for å redusere kognitiv belastning.
Andre funksjoner
Handleliste
Redesignet introduserer en handleliste, hvor brukerne kan lage og dele personlige lister for enklere, samarbeidsbasert handel. Brukere kan legge til varer, redigere listene sine, dele lister og krysse av produkter i butikken, noe som gjør handleopplevelsen mer organisert og effektiv.
Handlelistefunksjonen
Innsikter
En ny "Innsikt"-seksjon fremhever brukerens besparelser og kjøpsmønstre med lettfattelige grafer og datasammendrag, som hjelper dem med å følge med på utgiftene sine og ta informerte beslutninger.
Innsikter-siden
Widgets
Widgets gir brukerne muligheten til å tilpasse hjemsiden, slik at de kan prioritere funksjoner som kvitteringer, innsikter og personlige tilbud. Denne graden av personalisering forbedrer brukervennligheten og gir en mer personalisert og effektiv opplevelse.
Tilpass hjemskjerm-siden
Tilegnet erfaring fra prosjektet
Redesignet av Æ-appen har vært en lærerik erfaring, hvor jeg har fått øvd på brukerforskning, prototyping og testing. Jeg har styrket forskningsferdighetene mine, spesielt innen brukertesting og heuristisk evaluering, og ikke minst forbedret praktiske ferdigheter i Figma, som Auto Layout og designsystemer.
I ettertid ser jeg forbedringsmuligheter, som å tydeliggjøre avhukede elementer på handlelisten og gjøre innsiktssiden mer intuitiv. Man føler seg aldri helt ferdig med et prosjekt, og design kan alltid videreutvikles for å forbedre brukervennlighet.