Redesign av Æ-appen
Et redesignprosjekt som har som mål å forbedre brukervennligheten i en av Norges mest populære medlemsklubbsapper.
Om prosjektet
- Plattform
- Mobilapp
- Periode
- Sep - nov 2024
- Type
- Caseprosjekt, redesign av Rema 1000 sin kundeklubbapp Æ
I korte trekk
Lettere scanning, tydeligere rabatter og færre feiltrykk.
Bakgrunn for redesign
Hvorfor Æ-appen trengte et 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.
Evaluering og innsikt
Hva konkurranseanalysen, evalueringen og brukertestingen avdekket.
Konkurranseanalyse
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.
Heuristisk evaluering
Den heuristiske evalueringen avdekket designproblemer basert på etablerte prinsipper, som manglende flerspråklig støtte, uklare feilbeskjeder og navigasjonsutfordringer.
Brukertesting
Brukertesting med «tenk-høyt»-metoden ga oss verdifull innsikt i brukernes faktiske opplevelse av appen.
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. Disse funnene har vært avgjørende i utformingen av et mer brukervennlig redesign.
Design
Crazy 8's, wireframes og designsystem
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.
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.
Prototyping
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, altså scanning av medlemskode, som vi mener bør være tilgjengelig i alle grensesnitt.
Løsning
En ryddigere hjemskjerm, tydeligere rabatter og lettere scanning av strekkoden.
Hjem og handleturer
Hjemmesiden
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.
Varsler
Brukertesting avdekket utfordringer med appens varslingssystem, der uåpnede varsler var uklare og vanskelige å håndtere. Løsningen ble et bjelleikon øverst i hjørnet, som åpner et varslingssenter med tydelige forklaringer på hvert varsel. Dette forbedrer både brukervennligheten og effektiviteten.
Handleturer og kvitteringer
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.
Rabatter og scanning
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.
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.
Profil
Redusert risiko for feiltrykk
Profilsiden 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, 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 profilsiden mer intuitiv og brukervennlig.
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.
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.
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.
Tilegnet erfaring fra prosjektet
Læring gjennom redesignet, og hva jeg ville forbedret.
