WorkBuddy – vakten samlet på én app

Konsept og app-design for butikkansatte som teller, bestiller og tar imot varer.

UX design
UI design
App

Mange WorkBuddy-skjermer på skrå side om side: pålogging, telling med skiven, mottakskontroll, Hjem, chat, tale, Spør Buddy og innboks.

HjemVakten din og dagens oppgaver. Det som haster ligger øverst, og resten er ett trykk unna.

Spør BuddyEn assistent som svarer på spørsmål om alt i appen: leveranser, huskelisten, timelisten og hva som trenger handling akkurat nå. Foreslåtte spørsmål gjør det lett å komme i gang.

Scann QR-kodeAppen bruker kameraet til å ta et bilde av koden, dekode informasjonen, og koble den direkte til databasen.

InnboksVelg alle eller flere meldinger samtidig og slett, stjernemerk eller legg dem i huskelisten med ett trykk. Huskelisten finner du på Hjem, og sletter du feil, kan du angre.

SkivenPluss- og minusknapper er tidkrevende og slitsomme for kalde hender på et kaldt lagerrom. Skiven gjør tellingen raskere, og vil du heller skrive inn tallet, kan du det.

Melding og taleSend en melding til en kollega, eller trykk på mikrofonen og hold inne for å snakke direkte med dem som er på jobb.

ChatChat med bare skiftet du er på, eller med hele butikken. Viktige beskjeder kan festes øverst, så de ikke forsvinner.

Mottakskontroll«Fullført i dag», «I går» og «Under kontroll» ligger bak piler, og farger skiller gruppene. Faller nettet ut, lagres alt lokalt.

Tale: Hold for å snakke med Kari Nilsen. — Hold for å snakke

Teamet på skiftet med tale- og meldingsknapper. — Teamet på skiftet

Kortet Trenger handling i dag. — Trenger handling i dag

Oppgaver: flisene under Bestilling og mottak. — Bestilling og mottak

Forslag til bestilling fra ASKO. — Forslag til bestilling

Tokens i tre lag. En tabell viser kontrasten for ti fargepar. Alle består kravet. — Tokens og kontrastKontrasten er sjekket for alle fargepar.

Knapper, statuslinjer, handlingskort, lenkekort, personrader, fliser, en vare med antall, toppfelt og bunnmeny. — KomponenterKomponentene fra appen i petrol.

Koden for telleskiven. Ved siden av ser du telleskiven med 12 stk. En liste viser hva som virker. — Telleskiven i kodeTelleskiven virker med tastatur, skjermleser og trykk.

En skjerm fra appen med fire kolonner tegnet over. Ved siden av står margen, mellomrommet og alle avstandene. — Kolonner og avstanderFire kolonner, 16 px marg og 12 px mellomrom.

Tre kort: alle farger har god nok kontrast, alle knapper er minst 44 px og fokusringen er 3 px tykk. Under ser du knappene, hva skjermleseren sier og en knapp med fokusring. — TilgjengelighetKnappene er store. Fokusringen synes godt. Skjermleseren får tekst.

Fire steg viser hvordan petrol går fra tokens.json til tokens.css og videre til knappen. Under står en knapp, en flis og bunnmenyen i samme farge. — Slik får knappen fargenEndrer jeg én linje, endres alle knappene.

Fiktiv app for butikkansatte som teller, bestiller og tar imot varer. Appen er løst basert på skjermbilder fra NG Flyt, med funksjoner inspirert av Walmart-appen, Gmail og Discord. Designet bygger på bransjekilder og en samtale med en butikkansatt. WorkBuddy samler bestilling, telling, mottak, timeliste og teamet på ett sted.

Funn

Telling krever for mange trykk. En butikkansatt jeg snakket med, trakk fram piltastene på håndterminalen som den dårligste funksjonen. Hver vare krever mange ekstra trykk. Det ble utgangspunktet for skiven.

Nettet faller ut på lager og kjølerom. Bransjekilder beskriver dårlig dekning på lager og kjølerom. Appen lagrer derfor underveis og viser når den er frakoblet.

Tette menyer. Lange menyer uten gruppering gjør det vanskelig å få oversikt i en travel hverdag. Jeg grupperte oppgavene, ga dem større knapper og ikoner, og la det som er mindre viktig bak piler.

Designsystemet

Tokens. Farger, skrift og avstander ligger i én fil, i tre lag, og er brukt av 12 komponenter. Endrer jeg én verdi, endres den overalt.

Rutenett. Appen har fire kolonner, 16 px marg og 12 px mellomrom.

Tilgjengelighet. Alle trykkflater er minst 44 px, og alle fargepar består WCAG AA.

Resultat

En app som samler bestilling, telling, mottak, timeliste og teamet på ett sted. Det som haster, står øverst, telling med skiven krever færre trykk, og appen virker også når nettet faller ut. Appen er et konsept og er ikke testet med flere brukere ennå.

Brukertesting

Appen er fiktiv og ikke testet utover én samtale. Hvis den skulle blitt et ekte produkt, ville jeg testet den slik:

Observasjon. Jeg ville fulgt 5–6 ansatte i to butikker gjennom en vakt. Det man gjør hver dag, er vanskelig å forklare etterpå, så det er bedre å se det selv.

Test av prototypen. De ansatte prøver appen på egen telefon i butikken og på lageret: varemottak, bestilling, telling med skiven og å finne ut hva som haster. På tellingen ville jeg sammenlignet antall trykk med skiven og med piltastene.

Ledere. Intervju med 1–2 butikksjefer om hvordan de godkjenner bestillinger i dag, og om feil fra tellingen kan fanges opp der.

Rolle: Konsept; UX; UI; Prototyping; Ikoner og visuell utforming
Verktøy: Figma; Illustrator; Claude
År: 2026