Redisseny del tema: aquí es mostra la quantitat i el cost

Redisseny de ThemeIsle


Odio ser un trencaclosques, però no sóc fan dels redissenys. Em fa molta il·lusió darrere de canviar les coses i refrescar el vostre lloc cada dos anys i entenc per què tantes persones els agrada passar per si mateix, però no sóc jo.

La meva mentalitat sempre ha estat que el disseny ha de ser "prou bo," i que no és una diferència en el gran esquema de coses.

Però amb això dit, ThemeIsle tenia molt de temps per canviar-se. Fins i tot vaig poder veure que les coses ja no estaven preparades per al 2019. Així, quan es va prendre la decisió de sacsejar les coses, em vaig assegurar de documentar el procés per poder aprendre el màxim possible de la transició.

Ara que el S’ha llançat el nou disseny de ThemeIsle repassem el disseny anterior, les decisions preses, els objectius marcats per al nou disseny i com es va desenvolupar tot.

Dreceres:

  • �� Pensaments sobre el disseny antic
  • �� El nou disseny entra
  • �� Nova estructura del lloc web
  • �� Millors pàgines de destinació i mòbils

Disseny antic de ThemeIsle i els seus problemes ��

1. Els problemes del disseny en si

Sincerament, mai no vaig veure el disseny original de ThemeIsle com a dolent. Vull dir, sabia que no era genial (al cap i a la fi, tinc els ulls), però no pensava que fos un problema que pugui afectar la nostra marca o afectar negativament les vendes.

A més, ha passat un temps des que es va llançar el lloc i, durant els primers dies, el disseny era bastant igualat amb el que hi havia més.

Tot i això, amb els anys, hem començat a fer moltes proves A / B, altres anomenades millores, diversos retocs de SEO, etc., i com que no hi havia cap punt de referència de disseny ni control sobre tot, el lloc ha perdut la seva coherència. Per exemple, teníem aquesta pàgina normal pel nostre tema de ShopIsle, i aquesta bastant personalitzada per a RokoPhoto:

shopisle vs rokophoto

Al final del dia, com que vendre als dissenyadors és un àmbit en el qual volem ampliar, m’he adonat que un disseny més polit pot potenciar una mica la nostra marca i generar més brunzits..

Aquesta va ser la meva principal raó per revisar el lloc.

2. Estructura del lloc web i model de negoci

Aquesta va ser una de les coses que més em va molestar. Quan vam començar i crear el lloc web per primera vegada, es volia que fos un club temàtic. Teníem 10-20 temes i volíem vendre-los com a paquet. Bastant senzill.

En aquell moment també teníem un fòrum de suport i, després de llançar el lloc principal, ens vam trobar amb un complement que necessitava una casa nova. Va ser un bon negoci, així que el vam portar a bord i ho vam llençar a l’oferta principal. No tenia gaire sentit tenir-lo com a part del paquet de temes, però era el millor que vam pensar en aquell moment. ��‍♂️

En els últims cinc anys, el mercat ha canviat i hem entès que ja no volem haver de construir i mantenir 20 temes diferents. Tampoc és el que ningú espera. Ens trobem a l’època de "temes emblemàtics" – on una botiga ofereix un tema principal o només un parell d’ells i, a continuació, actualitzacions addicionals o paquets de disseny.

També hem decidit seguir un camí similar i treballar només en dos o tres temes; el mateix per als nostres complements.

També hem sabut que les marques de productes individuals són més potents i tenen més potencial que "marques principals de llocs," de manera que té més sentit subratllar-los. Penseu en el tema X contra ells.

Un altre element que contribueix és el Bloc de ThemeIsle. Ha crescut molt durant els últims cinc anys i ens ha permès assegurar una posició de mercat que no pensàvem possible quan vam començar.

3. El nostre deute tècnic

Aquí parlem de dues coses:

a) Velocitat del lloc web

El lloc antic tenia un munt de coses i tecnologies heretades al seu lloc. Vam començar venent els nostres productes directament a través del lloc, mitjançant el nostre sistema creat a mà.

Hi va haver moltes iteracions del motor del lloc, que van donar lloc a innombrables diferents camps ACF que van ser difícils de gestionar al llarg del temps. També vam organitzar un fòrum, vam allotjar un programa d’afiliació, vam allotjar els documents, i probablement moltes altres coses.

En general, l’estructura no era gaire eficaç, cosa que va comportar un rendiment bastant deficient.

Com a nota lateral, ja hem passat a FastSpring i ja no gestionem les vendes pel nostre compte. Si bé ens vam desfer d’alguns dels altres sistemes de manera semblant, molta part continuava.

b) Estructura del carretó de la compra

A causa de la naturalesa del negoci, amb diversos productes i amb marques individuals que poden créixer més que la marca de l’empresa matriu, m’he adonat que ha arribat el moment de dividir la configuració tècnica real de com funcionen les coses..

Concretament, és millor separar les dades dels clients de la part frontal (els llistats de temes, també els autors i el seu contingut, a més de tots els esforços de màrqueting). D’aquesta manera, la velocitat del lloc frontal no es veurà afectada per plugins com EDD o qualsevol altra cosa que passi en segon pla per fer que el negoci funcioni.

L’equip de màrqueting també obtindria més control sobre el lloc i podríem establir llocs / marques separades per als productes mantenint una àrea de client unificada a store.themeisle.com.

4. Pàgines de destinació i mòbil

Quan vam llançar el lloc original, el mòbil no era realment una cosa. Concretament al nostre nínxol, on gairebé ningú comprava temes mentre estava al seu telèfon. Encara ara, encara tenim molt pocs clients mòbils.

Tot i això, el mòbil ha augmentat en importància, però és probable que la tendència continuï. Al cap i a la fi, Google ara utilitza el seu rastrejador de mòbils a l’escriptori.

Resumint, hem decidit crear pàgines de destinació personalitzades per als nostres millors productes i treballar per millorar les conversions sobre ells. Aquí és vital el mòbil, ja que ens proposem no només fer les pàgines mòbils sinó també compatibles amb AMP.

En el nou disseny de ThemeIsle

Està bé, així que amb l’escenari i el meu raonament explicat, anem a veure com es va jugar tot.

1. Disseny i estètica

Això ho podeu jutjar per vosaltres mateixos, però per a mi, aquest ha estat un èxit absolut!

Aquí teniu el disseny antic:

Disseny antic de ThemeIsle

I aquí teniu el nou:

Nou disseny de ThemeIsle

El lloc web sembla molt més consistent i agradable per a la vista. John Fraskos de AnalogWP dissenyat el disseny. João Santos, que sol treballar per a còmics per nosaltres, va crear algunes il·lustracions personalitzades. I finalment, Catalin Vasile, el dissenyador original de ThemeIsle, va treballar en el nou logotip.

Aquesta sola part probablement va acabar costant al voltant de 10.000 a 15.000 dòlars. Tot i que el disseny en si és gairebé impossible de fer un seguiment del ROI, crec que val la pena invertir. Francament, tenint en compte que ens va costar cinc anys abans de decidir redissenyar el lloc, el cost només representa menys del 0,5% dels ingressos. De manera que, si això comporta cap avantatge, farà que el projecte valgui la pena!

2. Nova estructura del lloc web

Introduir una nova estructura ha augmentat una mica la complexitat, però també ha suposat augmentar el trànsit dels nostres productes més importants, cosa que sempre és bo. Al revés, el trànsit a les nostres categories temàtiques ha baixat. Però està bé.

El principal és que no volem que sigui ThemeIsle "lloc temes," però per ser conegut com el "creadors de Neve i Hestia."

Per aconseguir-ho, hem decidit incloure aquells productes a la pàgina principal, a la pàgina de temes i eliminar totalment la pàgina de preus genèrica (no tenia sentit). També hem proposat crear logotips individuals per a productes i, a continuació, pàgines de destinació originals dels millors productes (amb marca pròpia i tot). A més, vam fer uns quants retocs aquí i allà per remarcar les marques individuals.

hestia abans i després

3. Deute tècnic resolt

Un cop més, dues coses:

a) Velocitat del lloc web

Els nostres temps de càrrega són un 50% més ràpids ara. Però vam tenir problemes en el procés.

En un esforç per obligar-nos tant a utilitzar els nostres propis productes com a utilitzar el nou editor de blocs (que el nostre desenvolupador no coneixia), hem confeccionat completament l’experiència de creació de llocs web..

Gutenberg encara no hi és o, com a mínim, la manera en què l’hem utilitzat no ajuda. Encara no és la millor opció per a les pàgines de destinació i, si voleu rapidesa, millor confiar en alguna cosa com ACF amb estructures construïdes a mà. Si preferiu la flexibilitat per sobre de tot, podeu anar amb Beaver Builder o Elementor, com hem fet per a la pàgina principal.

Quan es tracta de crear llocs web amb un rendiment al cap, la tasca no és fàcil. Realment no pots dependre de plugins per resoldre tots els problemes, i hauràs de fer molt pel teu compte. Aquí teniu un comentari de Cosmin Serbanescu, el desenvolupador principal del projecte de redisseny:

cosmin

Ha estat un veritable plaer treballar en el redisseny del lloc web de ThemeIsle i, sens dubte, és un dels projectes més complexos i desafiants en els quals he treballat.

Probablement la part més complicada va ser que, a causa del plantejament orientat a la velocitat que teníem des del principi, vaig haver de pensar almenys dues vegades abans d’implementar una funció o una secció de lloc web, sense cap complement ni biblioteques innecessàries i mantenir el codi tan net com possible.

b) Nova estructura del carretó de la compra

Aquesta part va resultar bastant bona, ja que ara ho tenim tot configurat a store.themeisle.com.

Per descomptat, com és habitual amb aquestes coses, hem pogut afrontar alguns problemes el dia del llançament, però aconseguim esbrinar-ho just a temps.

En aquesta configuració, com he esmentat anteriorment, totes les dades del client / usuari s’emmagatzemen en una instància separada del front-end, que inclou les llistes de temes, el bloc, les pàgines de màrqueting..

4. Millor pàgina de destinació i mòbil

Com a part del disseny, hem creat noves pàgines de destinació per a tots els nostres productes clau Neve, Hestia, ShopIsle, Zelle, Agradable, Visualitzador, i WP Product Review.

De tots ells, la pàgina de destinació d’Hestia –que dediquem la major part dels nostres esforços– sembla obtenir els millors resultats. Actualment experimenta un percentatge de conversió ~ 10% millors. Ara estem analitzant les dades que valen aproximadament un mes, i això em fa optimista.

hestia nou

En conjunt, per a tot el lloc, sembla que hem perdut vendes. Però hi ha hagut tants canvis, inclosos desfer-se de més de 10 productes (que van aportar un nombre reduït de vendes) que és difícil atribuir res al disseny en si.

Tot això relacionat amb un altre objectiu que m’he establert per a aquest any. Tot i que només guardem el 90% dels ingressos previs a canvis, però alhora gestionem un negoci més senzill del 50%, valdrà la pena. Per un negoci més senzill, vull dir menys productes, que es tradueix en menys pàgines per gestionar, menys coses per documentar i suportar i, per tant, més temps per treballar per millorar els productes existents.

L’optimització del nou lloc per a mòbils va resultar excel·lent, però no va superar el problema al 100%. L’elecció de Gutenberg com a base sobre la qual vam crear les noves pàgines no va ser fàcil i no va augmentar gaire el nostre rendiment mòbil al final..

No hem aconseguit posar la implementació per sota de la marca de 50 KB per a les pàgines de destinació de productes, de manera que no hem pogut servir-les en AMP (hi ha una restricció sobre el nivell de CSS per AMP). Però tenim AMP a les pàgines de categories.

En general, assegurar-se que el disseny pot funcionar amb Gutenberg, Elementor i altres constructors va ser un tracte dur. I no només es vol assegurar-se que els constructors poden produir la seva estructura, sinó també que s’assegura que el resultat a la pantalla és el que esperaves. Al cap i a la fi, volem modificar les pàgines més endavant i no hem de refer les coses a nivell de codi per fer-ho possible. És per això que el disseny ha de treballar amb constructors.

Aquí és el que va dir el dissenyador principal, John Fraskos sobre aquest repte:

fraskos

El major repte va ser crear un disseny consistent i escalable que seria "constructor-agnòstic" ja que parts del projecte s’executen utilitzant diferents tecnologies del creador de disseny. Hem aconseguit restringir i mantenir un llenguatge visual de base per a tots els components, que seria fàcil de replicar amb qualsevol creador de disseny, proporcionant-nos una tranquil·litat de salut futura..

Les pàgines són molt més fàcils de navegar per mòbil ara, i això no és per casualitat. Fem un gran esforç a l’hora de dissenyar l’experiència per a mòbils i pensar en què és important per als visitants mòbils i els visitants d’escriptori. Vés endavant, consulta algunes de les nostres pàgines de productes al mòbil i a l’escriptori i vegeu quines són les diferències (aquest, per exemple).

Tota la implementació, juntament amb el treball de màrqueting al voltant de còpies i textos, pàgines de destinació i altres campanyes van trigar força temps; Per ser exactes, 1.500 hores de treball. Ens vam convertir en un dels objectius de fer un seguiment de temps seriós i fer un balanç de cada minut dedicat al projecte.

Si el multipliqueu per la tarifa horària que vulgueu calcular, això probablement ens situarà entre 50.000 i 100.000 dòlars. O, dit d’una altra manera, si volguéssim construir un lloc similar per a un tercer, hauríem de cobrar més de 100 milions de dòlars per fer-lo rendible.

El principal repte per a nosaltres en general va ser el fet que es tractés d’un projecte únic i únic. El que vull dir és que no solem construir llocs de comerç electrònic, de manera que no tenim els processos en marxa i l’equip i les seves habilitats no estan estructurades per a projectes de creació de llocs web..

Vam lluitar per organitzar la nostra feina, i no ho vam saber dirigir ni estructurar tot. Tampoc disposàvem (encara no ho fem) d’un equip dedicat que s’encarregués de gestionar tots els projectes i llocs de front. La creació de temes i complements per als usuaris és només una cosa diferent. En última instància, gràcies a John Fraskos, que ens va guiar pel camí correcte, ens vam decidir a utilitzar Sketch per a disseny d’UI, Invision per a la col·laboració i feedback de disseny i Slack per a discussions quotidianes. I vam passar per moltes iteracions, de manera que cadascuna d’aquestes eines era necessàriament necessària.

iteracions de disseny

Per tant, la pregunta principal seria; Considero que el projecte és un èxit?

Depèn.

No veiem un impuls de vendes a curt termini derivat del redisseny. Encara tenim problemes amb l’experiència d’edició i per ajustar el lloc. El projecte també s’hauria pogut executar amb més suavitat. Tot i això, al final del dia, encara no veig una inversió millor que ens permeti oferir resultats a llarg termini.

L’any que ve s’explicarà si el projecte és un èxit o no. Tinc curiositat en veure com es desenvolupen les coses.

També, juntament amb la Neve Pro llançament i el nostre patrocini de l’OMCE, això marca el començament d’una nova era per a nosaltres. Una era d’intentar convertir-se en un negoci més establert i només una botiga amb alguns temes.

Jo tampoc no era l’únic que va publicar l’espectacle aquí. Va ser un bon esforç en equip i un important canvi en la nostra direcció empresarial: acostar-nos al client i resonar més amb les seves necessitats centrant-nos en productes de menys qualitat.

Gràcies de nou a tots els que heu participat en aquest redisseny!

No oblideu anar i fer un cop d’ull el nou ThemeIsle!

No oblideu unir-se al nostre curs d’accidents per agilitzar el vostre lloc de WordPress. Amb algunes solucions senzilles, podeu reduir fins i tot un 50-80% del temps de càrrega:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map