ThemeIsle Redesign: Her er hvordan det gik, og hvor meget det koste

ThemeIsle Redesign: Her er hvordan det gik, og hvor meget det koste

ThemeIsle Redesign: Her er hvordan det gik, og hvor meget det koste
СОДЕРЖАНИЕ
02 июня 2020

ThemeIsle redesign


Jeg hader at være en buzzkill, men jeg er ikke fan af redesigns. Jeg får spændingen bag at ændre ting og opdatere dit websted hvert par år, og jeg forstår, hvorfor så mange mennesker elsker at få sig selv igennem det, men det er bare ikke mig.

Min tankegang har altid været, at design skal være "godt nok," og at det er noget, der ikke vil gøre en stor forskel i den store ting af ting.

Men med det sagt var ThemeIsle længe for sent for en ændring. Selv jeg kunne se, at tingene ikke længere var klar til 2019. Så da der blev truffet beslutning om at ryste tingene, sørgede jeg for at dokumentere processen, så vi kan lære så meget som muligt af overgangen.

Nu hvor nyt ThemeIsle-design er lanceret lad os se tilbage på det forrige design, de beslutninger, der er truffet, de mål, der er sat for det nye design, og hvordan det hele spillede ud.

Genveje:

  • �� Tanker om det gamle design
  • �� Det nye design kommer ind
  • �� Ny webstedsstruktur
  • �� Bedre destinationssider og mobil

Gammelt temaIsle-design og dets problemer ��

1. Problemerne med selve designet

Helt ærligt så har jeg aldrig set ThemeIsles originale design som dårligt. Jeg mener, jeg vidste, at det ikke var godt (jeg har trods alt øjne), men jeg troede ikke, at det er et problem, der kan have indflydelse på vores brand eller have negativ indflydelse på salget.

Plus, det er et stykke tid siden webstedet blev lanceret, og i de tidlige dage var designet temmelig på niveau med hvad der ellers var derude.

I årenes løb begyndte vi dog at lave mange A / B-tests, andre såkaldte forbedringer, forskellige SEO-justeringer osv., Og da der ikke var nogen førende design benchmark eller kontrol over det hele, mistede webstedet sin konsistens. For eksempel havde vi denne normale side til vores ShopIsle-tema, og denne ret tilpassede til RokoPhoto:

shopisle vs rokophoto

I slutningen af ​​dagen, da salg til designere er et område, vi ønsker at udvide til, har jeg indset, at et mere poleret design muligvis kan øge vores brand lidt og generere mere brummer.

Det var min primære grund til at gennemgå webstedet.

2. Webstedsstrukturen og forretningsmodellen

Dette var en af ​​de ting, der generede mig mest. Da vi først startede og byggede webstedet, var det meningen, at det skulle være en temaklub. Vi havde 10-20 temaer og ville sælge dem som en pakke. Temmelig ligetil.

Vi havde også et supportforum på det tidspunkt, og efter lanceringen af ​​hovedwebstedet snuble vi over et plugin, der havde brug for et nyt hjem. Det var en god aftale, så vi bragte det om bord og kastede det ind i det vigtigste tilbud også. Det gav ikke så meget mening at have det der som en del af pakken med temaer, men det var det bedste, vi troede, vi kunne gøre på det tidspunkt. ��♂️

I de sidste fem år har markedet ændret sig, og vi har forstået, at vi ikke ønsker at skulle bygge og vedligeholde 20 forskellige temaer mere. Det er heller ikke hvad nogen forventer. Vi er i en æra af "flagskibstemaer" – hvor en butik tilbyder et hovedtema eller bare et par af dem og derefter yderligere opgraderinger eller designpakker.

Vi har besluttet at følge en lignende vej og arbejde kun på to eller tre temaer; det samme for vores plugins.

Vi har også lært, at individuelle produktmærker er mere magtfulde og har mere potentiale end "vigtigste webstedsmærker," så det giver mere mening at understrege dem. Tænk på X-temaet vs Themeco.

Et mere medvirkende element er ThemeIsle-blog. Det er vokset meget i de sidste fem år, og det har givet os mulighed for at sikre en markedsposition, som vi ikke troede var mulig, da vi først startede.

3. Vores tekniske gæld

To ting, jeg vil tale om her:

a) Webstedshastighed

Det gamle websted havde en masse arv og teknologier på plads. Vi startede med at sælge vores produkter direkte via webstedet ved hjælp af vores håndbyggede system.

Der var mange iterationer af stedets motor, hvilket resulterede i utallige forskellige ACF-felter, der blev vanskelige at styre over tid. Vi kørte også et forum, var vært for et tilknyttet program, var vært for dokumenterne og sandsynligvis en række andre ting.

Generelt var strukturen ikke særlig effektiv, hvilket resulterede i ret dårlige resultater.

Som en side-note har vi flyttet ind i FastSpring siden og håndterer ikke længere salget på egen hånd. Mens vi blev af med nogle af de andre systemer på lignende måde, var en masse af det stadig der.

b) Indkøbskurvstruktur

På grund af forretningens art – med flere produkter og med individuelle mærker, der kan vokse mere end moderselskabets brand, har jeg indset, at det er tid til at opdele den faktiske tekniske opsætning af, hvordan tingene er.

Specifikt er det bedre at adskille kundedata fra frontendelen (temalisterne og også forfatterne og deres indhold plus al markedsføringsindsats). På denne måde påvirkes hastigheden på forsiden ikke af plugins som EDD eller noget andet, der sker i baggrunden for at få virksomheden til at køre.

Marketingteamet ville også få mere kontrol over webstedet, og vi ville være i stand til at etablere separate websteder / mærker for produkterne, samtidig med at vi holder et samlet kundeområde på store.themeisle.com.

4. Landingssider og mobil

Da vi lancerede det originale websted, var mobil ikke rigtig en ting. Specielt i vores niche, hvor næsten ingen købte temaer, mens de var på deres telefon. Selv lige nu har vi stadig meget få mobilkunder.

Imidlertid er mobile ikke desto mindre vokset i betydning, og tendensen vil sandsynligvis fortsætte. Når alt kommer til alt bruger Google nu sin mobile crawler på skrivebordet.

Lang historie er kort, vi har besluttet at oprette tilpassede destinationssider til vores topprodukter og arbejde på at forbedre konverteringer på dem. Mobil er vigtig her, da vi har tænkt os ikke kun at gøre siderne mobilevenlige, men også kompatible med AMP.

Ind kommer det nye ThemeIsle-design ��

Okay, så med scenesættet og min begrundelse forklaret, så lad os nu se, hvordan det hele spillede ud.

1. Design og æstetik

Dette kan du selv dømme, men for mig har dette været en absolut succes!

Her er det gamle design:

TemaIsle gamle design

Og her er den nye:

TemaIsle nyt design

Hjemmesiden ser meget mere ensartet og behagelig ud for øjet. John Fraskos af AnalogWP udformet designet. João Santos, der normalt arbejder på tegneserier for os, skabte nogle brugerdefinerede illustrationer. Og endelig, Catalin Vasile, den originale ThemeIsle-designer, arbejdede på det nye logo.

Denne del alene endte sandsynligvis med at koste omkring $ 10.000 – $ 15.000. Selvom selve designet er noget næsten umuligt at spore ROI’en på, tror jeg, det er værd at investere. Helt ærligt, i betragtning af at det tog os fem år, før vi besluttede at redesigne stedet, udgør omkostningerne kun under 0,5% af indtægterne. Så hvis dette overhovedet resulterer i en opside, vil det gøre projektet let det værd!

2. Ny webstedsstruktur

Introduktion af en ny struktur har øget kompleksiteten lidt, men det har også resulteret i at øge trafikken til vores topprodukter, hvilket altid er en god ting. På nedsiden er trafikken til vores temakategorier faldet. Men det er okay.

Det vigtigste her er, at vi ikke ønsker, at ThemeIsle skal være en "temaer sted," men at blive kendt som "skabere af Neve og Hestia."

For at opnå dette har vi besluttet at vise disse produkter på startsiden, temasiden og fjerne den generiske prisside helt (det gav ingen mening). Vi har også til hensigt at oprette individuelle logoer for produkter og derefter originale destinationssider for de øverste produkter (med deres eget branding og alt). Plus, vi lavede et par justeringer her og der for at understrege de enkelte mærker.

hestia før og efter

3. Teknisk gæld løst

Igen to ting:

a) Webstedshastighed

Vores lastetider er 50% hurtigere nu. Men vi fik nogle problemer i processen.

I et forsøg på at tvinge os til både at bruge vores egne produkter og også bruge den nye blokeditor (som vores udvikler ikke var bekendt med), har vi rodet webstedets bygningsoplevelse fuldstændigt.

Gutenberg er ikke der endnu, eller i det mindste den måde, vi har brugt det, hjælper ikke. Det er stadig ikke det bedste valg til landingssider, og hvis du vil have fart, skal du hellere stole på noget som ACF med håndbyggede strukturer. Hvis du foretrækker fleksibilitet frem for alt andet, kan du gå med Beaver Builder eller Elementor, som vi har gjort for hjemmesiden.

Når det kommer til at bygge websteder med ydeevne i tankerne, er opgaven stadig ikke let. Du kan ikke rigtig stole på plugins for at løse alle problemer for dig, og du skal gøre meget på din egen. Her er en kommentar fra Cosmin Serbanescu, hovedudvikleren til redesignprojektet:

Cosmin

Det har været en rigtig fornøjelse at arbejde med ThemeIsle-webstedets redesign, og det er bestemt et af de mest komplekse og udfordrende projekter, jeg nogensinde har arbejdet på.

Sandsynligvis den vanskeligste del var, at på grund af den hastighedsorienterede tilgang, vi havde fra starten, var jeg nødt til at tænke mindst to gange, før jeg implementerede en funktion eller et webstedssektion, uden nogen tredjeparts plugins eller unødvendige biblioteker og holdt koden så ren som muligt.

b) Ny indkøbsvognstruktur

Denne del gik temmelig glat, da vi nu har alt opsat på store.themeisle.com.

Som sædvanligt med disse ting stod vi selvfølgelig nogle problemer på lanceringsdagen, men det lykkedes os at finde ud af det lige i tide.

I denne opsætning, som jeg nævnte tidligere, gemmes alle kunde- / brugerdata i en separat forekomst fra front-end, som indeholder temalister, blog, marketing sider.

4. Bedre destinationssider og mobil

Som en del af redesignen byggede vi nye destinationssider til alle vores nøgleprodukter som Neve, Hestia, ShopIsle, Zelle, Feedzy, Visualizer, og WP-produktanmeldelse.

Af dem alle ser ud til, at destinationssiden for Hestia – hvor vi lægger de fleste af vores bestræbelser på – synes at få de bedste resultater. Oplever i øjeblikket ~ 10% bedre konverteringsfrekvens. Vi ser på cirka en måneds værdi af data lige nu, hvilket får mig til at føle mig optimistisk.

hestia nyt

Samlet set ser det ud til, at vi har mistet salget for hele websitet. Men der har været så mange ændringer, herunder at slippe af med 10+ produkter (som alle bidrog med et lille antal salg), at det er svært at tilskrive noget til selve designet.

Dette vedrører et andet mål, som jeg har sat mig for dette år. Selv hvis vi kun beholder 90% af indtægterne før ændringer, men samtidig får styret en 50% enklere forretning, vil det være det værd. Med enklere forretning mener jeg færre produkter, som oversættes til færre sider til at administrere, færre ting at dokumentere og understøtte, og dermed mere tid til at arbejde på at forbedre de eksisterende produkter.

Optimering af det nye websted til mobil gik overordnet godt, men ikke super 100% problemfrit. Det var ikke let at vælge Gutenberg som basis, hvorpå vi byggede de nye sider, og det øgede ikke vores mobile ydelse meget i sidste ende.

Det lykkedes os ikke at få implementeringen under 50KB-mærket for produktlandingssider, så vi var ikke i stand til at tjene dem i AMP (der er en begrænsning for, hvor stor CSS kan være for AMP). Vi har dog AMP på kategorisider.

Generelt var det en hård opgave at sikre, at designen kunne fungere med Gutenberg, Elementor og andre bygherrer. Og det handler ikke kun om rent at sikre, at disse bygherrer kan udskrive deres struktur, men også sørge for, at resultatet på skærmen er, hvad du ville forvente. Når alt kommer til alt ønsker vi at være i stand til at ændre siderne senere og ikke behøve at gøre om ting på kodeniveau for at gøre det muligt. Dette er grunden til, at designet skal arbejde sammen med bygherrer.

Her var hvad hoveddesigner, John Fraskos havde at sige om denne udfordring:

fraskos

Den største udfordring var at skabe et konsistent, skalerbart design, der ville være "builder-agnostiker" da dele af projektet udføres ved hjælp af forskellige layoutbuilder-teknologier. Det lykkedes os at indsnævre og vedligeholde et grundlæggende visuelt sprog for alle komponenter, det ville være let at replikere med enhver layoutbygger, hvilket giver os en fremtidssikker ro i sindet.

Siderne er meget lettere at navigere på mobilen nu, og det er ikke tilfældigt. Vi lægger en stor indsats i at designe mobiloplevelsen og tænke på, hvad der er vigtigt for mobilbesøgere vs desktopbesøgere. Gå videre, tjek nogle af vores produktsider på mobil og desktop og se hvad der er anderledes (denne, for eksempel).

Hele implementeringen sammen med markedsføringsarbejdet omkring kopiering og tekster, destinationssider og andre kampagner tog ganske lang tid; 1.500 arbejdstimer, for at være nøjagtige. Vi gjorde det til et af målene at foretage en seriøs tidssporing og tage status over hvert minut, der bruges på projektet.

Hvis du multiplicerer det med uanset hvilken timesats du vil beregne, får dette os sandsynligvis i intervallet $ 50.000 – $ 100.000. Eller med andre ord, hvis vi ville bygge et lignende websted for en tredjepart, ville vi skulle opkræve mere end $ 100.000 for at gøre det rentabelt.

Den største udfordring for os generelt var det faktum, at dette var et engangs unikt projekt. Hvad jeg mener er, at vi normalt ikke bygger e-handelswebsteder, så vi ikke har processerne på plads, og teamet og deres færdigheder er ikke struktureret til webstedsopbygningsprojekter.

Vi kæmpede for at organisere vores arbejde og vidste ikke, hvordan vi skulle lede eller strukturere det hele. Vi havde heller ikke (vi har stadig ikke) et dedikeret team, der ville håndtere alle front-facing projekter og websteder. At opbygge temaer og plugins for brugere er bare en helt anden slags ting. I sidste ende takket være John Fraskos, der styrede os på den rigtige vej, blev vi afgjort med at bruge Sketch til UI-design, Invision til designsamarbejde og feedback, og Slack til dagligdags diskussioner. Og vi gennemgik en masse iterationer, så hvert af disse værktøjer var bestemt nødvendigt.

design iterationer

Så det vigtigste spørgsmål ville sandsynligvis være; betragter jeg projektet som en succes?

Det kommer an på.

Vi ser ikke noget kortsigtet løft i salget som følge af redesign. Vi har stadig nogle problemer med redigeringsoplevelsen og finjustering af webstedet. Projektet kunne også have været kørt glattere. I slutningen af ​​dagen kan jeg dog stadig ikke se en bedre investering, der vil sætte os op til langsigtede resultater.

Det næste år fortæller, om projektet er en succes eller ej. Jeg er nysgerrig efter at se, hvordan ting spiller ud.

Også sammen med Neve Pro-lancering og vores WCEU-sponsorering, dette markerer starten på slags en ny æra for os. En æra med forsøg på at blive en mere etableret forretning kontra bare en butik med nogle temaer.

Jeg var heller ikke den eneste, der kørte showet her. Det var en god teamindsats og en større ændring i vores forretningsretning – at komme tættere på kunden og resonere med deres behov mere ved at fokusere på færre produkter af højere kvalitet.

Tak igen til alle, der deltog i denne redesign!

Glem ikke at gå og tjekke ud det nye ThemeIsle!

Glem ikke at deltage i vores nedbrudskursus om at fremskynde dit WordPress-sted. Med nogle enkle rettelser kan du reducere din indlæsningstid med endda 50-80%:

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