Ontwerpen en implementeren van de marketing site van ons bedrijf: Mijn reis van inhoud naar implementatie

Als je een Logto-gebruiker bent, heb je misschien gemerkt dat de website van ons bedrijf onlangs is vernieuwd. Als je dat niet bent, bekijk dan de website, logto.io, en probeer te raden hoeveel middelen we hebben ingezet om dit te realiseren.

Je zou kunnen denken, gaan jullie jezelf promoten dat het veel werk, inspanning en zorgvuldige ontwerp vergt om jullie excellentie in uitvoering te laten zien?

Nee!

Integendeel, we willen laten zien hoe slim we tools en methoden inzetten om onze productkwaliteit te verbeteren en de beste producten en services aan onze gebruikers te leveren.

We hebben positieve feedback van onze community ontvangen en vragen ons af hoe we dat hebben gedaan. Deze ronde van updates is anders omdat we een compleet nieuwe workflow hebben heruitgevonden in een snel veranderende omgeving. We willen graag onze best practices introduceren en ook een kijkje nemen op onze cultuur van teamwork en samenwerking.

De achtergrond#

We zijn een technologisch team dat zich richt op het bieden van een breed scala aan klantidentiteit-gerelateerde ontwikkelingsservices en infrastructuurwerk. De druk om te leveren is significant. Ondertussen moeten we verschillende storytelling- en operationele taken ondersteunen, zoals het bouwen van merkgebonden marketingwebsites, het schrijven van blogs, het promoten van onze projecten en het betrekken van onze gebruikers.

Een overtuigende landingswebsite is cruciaal omdat het vaak de eerste indruk vormt die je publiek van je product heeft, hen helpt de problemen te begrijpen die je product probeert op te lossen, inclusief prijsstelling en eventuele opmerkelijke klanten voor sociale bevestiging.

Daarnaast kan het meerdere zakelijke doelstellingen vervullen:

• Laat het merk en waardevoorstel van je product zien.
• Genereer leads.
• Dien als een contenthub, vooral belangrijk voor een bedrijf gericht op productgerichte of ontwikkelaarsgerichte groei.
• Bied een plek om SEO te optimaliseren, gebruikers te werven en regelmatig verkeer bij te houden.

In mijn vorige baan was ik ooit betrokken bij een websiteproject. Laten we eens kijken naar wat een typische workflow inhoudt:

1. Eerst definiëren productmarketingmanagers en productmanagers de inhoud en vereisten.
2. Productontwerpers en een UX-schrijver verfijnen de inhoud.
3. We dragen het werk-in-uitvoering over, meestal een laag-fideliteit versie, aan visuele en branding ontwerpers voor de laatste aanpassingen voor productie.
4. Ingenieurs en productmanagers beginnen dan met de implementatie, met de nadruk op animatie en responsief webontwerp.

Dit proces is tijdrovend en omvat veel mensen en stakeholders, waardoor het ongeschikt is voor een snel veranderende omgeving.

Zelfs als we aanvankelijk slechts twee mensen hebben om dit te onderhouden - een productontwerper en een ingenieur - vereisen de taken van het beheren van webprestaties, afbeeldingen uploaden, zorgen voor responsief ontwerp, omgaan met afbeeldingsformaten en het bijwerken van inhoud nog steeds veel heen-en-weer communicatie.

Deze workflow is inefficiënt. Ik denk constant na over hoe ik ingenieursbronnen kan vrijmaken om zich te concentreren op kernproductwerk terwijl ik de rest regel.

Het gebruik van tools om de productiviteit te verbeteren is een belangrijke filosofie van ons team. Daarom ben ik begonnen met het onderzoeken van tools die kunnen helpen deze processen te stroomlijnen.

Behoeften analyseren#

Om een succesvolle SaaS-marketingwebsite te ontwikkelen, laten we de essentiële elementen opdelen die nodig zijn:

1. Inhoud: De basis van elke marketingsite is precies weten wat je wilt weergeven. Dit vereist een diep begrip van je doelgroep, hun typische gebruiksscenario's en het waardevoorstel van je product. Geen enkele tool kan dit begrip vervangen. Gelukkig betekent mijn betrokkenheid bij productontwerp en go-to-market strategieën dat ik goed uitgerust ben om inhoud te creëren die aan de behoeften van gebruikers voldoet.
2. Ontwerp: De site moet een gepolijste en slanke visuele aantrekkingskracht hebben. Mijn achtergrond in UX/productontwerp, hoewel niet zo uitgebreid als die van een toegewijde creatieve ontwerper, stelt me in staat om dit aspect bekwaam aan te pakken.
3. Techniek: Belangrijke technische overwegingen zijn onder meer het hosten van de site, zorgen voor responsief ontwerp en het mogelijk maken van soepele micro-interacties. Het is ook cruciaal om de site naadloos te integreren met andere componenten, zoals linkomleidingen en de authenticatiepagina van het product.

Na wat onderzoek, hier is de toolkit die ik van plan ben te gebruiken voor de ontwerpaspecten:

Product- en marketinginhoud#

ChatGPT 3.5, ChatGPT 4.0, Gemini Advanced, Jasper of vergelijkbare AI-toepassingen als copilot.

Dit is om mijn marketinginhoud en berichten te verfijnen en optimaliseren. Het is belangrijk om duidelijk te zijn over het doel en de intentie erachter. AI is slechts een copilot, geen beslisser. Voordat ik een marketingboodschap schrijf, stel ik mezelf een paar vragen:

1. Wie zal de boodschap lezen?
2. Hebben zij wat extra context nodig?
3. Wat is het belangrijkste punt dat je in de boodschap wilt adresseren?
4. Wat verwacht je dat de gebruiker als volgende stap doet?
5. Is deze boodschap bedoeld om te informeren of een specifieke actie te stimuleren?
6. Heeft dit de potentie om misleidend of overdreven te zijn?

Dan schrijf ik een eerste concept van de punten die ik wil communiceren.

Soms kan AI woorden introduceren die oubollig lijken of je oorspronkelijke intentie verdraaien om het logisch correct te laten voelen. Je moet echter je intentie herhalen en vasthouden aan je doelen. Je moet normen vaststellen om ervoor te zorgen dat de woorden die aan het publiek worden geleverd duidelijk, eenvoudig, beknopt en transparant zijn. Dit is vooral belangrijk in onze productdomein, dat vele bedrijven en ontwikkelaars bedient.

Ontwerp#

Figma, Framer voor interactie- en visueel ontwerp, evenals animatie en prototyping

Ik heb een achtergrond in ontwerp, voornamelijk gericht op productontwerp, dat UI en UX ontwerp omvat. Terwijl het ontwerpen van gepolijste UI voor mij geen probleem is, is mijn werk niet zo gelikt als dat van een professional. Maar met enkele basisvaardigheden in visueel ontwerp en illustratie, en door de juiste tools te kiezen, kun je de kwaliteit van je werk verbeteren. Ik gebruik Framer en Figma in dit creatieve proces.

Dit is ons oude ontwerp, compleet gebouwd met Figma

Ons oorspronkelijke ontwerp is gecreëerd in Figma. Ik gebruikte de officiële Framer-plugin, "Framer to HTML," om het basisontwerp te kopiëren en plakken in Framer, wat een goede start bood.

De volgende stap is om te ontwerpen. Als je eerder Figma hebt gebruikt, is de overstap naar Framer een soepele ervaring, aangezien de algehele gebruikerservaring vrij gelijkaardig is. Ik ga enkele interessante interacties uitlichten die de productiviteit aanzienlijk verbeteren.

Layout#

Figma-gebruikers waarderen auto-layout omdat het veel tijd bespaart bij het lay-outen en plaatsen van elementen. Echter, de lay-outfuncties in Framer zijn nog slimmer en stemmen beter overeen met een front-end mindset. In Framer kun je kiezen of je een raster- of stapelopmaak wilt gebruiken, de kolommen definiëren, een maximale breedte instellen, en het zal automatisch een nieuwe rij toevoegen indien nodig. Deze functionaliteit verbetert het ontwerpproces door te spiegelen hoe elementen zich zullen gedragen in een live webomgeving。

Breekpunten voor responsief ontwerp#

Door slim te vertrouwen op het instellen van breekpunten en breedte-instellingen (zoals vullen, vast, relatief, en passend bij inhoud) en het definiëren van verschillende canvassen, kun je gemakkelijk en nauwkeurig verschillende responsieve ontwerpen bereiken. Deze aanpak stelt je in staat om de lay-out efficiënt aan te passen aan verschillende schermformaten en apparaten.

Animatie#

Framer biedt een verscheidenheid aan vooraf gebouwde animaties, inclusief een ticker animatie die we uitgebreid gebruiken op onze website om ons werk te laten zien. Je kunt de component instellen en deze in deze widget embedden. Het stelt je in staat om verschillende configuraties te definiëren zoals snelheid, richting, padding en meer, waardoor je flexibiliteit en controle hebt over hoe de animatie zich op je site gedraagt.

Een andere nuttige functie in Framer is de mogelijkheid om scrollanimaties aan te bieden. Je kunt bijvoorbeeld specificeren hoe items verschijnen terwijl ze in zicht komen tijdens scrollen. Het instellen van je scrollanimatie stelt je in staat om de timing en stijl van hoe elementen worden weergegeven te controleren, waardoor de gebruikerservaring en betrokkenheid bij je inhoud worden verbeterd.

Snel Publiceren#

Een van mijn belangrijkste vereisten is de mogelijkheid om:

1. Snel meerdere landingspagina's te ontwerpen voor SEO-optimalisatie en marketingcampagnes. Snelheid is een must.
2. Frequent zelf inhoud bij te werken. Je productlandingspagina weerspiegelt de laatste ontwikkelingen en je huidige productpositionering. Verouderde inhoud betekent gemiste marktkansen en niet actueel blijven met de behoeften van je klanten.

In mijn vorige workflow, elke keer dat ik inhoud moest bijwerken, moest ik ofwel een ingenieur vragen om het te doen of zelf een pull-aanvraag indienen. Ons engineeringteam volgt een strikt proces om de codekwaliteit te waarborgen, wat tijdrovend kan zijn en mijn vermogen beperkt om snel wijzigingen aan te brengen.

Framer heeft dit probleem voor mij opgelost. Nu, elke keer dat ik een verandering aanbreng en op publiceren klik, wordt het onmiddellijk live in productie weergegeven. Deze mogelijkheid heeft het proces aanzienlijk vergemakkelijkt, waardoor snelle updates en een grotere autonomie in het beheren van inhoud mogelijk zijn.

Techniek#

Aangezien Framer het host, is er geen behoefte aan enige implementatie of technisch werk van onze kant. Onze ingenieurs hadden slechts ongeveer 10 minuten nodig om het te integreren met de rest van onze website.

Onze huidige website bestaat uit 20-30 pagina's; sommige zijn ontwikkeld met behulp van Framer, terwijl andere zijn gecreëerd via traditionele softwareontwikkelingsmethoden. We zijn bezig met het selecteren van de beste tools om onze pagina's te onderhouden. Bijvoorbeeld, voor ontwikkelaarsdocumentatie, wat uitdagend is om met Framer te beheren, is het gebruiken van een ontwikkelaarvriendelijk documentatiekader om je inhoud te hosten de optimale keuze. In de toekomst zullen we onze behoeften evalueren en beslissen of we doorgaan met eigen hosting of volledig overstappen naar Framer.

Hoe het onze workflow veranderde#

We hebben onze workflow compleet getransformeerd, waardoor de productie van marketingsites volledig moeiteloos is geworden. Het is betrouwbaar, onderhoudbaar en zeer efficiënt.

Ik schreef deze blog om best practices te delen. Als je ervaring hebt met Framer en het ontwerpen van prachtige websites, hoor ik graag van je. Laten we praten en van elkaar leren.

Nu is het tijd om ons product te bekijken! Bezoek ons op logto.io.