Bag frontenden ligger en skræddersyet administrationsløsning til håndtering af ordrer, brands, varianter, produktionsmuligheder, indstillinger og brugere. Workflowet er datadrevet, så centrale dele af bestillingsoplevelsen kan ændres uden at røre ved koden.

Et lille produktionsværktøj, bygget som en rigtig applikation i stedet for endnu en formular.

For en international bryggerikoncern indeholder processen omkring labelordrer en lang række produktionsdetaljer, som skal være korrekte, før noget kan gå videre. Brand, variant, labelstørrelse, antal, papir, finish, EAN, ingredienser, næringsinformation, artwork, deadlines og produktionsfiler skal alle samles et sted.

• Problemet var ikke, at folk ikke kunne udfylde en formular.
• Problemet var alt det, der skete omkring formularen.

Manglende information skaber e-mails. E-mails skaber spørgsmål. Spørgsmål skaber flere e-mails. Og pludselig bliver en relativt simpel labelordre til et lille administrativt projekt.

Så i stedet for at bygge endnu en kontaktformular byggede vi en rigtig applikation.

Min rolle

Jeg arbejdede med projektet fra idé og UX til design, udvikling og implementering.

Målet var at gøre frontenden næsten latterligt enkel, samtidig med at der blev bygget noget langt mere intelligent nedenunder.

Det betød, at der skulle tænkes på to helt forskellige brugere.

Kunden skal kunne oprette en produktionsbrief uden at skulle forstå systemet bag.

Teamet hos Brandsurface har brug for strukturerede data, filer, statusinformation og et pålideligt workflow, der kan håndteres, efter ordren er sendt.

Så opgaven handlede mindre om at designe en formular og mere om at designe hele den digitale proces.

Løsningen

Resultatet er en skræddersyet webapp til labelproduktion udviklet for en international bryggerikoncern.

Kunden starter med det grundlæggende: kampagne, projekt, navn, e-mail og deadline.

Herfra guider applikationen brugeren gennem valg af brand, produktinformation og tekniske specifikationer. Tilgængelige brands og varianter hentes fra databasen, så formularen kan ændres uden at skulle bygge applikationen om.

Teknisk information som størrelse, antal, papir og finish håndteres i dedikerede trin. Produktionsdetaljer som EAN, energioplysninger, ingredienser og næringsindhold indsamles på en struktureret måde.

Det er også muligt at vedhæfte referencedokumenter og artwork-filer direkte til ordren.

Og fordi produktionsfiler kan blive store, kan systemet også generere en Smash-uploadmulighed til større filer.

Det vigtige er, at det hele ender i én samlet ordre.

Ikke fem e-mails. Ikke en Dropbox-mappe med et mystisk filnavn. Én struktureret produktionsbrief. Den lille detalje, der gør en stor forskel En af mine yndlingsdele af løsningen er det, der sker, efter kunden trykker send.

I stedet for straks at sende ordren videre, sender systemet kunden en bekræftelsesmail med hele ordren.

Derefter starter en kort frist. Har du ombestemt dig? Fundet en stavefejl? Glemt et EAN-nummer? Skal en fil udskiftes?

Intet problem.

Kunden kan åbne ordren igen via e-mailen, redigere den og indsende en ny version.

Først når fristen udløber, bliver ordren automatisk videresendt til Brandsurface.

Den lille automatisering fjerner overraskende meget friktion fra processen. Den tekniske løsning bruger planlagte transaktionelle e-mails og et versionsbaseret workflow, så en redigeret ordre reelt erstatter den tidligere version og starter timeren forfra.

Og så er der administrationsdelen

En formular til kunden er kun halvdelen af opgaven.

Bag kulisserne har jeg bygget en skræddersyet administrationsløsning, hvor Brandsurface kan håndtere ordrer, kunder, brands, varianter, indstillinger og produktionsmuligheder.

Kataloget er datadrevet, hvilket betyder, at nye brands og varianter kan tilføjes uden at ændre i applikationens kode.

Der er også login for kunder, ordrehistorik og mulighed for at genbruge tidligere briefs.

Så appen er ikke bare en pænere måde at sende en ordre på.

Det er et lille produktionssystem.

Bygget som en rigtig webapp

Applikationen er bygget med Next.js 14 og React, mens Supabase håndterer PostgreSQL-databasen og fillagringen.

Resend håndterer transaktionelle e-mails, herunder kunde-bekræftelser og den forsinkede videresendelse af ordrer, mens Vercel hoster applikationen. Projektet bruger Next.js server-side API-routes til at forbinde de forskellige dele af workflowet.

Hvorfor bygge en app, når man kunne bygge en formular?

Fordi den svære del ikke var at indsamle informationen.

Den svære del var alt det omkring den.

• Hvad sker der, når der mangler information?
• Hvad sker der, når kunden vil ændre noget?
• Hvad sker der, når en fil er for stor?
• Hvad sker der, når der er flere brands og varianter?
• Hvad sker der med ordren, efter den er sendt?

Og hvem skal administrere alt det seks måneder senere?

Det er her, forskellen mellem en formular og en webapplikation begynder at vise sig. Denne label-produktionsplatform er bygget til at håndtere hele rejsen — fra den første brief til den endelige overlevering.

Et godt digitalt værktøj skal stille og roligt fjerne arbejde.

" Det her gør den.

(Formularen kan ikke vises live, da løsningen er omfattet af en fortrolighedsaftale)