all
Business
data science
design
development
our journey
Strategy Pattern
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Alexandra Mendes

25. februar 2024

Min Read

Sådan opbygger du et forudbestillingswebsted

En af de største udfordringer ved at frigive et nyt produkt er at opbygge et forudbestillingswebsted for at begynde at give det en vis synlighed. Hvis du læser dette, er chancerne for, at du allerede ved, hvor du skal starte, men ikke rigtig, hvordan du gør det.

Hvis dette er tilfældet, læn dig tilbage og læs videre, da dette indlæg vil dække de trin, vi tog, og de tilknyttede udfordringer ved planlægning, design og implementering af vores eget forudbestillingswebsted til produktdesignprocesbogen.

Hvordan kom vi hertil?
Før vi går ind i den tekniske del og begynder at forklare, hvordan vi fik vores kampagne i gang, er her lidt kontekst.

Vi arbejdede hårdt på vores første bog, og feedbacken var så god, at vi besluttede at sammensætte en forudbestillingskampagne. Den logiske beslutning var at spise vores eget hundefoder og anvende produktdesignprocessen på denne øvelse.

Som det allerede blev nævnt her to gange, og du måske er fyldt med nysgerrighed, Produktdesignprocesbog er en manual til digitalt produktdesign, baseret på en tværfaglig tilgang, der forener produktejere, designere, udviklere og ledere.

Det fokuserer på enestående UI/UX-design, men også på at holde omkostninger og fordele afbalancerede, undgå spild af ressourcer og satse på hurtig markedslansering.

Hold det kort, det er Google Design Sprint på steroider.

blue arrow to the left
Imaginary Cloud logo

Planlægning

Strategi handler om at træffe valg, afvejninger; det handler om bevidst at vælge at være anderledes.
Michael Porter

Efter det brummer, som vores produktdesignproces allerede genererede, var det næste logiske skridt at gå videre med udviklingen af et forudbestillingswebsted. Dette vil muliggøre:

  • Tidlige brugere får bogen til en særlig pris
  • Opbygning af et fællesskab omkring produktet
  • Modtagelse af feedback i de tidligere faser

Branding
Den første udfordring, vi stod over for, vedrørte branding. Bogen har sin egen branding, men indholdet er bundet op til Imaginære skyer Designproces. Vi var nødt til at evaluere, hvad der gav mening med hensyn til branding til forudbestillingswebstedet. Skal det bruge Imaginary Clouds branding? Skal det nye websted bruge bogens branding?

Vores første gæt var at anvende bogens branding på forudbestillingswebstedet, men siden begyndelsen var det klart, at vi havde brug for Imaginary Clouds sociale tilstedeværelse for at sprede ordet. Oprettelse af sociale mediekonti og et nyhedsbrev til bogen alene var for krævende og et operationelt mareridt for et så lille team.

Efter en brainstorming-session besluttede vi, at det var den bedste mulighed at følge bogmærkningen, men vi måtte også fremhæve, at de sociale kanaler og nyhedsbrev, der abonneres, handlede om skaberne af bogen og ikke om selve produktet.

Opbygning af et fællesskab
Forbi brandingstrinnet, men stadig i planlægningsfasen, var et af vores hovedmål at opbygge et fællesskab omkring bogen.
Vores sociale kanaler er ret aktive og dækker en masse detaljer om Imaginary Clouds arbejde, inklusive selve bogen. Imidlertid, den type publikum, der følger os, fordi bogen måske ikke er så interesseret i andre daglige aktiviteter.

Vi var nødt til at fokusere vores mest relevante indhold i produktdesignprocessen på en af de tilgængelige kanaler og gøre det klart for de besøgende på hjemmesiden, at det var den rigtige at følge. Med dette i tankerne valgte vi vores nyhedsbrev som den foretrukne kanal.

Hovedårsagen til dette valg var, at vi kunne henvise brugere til at abonnere på nyhedsbrevet over andre sociale kanaler, og vi kunne også give et incitament til at gøre det, noget relevant inden for rammerne af bogen, som de ville værdsætte.

Vi designede, til dette formål, et cheat-ark om produktdesignprocessen, der kun kan fås ved at abonnere på vores nyhedsbrev.

Håndtering af betalinger
På dette tidspunkt blev vores branding defineret, og vi har sikret midlerne til at engagere os i samfundet. Det eneste, der er tilbage at planlægge, er, hvordan man håndterer betalinger, og den største udfordring her var håndteringen af momsen, hvilket har indflydelse på den automatiske behandling af fakturaer.

Vores idé om at få det behandlet automatisk på webstedet blev opgivet efter at have taget et dybere kig på EU-lovgivningen. Da den procentdel af moms, der skal opkræves, afhænger af køberens adresse, konkluderede vi, at den bedste løsning ville være at behandle moms og udstede fakturaer manuelt.

Selvom antallet af forudbestillinger har været højt, har vi installeret kapacitet til at håndtere den manuelle generering af disse dokumenter. Og når bogen er live, sker det meste salg via Amazon, Book Depository og andre online forhandlere.

blue arrow to the left
Imaginary Cloud logo

Udformning

Vi har afsluttet den første fase, og vores forudbestillingswebsted er planlagt, med en håndfuld problemer løst indtil dette tidspunkt. Det er tid til at starte designprocessen, hvor vi havde klare mål:

  • Hjemmesiden skulle være så enkel som muligt
  • Gennemførelsestiden bør reduceres til et minimum

Skelettet
Det første skridt var at opbygge wireframes (visuel guide, der repræsenterer skeletrammen på webstedet) og dermed skabe en enkelt side og struktur, der giver den bedste oplevelse, når du navigerer gennem hjemmesiden.

Vi delte siden i tre sektioner: en kort beskrivelse af bogen ovenpå, efterfulgt af en forudbestillingsformular og til sidst abonnementsformularen til nyhedsbrevet. De mest relevante oplysninger - bogen og forudbestillingsrabatten - fremhæves for at fange brugerens opmærksomhed om hovedemnet.

Branding-problemer (genindlæst)
På dette tidspunkt var vi ikke helt færdige med branding, hvilket her fremstår som en udfordring på vores projekt for anden gang.

Da vi brugte bogens branding, havde de visuelle materialer allerede en god baseline. Den største visuelle udfordring var at bruge Imaginary Clouds branding i nyhedsbrevsektionen uden at tilsidesætte brandingen af forudbestillingswebstedet.

For at løse dette problem blandede vi problemfrit detaljer om Imaginary Clouds branding til websiden. Løsningen ser enkel ud: et gitter som baggrund for nyhedsbrevsafsnittet, som også er baggrunden, der bruges på Imaginary Clouds side.

Og fordi djævelen er i detaljerne, designede vi en animation til, når abonnementet på nyhedsbrevet er afsluttet:

Newsletter Animation
blue arrow to the left
Imaginary Cloud logo

Implementering

Vi har planlagt og designet vores forudbestillingswebsted, og det var på det tidspunkt et skridt væk fra færdiggørelsen. Det eneste, der var tilbage, var at gennemføre.

I denne sidste fase skulle vi identificere de ikke-funktionelle krav og kontrollere, om der manglede noget andet i designmaterialerne (for eksempel et forudbestillingspanel). For et komplet forudbestillingswebsted var følgende funktioner vigtige:

  • Betalingsgateway - til at behandle betalinger
  • E-mail-gateway - for at informere os, når ordrer afgives
  • Nyhedsbrevshåndteringssystem - selvforklarende
  • Back-office - med ordredetaljerne

Undersøgelse og handling
Før vi tog det næste skridt, var vi nødt til at lave vores lektier og undersøge eksisterende e-handelsløsninger, der leverer alle de nødvendige funktionaliteter. Disse platforme fungerer normalt i en SaaS-model og tager et mindre gebyr for hver solgte vare, hvilket ikke var vores ideelle scenarie.

Det tog ikke lang tid, før vi indså, at omkostningerne ved at bruge denne form for platforme ikke kompenserede for et så lille websted. Så vi byggede det i Ruby on Rails, da vi er ret fortrolige med rammen, og det tilbyder et robust værktøjssæt til udvikling af webapplikationer.

Gør transaktionen reel
Til betalingsgatewayen gik vi stribe fordi det tager en lav vejafgift på hvert salg og har en veldokumenteret API. Det har også en widget, der dækker alle de nødvendige valideringer, og data passerer ikke gennem vores servere.
På denne måde behandler vi ikke kreditkort, hvilket gør vores websted sikkert og PCI kompatibel på samme tid. Vi var på den ideelle løsning på vores problem.

For transaktions-e-mails gik vi med SendGrid, en pålidelig og nem at konfigurere udbyder, som vi allerede havde brugt tidligere. Vi havde brug for det for at informere vores team, når der blev foretaget et salg, og Sendgrids gratis niveau var nok til dette websted.

Nyhedsbrev Abonnement
Mailchimp var vores go-værktøj til nyhedsbrevstyring. Dette system var allerede i brug til Imaginary Clouds nyhedsbrev, og beslutningen var ligetil. Priserne er gode, og den har et stort udvalg af nemme at konfigurere funktioner.

Backoffice
Med hensyn til back-office besluttede vi at oprette vores eget ved hjælp af et open source-bibliotek kaldet rail_admin. På denne måde kan vi se detaljerne i hver ordre og eksportere dataene til Excel-format - hvilket gør forsendelsen af bogen lettere at håndtere.

Og fordi vi har fuld kontrol over kodebasen, fortæller vi teamet via Slack, når en forudbestilling er udført. Dette var ikke et krav, men det er sejt og tog ikke meget tid at opnå.

blue arrow to the left
Imaginary Cloud logo

Konklusion

Et forudbestillingswebsted er en glimrende måde at begynde at promovere et produkt på, så samfundet kan lægge mærke til og få et særligt tilbud, før det lanceres. Som vi har set, har selve processen - planlægning, design og udvikling - nogle særlige forhold, men det er ikke svært at gennemføre.

De mål, vi definerede for denne fase, blev med succes nået, og vi elsker det endelige resultat. Det ser også ud til, at vi ikke er alene, da forudbestillinger har strømmet, og folk synes meget ivrige efter at drage fordel af rabatten.

Du er velkommen til at tage et kig på det endelige resultat og lad os vide, hvad du synes: https://www.productdesignprocess.com

Ved Imaginær sky vores mål er at levere fantastiske digitale projekter gennem det fantastiske arbejde i vores softwareudviklings- og UI/UX designteams. Hvis du tror, du kunne bruge lidt hjælp i dit digitale projekt, så send os en linje her!

Ready for a UX Audit? Book a free call

Fandt du denne artikel nyttig? Du kan måske også lide disse!

blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
Alexandra Mendes
Alexandra Mendes

Alexandra Mendes er Senior Growth Specialist hos Imaginary Cloud med 3+ års erfaring med at skrive om softwareudvikling, AI og digital transformation. Efter at have gennemført et frontend-udviklingskursus fik Alexandra nogle praktiske kodningsevner og arbejder nu tæt sammen med tekniske teams. Alexandra brænder for, hvordan nye teknologier former erhvervslivet og samfundet, og hun nyder at omdanne komplekse emner til klart og nyttigt indhold for beslutningstagere.

LinkedIn

Read more posts by this author

People who read this post, also found these interesting:

arrow left
arrow to the right
Dropdown caret icon