allt
Företag
datavetenskap
design
utveckling
vår resa
Strategimönster
Tack! Din inlämning har mottagits!
Hoppsan! Något gick fel när du skickade in formuläret.
Tack! Din inlämning har mottagits!
Hoppsan! Något gick fel när du skickade in formuläret.
Alexandra Mendes

februari 25, 2024

Min läsning

Hur man bygger en förbeställningswebbplats

En av de största utmaningarna med att släppa en ny produkt är att bygga en förbeställningswebbplats för att börja ge den viss synlighet. Om du läser detta är chansen stor att du redan vet var du ska börja, men inte riktigt hur du gör det.

Om så är fallet, luta dig tillbaka och läs vidare, eftersom det här inlägget kommer att täcka stegen som vi tog och de tillhörande utmaningarna med att planera, designa och implementera vår egen förbeställningswebbplats för produktdesignprocessboken.

Hur kom vi hit?
Innan vi går in i den tekniska delen och börjar förklara hur vi fick igång vår kampanj, här är lite sammanhang.

Vi arbetade hårt med vår första bok och feedbacken var så bra att vi bestämde oss för att sätta ihop en förbeställningskampanj. Det logiska beslutet var att äta vår egen hundmat och tillämpa produktdesignprocessen på denna övning.

Som det redan nämnts här två gånger och du kanske är fylld av nyfikenhet, Produktdesignprocessbok är en manual för digital produktdesign, baserad på ett tvärvetenskapligt tillvägagångssätt som förenar produktägare, designers, utvecklare och chefer.

Det fokuserar på exceptionell UI/UX-design, men också på att hålla kostnader och fördelar balanserade, undvika slöseri med resurser och satsa på snabb marknadslansering.

För att hålla det kort, det är Google Design Sprint på steroider.

blå pil till vänster
Imaginary Cloud-logotyp

Planering

Strategi handlar om att göra val, avvägningar; det handlar om att medvetet välja att vara annorlunda.
Michael Porter

Efter det surr som vår produktdesignprocess redan genererade var nästa logiska steg att gå vidare med utvecklingen av en förbeställningswebbplats. Detta skulle möjliggöra följande:

  • Tidiga användare får boken till ett specialpris
  • Bygga en gemenskap kring produkten
  • Få feedback i de tidigare stadierna

Branding
Den första utmaningen vi mötte gällde varumärket. Boken har sitt eget varumärke, men innehållet är bundet upp till Imaginära moln Designprocess. Vi var tvungna att utvärdera vad som var vettigt när det gäller branding för förbeställningswebbplatsen. Ska det använda Imaginary Clouds varumärke? Ska den nya webbplatsen använda bokens varumärke?

Vår första gissning var att tillämpa bokens varumärke på förbeställningswebbplatsen, men sedan början var det tydligt att vi behövde Imaginary Clouds sociala närvaro för att sprida ordet. Att skapa sociala mediekonton och ett nyhetsbrev för boken ensam var för krävande, och en operativ mardröm för ett så litet team.

Efter en brainstorming bestämde vi oss för att följa bokens varumärke var det bästa alternativet, men vi var också tvungna att lyfta fram att de sociala kanalerna och nyhetsbrevet som prenumererades handlade om skaparna av boken och inte om själva produkten.

Bygga en gemenskap
Förbi varumärkessteget, men fortfarande i planeringsfasen, var ett av våra huvudmål att bygga en gemenskap runt boken.
Våra sociala kanaler är ganska aktiva och täcker många detaljer om Imaginary Clouds arbete, inklusive själva boken. i alla fall, den typ av publik som följer oss eftersom boken kanske inte är lika intresserad av andra dagliga aktiviteter.

Vi var tvungna att fokusera vårt mest relevanta innehåll i produktdesignprocessen på en av de tillgängliga kanalerna och göra det klart för webbplatsbesökarna att det var rätt att följa. Med detta i åtanke valde vi vårt nyhetsbrev som den föredragna kanalen.

Den främsta anledningen till detta val var att vi kunde rikta användare att prenumerera på nyhetsbrevet via andra sociala kanaler och vi kunde också ge ett incitament att göra det, något relevant inom bokens sammanhang som de skulle värdera.

Vi utformade, för detta ändamål, ett fuskark för produktdesignprocessen som endast kan erhållas genom att prenumerera på vårt nyhetsbrev.

Hantera betalningar
Vid denna tidpunkt definierades vårt varumärke och vi har säkrat medlen för att engagera sig i samhället. Allt som återstår att planera är hur man hanterar betalningar och den största utmaningen här var hanteringen av momsen, vilket påverkar den automatiska hanteringen av fakturor.

Vår idé att få det bearbetat automatiskt på webbplatsen övergavs efter en djupare titt på EU-lagstiftningen. Eftersom procentsatsen av moms som debiteras beror på köparens adress drog vi slutsatsen att den bästa lösningen skulle vara att behandla moms och utfärda fakturor manuellt.

Även om antalet förbeställningar har varit högt har vi installerad kapacitet för att hantera den manuella genereringen av dessa dokument. Och när boken är live kommer de flesta försäljningar att ske via Amazon, Book Depository och andra onlinehandlare.

blå pil till vänster
Imaginary Cloud-logotyp

Utformning

Vi har slutfört den första fasen och vår förbeställningswebbplats är planerad, med en handfull problem lösta fram till denna punkt. Det är dags att starta designprocessen, där vi hade tydliga mål:

  • Webbplatsen måste vara så enkel som möjligt
  • Genomförandetiden bör minskas till ett minimum

Skelettet
Det första steget var att bygga wireframes (visuell guide som representerar webbplatsens skelettram) och därmed skapa en enda sida och struktur som ger den bästa upplevelsen när du navigerar genom webbplatsen.

Vi delar upp sidan i tre avsnitt: en kort beskrivning av boken ovanpå, följt av ett förbeställningsformulär och slutligen prenumerationsformuläret för nyhetsbrevet. Den mest relevanta informationen - boken och förbeställningsrabatten - markeras för att fånga användarens uppmärksamhet om huvudämnet.

Varumärkesproblem (laddat om)
Just nu var vi inte helt klara med varumärket, vilket här framstår som en utmaning för vårt projekt för andra gången.

När vi använde bokens varumärke hade det visuella materialet redan en bra baslinje. Den största visuella utmaningen var att använda Imaginary Clouds varumärke i nyhetsbrevsektionen utan att åsidosätta varumärket för förbeställningswebbplatsen.

För att lösa problemet blandade vi sömlöst detaljer om Imaginary Clouds varumärke till webbsidan. Lösningen ser enkel ut: ett rutnät som bakgrund till nyhetsbrevsektionen, som också är bakgrunden som används på Imaginary Clouds sida.

Och eftersom djävulen är i detaljerna designade vi en animation för när prenumerationen på nyhetsbrevet är klar:

Newsletter Animation
blå pil till vänster
Imaginary Cloud-logotyp

Genomförande

Vi har planerat och designat vår förbeställningswebbplats och det var vid den tidpunkten ett steg bort från färdigställandet. Det enda som återstod var att genomföra.

I den sista fasen var vi tvungna att identifiera de icke-funktionella kraven och kontrollera om något annat saknades i designmaterialet (till exempel en förbeställningspanel). För en komplett förbeställningswebbplats var följande funktioner viktiga:

  • Betalningsport - för att behandla betalningar
  • E-postgateway - för att informera oss när beställningar görs
  • Nyhetsbrevhanteringssystem - självförklarande
  • Back-office - med orderdetaljer

Forskning och åtgärder
Innan vi tog nästa steg behövde vi göra våra läxor och undersöka befintliga e-handelslösningar som tillhandahåller alla nödvändiga funktioner. Dessa plattformar fungerar vanligtvis i en SaaS-modell och tar en liten avgift för varje såld artikel, vilket inte var vårt ideala scenario.

Det tog inte lång tid tills vi insåg att kostnaderna för att använda den här typen av plattformar inte kompenserade för en så liten webbplats. Så vi byggde det i Ruby on Rails, eftersom vi är ganska bekanta med ramverket och det erbjuder en robust verktygsuppsättning för att utveckla webbapplikationer.

Att göra transaktionen verklig
För betalningsgatewayen gick vi Rand eftersom det tar låg vägtull på varje försäljning och har ett väldokumenterat API. Den har också en widget som täcker alla nödvändiga valideringar och data passerar inte genom våra servrar.
På så sätt behandlar vi inte kreditkort, vilket gör vår webbplats säker och PCI kompatibel på samma gång. Vi var på den perfekta lösningen på vårt problem.

För transaktionsmeddelanden gick vi med SendGrid, en pålitlig och lätt att konfigurera leverantör som vi redan hade använt tidigare. Vi behövde det för att informera vårt team när en försäljning gjordes och Sendgrids gratisnivå räckte för den här webbplatsen.

Prenumeration på nyhetsbrev
Mailchimp var vårt go-verktyg för nyhetsbrevshantering. Detta system användes redan för Imaginary Clouds nyhetsbrev och beslutet var enkelt. Prissättningen är bra och den har ett stort utbud av lättkonfigurerade funktioner.

Backoffice
När det gäller backoffice bestämde vi oss för att skapa vårt eget, med hjälp av ett bibliotek med öppen källkod som heter rail_admin. På så sätt kan vi se detaljerna i varje beställning och exportera data till Excel-format - vilket gör frakten av boken enklare att hantera.

Och eftersom vi har full kontroll över kodbasen meddelar vi teamet via Slack när en förbeställning görs. Detta var inte ett krav, men det är coolt och tog inte mycket tid att uppnå.

blå pil till vänster
Imaginary Cloud-logotyp

Slutsats

En förbeställningswebbplats är ett utmärkt sätt att börja marknadsföra en produkt, så att samhället kan lägga märke till och få ett specialerbjudande innan det lanseras. Som vi har sett har själva processen - planering, design och utveckling - vissa särdrag, men det är inte svårt att åstadkomma.

De mål som vi definierade för denna fas uppnåddes framgångsrikt och vi älskar slutresultatet. Det verkar också som om vi inte är ensamma, eftersom förbeställningar har flödat och människor verkar mycket angelägna om att dra nytta av rabatten.

Ta gärna en titt på slutresultatet och låt oss veta vad du tycker: https://www.productdesignprocess.com

Vid Imaginärt moln vårt mål är att leverera fantastiska digitala projekt genom det fantastiska arbetet i våra mjukvaruutvecklings- och UI/UX-designteam. Om du tror att du kan använda lite hjälp i ditt digitala projekt, skicka oss en rad här!

Ready for a UX Audit? Book a free call

Hittade den här artikeln användbar? Du kanske gillar dessa också!

blå pil till vänster
Imaginary Cloud-logotyp
blå pil till vänster
Imaginary Cloud-logotyp
blå pil till vänster
Imaginary Cloud-logotyp
blå pil till vänster
Imaginary Cloud-logotyp
blå pil till vänster
Imaginary Cloud-logotyp
blå pil till vänster
Imaginary Cloud-logotyp
blå pil till vänster
Imaginary Cloud-logotyp
Alexandra Mendes
Alexandra Mendes

Alexandra Mendes är Senior Growth Specialist på Imaginary Cloud med 3+ års erfarenhet av att skriva om mjukvaruutveckling, AI och digital transformation. Efter att ha avslutat en frontend-utvecklingskurs tog Alexandra upp några praktiska kodningskunskaper och arbetar nu nära med tekniska team. Alexandra brinner för hur ny teknik formar affärer och samhälle och tycker om att förvandla komplexa ämnen till tydligt och användbart innehåll för beslutsfattare.

Linkedin

Läs fler inlägg av denna författare

Människor som läste det här inlägget tyckte också att dessa var intressanta:

pil vänster
pilen till höger
Dropdown caret icon