Редизайн на темата: Ето как е отишло и колко струва

Препроектиране на ThemeIsle


Мразя да бъзика, но не съм фен на редизайн. Изпитвам вълнение от промяната на нещата и освежаването на сайта ви на всеки няколко години и разбирам защо толкова много хора обичат да преминават през това, но това не съм аз.

Мисленето ми винаги е било, че дизайнът трябва да бъде "достатъчно добър," и че това е нещо, което няма да направи голяма разлика в голямата схема на нещата.

Но с казаното, ThemeIsle дълго се просрочи за промяна. Дори виждах, че нещата вече не са готови за 2019 г. Така че, когато беше взето решението да разтърсим нещата, аз се уверих да документирам процеса, за да можем да научим колкото се може повече от прехода.

Сега, когато стартира нов дизайн ThemeIsle нека да погледнем назад към предишния дизайн, взетите решения, целите, определени за новия дизайн и как всичко се разигра.

Shortcuts:

  • �� Мисли върху стария дизайн
  • �� Новият дизайн идва
  • �� Нова структура на уебсайта
  • �� По-добри целеви страници и мобилни устройства

Стария дизайн на ThemeIsle и неговите проблеми ��

1. Проблемите на самия дизайн

Честно казано, никога не съм виждал оригиналния дизайн на ThemeIsle като лош. Искам да кажа, знаех, че не е страхотно (в крайна сметка имам очи), но не мислех, че това е проблем, който може да се отрази на нашата марка или да повлияе негативно на продажбите.

Плюс това мина доста време от стартирането на сайта, а през първите дни дизайнът беше доста равен на това, което още имаше.

Въпреки това, с годините започнахме да правим много A / B тестове, други така наречени подобрения, различни SEO ощипвания и т.н., и тъй като нямаше водещ дизайнерски показател или контрол над всичко, сайтът загуби своята последователност. Например, имахме тази нормална страница за нашата тема ShopIsle и тази доста обичайна за RokoPhoto:

shopisle vs rokophoto

В края на деня, тъй като продажбата на дизайнери е област, в която искаме да се разширим, разбрах, че по-излъсканият дизайн може да засили нашата марка малко и да генерира повече бръмча.

Това беше моята основна причина за основен ремонт на сайта.

2. Структурата на уебсайта и бизнес модела

Това беше едно от нещата, което ме притесни най-много. Когато за първи път стартирахме и създадохме уебсайта, той имаше за цел да бъде тематичен клуб. Имахме 10-20 теми и искахме да ги продадем като пакет. Доста прям.

Тогава имахме и форум за поддръжка и след стартирането на основния сайт се натъкнахме на плъгин, който се нуждае от нов дом. Това беше добра сделка, затова го внесохме на борда и го хвърлихме и в основната оферта. Нямаше толкова смисъл да го имаме там като част от пакета теми, но беше най-доброто, което сме мислили, че можем да направим по това време. ��♂️

През последните пет години пазарът се промени и разбрахме, че не искаме повече да създаваме и поддържаме 20 различни теми. Това също не е това, което някой очаква. Ние сме в ерата на "водещи теми" – когато магазинът предлага една основна тема или само няколко от тях и след това допълнителни надстройки или дизайнерски пакети.

Решихме да следваме подобен път и да работим само върху две или три теми; същото за нашите плъгини.

Освен това научихме, че отделните марки продукти са по-мощни и имат по-голям потенциал от "основни марки на сайта," така че има по-смисъл да се набляга на тези. Помислете темата X срещу Themeco.

Още един допринасящ елемент е Блогът ThemeIsle. През последните пет години тя нарасна много и ни позволи да си осигурим пазарна позиция, която не сме смятали за възможно при първото си стартиране.

3. Нашият технически дълг

Две неща, за които искам да говоря тук:

а) Скорост на уебсайта

Старият сайт разполагаше с много наследени неща и технологии. Започнахме с продажбата на нашите продукти директно през сайта, използвайки нашата ръчно изградена система.

Имаше много итерации на двигателя на сайта, което доведе до безброй различни полета на ACF, които бяха трудни за управление с течение на времето. Ние също проведохме форум, домакин на партньорска програма, домакин на документи и вероятно редица други неща.

Като цяло структурата не беше много ефективна, което доведе до доста лоши показатели.

Като странична бележка, ние сме преминали в FastSpring оттогава и вече не обработваме продажбите сами. Докато се отървахме от някои други системи по подобен начин, много от тях все още бяха там.

б) Структура на количката за пазаруване

Поради естеството на бизнеса – с множество продукти и с отделни марки, които могат да нараснат повече от марката на компанията-майка, разбрах, че е време да разделим действителната техническа настройка на това как стоят нещата.

По-специално е по-добре да отделите клиентските данни от предния край (списъците с теми, както и авторите и тяхното съдържание плюс всички маркетингови усилия). По този начин скоростта на предния сайт няма да бъде повлияна от приставки като EDD или нещо друго, което се случва на заден план, за да накара бизнеса да стартира.

Маркетинговият екип също ще получи по-голям контрол върху сайта и ще можем да създадем отделни сайтове / марки за продуктите, като същевременно поддържаме единна клиентска зона в store.themeisle.com.

4. Целеви страници и мобилни

Когато стартирахме оригиналния сайт, мобилните всъщност не бяха нещо. Конкретно в нашата ниша, където едва ли някой купуваше теми, докато беше на телефона си. Дори в момента все още имаме много малко мобилни клиенти.

Независимо от това, мобилният телефон придобива все по-голямо значение и тенденцията вероятно ще продължи. В крайна сметка Google вече използва мобилния си робот над настолния компютър.

Накратко, решихме да създадем персонализирани целеви страници за нашите най-добри продукти и да работим за подобряване на реализациите в тях. Мобилният телефон е от жизненоважно значение, тъй като сме се постарали не само да направим страниците, удобни за мобилни устройства, но и съвместими с AMP.

Идва новият дизайн ThemeIsle ��

Добре, така че със сценичната сцена и моите разсъждения обяснени, нека да видим как се разигра всичко.

1. Дизайн и естетика

Това можете да прецените сами, но за мен това е абсолютен успех!

Ето стария дизайн:

ThemeIsle стар дизайн

А ето и новото:

ThemeIsle нов дизайн

Уебсайтът изглежда много по-последователен и приятен за окото. Джон Фраскос от AnalogWP изработен дизайн. Жоао Сантос, който обикновено работи върху комикси за нас, създаде няколко персонализирани илюстрации. И накрая, Каталин Василе, оригиналният дизайнер на ThemeIsle, работи върху новото лого.

Вероятно тази част струваше около 10 000 – 15 000 долара. Въпреки че самият дизайн е нещо почти невъзможно за проследяване на възвръщаемостта на инвестициите, считам, че си струва инвестицията. Честно казано, като се има предвид, че ни отне пет години преди да вземем решение за редизайн на сайта, цената представлява само по-малко от 0,5% от приходите. Така че ако това изобщо доведе до крак, това ще направи проекта лесно стойностен!

2. Нова структура на уебсайта

Въвеждането на нова структура малко увеличи сложността, но също така доведе до увеличаване на трафика към нашите топ продукти, което винаги е добро. В посока надолу трафикът към нашите тематични категории намаля. Но това е добре.

Основното тук е, че не искаме ThemeIsle да бъде "теми място," но да бъде известен като "създатели на Neve и Hestia."

За да постигнем това, решихме да включим тези продукти на началната страница, страницата с теми и да премахнем изцяло общата страница с ценообразуването (няма смисъл). Също така се заехме да създадем индивидуални лога за продукти, а след това и оригинални целеви страници за най-добрите продукти (със собствена марка и всички). Плюс това направихме няколко ощипвания тук-там, за да наблегнем на отделните марки.

преди и след това

3. Решен технически дълг

Отново две неща:

а) Скорост на уебсайта

Времето ни за зареждане вече е 50% по-бързо. Но ние влязохме в някои проблеми в процеса.

В опит да ни принудят както да използваме собствените си продукти, така и да използваме новия редактор на блокове (с който нашият програмист не беше запознат), ние сме объркали напълно опитът в изграждането на уебсайтове..

Гутенберг все още не е там или поне начинът, по който сме го използвали, не помага. Все още не е най-добрият избор за целевите страници и ако искате скорост, по-добре разчитайте на нещо като ACF с ръчно изградени структури. Ако предпочитате гъвкавостта преди всичко, можете да отидете с Beaver Builder или Elementor, както направихме за началната страница.

Когато става въпрос за изграждане на уебсайтове с предвид ефективността, задачата все още не е лесна. Всъщност не можете да зависите от приставки, за да решите всички проблеми за вас и трябва да направите много самостоятелно. Ето коментар на Cosmin Serbanescu, водещия разработчик на проекта за редизайн:

Козмин

За мен беше истинско удоволствие да работя върху редизайн на уебсайта ThemeIsle и определено е един от най-сложните и предизвикателни проекти, в които съм работил.

Вероятно най-трудната част беше, че поради ориентирания към скоростта подход, който имахме в началото, трябваше да помисля поне два пъти, преди да внедря функция или секция на уебсайт, без никакви добавки или ненужни библиотеки и да поддържам кода толкова чист, колкото възможен.

б) Нова структура на количката

Тази част премина доста гладко, тъй като сега имаме всичко, настроено в store.themeisle.com.

Разбира се, както обикновено с тези неща, ние се сблъскахме с някои проблеми в деня на изстрелване, но успяхме да го разберем точно навреме.

В тази настройка, както споменах по-рано, всички данни за клиент / потребител се съхраняват в отделен екземпляр от предния край, който съдържа списъците с теми, блога, маркетинговите страници.

4. По-добри целеви страници и мобилни устройства

Като част от редизайнът създадохме нови целеви страници за всички наши ключови продукти като фирн, Хестия, ShopIsle, Зеле, Feedzy, Visualizer, и WP Преглед на продукта.

От всички тях целевата страница за Hestia – където полагаме по-голямата част от усилията си – изглежда дава най-добри резултати. В момента има ~ 10% по-добри проценти на реализация. В момента разглеждаме данни от около месец, което ме кара да се чувствам оптимист.

hestia new

Като цяло за целия сайт изглежда, че сме загубили продажби. Но имаше толкова много промени, включително да се отървете от 10+ продукта (които всички допринесоха с малък брой продажби), че е трудно да се приписва нещо на самия дизайн.

Това е свързано с друга цел, която си поставих за тази година. Дори да запазим само 90% от приходите преди промени, но в същото време да управляваме 50% по-опростен бизнес, ще си заслужава. Под по-лесен бизнес имам предвид по-малко продукти, което се превежда на по-малко страници за управление, по-малко неща за документиране и поддръжка и по този начин повече време за работа за подобряване на съществуващите продукти.

Оптимизирането на новия сайт за мобилни устройства стана много общо, но не и супер 100% без проблем. Изборът на Гутенберг за основа, върху която създадохме новите страници, не беше лесно и в крайна сметка не подобри много мобилната ни производителност.

Не успяхме да достигнем реализацията под маркировката 50KB за целевите страници на продукта, така че не успяхме да ги обслужваме в AMP (има ограничение за това колко голям може да бъде CSS за AMP). Имаме обаче AMP на страници с категории.

Като цяло да се гарантира, че дизайнът може да работи с Gutenberg, Elementor и други строители беше трудна сделка. И не е просто да се уверите, че тези строители могат да изведат структурата си, но и да се уверите, че резултатът на екрана е това, което очаквате. В края на краищата, ние искаме да можем да променяме страниците по-късно и да не се налага да преработваме неща на ниво код, за да направим това възможно. Ето защо дизайнът трябва да работи с строителите.

Ето какво трябва да каже водещият дизайнер Джон Фраскос за това предизвикателство:

fraskos

Най-голямото предизвикателство беше да се създаде последователен, мащабируем дизайн "строител-агностик" тъй като части от проекта се изпълняват с помощта на различни технологии за изграждане на оформление. Успяхме да стесним и поддържаме основен визуален език за всички компоненти, който би бил лесен за възпроизвеждане с всеки конструктор на оформления, като ни осигури спокойствие в бъдеще.

Страниците са много по-лесни за навигация по мобилни сега и това не е по чиста случайност. Полагаме много усилия да проектираме мобилното изживяване и да мислим какво е важно за посетителите на мобилни устройства спрямо посетителите на десктоп. Напред, разгледайте някои от нашите страници с продукти на мобилни устройства и десктоп и вижте какво е различно (този, например).

Цялата реализация, заедно с маркетинговата работа около копие и текстове, целеви страници и други кампании отне доста време; 1500 работни часа, за да бъдем точни. Направихме го една от целите да направим сериозно проследяване на времето и да направим равносметка на всяка минута, прекарана в проекта.

Ако го умножите по всяка часова ставка, която искате да изчислите, това вероятно ни достига в диапазона от 50 000 до 100 000 долара. Или с други думи, ако искахме да изградим подобен сайт за трета страна, ще трябва да таксуваме повече от 100 000 долара, за да го направим печеливш.

Най-голямото предизвикателство за нас като цяло беше фактът, че това беше еднократен, уникален проект. Това, което искам да кажа е, че обикновено не изграждаме сайтове за електронна търговия, така че не разполагаме с процесите, а екипът и техните умения не са структурирани за проекти за изграждане на уебсайтове..

Ние се борихме да организираме работата си и не знаехме как да я водим или структурираме. Ние също нямахме (все още нямаме) специализиран екип, който да обработва всички предни проекти и сайтове. Изграждането на теми и плъгини за потребителите е просто съвсем различен вид. В крайна сметка, благодарение на Джон Фраскос, който ни насочи по правилния път, се спряхме на използването на Sketch за UI дизайн, Invision за сътрудничество в дизайна и обратна връзка и Slack за ежедневните дискусии. И ние преминахме през много итерации, така че всеки от тези инструменти със сигурност беше необходим.

дизайнерски итерации

И така, вероятно основният въпрос би бил; считам ли проекта за успешен?

Зависи.

Не виждаме краткосрочно увеличение на продажбите в резултат на редизайн. Все още имаме проблеми с редактирането и преправянето на сайта. Проектът също можеше да се изпълни по-гладко. В края на деня обаче все още не виждам по-добра инвестиция, която да ни създаде дългосрочни резултати.

Следващата година ще каже дали проектът е успешен или не. Любопитно ми е да видя как се развиват нещата.

Също така, заедно с Стартиране на Neve Pro и нашето спонсорство на WCEU, това поставя началото на нещо като нова ера за нас. Ера на опитите да се превърнете в по-утвърден бизнес срещу просто магазин с някои теми.

Аз също не бях единственият, който провеждаше шоуто тук. Това беше добро усилие в екипа и голяма промяна в нашата бизнес посока – да се доближим до клиента и да резонираме с техните нужди повече, като се съсредоточим върху по-малко, по-висококачествени продукти.

Благодаря отново на всички, които участваха в този редизайн!

Не забравяйте да отидете и да проверите новата ThemeIsle!

Не забравяйте да се присъедините към нашия крах курс за ускоряване на вашия сайт WordPress. С някои прости поправки можете да намалите времето за зареждане дори с 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