Att designa och implementera vår företags marknadssida: Min resa från innehåll till implementering

Om du är en Logto-användare har du kanske märkt att vårt företags webbsida nyligen har uppdaterats. Om du inte är det, kolla in webbsidan, logto.io, och gissa hur mycket resurser vi lade ner på att få det att hända.

Du kanske tänker, ska ni verkligen självreklamera att det kräver en stor del arbete, ansträngning och noggrant designande bara för att visa er excellens i genomförande?

Nej!

Tvärtom vill vi visa hur smart vi använder verktyg och metoder för att förbättra vår produktkvalitet och leverera de bästa produkterna och tjänsterna till våra användare.

Vi fick positiv feedback från vår community och undrar hur vi gjorde det. Denna omgång av uppdateringar är annorlunda eftersom vi helt omgjort ett nytt arbetsflöde i en snabbt föränderlig miljö. Vi vill introducera våra bästa praxis och också ta en närmare titt på vår teambaserade samarbetskultur.

Bakgrunden#

Vi är ett teknikteam som fokuserar på att erbjuda ett brett utbud av kundidentitetsrelaterade utvecklingstjänster och infrastrukturarbete. Pressen att leverera är betydande. Samtidigt behöver vi stödja olika berättande- och operativa uppgifter, såsom att bygga brandade marknadswebbplatser, skriva bloggar, marknadsföra våra projekt och engagera oss med våra användare.

En övertygande landningssida är avgörande eftersom den ofta utgör det första intrycket som din publik har av din produkt, vilket hjälper dem att förstå de problem din produkt syftar till att lösa, inklusive prissättning och eventuella betydande kunder för socialt bevis.

Dessutom kan den uppfylla flera affärsmål:

• Visa upp din produkts varumärke och värderingsförslag.
• Generera leads.
• Fungera som ett innehållshubb, särskilt viktigt för ett företag fokuserat på produktledd eller utvecklarledd tillväxt.
• Tillhandahålla en plats för att optimera SEO, förvärva användare och spåra regelbunden trafik.

I mitt tidigare jobb var jag någonsin involverad i ett webbplatsprojekt. Låt oss titta på vad ett typiskt arbetsflöde innebär:

1. Först definierar produktmarknadsföringschefer och produktchefer innehållet och kraven.
2. Produktdesigners och en UX-skribent förfinar innehållet.
3. Vi överför arbetsprocessen, vanligtvis en lågupplöst version, till visuella och varumärkesdesigners för sista detaljerna innan produktion.
4. Ingenjörer och produktchefer börjar då implementeringen och fokuserar på animering och responsiv webbdesign.

Denna process är tråkig och involverar många människor och intressenter, vilket gör den olämplig för en snabbt föränderlig miljö.

Även om vi initialt har bara två personer som underhåller detta - en produktdesigner och en ingenjör - kräver hanteringen av webbprestanda, uppladdning av bilder, säkerställande av responsiv design, hantering av bildformat och uppdatering av innehåll fortfarande mycket fram och tillbaka kommunikation.

Detta arbetsflöde är ineffektivt. Jag tänker ständigt på hur jag kan frigöra ingenjörsresurser för att fokusera på kärnproduktarbete medan jag hanterar resten.

Att använda verktyg för att öka produktiviteten är en nyckelfilosofi för vårt team. Därför har jag börjat undersöka verktyg som kan hjälpa till att effektivisera dessa processer.

Bryt ner behoven#

För att utveckla en framgångsrik SaaS-marknadssida, låt oss bryta ner de essentiella elementen som behövs:

1. Innehåll: Grundläggande för vilken marknadssida som helst är att exakt veta vad som ska visas. Detta kräver en djup förståelse för din målgrupp, deras typiska användningsfall och din produkts värderingsförslag. Inget verktyg kan ersätta denna förståelse. Lyckligtvis innebär mitt engagemang i produktdesign och go-to-market-strategier att jag är väl rustad att skapa innehåll som möter användarnas behov.
2. Design: Sidan ska ha en polerad och elegant visuell tilltalning. Min bakgrund inom UX/produktdesign, även om den inte är lika omfattande som en dedikerad kreativa designers, utrustar mig för att hantera denna aspekt kompetent.
3. Ingenjör: Viktiga tekniska överväganden inkluderar att värdplacera sidan, säkerställa responsiv design och möjliggöra smidiga mikrointeraktioner. Det är också viktigt att integrera sidan sömlöst med andra komponenter, såsom omlänkningar och produktens autentiseringssida.

Efter att ha genomfört lite forskning, här är verktygslådan jag planerar att använda för designelementen:

Produkt- och Marknadsinnehåll#

ChatGPT 3.5, ChatGPT 4.0, Gemini Advanced, Jasper eller liknande AI-applikationer som copiloter.

Detta är för att finjustera och optimera mitt marknadsföringsinnehåll och budskap. Det är viktigt att vara tydlig med målet och intentionen bakom dem. AI är bara en copilots, inte en beslutsfattare. Innan jag skriver något marknadsföringsbudskap frågar jag mig själv några frågor:

1. Vem kommer läsa budskapet?
2. Behöver de extra sammanhang?
3. Vad är den nyckelpunkt du vill adressera i budskapet?
4. Vad vill du att användaren ska göra som nästa steg?
5. Är detta budskap avsett att utbilda eller driva en specifik åtgärd?
6. Har det potential att vara vilseledande eller överdrivet?

Sedan skriver jag en första utkast av de punkter jag vill kommunicera.

Ibland kan AI introducera ord som verkar stela eller vrida din ursprungliga avsikt för att få det att kännas logiskt korrekt. Men du måste betona din avsikt igen och hålla dig till dina mål. Du måste etablera standarder för att säkerställa att orden som levereras till publiken är tydliga, enkla, koncisa och transparenta. Detta är särskilt viktigt i vår produktdomän som tjänar många företag och utvecklare.

Design#

Figma, Framer för interaktion och visuell design samt animering och prototypframställning

Jag har en bakgrund inom design, främst fokuserad på produktdesign, vilket innebär att utforma UI och UX. Medan det inte är en utmaning att utforma en polerad UI för mig, är mitt arbete inte lika elegant som en professionell designers. Men med några grundläggande visuella design- och illustrationskunskaper, och genom att välja rätt verktyg, kan du förbättra kvaliteten på ditt arbete. Jag använder Framer och Figma i denna kreativa process.

Detta är vår gamla design, helt byggd i Figma

Vår ursprungliga design skapades i Figma. Jag använde den officiella Framer-plugin, "Framer till HTML", för att kopiera och klistra in den grundläggande designen i Framer, vilket gav en bra utgångspunkt.

Nästa steg är att designa. Om du tidigare använt Figma, är övergången till Framer en smidig process eftersom den övergripande användarupplevelsen är ganska liknande. Jag ska lyfta fram några intressanta interaktioner som avsevärt förbättrar produktiviteten.

Layout#

Figma-användare uppskattar automatisk layout eftersom det sparar mycket tid på att lägga ut och placera element. Men layoutfunktionerna i Framer är ännu smartare, och stämmer bättre överens med ett front-end-tankesätt. I Framer kan du välja att använda ett rutnät eller staplat layout, definiera kolumnerna, sätta en maximal bredd, och det kommer automatiskt att omsluta till en annan rad vid behov. Denna funktionalitet förbättrar designprocessen genom att spegla hur element kommer att bete sig i en live webbmijö.

Brytpunkter för responsiv design#

Genom att smart förlita sig på att ställa in brytpunkter och breddinställningar (såsom fyll, fast, relativ och passa till innehåll) och definiera olika canvases kan du enkelt och exakt uppnå olika responsiva designer. Denna strategi gör det möjligt för dig att effektivt anpassa layouten till olika skärmstorlekar och enheter.

Animering#

Framer erbjuder en variation av förbyggda animeringar, inklusive en ticker animering som vi använder extensivt på vår webbsida för att visa upp vårt arbete. Du kan ställa in komponenten och bädda in den i denna widget. Det låter dig definiera olika konfigurationer såsom hastighet, riktning, padding, och mer, vilket ger dig flexibilitet och kontroll över hur animeringen beter sig på din webbplats.

En annan användbar funktion i Framer är möjligheten att anpassa scroll-animationer. Till exempel kan du specificera hur objekt visas när de dyker upp i synfältet under scrollning. Att ställa in din scroll-animation låter dig kontrollera timing och stil för hur element visas, vilket förbättrar användarupplevelsen och engagemanget med ditt innehåll.

Snabbt Publicera#

Ett av mina huvudkrav är förmågan att:

1. Snabbt utforma flera landningssidor för SEO-optimering och marknadsföringskampanjer. Hastighet är ett måste.
2. Uppdatera innehåll frekvent på egen hand. Din produkts landningssida reflekterar de senaste utvecklingarna och din nuvarande produktpositionering. Föråldrat innehåll innebär missade marknadsmöjligheter och att inte hålla sig i fas med dina kunders behov.

I mitt tidigare arbetsflöde, när jag behövde uppdatera innehåll, behövde jag antingen be en ingenjör att göra det eller skicka in en pull-begäran själv. Vårt ingenjörs-team följer en rigorös process för att säkerställa kodkvalitet, vilket kan vara tidskrävande och begränsar min förmåga att göra snabba ändringar.

Framer har löst detta problem för mig. Nu, varje gång jag gör en ändring och klickar på publicera, reflekteras det omedelbart live i produktion. Denna förmåga har avsevärt förenklat processen och möjliggjort snabbare uppdateringar och större självständighet när det gäller innehållshantering.

Ingenjör#

Eftersom det är värdat av Framer finns det inget behov av någon implementerings- eller teknisk ansträngning på vår del. Våra ingenjörer behövde bara cirka 10 minuter för att integrera det med vår resten av vår webbplats.

Vår nuvarande webbplats består av 20-30 sidor; vissa är utvecklade med Framer medan andra är skapade genom traditionella mjukvaruutvecklingsmetoder. Vi är i processen att välja de bästa verktygen för att underhålla våra sidor. Till exempel, för utvecklardokumentation, som är utmanande att hantera med Framer, är det optimala valet att använda ett utvecklarvänligt dokumentationsramverk för att vara värd för ditt innehåll. Gå framåt, kommer vi att utvärdera våra behov och bestämma om vi ska fortsätta värda själva eller att helt övergå till Framer.

Hur det förändrade vårt arbetsflöde#

Vi omvandlade helt vårt arbetsflöde, vilket gjorde produktionen av marknadssidor helt ansträngningslös. Det är pålitligt, underhållbart och mycket effektivt.

Jag skrev denna blogg för att dela bästa praxis. Om du har erfarenheter med Framer och designar vackra webbplatser skulle jag gärna höra om dem. Låt oss prata och lära av varandra.

Nu är det dags att kolla in vår produkt! Besök oss på logto.io.