Riprogettazione di ThemeIsle: ecco come è andata e quanto costa

Riprogettazione di ThemeIsle: ecco come è andata e quanto costa

Riprogettazione di ThemeIsle: ecco come è andata e quanto costa
СОДЕРЖАНИЕ
02 июня 2020

Riprogettazione di ThemeIsle


Odio essere un brivido, ma non sono un fan delle riprogettazioni. Ricevo l’entusiasmo per cambiare le cose e aggiornare il tuo sito ogni due anni e capisco perché così tante persone adorano superarlo, ma non sono solo io.

La mia mentalità è sempre stata quella del design "abbastanza buono," e che è qualcosa che non farà una grande differenza nel grande schema delle cose.

Ma detto questo, ThemeIsle era atteso da tempo per un cambiamento. Anche io ho potuto vedere che le cose non erano più pronte per il 2019. Quindi, quando è stata presa la decisione di scuotere le cose, mi sono assicurato di documentare il processo in modo da poter imparare il più possibile dalla transizione.

Ora che il è stato lanciato il nuovo design di ThemeIsle diamo un’occhiata al design precedente, alle decisioni prese, agli obiettivi fissati per il nuovo design e a come tutto è andato a buon fine.

Tasti di scelta rapida:

  • �� Riflessioni sul vecchio design
  • �� Il nuovo design arriva
  • �� Nuova struttura del sito Web
  • �� Pagine di destinazione e dispositivi mobili migliori

Il vecchio design di ThemeIsle e i suoi problemi ��

1. I problemi del design stesso

Onestamente, non ho mai visto il design originale di ThemeIsle così male. Voglio dire, sapevo che non era eccezionale (ho gli occhi, dopo tutto), ma non pensavo che fosse un problema che può influenzare il nostro marchio o influire negativamente sulle vendite.

Inoltre, è passato un po ‘di tempo dal lancio del sito e, all’inizio, il design era abbastanza alla pari con cos’altro era là fuori.

Tuttavia, nel corso degli anni, abbiamo iniziato a fare molti test A / B, altri cosiddetti miglioramenti, varie modifiche SEO, ecc., E poiché non vi era alcun benchmark di progettazione o controllo leader sopra tutto, il sito ha perso la sua coerenza. Ad esempio, avevamo questa pagina normale per il nostro tema ShopIsle e questa abbastanza personalizzata per RokoPhoto:

shopisle vs rokophoto

Alla fine della giornata, poiché la vendita ai designer è un’area in cui vogliamo espanderci, mi sono reso conto che un design più raffinato potrebbe aumentare un po ‘il nostro marchio e generare più buzz.

Questa è stata la mia ragione principale alla base della revisione del sito.

2. La struttura del sito Web e il modello aziendale

Questa è stata una delle cose che mi ha infastidito di più. Quando abbiamo iniziato e creato il sito Web, doveva essere un club tematico. Avevamo 10-20 temi e volevamo venderli come pacchetto. Abbastanza semplice.

All’epoca avevamo anche un forum di supporto e, dopo aver lanciato il sito principale, ci siamo imbattuti in un plugin che aveva bisogno di una nuova casa. È stato un buon affare, quindi l’abbiamo portato a bordo e l’abbiamo lanciato anche nell’offerta principale. Non aveva molto senso averlo lì come parte del pacchetto di temi, ma era il meglio che pensavamo di poter fare in quel momento. ��♂️

Negli ultimi cinque anni, il mercato è cambiato e abbiamo capito che non vogliamo più costruire e mantenere 20 temi diversi. Inoltre, non è quello che nessuno si aspetta. Siamo nell’era di "temi di punta" – in cui un negozio offre un tema principale o solo un paio di essi e quindi ulteriori aggiornamenti o pacchetti di progettazione.

Abbiamo deciso di seguire anche un percorso simile e di lavorare solo su due o tre temi; lo stesso per i nostri plugin.

Abbiamo anche appreso che i singoli marchi di prodotti sono più potenti e hanno un potenziale maggiore di "marchi del sito principale," quindi ha più senso sottolineare quelli. Pensa al tema X vs Themeco.

Un altro elemento che contribuisce è il Blog di ThemeIsle. È cresciuto molto negli ultimi cinque anni e ci ha permesso di garantire una posizione di mercato che non pensavamo fosse possibile quando abbiamo iniziato.

3. Il nostro debito tecnico

Due cose di cui voglio parlare qui:

a) Velocità del sito Web

Il vecchio sito aveva un sacco di roba e tecnologie legacy in atto. Abbiamo iniziato vendendo i nostri prodotti direttamente tramite il sito, utilizzando il nostro sistema costruito a mano.

Ci sono state molte iterazioni del motore del sito, che hanno provocato innumerevoli campi ACF diversi che sono diventati difficili da gestire nel tempo. Abbiamo anche gestito un forum, ospitato un programma di affiliazione, ospitato i documenti e probabilmente una serie di altre cose.

Nel complesso, la struttura non era molto efficiente, il che ha comportato prestazioni piuttosto scarse.

Come nota a margine, da allora siamo passati a FastSpring e non gestiamo più le vendite da soli. Mentre ci siamo sbarazzati di alcuni altri sistemi in modo simile, molti erano ancora lì.

b) Struttura del carrello

A causa della natura del business – con più prodotti e con singoli marchi che possono crescere più del marchio della casa madre, mi sono reso conto che è tempo di dividere la configurazione tecnica effettiva di come stanno le cose.

In particolare, è meglio separare i dati dei clienti dalla parte del front-end (gli elenchi dei temi e anche gli autori e i loro contenuti oltre a tutte le iniziative di marketing). In questo modo, la velocità del sito principale non sarà influenzata da plugin come EDD o qualsiasi altra cosa che sta succedendo in background per far funzionare il business.

Il team di marketing otterrebbe anche un maggiore controllo sul sito e saremmo in grado di stabilire siti / marchi separati per i prodotti mantenendo un’area cliente unificata su store.themeisle.com.

4. Pagine di destinazione e dispositivi mobili

Quando abbiamo lanciato il sito originale, i dispositivi mobili non erano davvero una cosa. In particolare nella nostra nicchia, dove quasi nessuno comprava temi mentre era al telefono. Anche in questo momento, abbiamo ancora pochissimi clienti mobili.

Tuttavia, i dispositivi mobili sono diventati sempre più importanti e la tendenza dovrebbe continuare. Dopotutto, Google ora utilizza il suo crawler mobile su quello desktop.

Per farla breve, abbiamo deciso di creare landing page personalizzate per i nostri migliori prodotti e lavorare per migliorare le conversioni su di essi. I dispositivi mobili sono di vitale importanza in quanto abbiamo deciso di rendere non solo le pagine ottimizzate per i dispositivi mobili ma anche compatibili con AMP.

Arriva il nuovo design di ThemeIsle ��

Ok, quindi con il set sul palco e il mio ragionamento spiegato, ora vediamo come è andato tutto.

1. Design ed estetica

Questo lo puoi giudicare da solo, ma per me è stato un successo assoluto!

Ecco il vecchio design:

Tema vecchio design

Ed ecco il nuovo:

Tema nuovo design

Il sito web sembra molto più coerente e piacevole alla vista. John Fraskos di AnalogWP realizzato il design. João Santos, che di solito lavora al fumetto per noi, ha creato alcune illustrazioni personalizzate. E infine, Catalile Vasile, il designer originale di ThemeIsle, ha lavorato al nuovo logo.

Questa parte da sola probabilmente è costata circa $ 10.000 – $ 15.000. Mentre il design stesso è qualcosa di quasi impossibile da tenere traccia del ROI, credo che valga la pena investire. Francamente, considerato che ci sono voluti cinque anni prima di decidere di ridisegnare il sito, il costo rappresenta solo meno dello 0,5% dei ricavi. Quindi, se questo comporta qualche vantaggio, renderà il progetto facilmente degno!

2. Nuova struttura del sito Web

L’introduzione di una nuova struttura ha aumentato un po ‘la complessità, ma ha anche comportato un aumento del traffico verso i nostri migliori prodotti, il che è sempre una buona cosa. Sul lato negativo, il traffico verso le nostre categorie di temi è diminuito. Ma è ok.

La cosa principale qui è che non vogliamo che ThemeIsle sia un "posto temi," ma essere conosciuto come il "creatori di Neve e Hestia."

Per raggiungere questo obiettivo, abbiamo deciso di includere tali prodotti nella home page, nella pagina dei temi e di rimuovere completamente la pagina dei prezzi generici (non aveva senso). Abbiamo anche deciso di creare loghi individuali per i prodotti e quindi pagine di destinazione originali per i migliori prodotti (con il proprio marchio e tutti). Inoltre, abbiamo apportato alcune modifiche qua e là per enfatizzare i singoli marchi.

Estia prima e dopo

3. Debito tecnico risolto

Ancora una volta, due cose:

a) Velocità del sito Web

I nostri tempi di caricamento sono ora più rapidi del 50%. Ma abbiamo avuto qualche problema nel processo.

Nel tentativo di obbligarci sia a utilizzare i nostri prodotti sia a utilizzare il nuovo editor di blocchi (che il nostro sviluppatore non conosceva), abbiamo incasinato completamente l’esperienza di costruzione del sito Web.

Gutenberg non c’è ancora, o almeno il modo in cui l’abbiamo usato non aiuta. Non è ancora la scelta migliore per le landing page e, se vuoi la velocità, fai affidamento su qualcosa come ACF con strutture costruite a mano. Se preferisci la flessibilità sopra ogni altra cosa, puoi scegliere Beaver Builder o Elementor, come abbiamo fatto per la homepage.

Quando si tratta di costruire siti Web tenendo conto delle prestazioni, l’attività non è ancora facile. Non puoi davvero dipendere dai plugin per risolvere tutti i problemi per te e devi fare molto da solo. Ecco un commento di Cosmin Serbanescu, lo sviluppatore principale del progetto di riprogettazione:

Cosmin

È stato un vero piacere lavorare sulla riprogettazione del sito web di ThemeIsle ed è sicuramente uno dei progetti più complessi e stimolanti su cui abbia mai lavorato.

Probabilmente la parte più difficile è stata che, a causa dell’approccio orientato alla velocità che abbiamo avuto fin dall’inizio, ho dovuto pensare almeno due volte prima di implementare una funzione o una sezione del sito Web, senza plug-in di terze parti o librerie non necessarie e mantenendo il codice pulito come possibile.

b) Nuova struttura del carrello

Questa parte è andata abbastanza bene, dato che ora abbiamo tutto impostato su store.themeisle.com.

Naturalmente, come al solito con queste cose, abbiamo avuto dei problemi il giorno del lancio, ma siamo riusciti a capirlo appena in tempo.

In questa configurazione, come ho accennato in precedenza, tutti i dati dei clienti / utenti vengono archiviati in un’istanza separata dal front-end, che contiene elenchi di temi, blog, pagine di marketing.

4. Pagine di destinazione e dispositivi mobili migliori

Come parte della riprogettazione, abbiamo creato nuove landing page per tutti i nostri prodotti chiave come neve, Hestia, ShopIsle, Zelle, Feedzy, Visualizzatore, e Revisione del prodotto WP.

Di tutti, la landing page di Hestia – dove abbiamo dedicato gran parte dei nostri sforzi – sembra ottenere i migliori risultati. Attualmente si verificano tassi di conversione migliori del 10%. Al momento stiamo esaminando circa un mese di dati, il che mi rende ottimista.

Estia nuova

Nel complesso, per l’intero sito, sembra che abbiamo perso le vendite. Ma ci sono stati così tanti cambiamenti, incluso sbarazzarsi di oltre 10 prodotti (che hanno contribuito con un piccolo numero di vendite) che è difficile attribuire qualcosa al design stesso.

Ciò riguarda un altro obiettivo che ho fissato per quest’anno. Anche se manteniamo solo il 90% delle entrate pre-modifiche ma allo stesso tempo riusciremo a gestire un business più semplice del 50%, ne varrà la pena. Per business più semplice intendo meno prodotti, che si traducono in meno pagine da gestire, meno cose da documentare e supportare e quindi più tempo per lavorare per migliorare i prodotti esistenti.

L’ottimizzazione del nuovo sito per dispositivi mobili è andata nel complesso alla grande, ma non al 100% senza problemi. Scegliere Gutenberg come base su cui abbiamo costruito le nuove pagine non è stato facile e alla fine non ha migliorato molto le nostre prestazioni mobili.

Non siamo riusciti a ottenere l’implementazione al di sotto del segno di 50 KB per le pagine di destinazione dei prodotti, quindi non siamo stati in grado di servirli in AMP (c’è una limitazione su quanto può essere grande il CSS per AMP). Abbiamo AMP nelle pagine delle categorie, però.

Nel complesso, assicurarsi che il design potesse funzionare con Gutenberg, Elementor e altri costruttori è stato un affare difficile. E non si tratta semplicemente di assicurarsi che quei costruttori possano produrre la loro struttura, ma anche di assicurarsi che il risultato sullo schermo sia quello che ti aspetteresti. Dopotutto, vogliamo essere in grado di modificare le pagine in un secondo momento e non dover rifare le cose a livello di codice per renderlo possibile. Questo è il motivo per cui il design deve lavorare con i costruttori.

Ecco cosa ha detto il capo designer, John Fraskos, in merito a questa sfida:

fraskos

La sfida più grande era quella di creare un design coerente e scalabile "builder-agnostic" poiché parti del progetto vengono eseguite utilizzando diverse tecnologie di layout builder. Siamo riusciti a restringere e mantenere un linguaggio visivo di base per tutti i componenti, che sarebbe facile replicare con qualsiasi costruttore di layout, dandoci una tranquillità a prova di futuro.

Le pagine sono molto più facili da navigare sui dispositivi mobili ora, e questo non è un caso. Ci siamo impegnati molto nel progettare l’esperienza mobile e nel pensare a ciò che è importante per i visitatori mobili rispetto ai visitatori desktop. Vai avanti, controlla alcune delle pagine dei nostri prodotti su dispositivi mobili e desktop e scopri cosa c’è di diverso (questo, per esempio).

L’intera implementazione, insieme al lavoro di marketing su copie e testi, landing page e altre campagne ha richiesto un bel po ‘di tempo; 1.500 ore lavorative, per l’esattezza. Lo abbiamo reso uno degli obiettivi per fare un po ‘di monitoraggio del tempo serio e fare il punto su ogni minuto trascorso nel progetto.

Se lo moltiplichi per la tariffa oraria che desideri calcolare, questo ci porta probabilmente nell’intervallo tra $ 50.000 e $ 100.000. O, in altre parole, se volessimo costruire un sito simile per una terza parte, dovremmo addebitare più di $ 100k per renderlo redditizio.

La sfida più grande per noi nel complesso è stata il fatto che si trattava di un progetto unico e unico. Quello che voglio dire è che di solito non costruiamo siti di e-commerce, quindi non abbiamo i processi in atto e il team e le loro competenze non sono strutturati per progetti di costruzione di siti Web.

Abbiamo faticato ad organizzare il nostro lavoro e non sapevamo come guidare o strutturare tutto. Inoltre non avevamo (ancora non abbiamo) un team dedicato che gestisse tutti i progetti e i siti frontali. La creazione di temi e plug-in per gli utenti è solo una cosa completamente diversa. Alla fine, grazie a John Fraskos, che ci ha guidato sulla strada giusta, abbiamo deciso di utilizzare Sketch for UI design, Invision per la collaborazione e il feedback sul design e Slack per le discussioni quotidiane. E abbiamo attraversato molte iterazioni, quindi ognuno di questi strumenti era certamente necessario.

iterazioni di progettazione

Quindi, la domanda principale sarebbe probabilmente; considero il progetto un successo?

Dipende.

Non stiamo assistendo ad alcun aumento a breve termine delle vendite derivante dalla riprogettazione. Abbiamo ancora dei problemi con l’esperienza di modifica e la modifica del sito. Il progetto avrebbe potuto anche essere svolto più agevolmente. Tuttavia, alla fine della giornata, non riesco ancora a vedere un investimento migliore che ci consentirebbe di ottenere risultati a lungo termine.

Il prossimo anno dirà se il progetto ha successo o no. Sono curioso di vedere come vanno le cose.

Inoltre, insieme al Lancio di Neve Pro e la nostra sponsorizzazione WCEU, questo segna l’inizio di una sorta di nuova era per noi. Un’era in cui si cercava di diventare un’azienda più affermata rispetto a un negozio con alcuni temi.

Inoltre, non ero l’unico a gestire lo spettacolo qui. È stato un buon lavoro di squadra e un grande cambiamento nella nostra direzione aziendale: avvicinarsi al cliente e risuonare di più con le proprie esigenze concentrandosi su un minor numero di prodotti di qualità superiore.

Grazie ancora a tutti coloro che hanno preso parte a questa riprogettazione!

Non dimenticare di andare a dare un’occhiata il nuovo ThemeIsle!

Non dimenticare di partecipare al nostro corso intensivo per accelerare il tuo sito WordPress. Con alcune semplici correzioni, puoi ridurre i tempi di caricamento anche del 50-80%:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector