Progettare e implementare il sito di marketing della nostra azienda: Il mio percorso dal contenuto all'implementazione

Se sei un utente Logto, potresti aver notato che il sito web della nostra azienda è stato recentemente rinnovato. Se non lo sei, dai un'occhiata al sito web, logto.io, e prova a indovinare quante risorse abbiamo investito per farlo accadere.

Potresti pensare, state per autoproclamarvi che ci vuole molto lavoro, impegno e un attento design solo per mostrare la vostra eccellenza nell'esecuzione?

No!

Al contrario, vogliamo mostrare come utilizziamo in modo intelligente strumenti e metodi per migliorare la qualità del nostro prodotto e fornire i migliori prodotti e servizi ai nostri utenti.

Abbiamo ricevuto alcuni feedback positivi dalla nostra comunità e ci chiediamo come abbiamo fatto. Questo round di aggiornamenti è diverso perché abbiamo completamente reinventato un nuovo flusso di lavoro in un ambiente in rapida evoluzione. Vorremmo presentare le nostre migliori pratiche e dare un'occhiata più da vicino alla nostra cultura di lavoro di squadra e collaborazione.

Il contesto#

Siamo una squadra tecnologica focalizzata sulla fornitura di una vasta gamma di servizi di sviluppo legati all'identità dei clienti e lavori di infrastruttura. La pressione per consegnare è significativa. Nel frattempo, dobbiamo supportare varie attività di storytelling e operative, come la costruzione di siti web di marketing con marchio, la scrittura di blog, la promozione dei nostri progetti e l'interazione con i nostri utenti.

Un sito di atterraggio convincente è cruciale poiché spesso forma la prima impressione che il pubblico ha del tuo prodotto, aiutandoli a comprendere i problemi che il tuo prodotto mira a risolvere, inclusi i prezzi e eventuali clienti importanti per la prova sociale.

Inoltre, può soddisfare più obiettivi aziendali:

• Presenta il marchio e la proposta di valore del tuo prodotto.
• Genera lead.
• Agire come un hub di contenuti, particolarmente importante per un'azienda focalizzata sulla crescita guidata dal prodotto o dagli sviluppatori.
• Fornisci un posto per ottimizzare la SEO, acquisire utenti e monitorare il traffico regolare.

Nel mio lavoro precedente, mi sono mai occupato di un progetto web. Guardiamo cosa comporta un tipico flusso di lavoro:

1. Per prima cosa, i product marketing managers e i product managers definiscono il contenuto e i requisiti.
2. I product designers e un UX writer perfezionano il contenuto.
3. Transizioniamo il lavoro in corso, di solito una versione a bassa fedeltà, ai visual e branding designers per i ritocchi finali prima della produzione.
4. Gli ingegneri e i product managers poi iniziano l'implementazione, concentrandosi sull'animazione e il design responsivo.

Questo processo è tedioso e coinvolge molte persone e stakeholder, rendendolo inadatto a un ambiente in rapida evoluzione.

Anche se inizialmente abbiamo solo due persone a mantenere questo—a product designer e un ingegnere—i compiti di gestione delle prestazioni del web, caricamento delle immagini, garanzia del design responsivo, gestione dei formati di immagine e aggiornamento del contenuto richiedono ancora molta comunicazione avanti e indietro.

Questo flusso di lavoro è inefficiente. Penso costantemente a come liberare risorse ingegneristiche per concentrarsi sul lavoro principale del prodotto mentre io gestisco il resto.

Utilizzare strumenti per migliorare la produttività è una filosofia fondamentale del nostro team. Pertanto, ho iniziato a ricercare strumenti che possano aiutare a semplificare questi processi.

Suddividere le esigenze#

Per sviluppare un sito di marketing SaaS di successo, suddividiamo gli elementi essenziali necessari:

1. Contenuto: La base di qualsiasi sito di marketing è sapere esattamente cosa mostrare. Questo richiede una profonda comprensione dei tuoi clienti target, dei loro casi d'uso tipici e della proposta di valore del tuo prodotto. Nessuno strumento può sostituire questa comprensione. Fortunatamente, il mio coinvolgimento nel design del prodotto e nelle strategie di go-to-market significa che sono ben equipaggiato per creare contenuti che soddisfano le esigenze degli utenti.
2. Design: Il sito dovrebbe avere un appeal visivo raffinato ed elegante. Il mio background nel design UX/prodotto, sebbene non esteso come quello di un designer creativo dedicato, mi attrezza per gestire questo aspetto in modo competente.
3. Ingegneria: Le principali considerazioni tecniche includono l'hosting del sito, la garanzia di un design responsivo e l'abilitazione di micro-interazioni fluide. È anche cruciale integrare il sito in modo fluido con altri componenti, come i reindirizzamenti di collegamenti e la pagina di autenticazione del prodotto.

Avendo condotto alcune ricerche, ecco il toolkit che intendo utilizzare per gli aspetti di design:

Contenuti di Prodotto e Marketing#

ChatGPT 3.5, ChatGPT 4.0, Gemini Advanced, Jasper, o applicazioni AI simili come copilota.

Questo serve per affinare e ottimizzare i miei contenuti di marketing e messaggi. È importante essere chiari sull'obiettivo e l'intenzione dietro di essi. L'AI è solo un copilota, non un decisore. Prima di scrivere qualsiasi messaggio di marketing, mi pongo alcune domande:

1. Chi leggerà il messaggio?
2. Hanno bisogno di un contesto extra?
3. Qual è il punto chiave che vuoi affrontare nel messaggio?
4. Cosa ti aspetti che l'utente faccia come prossimo passo?
5. Questo messaggio è inteso per educare o per spingere una specifica azione?
6. Questo potrebbe essere fuorviante o esagerato?

Poi scrivo una bozza iniziale dei punti che voglio comunicare.

A volte l'AI può introdurre parole che sembrano stantie o distorcere la tua intenzione originale per far sembrare tutto logicamente corretto. Tuttavia, devi reimpostare la tua intenzione e rimanere fedele ai tuoi obiettivi. Devi stabilire standard per garantire che le parole trasmesse al pubblico siano chiare, semplici, concise e trasparenti. Questo è particolarmente importante nel nostro dominio di prodotti, che serve molte aziende e sviluppatori.

Design#

Figma, Framer per interazione e design visivo, così come animazione e prototipazione

Ho un background nel design, principalmente focalizzato sul design del prodotto, che implica la creazione di UI e UX. Sebbene progettare UI raffinati non sia una sfida per me, il mio lavoro non è così raffinato come quello di un professionista. Tuttavia, con alcune competenze di base nel design visivo e nelle illustrazioni, e scegliendo gli strumenti giusti, puoi migliorare la qualità del tuo lavoro. Uso Framer e Figma in questo processo creativo.

Questo è il nostro vecchio design, completamente creato con Figma

Il nostro design originale è stato creato in Figma. Ho utilizzato il plugin ufficiale di Framer, "Framer to HTML", per copiare e incollare il design di base su Framer, che ha fornito un buon punto di partenza.

Il passo successivo è progettare. Se hai utilizzato Figma in precedenza, il passaggio a Framer è un processo fluido poiché l'esperienza utente complessiva è piuttosto simile. Vorrei evidenziare alcune interazioni interessanti che migliorano significativamente la produttività.

Layout#

Gli utenti Figma apprezzano l'auto-layout perché fa risparmiare molto tempo nella disposizione e posizionamento degli elementi. Tuttavia, le funzioni di layout in Framer sono ancora più intelligenti, allineandosi maggiormente con una mentalità front-end. In Framer, puoi scegliere se usare un layout a griglia o impilato, definire le colonne, impostare una larghezza massima, e si disporrà automaticamente su un'altra riga se necessario. Questa funzionalità migliora il processo di design rispecchiando il modo in cui gli elementi si comporteranno in un ambiente web live.

Breakpoints per il design responsivo#

Affidandosi in modo intelligente all'uso dei breakpoints e delle impostazioni di larghezza (come riempi, fisso, relativo e adatta al contenuto) e definendo diversi canvas, puoi facilmente e accuratamente ottenere vari design responsivi. Questo approccio ti consente di adattare il layout a diverse dimensioni di schermo e dispositivi in modo efficiente.

Animazione#

Framer offre una varietà di animazioni predefinite, inclusa un'animazione ticker che utilizziamo ampiamente sul nostro sito web per mostrare il nostro lavoro. Puoi impostare il componente e incorporarlo all'interno di questo widget. Ti consente di definire varie configurazioni come velocità, direzione, padding e altro, dandoti flessibilità e controllo su come si comporta l'animazione sul tuo sito.

Un'altra funzionalità utile in Framer è la possibilità di personalizzare le animazioni di scorrimento. Ad esempio, puoi specificare come gli elementi appaiono man mano che entrano in vista durante lo scorrimento. Impostare la tua animazione di scorrimento ti consente di controllare il tempo e lo stile di come gli elementi vengono visualizzati, migliorando l'esperienza e l'interazione degli utenti con i tuoi contenuti.

Pubblicazione Rapida#

Una delle mie principali necessità è la capacità di:

1. Progettare rapidamente più landing pages per l'ottimizzazione SEO e le campagne di marketing. La velocità è un must.
2. Aggiornare frequentemente i contenuti da solo. La tua pagina di atterraggio del prodotto riflette gli ultimi sviluppi e il posizionamento attuale del tuo prodotto. Contenuti obsoleti significano perdere opportunità di mercato e non restare al passo con le esigenze dei tuoi clienti.

Nel mio flusso di lavoro precedente, ogni volta che dovevo aggiornare i contenuti, dovevo o chiedere a un ingegnere di farlo o inviare una pull request io stesso. Il nostro team di ingegneri segue un processo rigoroso per garantire la qualità del codice, che può essere dispendioso in termini di tempo e limita la mia capacità di apportare modifiche rapide.

Framer ha risolto questo problema per me. Ora, ogni volta che faccio una modifica e clicco pubblica, viene immediatamente riflessa live in produzione. Questa capacità ha semplificato notevolmente il processo, consentendo aggiornamenti rapidi e una maggiore autonomia nella gestione dei contenuti.

Ingegneria#

Poiché è ospitato da Framer, non c'è bisogno di alcuna implementazione o lavoro tecnico da parte nostra. Ai nostri ingegneri sono bastati circa 10 minuti per integrarlo con il resto del nostro sito web.

Il nostro sito web attuale è composto da 20-30 pagine; alcune sono sviluppate utilizzando Framer, mentre altre sono create tramite metodi di sviluppo software tradizionali. Stiamo selezionando i migliori strumenti per mantenere le nostre pagine. Ad esempio, per la documentazione degli sviluppatori, il che è difficile da gestire con Framer, utilizzare un framework di documentazione adatto agli sviluppatori per ospitare il tuo contenuto è la scelta ottimale. In futuro, valuteremo le nostre esigenze e decideremo se continuare a ospitare autonomamente o passare completamente a Framer.

Come ha cambiato il nostro flusso di lavoro#

Abbiamo completamente trasformato il nostro flusso di lavoro, rendendo la produzione di siti di marketing completamente senza sforzo. È affidabile, mantenibile e altamente efficiente.

Ho scritto questo blog per condividere le migliori pratiche. Se hai esperienze con Framer e la progettazione di siti web belli, mi piacerebbe sentirne parlare. Parliamone e impariamo l'uno dall'altro.

Ora, è giunto il momento di dare un'occhiata al nostro prodotto! Visita logto.io.