ThemeIsle újjátervezés: Itt van, hogyan ment és mennyibe kerül

ThemeIsle újjátervezés: Itt van, hogyan ment és mennyibe kerül

ThemeIsle újjátervezés: Itt van, hogyan ment és mennyibe kerül
СОДЕРЖАНИЕ
02 июня 2020

A ThemeIsle újratervezése


Utálom buzzkillnek lenni, de nem vagyok rajongója az újjátervezésnek. Az izgalom mögött van a dolgok változtatása és a webhely frissítése néhány évente, és megértem, miért szeret sok ember átélni magát, de ez nem én.

Mindig az volt a véleményem, hogy a tervezésnek is meg kell lennie "elég jó," és ez valami, ami nem fog különösebben befolyásolni a dolgok nagyrendszerét.

De ezzel együtt a ThemeIsle már régóta elmulasztotta a változást. Még azt is láttam, hogy a dolgok már nem voltak készek 2019-re. Tehát amikor úgy döntöttek, hogy megrázza a dolgokat, meggyőződtem arról, hogy dokumentálom a folyamatot, hogy minél többet megtanulhassunk az átmenetből.

Most, hogy a elindult az új ThemeIsle tervezés nézzünk vissza az előző tervrajzra, a meghozott döntésekre, az új tervre kitűzött célokra és annak mindegyikére.

Billentyűparancsok:

  • �� Gondolatok a régi mintáról
  • �� Az új kialakítás megjelenik
  • �� Új webes felépítés
  • �� Jobb céloldalak és mobiltelefonok

Régi ThemeIsle tervezés és kérdései ��

1. Maga a formatervezés problémái

Őszintén szólva, soha nem láttam rosszul a ThemeIsle eredeti kialakítását. Úgy értem, tudtam, hogy nem nagyszerű (végül is van szemem), de nem gondoltam, hogy ez egy olyan kérdés, amely befolyásolhatja márkánkat, vagy negatívan befolyásolhatja az értékesítést.

Ráadásul eltelt egy ideje a webhely elindulása óta, és a kezdeti időkben a tervezés nagyjából megegyezett azzal, ami még ott volt.

Az évek során azonban sok A / B tesztet kezdtünk el végezni, más úgynevezett fejlesztéseket, különféle SEO javításokat, stb., És mivel mindenekelőtt nem volt vezető tervezési referenciaérték vagy irányítás, az oldal elvesztette következetességét. Például volt ez a normál oldal a ShopIsle témához, és ez a meglehetősen egyedi oldal a RokoPhoto számára:

shopisle vs rokophoto

A nap végén, mivel a tervezőknek történő eladás egy olyan terület, amelyre kiterjedni szeretnénk, rájöttem, hogy a polírozottabb formaterv némileg javíthatja a márkánkat, és több zümmögést generálhat.

Ez volt az elsődleges oka a webhely felújításának.

2. A weboldal felépítése és az üzleti modell

Ez volt az egyik dolog, ami zavart engem. Amikor elindítottuk és felépítettük a weboldalt, azt tematikus klubnak szánták. 10-20 témánk volt, és csomagként akartuk eladni őket. Meglehetősen egyértelmű.

Abban az időben is volt egy támogatási fórum, és a főoldal elindítása után egy pluginra botlottunk, amely új otthont igényelt. Jó üzlet volt, tehát fedélzetre vittük és a fő ajánlatba is dobtuk. Nem volt semmi értelme annak, hogy ott legyen a témák csomagjának részeként, de ez volt a legjobb, amire azt gondoltuk, hogy akkoriban megtehetjük. ��♂️

Az elmúlt öt évben a piac megváltozott, és megértettük, hogy nem akarunk többé 20 különféle témát építeni és karbantartani. Ez sem az, amit bárki elvár. A mi korszakunkban vagyunk "zászlóshajó témák" – ahol egy üzlet egy fő témát kínál, vagy csak néhányat, majd további frissítéseket vagy tervezőcsomagokat kínál.

Úgy döntöttünk, hogy hasonló utat is követünk, és mindössze két vagy három témán dolgozunk; ugyanaz a pluginjaink esetében.

Azt is megtudtuk, hogy az egyes termékmárkák erősebbek és több potenciállal rendelkeznek "fő weboldal márkák," tehát értelmesebb ezeket hangsúlyozni. Gondolj az X téma vs Themeco elemre.

Még egy hozzájáruló elem a ThemeIsle blog. Az elmúlt öt évben sokat nőtt, és lehetővé tette számunkra olyan piaci helyzet megőrzését, amelyre az első induláskor nem gondoltuk, hogy lehetséges.

3. Technikai adósságunk

Két dologról szeretnék itt beszélni:

a) A weboldal sebessége

A régi oldalon rengeteg örökség és technológia volt a helyén. Kezdetben az volt, hogy termékeinket közvetlenül a webhelyen értékesítettük, kézzel készített rendszerünk segítségével.

A webhely motorjának sok ismétlése volt, ami számtalan különféle ACF mezőt eredményezett, amelyeket idővel nehéz kezelni. Fórumot is tartottunk, társult programot rendeztünk, dokumentumokat és valószínűleg számos más dolgot is.

Összességében a szerkezet nem volt túl hatékony, ami meglehetősen gyenge teljesítményt eredményezett.

Mellékesen megjegyezzük, hogy azóta költözöttünk a FastSpringbe, és már nem foglalkozunk az értékesítéssel egyedül. Miközben hasonlóan megszabadultunk a többi rendszertől, nagy része még mindig ott volt.

b) A bevásárlókosár felépítése

Az üzlet jellege miatt – több termékkel és egyedi márkákkal, amelyek növekedhetnek az anyavállalat márkájánál jobban – rájöttem, hogy ideje felosztani a dolgok tényleges technikai beállítását.

Pontosabban, jobb, ha elkülönítjük az ügyféladatokat a kezelőfelületről (a témalisták, valamint a szerzők és azok tartalma, valamint minden marketing erőfeszítés). Ily módon a webhely sebességét nem befolyásolják olyan pluginok, mint az EDD, vagy bármi más, ami a háttérben zajlik az üzlet futtatása érdekében.

A marketingcsapat nagyobb ellenőrzést kaphat a webhely felett, és külön webhelyeket / márkákat tudunk létrehozni a termékekre, miközben egységes ügyfélkörünket tároljuk a store.themeisle.com oldalon..

4. Céloldal és mobil

Amikor az eredeti webhelyet elindítottuk, a mobil nem volt igazán dolog. Pontosabban a mi résünkben, ahol alig volt valaki témákat vásárolva telefonja közben. Még most is nagyon kevés mobil ügyfelünk van.

Ennek ellenére a mobil fontossága növekedett, és a tendencia valószínűleg folytatódni fog. Végül is a Google most a mobil bejárót használja az asztali számítógépen.

Röviden: úgy döntöttünk, hogy egyedi termékeket készítünk legfelső termékeink számára, és dolgozunk az átalakítás javításán. A mobil elengedhetetlen itt, mivel arra törekszünk, hogy nem csak az oldalakat mobilbaráttá, hanem az AMP-vel kompatibilisvé is tegyük.

A jön az új ThemeIsle dizájn ��

Oké, tehát a színpadkészlettel és az érvelésem magyarázatával lássuk meg, hogy mindez hogyan játszódott le.

1. Tervezés és esztétika

Ezt saját maga tudja megítélni, de számomra ez abszolút siker volt!

Itt van a régi formatervezés:

ThemeIsle régi design

És itt van az új:

ThemeIsle új design

A webhely sokkal következetesebbnek és kellemesebbnek néz ki a szem számára. John Fraskos / AnalogWP készítette a tervezést. João Santos, aki általában képregényekkel foglalkozik számunkra, készített néhány egyedi illusztrációt. És végül, Catalin Vasile, az eredeti ThemeIsle tervező, az új logón dolgozott.

Ez a rész önmagában valószínűleg 10 000–15 000 dollárba került. Noha maga a formatervezés szinte lehetetlen nyomon követni a megtérülést, úgy gondolom, hogy megéri a beruházást. Őszintén szólva, figyelembe véve, hogy öt évbe telt, mire döntöttünk a telek újratervezéséről, a költség csupán a bevételek 0,5% -át teszi ki. Tehát ha ez egyáltalán fejjel jár, akkor a projekt könnyen megéri!

2. Új webszerkezet

Egy új struktúra bevezetése egy kicsit megnöveli a bonyolultságot, de ugyanakkor fellendítette a legfontosabb termékek forgalmát, ami mindig jó dolog. A negatív oldalról a témakategóriáink forgalma csökkent. De ez rendben van.

A lényeg itt az, hogy nem akarjuk, hogy a ThemeIsle a "témák helye," de hogy az úgynevezett "Neve és Hestia alkotói."

Ennek elérése érdekében úgy döntöttünk, hogy ezeket a termékeket megjeleníti a honlapon, a témák oldalon, és teljes egészében eltávolítjuk az általános árazási oldalt (ennek nincs értelme). Arra is törekedtünk, hogy egyedi emblémákat hozzon létre a termékekhez, majd eredeti céloldalakat készítsen a legfelső termékekhez (saját márkájukkal és mindegyikükkel). Ráadásul itt és ott tettünk néhány csípést az egyes márkák hangsúlyozása érdekében.

hestia előtte és utána

3. Technikai adósság rendezve

Ismét két dolog:

a) A weboldal sebessége

A rakodási időink most 50% -kal gyorsabbak. De a folyamat során némi bajba kerültünk.

Annak érdekében, hogy arra kényszerítsünk minket, hogy mind saját termékeinket, mind az új blokk-szerkesztőt (amelyre a fejlesztõnk még nem volt ismert) használjuk, teljesen elrontottuk a webhely-készítési élményt..

Gutenberg még nincs ott, vagy legalábbis az, ahogyan használtuk, nem segít. Ez továbbra sem a legjobb választás a nyitóoldalak számára, és ha sebességet akar, akkor jobban támaszkodhat valamire, mint például a kézzel készített szerkezetekkel rendelkező ACF. Ha mindenekelőtt inkább a rugalmasságot részesíti előnyben, akkor lépjen a Beaver Builderrel vagy az Elementorral, ahogyan ezt a honlapra tettük..

Ami a teljesítményt szem előtt tartó webhelyek felépítését illeti, a feladat még mindig nem könnyű. Nem igazán függhet a beépülő moduloktól, hogy megoldja az összes problémát az ön számára, és sokat kell tennie egyedül. Íme: Cosmin Serbanescu, az újjáépítés projekt vezető fejlesztőjének megjegyzése:

Cosmin

Nagyon öröm volt a ThemeIsle weboldal átalakításán dolgozni, és ez határozottan az egyik legbonyolultabb és legnagyobb kihívást jelentő projekt, amelyen valaha dolgoztam..

Valószínűleg a legbonyolultabb rész az volt, hogy a kezdetektől fogva a sebességorientált megközelítés miatt legalább egy kétszer meg kellett gondolkodnom egy szolgáltatás vagy egy weboldal bevezetése előtt, bármilyen harmadik fél beépülő modulja vagy felesleges könyvtárak nélkül, és a kód tisztán tartása mellett, lehetséges.

b) Új bevásárlókosár-felépítés

Ez a rész meglehetősen simán ment, mivel most már mindent beállítunk a store.themeisle.com webhelyen.

Természetesen, ahogy ezekkel a dolgokkal szoktunk, némi gonddal szembesültünk a bevezetési napon, de sikerült kitalálnunk az időben.

Ebben a beállításban, amint azt már korábban említettem, az ügyfelek és a felhasználók összes adatait a kezelőfelülettől külön példányban tárolják, amely a témák listáját, a blogot, a marketing oldalakat tartalmazza..

4. Jobb céloldalak és mobiltelefonok

Az újratervezés részeként új céloldalakat építettünk minden olyan kulcsfontosságú termékünkhöz, mint például Neve, Hestia, ShopIsle, Zelle, Feedzy, megjelenítő, és WP termék áttekintés.

Mindegyikről úgy tűnik, hogy a Hestia céloldala – ahova nagy erőfeszítéseket teszünk – hozza a legjobb eredményeket. Jelenleg ~ 10% -kal jobb átváltási arányok tapasztalhatók. Jelenleg körülbelül egy hónapos adatot vizsgálunk, ami optimistanak érzem magam.

új hestia

Összességében úgy tűnik, hogy az egész webhelyen elveszítettük az eladásokat. De annyira sok változás történt, beleértve a tíznél több termék megszabadulását (amelyek mindegyike kis számban eredményezte az értékesítést), hogy nehéz hozzárendelni valamit maga a design.

Ez egy másik célhoz kapcsolódik, amelyet kitűztem az idei évre. Még ha megtartjuk is a változás előtti bevétel csak 90% -át, ugyanakkor egy 50% -kal egyszerűbb üzletmenedzsmentet irányítunk, akkor megéri. Az egyszerűbb vállalkozás alatt kevesebb termékre gondolok, amely kevesebb oldalt kezel le, kevesebb dolgot dokumentál és támogat, így több idő áll rendelkezésre a meglévő termékek jobb fejlesztése érdekében..

Az új webhely mobiltelefonra történő optimalizálása általánosságban véve sikeres volt, de nem volt szuper 100% -ban problémamentes. Az új oldalak építésének alapjául a Gutenberg kiválasztása nem volt könnyű, és a végén sokat nem javította a mobil teljesítményünket.

Nem sikerült eljuttatnunk a megvalósítást az 50 KB-os jel alá a termékek céloldalain, ezért nem tudtuk kiszolgálni őket az AMP-ben (korlátozás van arra, hogy mekkora CSS lehet az AMP számára). Mindazonáltal megvan az AMP a kategória oldalain.

Összességében nehéz volt megbizonyosodni arról, hogy a tervezés együttműködhet-e a Gutenberg, az Elementor és más építőkkel. És nemcsak annak tisztázásáról szól, hogy ezek az építők kiadják-e a szerkezetüket, hanem arról is, hogy a képernyőn az elvárt eredmény megfeleljen a vártnak. Végül is azt akarjuk, hogy később módosíthassuk az oldalakat, és ne tegyük újra a kódszintű dolgokat, hogy ez lehetővé váljon. Ez az oka annak, hogy a tervezésnek együtt kell működnie az építőkkel.

John Fraskos, a vezető tervező ezt mondta erről a kihívásról:

fraskos

A legnagyobb kihívás egy következetes, méretezhető formatervezés létrehozása volt "építő-agnosztikus" mivel a projekt egyes részeit különböző elrendezés-készítő technológiákkal hajtják végre. Sikerült szűkíteni és fenntartani az alapvető vizuális nyelvet az összes alkotóelem számára, amelyet könnyű megismételni bármelyik elrendezés-készítő, így jövőbiztos nyugalmat biztosítva nekünk..

Az oldalakat most már sokkal könnyebben lehet navigálni a mobiltelefonon, és ez nem pusztán véletlen. Sok erőfeszítést tettünk a mobil élmény megtervezéséhez és arra gondolkodtunk, hogy mi fontos a mobil látogatók és az asztali látogatók számára. Menj tovább, nézd meg néhány termékoldalunkat a mobil és asztali számítógépeken, és nézd meg, mi a különbség (ezt, például).

A teljes megvalósítás, valamint a másolás és a szövegek, a nyitóoldalak és más kampányok körüli marketingmunka elég sok időt vett igénybe; 1500 munkaidő, pontosabban. Az egyik célunk egy komoly időkövetés és a projektre fordított percek áttekintése volt.

Ha megszorozzuk bármilyen óránkénti tarifával, amelyet ki akarunk számolni, akkor valószínűleg 50 000–100 000 USD tartományba kerül. Vagy más szavakkal, ha hasonló webhelyet akartunk építeni egy harmadik fél számára, akkor több mint 100 ezer dollárt kellene felszámítanunk, hogy ez jövedelmező legyen..

Összességében a legnagyobb kihívás az volt, hogy ez egy egyszeri, egyedi projekt volt. Úgy értem, hogy általában nem építünk fel e-kereskedelmi webhelyeket, tehát nincs meg a folyamat a helyén, és a csapat és képességeik nem épülnek fel weboldalépítési projektekhez.

Megpróbáltuk megszervezni a munkánkat, és nem tudtuk, hogyan kell mindent irányítani vagy felépíteni. Ugyancsak nem volt (még mindig nem vagyunk) dedikált csapat, amely minden előre látott projektet és webhelyet kezelne. A felhasználók számára a témák és a bővítmények építése egy teljesen más dolog. Végül, John Fraskosnak, aki a helyes útról irányított minket, köszönhetően elhatároztuk, hogy a Sketch-et használjuk az UI-tervezéshez, az Invision-ot a tervezési együttműködéshez és a visszajelzéshez, valamint a Slack-ot a mindennapi beszélgetésekhez. És sok iteráción ment keresztül, tehát ezeknek az eszközöknek minden bizonnyal szükségük volt.

tervezési iterációk

Tehát valószínűleg a fő kérdés lenne; sikeresnek tartom-e a projektet??

Attól függ.

Nem látunk rövid távú növekedést az eladásokban az újratervezés eredményeként. Még mindig vannak némi problémánk a szerkesztési tapasztalatokkal és a webhely finomításával kapcsolatban. A projektet is simábban lehetett volna futtatni. A nap végén azonban még mindig nem látom a jobb befektetést, amely felállítana a hosszú távú eredmények elérésére.

A következő év megmondja, hogy a projekt sikeres-e vagy sem. Kíváncsi vagyok látni, hogyan játszanak a dolgok.

Ezenkívül a A Neve Pro elindítása és a WCEU szponzorációnk, ez egy új korszak kezdete számunkra. Az a korszak, amikor megpróbálják megalapozottabb vállalkozássá válni, csak bizonyos témákkal rendelkező üzletként.

Nem én voltam az egyetlen, aki itt mutatta be a show-t. Ez egy jó csapat erőfeszítés volt, és jelentős változás az üzleti irányunkban – közelebb kerültünk az ügyfélhez, és jobban meghatározzuk az igényeiket, kevesebb, jobb minőségű termékre összpontosítva.

Még egyszer köszönöm mindenkinek, aki részt vett ebben az újratervezésben!

Ne felejtsd el menni és megnézni az új ThemeIsle!

Ne felejtsd el csatlakozni a WordPress-webhely felgyorsításának összeomlási tanfolyamához. Néhány egyszerű javítással akár 50-80% -kal csökkentheti a betöltési időt:

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