Redizajn ThemeIsle: Zde je popis, jak se to stalo a kolik to stálo

Redizajn ThemeIsle


Nesnáším buzzkill, ale nejsem příznivcem redesignů. Mám vzrušení z toho, že se věci mění a obnovuji vaše stránky každých pár let, a já chápu, proč se tolik lidí miluje, aby se tím dostalo, ale to prostě nejsem já.

Moje myšlení bylo vždy takové, že design musí být "dostatečně dobrý," a to je něco, co nezmění obrovský rozdíl ve velkém schématu věcí.

Ale s tím bylo řečeno, téma ThemeIsle již dlouho čekalo na změnu. Dokonce jsem viděl, že věci již nejsou připraveny na rok 2019. Takže když bylo rozhodnuto otřást věci, ujistil jsem se, že dokumentujeme tento proces, abychom se mohli co nejvíce poučit z přechodu.

Teď, když byl spuštěn nový design ThemeIsle Podívejme se zpět na předchozí design, přijatá rozhodnutí, cíle stanovené pro nový design a jak se to všechno odehrálo.

Klávesové zkratky:

  • �� Myšlenky na starý design
  • �� Nový design přichází
  • �� Nová struktura webových stránek
  • �� Lepší vstupní stránky a mobilní zařízení

Starý design ThemeIsle a jeho problémy ��

1. Problémy samotného návrhu

Upřímně řečeno, nikdy jsem neviděl originální design ThemeIsle tak špatný. Myslím, že jsem věděl, že to není skvělé (koneckonců mám oči), ale nemyslel jsem si, že je to problém, který může ovlivnit naši značku nebo negativně ovlivnit prodej.

Plus, už je to od chvíle, kdy byl web spuštěn, a během prvních dnů byl design docela podobný tomu, co tam bylo venku.

V průběhu let jsme však začali provádět spoustu A / B testů, další takzvaná vylepšení, různá vylepšení SEO atd., A protože nad tím neexistoval žádný přední referenční standard nebo kontrola, web ztratil svou konzistenci. Například jsme měli tuto normální stránku pro naše téma ShopIsle a tuto docela vlastní stránku pro RokoPhoto:

shopisle vs rokophoto

Na konci dne, protože prodej designérům je oblastí, do které se chceme rozšířit, jsem si uvědomil, že více leštěný design by mohl trochu posílit naši značku a generovat další bzučení..

To byl můj hlavní důvod pro generální opravu webu.

2. Struktura webu a obchodní model

To byla jedna z věcí, které mě nejvíce trápily. Když jsme poprvé spustili a vytvořili web, mělo to být tematický klub. Měli jsme 10-20 témat a chtěli jsme je prodat jako balíček. Poměrně jednoduchá.

V té době jsme také měli fórum podpory a po spuštění hlavního webu jsme narazili na plugin, který potřeboval nový domov. Bylo to hodně, tak jsme ji přinesli na palubu a hodili ji také do hlavní nabídky. Nedávalo to tolik smysl, aby to tam bylo jako součást balíčku témat, ale bylo to to nejlepší, co jsme si mysleli, že bychom mohli udělat v té době. ��‍♂️

Za posledních pět let se trh změnil a my jsme pochopili, že už nechceme budovat a udržovat 20 různých témat. Také to nikdo nečeká. Jsme v éře "stěžejní témata" – pokud obchod nabízí jedno hlavní téma nebo jen několik z nich a poté další vylepšení nebo návrhové balíčky.

Rozhodli jsme se také vydat podobnou cestu a pracovat pouze na dvou nebo třech tématech; stejné pro naše pluginy.

Dozvěděli jsme se také, že jednotlivé značky produktů jsou silnější a mají větší potenciál než "značky hlavních stránek," takže má větší smysl je zdůrazňovat. Mysli na X Theme vs Themeco.

Dalším přispívajícím prvkem je ThemeIsle blog. Za posledních pět let to hodně vzrostlo a umožnilo nám to zajistit si pozici na trhu, o které jsme si mysleli, že není možné, když jsme poprvé začali.

3. Náš technický dluh

Chci zde mluvit o dvou věcech:

a) Rychlost webových stránek

Staré stránky obsahovaly spoustu starých věcí a technologií. Začali jsme tím, že jsme naše výrobky prodávali přímo prostřednictvím webu, a to pomocí našeho ručního systému.

Ve stroji webu bylo mnoho iterací, což mělo za následek nespočet různých polí ACF, která se postupem času obtížně řídily. Provozovali jsme také fórum, hostovali přidružený program, hostovali dokumenty a pravděpodobně řadu dalších věcí.

Celkově nebyla struktura příliš účinná, což mělo za následek docela špatný výkon.

Jako vedlejší poznámku jsme se přestěhovali do FastSpring od té doby a už nebudeme řešit prodej sami. Zatímco jsme se některých ostatních systémů podobně zbavili, hodně jich tam stále bylo.

b) Struktura nákupního košíku

Vzhledem k povaze podnikání – s více produkty a jednotlivými značkami, které mohou růst více než značka mateřské společnosti, jsem si uvědomil, že je čas rozdělit skutečné technické nastavení toho, jak věci fungují.

Konkrétně je lepší oddělit údaje o zákaznících od přední části (seznamy témat a také autoři a jejich obsah plus veškeré marketingové úsilí). Tímto způsobem nebude rychlost předního webu ovlivněna zásuvnými moduly, jako je EDD, nebo čímkoli jiným, co se děje na pozadí, aby se podnik rozběhl.

Marketingový tým by také získal větší kontrolu nad webem a my bychom mohli vytvořit samostatné weby / značky pro produkty a zároveň udržet sjednocenou zákaznickou oblast na store.themeisle.com.

4. Vstupní stránky a mobilní zařízení

Když jsme spustili původní web, mobil nebyl opravdu věc. Konkrétně v naší nika, kde sotva kdokoli kupoval témata, zatímco na jejich telefonu. I v tuto chvíli máme stále jen velmi málo mobilních zákazníků.

Mobil však stále roste na významu a tento trend bude pravděpodobně pokračovat. Koneckonců, Google nyní používá svůj mobilní prolézací modul přes stolní.

Dlouhá povídka, rozhodli jsme se vytvořit vlastní vstupní stránky pro naše nejlepší produkty a pracovat na zlepšení konverzí na nich. Mobilní je zde zásadní, protože jsme se rozhodli nejen zpřístupnit stránky tak, aby byly mobilní, ale také kompatibilní s AMP.

Přichází nový design ThemeIsle ��

Dobře, takže se scénou a vysvětlením mého uvažování teď uvidíme, jak se to všechno odehrálo.

1. Design a estetika

To můžete posoudit sami, ale pro mě to byl absolutní úspěch!

Zde je starý design:

ThemeIsle starý design

A tady je nový:

ThemeIsle nový design

Web vypadá mnohem konzistentněji a příjemněji. John Fraskos z AnalogWP vytvořil design. João Santos, který pro nás obvykle pracuje na komiksu, vytvořil několik vlastních ilustrací. A nakonec, Catalin Vasile, původní designér ThemeIsle, pracoval na novém logu.

Tato část sama o sobě pravděpodobně skončila v nákladech kolem 10 000 – 15 000 $. Zatímco samotný design je něco téměř nemožného sledovat návratnost investic, věřím, že to stojí za investici. Upřímně řečeno, vzhledem k tomu, že nám trvalo pět let, než jsme se rozhodli změnit vzhled webu, náklady představují pouze méně než 0,5% výnosů. Takže pokud to bude mít za následek nějaké vzhůru, bude to projekt snadno stojí za to!

2. Nová struktura webových stránek

Zavedení nové struktury trochu zvýšilo složitost, ale také vedlo k posílení provozu našich nejlepších produktů, což je vždy dobrá věc. Nevýhodou je, že došlo k poklesu provozu do našich tematických kategorií. Ale to je v pořádku.

Hlavní věc je, že nechceme, aby byl ThemeIsle "Témata místo," ale být známý jako "tvůrci Neve a Hestia."

Abychom toho dosáhli, rozhodli jsme se tyto produkty uvést na domovskou stránku, na stránku motivů a zcela odstranit obecnou stránku pro tvorbu cen (nedávalo to smysl). Také jsme se rozhodli vytvořit individuální loga pro produkty a poté originální vstupní stránky pro nejlepší produkty (s vlastní značkou a všemi). Navíc jsme tu a tam udělali pár vylepšení, abychom zdůraznili jednotlivé značky.

hestie před a po

3. Řešení technického dluhu

Opět dvě věci:

a) Rychlost webových stránek

Naše doby načítání jsou nyní o 50% rychlejší. Ale dostali jsme se do problémů.

Ve snaze přinutit nás používat oba naše vlastní produkty a také používat nový editor bloků (s nímž náš vývojář nebyl obeznámen), jsme kompletně zmatili zážitek z vytváření webových stránek..

Gutenberg tam ještě není, nebo alespoň způsob, jakým ho používáme, nepomáhá. Stále to není nejlepší volba pro vstupní stránky, a pokud chcete rychlost, raději se spolehněte na něco jako ACF s ručně postavenými strukturami. Pokud dáváte přednost především flexibilitě, můžete jít s Beaver Builderem nebo Elementorem, jak jsme to udělali pro domovskou stránku.

Pokud jde o vytváření webových stránek s ohledem na výkon, úkol stále není snadný. Nemůžete opravdu záviset na pluginech, abyste vyřešili všechny problémy za vás, a musíte toho hodně udělat sami. Zde je komentář Cosmin Serbanescu, hlavního vývojáře projektu redesign:

cosmin

Bylo skutečným potěšením pracovat na redizajnu webových stránek ThemeIsle a je to rozhodně jeden z nejsložitějších a nejnáročnějších projektů, na kterých jsem kdy pracoval..

Pravděpodobně nejkomplikovanější částí bylo to, že vzhledem k přístupu orientovanému na rychlost jsme měli od začátku alespoň dvakrát přemýšlet před implementací funkce nebo části webu, bez jakýchkoli doplňků třetích stran nebo nepotřebných knihoven a udržování tak čistého kódu možný.

b) Nová struktura nákupního košíku

Tato část proběhla docela hladce, protože nyní máme vše nastaveno na store.themeisle.com.

Samozřejmě, jako obvykle s těmito věcmi, jsme v den zahájení čelili určitým problémům, ale podařilo se nám to zjistit právě včas.

V tomto nastavení, jak jsem již zmínil dříve, jsou všechna zákaznická / uživatelská data uložena v oddělené instanci od klientského rozhraní, které obsahuje výpisy témat, blog, marketingové stránky.

4. Lepší vstupní stránky a mobilní zařízení

V rámci přepracování jsme vytvořili nové vstupní stránky pro všechny naše klíčové produkty, jako je Neve, Hestia, ShopIsle, Zelle, Feedzy, Vizualizér, a Recenze produktu WP.

Ze všech se zdá, že vstupní stránka pro Hestia, kam jsme vynaložili největší úsilí, dosahuje nejlepších výsledků. V současné době dochází k ~ 10% lepším konverzním poměrům. Právě teď se díváme na údaje v hodnotě zhruba jednoho měsíce, což mě cítí optimisticky.

hestia nová

Celkově to vypadá, že jsme ztratili prodej. Ale došlo k tolika změnám, včetně zbavení se 10+ produktů (což vše přispělo k malému počtu prodejů), že je obtížné něco připsat samotnému designu.

Týká se to dalšího cíle, který jsem si stanovil pro tento rok. I když si ponecháme pouze 90% příjmů z předběžných změn, ale zároveň se budeme řídit 50% jednodušší podnikání, bude to za to stát. Pod pojmem jednodušší podnikání mám na mysli méně produktů, které se překládají na méně stránek pro správu, méně věcí na dokumentaci a podporu, a tím více času na práci na zlepšení stávajících produktů..

Optimalizace nového webu pro mobily se celkově povedla skvěle, ale ne 100% bezproblémová. Výběr Gutenbergu jako základu, na kterém jsme postavili nové stránky, nebyl snadný a nakonec ani příliš nezvýšil náš mobilní výkon..

Nepodařilo se nám dosáhnout implementace pod značkou 50 kB pro vstupní stránky produktu, takže se nám nepodařilo obsloužit je v AMP (existuje omezení, jak velká může být CSS pro AMP). Na stránkách kategorií však máme AMP.

Celkově bylo jisté, že návrh může fungovat s Gutenbergem, Elementorem a dalšími staviteli. A nejde jen o to, aby se zajistilo, že tito stavitelé budou moci vydávat svou strukturu, ale také se ujistit, že výsledek na obrazovce je to, co byste očekávali. Koneckonců chceme, abychom mohli stránky později upravovat, a abychom to umožnili, nemusíme znovu přepracovávat obsah na úrovni kódu. Z tohoto důvodu musí návrh spolupracovat se staviteli.

Zde je to, co hlavní designér John Fraskos řekl o této výzvě:

fraskos

Největší výzvou bylo vytvořit konzistentní, škálovatelný design, který by byl "stavitel-agnostik" protože části projektu jsou prováděny pomocí různých technologií vytváření sestav. Podařilo se nám zúžit a udržovat základní vizuální jazyk pro všechny komponenty, které by bylo možné snadno replikovat s jakýmkoli tvůrcem rozvržení, což nám poskytne budoucnost bezpečný klid.

Navigace na mobilních stránkách je nyní mnohem snazší a nejedná se o čistě náhodou. Vyvíjíme velké úsilí při navrhování mobilního zážitku a přemýšlíme o tom, co je důležité pro mobilní návštěvníky oproti návštěvníkům stolních počítačů. Jděte do toho, podívejte se na některé z našich produktových stránek na mobilním a stolním počítači a podívejte se, co je jiného (toto, například).

Celá implementace, spolu s marketingovou prací kolem kopií a textů, vstupních stránek a dalších kampaní, zabrala dost času; 1 500 pracovních hodin, přesněji. Udělali jsme z něj jeden z cílů, abychom provedli nějaké seriózní sledování času a zhodnotili každou minutu strávenou na projektu.

Pokud ji vynásobíte libovolnou hodinovou sazbou, kterou chcete vypočítat, bude to pravděpodobně v rozmezí 50 000–100 000 USD. Nebo jinými slovy, pokud bychom chtěli vybudovat podobný web pro třetí stranu, museli bychom účtovat více než 100 000 $, aby bylo rentabilní.

Celkově největší výzvou pro nás byla skutečnost, že se jednalo o jednorázový unikátní projekt. Mám na mysli to, že obvykle nevytváříme weby elektronického obchodování, takže nemáme procesy zavedené a tým a jejich dovednosti nejsou strukturovány pro projekty budování webových stránek..

Snažili jsme se zorganizovat naši práci a nevěděli jsme, jak to všechno vést nebo strukturovat. Také jsme neměli (stále nemáme) specializovaný tým, který by se staral o všechny projekty a weby směřující dopředu. Vytváření témat a pluginů pro uživatele je prostě úplně jiná věc. Nakonec jsme se díky Johnu Fraskosovi, který nás řídil správnou cestou, rozhodli jsme se použít Sketch pro návrh uživatelského rozhraní, Invision pro návrhovou spolupráci a zpětnou vazbu a Slack pro každodenní diskuse. A my jsme prošli mnoha iteracemi, takže každý z těchto nástrojů byl rozhodně potřebný.

iterace designu

Hlavní otázkou tedy bude pravděpodobně; považuji projekt za úspěch?

Záleží.

Nevidíme krátkodobý nárůst prodeje v důsledku přepracování. Stále máme problémy s úpravou a vylepšováním webu. Projekt mohl být také spuštěn plynulejší. Na konci dne však stále nevidím lepší investici, která by nás připravila na dlouhodobé výsledky.

Příští rok ukáže, zda je projekt úspěšný nebo ne. Jsem zvědavý, jak se věci odehrávají.

Také spolu s Spuštění Neve Pro a sponzorství WCEU, to pro nás znamená začátek jakési nové éry. Období, kdy se snažíme stát se zavedenějším obchodem vs jen obchod s některými tématy.

Také jsem nebyl jediný, kdo tu show řídil. Byla to dobrá týmová práce a zásadní změna v našem obchodním směřování – přibližování se k zákazníkovi a rezonování s jejich potřebami více zaměřením na méně kvalitních produktů.

Ještě jednou díky všem, kdo se podíleli na tomto přepracování!

Nezapomeňte jít a podívejte se nový ThemeIsle!

Nezapomeňte se připojit k našemu havarijnímu kurzu při urychlení vašeho webu WordPress. Pomocí několika jednoduchých oprav můžete zkrátit dobu načítání až o 50–80%:

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