ThemeIsle Redesign: Begini Caranya dan Berapa Harganya

Desain ulang ThemeIsle


Saya benci menjadi buzzkill, tapi saya bukan penggemar desain ulang. Saya mendapatkan kegembiraan di balik mengubah hal-hal dan menyegarkan situs Anda setiap beberapa tahun, dan saya mengerti mengapa begitu banyak orang senang melewatinya, tapi itu bukan saya.

Pola pikir saya selalu bahwa desain harus "cukup baik," dan itu adalah sesuatu yang tidak akan membuat perbedaan besar dalam skema besar hal.

Tapi dengan itu, ThemeIsle sudah lama terlambat untuk perubahan. Bahkan saya dapat melihat bahwa segala sesuatunya tidak lagi siap pada tahun 2019. Jadi ketika keputusan dibuat untuk mengguncang segalanya, saya memastikan untuk mendokumentasikan prosesnya sehingga kami dapat belajar sebanyak mungkin dari transisi.

Sekarang itu desain ThemeIsle baru telah diluncurkan mari kita melihat kembali pada desain sebelumnya, keputusan yang dibuat, tujuan yang ditetapkan untuk desain baru, dan bagaimana semua itu dimainkan.

Pintasan:

  • �� Pikiran tentang desain lama
  • �� Desain baru masuk
  • �� Struktur situs web baru
  • �� Halaman arahan dan seluler yang lebih baik

Desain ThemeIsle lama dan masalah-masalahnya ��

1. Masalah desain itu sendiri

Jujur, saya tidak pernah melihat desain asli ThemeIsle seburuk itu. Maksud saya, saya tahu itu tidak hebat (saya memiliki mata, setelah semua), tetapi saya tidak berpikir bahwa itu adalah masalah yang dapat mempengaruhi merek kami atau berdampak negatif terhadap penjualan.

Plus, sudah lama sejak situs diluncurkan, dan pada hari-hari awal, desainnya cukup setara dengan apa lagi yang ada di luar sana.

Namun, selama bertahun-tahun, kami mulai melakukan banyak tes A / B, perbaikan lain yang disebut, berbagai tweak SEO, dll, dan karena tidak ada patokan desain terkemuka atau kontrol di atas itu semua, situs kehilangan konsistensi. Sebagai contoh, kami memiliki halaman normal ini untuk tema ShopIsle kami, dan ini cukup khusus untuk RokoPhoto:

toko vs rokophoto

Pada akhirnya, karena menjual kepada desainer adalah area yang ingin kami kembangkan, saya menyadari bahwa desain yang lebih halus mungkin sedikit meningkatkan merek kami dan menghasilkan lebih banyak buzz.

Itulah alasan utama saya di balik merombak situs.

2. Struktur situs web dan model bisnis

Ini adalah salah satu hal yang paling mengganggu saya. Ketika kami pertama kali memulai dan membangun situs web, itu dimaksudkan untuk menjadi klub tema. Kami memiliki 10-20 tema dan ingin menjualnya sebagai satu paket. Cukup mudah.

Kami juga memiliki forum dukungan saat itu, dan setelah meluncurkan situs utama, kami menemukan plugin yang membutuhkan rumah baru. Itu adalah tawaran yang bagus, jadi kami membawanya dan melemparkannya ke dalam penawaran utama juga. Tidak masuk akal untuk memilikinya di sana sebagai bagian dari paket tema, tetapi itu adalah yang terbaik yang kami pikir dapat kami lakukan pada saat itu. ��‍♂️

Dalam lima tahun terakhir, pasar telah berubah dan kami memahami bahwa kami tidak ingin harus membangun dan mempertahankan 20 tema yang berbeda lagi. Itu juga bukan apa yang orang harapkan. Kami berada di era "tema andalan" – di mana sebuah toko menawarkan satu tema utama atau hanya beberapa tema saja dan kemudian upgrade tambahan atau paket desain.

Kami telah memutuskan untuk mengikuti jalur yang sama juga, dan bekerja hanya pada dua atau tiga tema; sama untuk plugin kami.

Kami juga telah belajar bahwa merek produk individual lebih kuat dan memiliki lebih banyak potensi daripada "merek situs utama," jadi lebih masuk akal untuk menekankan hal itu. Pikirkan Tema X vs Themeco.

Satu elemen lagi yang berkontribusi adalah Blog ThemeIsle. Ini telah tumbuh banyak selama lima tahun terakhir, dan telah memungkinkan kami untuk mengamankan posisi pasar yang kami pikir tidak mungkin terjadi ketika kami pertama kali memulai.

3. Hutang teknis kami

Dua hal yang ingin saya bicarakan di sini:

a) Kecepatan situs web

Situs lama memiliki banyak barang warisan dan teknologi. Kami mulai dengan menjual produk kami langsung melalui situs, menggunakan sistem buatan tangan kami.

Ada banyak iterasi mesin situs, yang menghasilkan bidang ACF yang tak terhitung jumlahnya yang menjadi sulit untuk dikelola dari waktu ke waktu. Kami juga menjalankan forum, menyelenggarakan program afiliasi, menyelenggarakan dokumen, dan mungkin beberapa hal lainnya.

Secara keseluruhan, struktur itu tidak terlalu efisien, yang menghasilkan kinerja yang sangat buruk.

Sebagai catatan tambahan, kami telah pindah ke FastSpring sejak saat itu, dan tidak lagi menangani penjualan sendiri. Sementara kami menyingkirkan beberapa sistem lain yang serupa, banyak yang masih ada.

b) Struktur keranjang belanja

Karena sifat bisnis – dengan banyak produk dan dengan masing-masing merek yang dapat tumbuh lebih dari merek perusahaan induk, saya menyadari bahwa sudah waktunya untuk membagi pengaturan teknis aktual tentang bagaimana berbagai hal terjadi..

Secara khusus, lebih baik memisahkan data pelanggan dari bagian ujung depan (daftar tema dan juga penulis dan konten mereka ditambah semua upaya pemasaran). Dengan cara ini, kecepatan situs depan tidak akan terpengaruh oleh plugin seperti EDD atau apa pun yang terjadi di latar belakang untuk membuat bisnis berjalan.

Tim pemasaran juga akan mendapatkan kontrol lebih besar atas situs, dan kami akan dapat membuat situs / merek terpisah untuk produk sambil tetap mempertahankan area pelanggan terpadu di store.themeisle.com.

4. Laman landas dan seluler

Ketika kami meluncurkan situs asli, ponsel tidak benar-benar berarti. Khususnya di ceruk kami, di mana hampir tidak ada orang yang membeli tema saat di ponsel mereka. Bahkan saat ini, kami masih memiliki sedikit pelanggan seluler.

Namun, ponsel telah menjadi semakin penting, dan tren ini kemungkinan akan berlanjut. Bagaimanapun, Google sekarang menggunakan perayap selulernya di atas peramban desktop.

Singkat cerita, kami telah memutuskan untuk membangun halaman pendaratan khusus untuk produk-produk unggulan kami dan berupaya meningkatkan konversi pada mereka. Mobile sangat penting di sini karena kami bertekad untuk tidak hanya membuat halaman yang mobile-friendly tetapi juga kompatibel dengan AMP.

Hadir desain ThemeIsle baru ��

Oke, jadi dengan set panggung dan alasan saya menjelaskan, sekarang mari kita lihat bagaimana semuanya dimainkan.

1. Desain dan estetika

Ini bisa Anda nilai sendiri, tetapi bagi saya, ini merupakan keberhasilan mutlak!

Ini desain lama:

Desain lama ThemeIsle

Dan ini yang baru:

Desain baru ThemeIsle

Situs web terlihat jauh lebih konsisten dan menyenangkan bagi mata. John Fraskos dari AnalogWP membuat desain. João Santos, yang biasanya mengerjakan komik untuk kami, membuat beberapa ilustrasi khusus. Dan akhirnya, Catalin Vasile, desainer ThemeIsle asli, bekerja pada logo baru.

Bagian ini saja mungkin berakhir dengan biaya sekitar $ 10.000 – $ 15.000. Meskipun desain itu sendiri adalah sesuatu yang hampir mustahil untuk dilacak dari ROI, saya percaya bahwa itu layak untuk investasi. Terus terang, mengingat kami butuh lima tahun sebelum memutuskan untuk mendesain ulang situs, biaya hanya mewakili kurang dari 0,5% dari pendapatan. Jadi, jika ini menghasilkan terbalik, itu akan membuat proyek mudah!

2. Struktur situs web baru

Memperkenalkan struktur baru telah meningkatkan kompleksitas sedikit, tetapi juga menghasilkan peningkatan lalu lintas ke produk unggulan kami, yang selalu merupakan hal yang baik. Pada sisi negatifnya, lalu lintas ke kategori tema kami telah menurun. Tapi tidak apa-apa.

Hal utama di sini adalah bahwa kami tidak ingin ThemeIsle menjadi "tempat tema," tetapi dikenal sebagai "pencipta Neve dan Hestia."

Untuk mencapai ini, kami telah memutuskan untuk menampilkan produk-produk tersebut di beranda, halaman tema, dan menghapus halaman penetapan harga umum secara keseluruhan (tidak masuk akal). Kami juga mulai membuat logo individual untuk produk, dan kemudian laman landas asli untuk produk teratas (dengan merek sendiri dan semuanya). Plus, kami melakukan beberapa penyesuaian di sana-sini untuk menekankan merek individual.

hestia sebelum dan sesudah

3. Utang teknis diselesaikan

Sekali lagi, dua hal:

a) Kecepatan situs web

Waktu pemuatan kami 50% lebih cepat sekarang. Tapi kami memang mendapat masalah dalam prosesnya.

Dalam upaya untuk memaksa kami menggunakan produk kami sendiri dan juga menggunakan editor blok baru (yang tidak dikenal pengembang kami), kami telah mengacaukan pengalaman membangun situs web sepenuhnya.

Gutenberg belum ada di sana, atau setidaknya cara kita menggunakannya tidak membantu. Itu masih bukan pilihan terbaik untuk halaman arahan, dan jika Anda ingin kecepatan, Anda lebih baik mengandalkan sesuatu seperti ACF dengan struktur buatan tangan. Jika Anda lebih suka fleksibilitas daripada yang lain, Anda bisa menggunakan Beaver Builder atau Elementor, seperti yang telah kami lakukan untuk beranda.

Ketika datang untuk membangun situs web dengan kinerja dalam pikiran, tugas itu masih tidak mudah. Anda tidak dapat benar-benar bergantung pada plugin untuk menyelesaikan semua masalah bagi Anda, dan Anda harus melakukan banyak hal sendiri. Berikut komentar dari Cosmin Serbanescu, pengembang utama pada proyek desain ulang:

cosmin

Sangat menyenangkan bekerja di mendesain ulang situs web ThemeIsle dan jelas merupakan salah satu proyek paling kompleks dan menantang yang pernah saya kerjakan.

Mungkin bagian tersulitnya adalah karena pendekatan berorientasi kecepatan yang kami miliki sejak awal, saya harus berpikir setidaknya dua kali sebelum menerapkan fitur atau bagian situs web, tanpa plugin pihak ketiga atau perpustakaan yang tidak perlu dan menjaga kode sebersih bisa jadi.

b) Struktur keranjang belanja baru

Bagian ini berjalan cukup lancar, karena kami sekarang telah menyiapkan semuanya di store.themeisle.com.

Tentu saja, seperti biasa dengan hal-hal ini, kami menghadapi beberapa masalah pada hari peluncuran, tetapi kami berhasil mengatasinya tepat waktu.

Dalam pengaturan ini, seperti yang saya sebutkan sebelumnya, semua data pelanggan / pengguna disimpan secara terpisah dari front-end, yang menyimpan daftar tema, blog, halaman pemasaran.

4. Laman landas dan seluler yang lebih baik

Sebagai bagian dari pendesainan ulang, kami membangun halaman arahan baru untuk semua produk utama kami Neve, Hestia, Keributan, Zelle, Feedzy, Visualizer, dan Ulasan Produk WP.

Dari semuanya, halaman arahan untuk Hestia – tempat kami melakukan sebagian besar upaya kami – tampaknya mendapatkan hasil terbaik. Saat ini mengalami ~ 10% tingkat konversi yang lebih baik. Kami sedang mencari data sekitar sebulan, yang membuat saya merasa optimis.

hestia baru

Secara keseluruhan, untuk seluruh situs, sepertinya kami kehilangan penjualan. Tetapi ada begitu banyak perubahan, termasuk menyingkirkan 10+ produk (yang semuanya menyumbang sejumlah kecil penjualan) sehingga sulit untuk menghubungkan apa pun dengan desain itu sendiri..

Ini terkait dengan tujuan lain yang telah saya tetapkan untuk tahun ini. Bahkan jika kita hanya menyimpan 90% dari pendapatan pra-perubahan tetapi pada saat yang sama mengelola bisnis yang lebih sederhana 50%, itu akan sia-sia. Dengan bisnis yang lebih sederhana, maksud saya lebih sedikit produk, yang diterjemahkan ke lebih sedikit halaman untuk dikelola, lebih sedikit hal untuk didokumentasikan dan didukung, dan dengan demikian lebih banyak waktu untuk bekerja membuat produk yang ada lebih baik.

Mengoptimalkan situs baru untuk seluler berjalan baik secara keseluruhan, tetapi tidak super masalah 100% gratis. Memilih Gutenberg sebagai dasar pembuatan halaman baru itu tidak mudah dan pada akhirnya tidak banyak meningkatkan kinerja ponsel kami.

Kami tidak berhasil mendapatkan implementasi di bawah tanda 50KB untuk halaman pendaratan produk, jadi kami tidak dapat menayangkannya di AMP (ada batasan seberapa besar CSS untuk AMP). Namun, kami memiliki AMP di halaman kategori.

Secara keseluruhan memastikan bahwa desain dapat bekerja dengan Gutenberg, Elementor dan pembangun lain adalah kesepakatan yang sulit. Dan ini bukan hanya semata-mata untuk memastikan bahwa pembangun tersebut dapat menampilkan struktur mereka, tetapi juga memastikan bahwa hasil di layar adalah apa yang Anda harapkan. Bagaimanapun, kami ingin dapat memodifikasi halaman nanti, dan tidak harus mengulang hal-hal pada tingkat kode untuk memungkinkannya. Inilah sebabnya desain harus bekerja dengan pembangun.

Inilah yang dikatakan perancang utama, John Fraskos tentang tantangan ini:

fraskos

Tantangan terbesar adalah menciptakan desain yang konsisten dan dapat diukur "pembangun-agnostik" karena sebagian proyek dieksekusi menggunakan teknologi pembangun tata letak yang berbeda. Kami berhasil mempersempit dan mempertahankan bahasa visual dasar untuk semua komponen, yang akan mudah untuk ditiru dengan pembangun tata letak apa pun, memberikan kami ketenangan pikiran yang tahan masa depan..

Halaman-halamannya jauh lebih mudah dinavigasi di ponsel sekarang, dan ini bukan kebetulan belaka. Kami berupaya keras untuk merancang pengalaman seluler dan memikirkan apa yang penting bagi pengunjung seluler vs pengunjung desktop. Silakan, periksa beberapa halaman produk kami di ponsel dan desktop dan lihat apa yang berbeda (yang ini, contohnya).

Seluruh implementasi, bersama dengan pekerjaan pemasaran seputar copy dan teks, halaman arahan, dan kampanye lainnya membutuhkan waktu yang cukup lama; 1.500 jam kerja, tepatnya. Kami menjadikannya salah satu tujuan untuk melakukan pelacakan waktu yang serius dan mencatat setiap menit yang dihabiskan untuk proyek tersebut.

Jika Anda mengalikannya dengan tarif per jam berapa pun yang ingin Anda hitung, ini membuat kami mungkin berada di kisaran $ 50.000 – $ 100.000. Atau, dengan kata lain, jika kami ingin membangun situs serupa untuk pihak ketiga, kami harus mengenakan biaya lebih dari $ 100 ribu untuk membuatnya menguntungkan.

Tantangan terbesar bagi kami secara keseluruhan adalah kenyataan bahwa ini adalah proyek yang unik dan hanya sekali jalan. Maksud saya adalah bahwa kita biasanya tidak membangun situs e-commerce, jadi kami tidak memiliki proses di tempat, dan tim dan keterampilan mereka tidak terstruktur untuk proyek pembangunan situs web.

Kami berjuang untuk mengatur pekerjaan kami, dan tidak tahu bagaimana memimpin atau menyusun semuanya. Kami juga tidak memiliki (kami masih belum) tim khusus yang akan menangani semua proyek dan situs yang menghadap ke depan. Membangun tema dan plugin untuk pengguna hanyalah hal yang sangat berbeda. Pada akhirnya, terima kasih kepada John Fraskos, yang mengarahkan kami di jalan yang benar, kami memutuskan untuk menggunakan Sketch untuk desain UI, Invision untuk kolaborasi desain dan umpan balik, dan Slack untuk diskusi sehari-hari. Dan kami telah melalui banyak iterasi, sehingga masing-masing alat ini tentu diperlukan.

iterasi desain

Jadi, pertanyaan utamanya mungkin adalah; apakah saya menganggap proyek ini sukses?

Tergantung.

Kami tidak melihat peningkatan jangka pendek dalam penjualan yang dihasilkan dari desain ulang. Kami masih mengalami masalah dengan pengalaman pengeditan dan penyesuaian situs. Proyek ini juga bisa berjalan lebih lancar. Namun, pada akhirnya, saya masih tidak dapat melihat investasi yang lebih baik yang akan mengatur kami untuk hasil jangka panjang.

Tahun berikutnya akan mengetahui apakah proyek tersebut berhasil atau tidak. Saya ingin tahu bagaimana keadaannya.

Juga, bersama dengan Peluncuran Neve Pro dan sponsor WCEU kami, ini menandai awal dari semacam era baru bagi kami. Era berusaha menjadi bisnis yang lebih mapan vs sekadar toko dengan beberapa tema.

Saya juga bukan satu-satunya yang menjalankan pertunjukan di sini. Itu adalah upaya tim yang baik, dan perubahan besar dalam arah bisnis kami – semakin dekat dengan pelanggan dan beresonansi dengan kebutuhan mereka lebih dengan berfokus pada lebih sedikit, produk-produk berkualitas tinggi.

Sekali lagi terima kasih kepada semua orang yang mengambil bagian dalam desain ulang ini!

Jangan lupa untuk pergi dan check out ThemeIsle baru!

Jangan lupa untuk bergabung dengan kursus kilat kami tentang mempercepat situs WordPress Anda. Dengan beberapa perbaikan sederhana, Anda dapat mengurangi waktu loading hingga 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