Desain Ulang Situs Web Biaya Rendah Saya Yang Meningkatkan Tingkat Konversi 42% Dalam 7 Minggu
Diterbitkan: 2021-08-19Melakukan desain ulang situs web lengkap toko online saya telah ada di daftar "yang harus saya lakukan" untuk waktu yang sangat lama, tetapi saya tidak dapat menarik pelatuk karena itu tidak pernah menjadi prioritas.
Inilah masalahnya. Tingkat konversi saya selalu cukup bagus (>3%). Dan toko online saya telah tumbuh dua digit setiap tahun jadi mengapa mengguncang perahu?
Tapi kemudian saya menghadiri pertemuan dalang 3 bulan yang lalu dengan sekelompok veteran e-niaga lainnya dan memutuskan untuk membicarakan hal ini selama giliran saya di "kursi panas".
Hai semuanya. Saya sedang berpikir untuk mendesain ulang situs, tetapi tingkat konversi saya saat ini masih cukup bagus. Apakah saya perlu memperbaruinya sekarang? Dan apakah menurut Anda itu cukup buruk sehingga saya harus memperbaikinya hari ini? Bisakah saya menundanya satu tahun lagi?
Jawaban yang saya terima sangat menyakitkan untuk didengar.
- Situs web ini sepertinya dirancang pada tahun 90-an. Jika Anda mendesain ulang, saya yakin Anda bisa mendapatkan peningkatan 50% dalam tingkat konversi. – Mike Jackness
- Anda menjalankan kursus? Saya tidak akan mengambil kelas Anda jika saya melihat ini. – Kevin Steko
- Ini adalah jenis situs yang ingin saya beli , perbaiki, lalu jual kembali dengan untung. – Dana Jaunzemis
Mendengar komentar ini benar-benar melukai harga diri saya dan saya mencoba yang terbaik untuk tidak bersikap defensif.
Tetapi segera setelah saya kembali dari dalang, saya segera menghubungi desainer saya, membuat mockup cepat di Photoshop, dan mulai menjalankannya .
Proses implementasi saya cukup mudah. Saya menelusuri dan membajak setiap halaman sendiri, meletakkannya "kira-kira" seperti yang saya inginkan dan meminta desainer saya mengambil potongan untuk membuatnya "terlihat lebih baik".
Saya menganggarkan sekitar 6 minggu untuk menyelesaikan desain ulang dengan saya berkontribusi sekitar 40 jam dari waktu saya sendiri. Setiap satu halaman di situs itu benar-benar dibuat ulang.
Secara keseluruhan, proyek ini akhirnya memakan waktu 7 minggu karena keadaan yang tidak terduga dengan kompatibilitas browser (saya benci Anda IE!) dan saya menghabiskan biaya $1840 .
Catatan Editor: Ini tautan ke situs baru saya dan Anda dapat menggunakan mesin wayback untuk melihat versi lama.
Dapatkan Kursus Mini Gratis Saya Tentang Cara Memulai Toko E-niaga yang Sukses
Jika Anda tertarik untuk memulai bisnis e-niaga, saya mengumpulkan paket sumber daya yang komprehensif yang akan membantu Anda meluncurkan toko online Anda sendiri dari awal. Pastikan untuk mengambilnya sebelum Anda pergi!
Hasil Desain Ulang Situs Web Saya
Hasil konversi berikut hanya untuk seluler, desktop, dan tablet untuk lalu lintas BPK Google .
Karena situs saya mendapat banyak lalu lintas dari halaman konten yang belum tentu dikonversi menjadi penjualan, menjalankan angka untuk lalu lintas iklan ppc bertarget paling masuk akal untuk tujuan perbandingan.
- Tingkat konversi desktop meningkat 46% Diperbarui!
- Tingkat konversi seluler meningkat sebesar 21% Diperbarui!
- Tingkat konversi tablet meningkat 25% Diperbarui!
Catatan: Data tingkat konversi saya dibandingkan dengan periode yang sama persis dengan tahun sebelumnya untuk menghilangkan variabel seperti musim dan fluktuasi permintaan.
Karena itu, satu-satunya cara yang benar untuk mengukur perbedaan tingkat konversi adalah dengan membagi uji desain yang tidak saya lakukan untuk kepentingan waktu.
Pertama, peningkatan rasio konversi desktop benar-benar mengejutkan saya karena saya tidak mengharapkan lompatan besar. Saya tahu bahwa situs lama saya membutuhkan pekerjaan tetapi tidak sebanyak ini!
( Pembaruan: Setelah beberapa bulan lebih banyak data, peningkatan rasio konversi untuk desktop adalah 46%)
Untuk pelanggan tablet, peningkatan rasio konversi sebenarnya lebih tinggi dari 15% karena saya menemukan bug utama dalam implementasi tablet beberapa minggu setelah peluncuran yang bercampur dengan hasil.
( Pembaruan: Setelah beberapa bulan lebih banyak data, peningkatan rasio konversi untuk tablet adalah 25%.)
Dan untuk seluler, saya telah menerapkan situs seluler yang cukup baik pada tahun 2013 jadi saya tidak mengharapkan lompatan besar tetapi 12% masih cukup bagus.
( Pembaruan: Setelah beberapa bulan lebih banyak data, peningkatan rasio konversi untuk seluler adalah 21%.)
Bagaimanapun, meskipun ada peningkatan tingkat konversi, tidak semua datanya bagus. Untuk beberapa alasan, metrik di tempat saya seperti rasio pentalan telah meningkat sekitar 10% secara keseluruhan.
Catatan Editor: Saat ini, saya menduga itu karena saya menghapus navigasi sebelah kiri dari situs, tetapi saya harus menyaring data untuk mencari tahu persis mengapa itu terjadi. Memperbarui! Saya menghentikan dukungan untuk beberapa versi browser dalam desain ulang ini yang berkontribusi pada masalah ini.
Keranjang Belanja Apa yang Saya Gunakan?
Pertanyaan paling umum yang selalu saya tanyakan pada setiap desain ulang adalah…
Steve keranjang belanja apa ini? Apakah itu Shopify? Atau apakah itu BigCommerce?
Dan ketika saya memberi tahu semua orang bahwa saya masih menggunakan keranjang belanja open source sekolah lama saya yang dimodifikasi , mereka biasanya terkejut.
Berikut hal…
Keranjang belanja yang Anda pilih tidak ada hubungannya dengan tampilan keranjang belanja Anda , atau tampilan situs web Anda. Tujuan utama dari keranjang belanja Anda adalah untuk menangani dan memproses transaksi.
Jika keranjang belanja Anda memiliki semua fitur backend yang Anda butuhkan, maka Anda tidak perlu beralih . Estetika situs web Anda tidak ada hubungannya dengan mesin keranjang belanja.
Jadi bahkan jika Anda memiliki keranjang belanja yang tua seperti saya, selama memiliki semua fitur yang Anda butuhkan, Anda tidak boleh menilai dari tampilannya, karena Anda selalu dapat mengubah tampilannya.
Bagian terbaiknya adalah jika Anda menggunakan platform open source, Anda dapat menambahkan fitur Anda sendiri kapan pun Anda mau karena Anda memiliki kontrol penuh.
Misalnya untuk desain ulang situs ini, saya menerapkan fitur bukti sosial kecil yang bagus ini untuk toko saya. Pada dasarnya setiap 5-15 detik, sebuah jendela kecil muncul di sudut kiri bawah yang menampilkan pembelian sebelumnya yang dilakukan di situs.
Di Shopify, Anda dapat membeli plugin untuk melakukan hal yang sama persis dan membayar $15/bulan. Tapi saya butuh kira-kira 5 jam (seharusnya butuh 2 jam tetapi pengkodean saya berkarat) untuk memompa hal yang sama tanpa biaya berulang .
Bagaimanapun, ini hanyalah beberapa keuntungan dari memiliki kode sumber. Jika Anda cenderung secara teknis, saya sarankan untuk mencoba open source.
Tetapi jika Anda tidak mengerti tentang desain web dan Anda tidak ingin berurusan dengan hal teknis apa pun, gunakan Shopify atau BigCommerce.
Mengubah Skema Warna
Salah satu keluhan terbesar tentang situs saya dari perspektif estetika adalah skema warna. Situs lama berwarna ungu dan kuning dan palet warna yang saya pilih membuat situs terlihat kuno .
Catatan Editor: Ini tautan ke situs baru saya dan Anda dapat menggunakan mesin wayback untuk melihat versi lama.
Ironisnya, dalam Kursus Membuat Toko Online yang Menguntungkan, saya sebenarnya mengajarkan pelajaran tentang teori warna tetapi saya tidak memiliki pengetahuan ini pada tahun 2013 sehingga saya tidak pernah mendapat kesempatan untuk mempraktikkannya .
Singkatnya, saya menggunakan situs bernama color.adobe.com untuk memilih warna pelengkap untuk desain baru saya. Dan untuk menyegarkan tampilan dan nuansa, saya memilih teal, hot pink dan kuning.
Kenapa 3 warna? Itu karena saya menginginkan warna tertentu yang diasosiasikan dengan "mengambil tindakan". Saya ingin warna tertentu untuk "menarik perhatian". Dan akhirnya, saya menginginkan warna keseluruhan yang cerah untuk membuat situs ini terasa “muda dan trendi”.
Teal adalah warna latar belakang saya. Kuning adalah warna "perhatian" saya jika saya memiliki penawaran khusus, dan hot pink digunakan untuk setiap tombol tindakan di situs karena menonjol dan menonjol.
Setiap halaman di situs saya dirancang untuk memiliki tujuan tunggal.
Untuk halaman depan, saya ingin orang-orang menelusuri koleksi pribadi kami karena ini adalah bagian dengan margin tertinggi. Pada halaman kategori, saya ingin orang mengklik suatu produk. Dan pada halaman produk, saya ingin orang mengklik "Tambahkan Ke Keranjang".
3 Pilar Konversi
Satu kesalahan besar yang saya lihat dilakukan orang ketika merancang situs web mereka sendiri adalah mereka mencoba menyalin Amazon.com . Amazon adalah platform e-niaga terbesar di planet ini, jadi mengapa saya tidak membuat model situs saya setelah mereka?
Pertama-tama, desain situs web Amazon jelek, generik, dan tidak cocok untuk sebagian besar toko online khusus . Alasan mengapa Amazon dapat lolos dengan situs web yang jelek adalah karena semua orang tahu siapa mereka, mereka terbiasa dengan antarmuka dan mereka sudah mempercayai Amazon.
Tetapi ketika Anda memiliki situs web sendiri, Anda harus membangun kepercayaan itu dari awal karena tidak ada yang tahu siapa Anda.
Secara keseluruhan, ada tiga hal utama yang penting bagi siapa pun yang pertama kali membuka situs Anda.
Pertama, Anda perlu memberi tahu orang-orang bahwa Anda menawarkan pengiriman gratis. Semacam penawaran pengiriman gratis sekarang setara untuk kursus ini berkat Amazon dan toko e-niaga kotak besar lainnya.
Kedua, karena Anda adalah entitas yang tidak dikenal, Anda ingin meyakinkan pelanggan bahwa mereka dapat mengembalikan barang dagangan mereka jika mereka tidak puas.
Dan akhirnya, hal ketiga yang harus Anda bangun dengan pelanggan baru adalah kepercayaan yang mungkin merupakan faktor terpenting dari semuanya.
Jika pelanggan tiba di situs Anda dan mereka tidak mempercayai toko Anda karena mereka belum pernah mendengar tentang Anda, mereka hanya akan mengambil dan pergi.
Untuk desain ulang saya, saya menegakkan kepercayaan dalam berbagai cara.
Di tajuk setiap halaman, saya menekankan pengiriman gratis, pengembalian tanpa kerumitan dan nomor telepon saya. Memiliki nomor telepon di depan mata SANGAT PENTING!
Setiap kali saya berbelanja online di butik baru, hal pertama yang selalu saya lakukan adalah mengklik halaman kontak dan mencari nomor telepon dan alamat . Dan jika tidak satu pun dari barang-barang itu yang ditampilkan atau jika hanya satu dari keduanya yang ada, saya tidak akan berbelanja di sana.
Pelanggan menginginkan kemampuan untuk menghubungi toko jika terjadi kesalahan dengan pembelian mereka. Dan sebagai hasilnya, Anda ingin informasi ini terlihat sejelas mungkin di setiap halaman termasuk jam buka toko Anda.
Memiliki "jam buka toko resmi" juga membuat toko Anda tampak lebih profesional karena Anda tampil seperti bisnis mapan dengan jam kerja "nyata".
Bukti dan Kepercayaan Sosial
Di bagian bawah setiap halaman, saya memiliki bagian khusus untuk bukti sosial yang mendukung kredibilitas situs saya.
Lagi pula, kami telah ditampilkan di sejumlah besar majalah yang berbeda dan kami telah berada di acara Today, jadi apa gunanya jika kami tidak menyombongkannya?
Bagian bukti sosial/sebutan pers kami ada di setiap halaman situs jadi meskipun Anda tidak melihatnya pertama kali, Anda akhirnya akan menyadarinya.
Saya juga meminta banyak pelanggan kami untuk foto dan testimonial yang ditampilkan tepat di bawah bagian pers.
Ini adalah pelanggan nyata yang berbelanja di situs kami, sangat senang dengan pembelian mereka, dan bersedia meninggalkan testimonial yang sangat bagus untuk kami.
Satu pelanggan tertentu Sherri telah membeli lebih dari seratus lima puluh kali dari situs kami karena dia sangat menyukai saputangan kami.
Dan akhirnya, saya telah menyertakan beberapa kata-kata yang meyakinkan pelanggan bahwa kepuasan mereka adalah perhatian utama kami. Kami tidak pernah membiarkan pelanggan pergi dengan tidak bahagia. Dan jika terjadi kesalahan kami memberikan pengembalian dana penuh.
Mengubah Navigasi
Mendesain ulang navigasi untuk situs baru saya adalah area di mana saya kesulitan. Pertama, saya penggemar berat navigasi sisi kiri . Desain lama saya memilikinya dan pelanggan saya menyukainya karena menunya selalu terlihat dan dapat diakses.
Sisi kiri halaman web juga merupakan tempat mata Anda secara alami tertarik dan itu adalah tempat yang paling jelas untuk mulai berbelanja.
Tapi inilah dilema saya…
Jika saya menyertakan kolom kiri khusus untuk navigasi, semua yang lain di situs harus menyusut.
Misalnya, semua gambar produk saya perlu dikurangi secara signifikan yang akan berdampak negatif pada konversi .
Gambar kategori saya akan lebih kecil yang akan menurunkan RKPT .
Kata-kata bertele-tele pada setiap halaman akan mengambil lebih banyak layar real estat yang akan mendorong produk lebih jauh ke bawah halaman .
Jadi pada akhirnya, saya pergi dengan menu tarik-turun tingkat atas, gaya melayang-layang, . Keindahan bilah navigasi tingkat atas adalah perilakunya mirip dengan bilah navigasi sebelah kiri, tetapi tidak menempati jumlah real estat layar yang sama.
Dan dengan memindahkan navigasi ke atas, saya dapat meningkatkan kategori dan gambar produk saya hingga 300% yang membuatnya benar-benar menonjol.
Keuntungan lain menggunakan navigasi tingkat atas adalah kemampuan untuk memisahkan kategori yang berbeda dengan cara yang sangat bersih.
Sebagai contoh, saya sekarang memiliki kategori "Belanja Berdasarkan Acara" yang berbeda sedangkan dalam desain lama saya, bagian ini dicampur dengan sisa menu sebelah kiri sehingga tidak menonjol.
Saya juga menambahkan bagian khusus yang didedikasikan untuk barang yang dipersonalisasi, penjual terbaik, pendatang baru, halaman FAQ, halaman kontak, halaman tentang, lihat keranjang, dan periksa.
Pada dasarnya, semua item navigasi terpenting sekarang ada di bilah utama untuk dilihat semua orang.
Menekankan Proposisi Nilai Unik Saya
Salah satu prinsip penting yang saya ajarkan dalam kursus e-niaga saya adalah bahwa setiap halaman arahan di situs Anda harus memiliki proposisi nilai unik yang kuat .
Mengapa seseorang harus membeli dari toko Anda? Mengapa saya harus berbelanja di sini dibandingkan dengan pesaing? Jawabannya harus segera jelas.
Jadi untuk desain ini, saya memilih untuk menekankan kekuatan kami di depan dan di tengah di setiap halaman di situs kami.
Misalnya di halaman depan, proposisi nilai kami tepat di dalam gambar splash.
Pada halaman kategori kami, saya menerapkan kotak teks khusus untuk menyampaikan mengapa toko kami istimewa.
Tujuan utamanya adalah untuk meyakinkan pelanggan dalam 5 detik pertama mengapa mereka harus membeli dari Anda dan bukan dari pesaing.
Mempercantik Halaman Produk
Salah satu takeaways terbesar dari kritik situs saya adalah bahwa halaman produk saya tidak sesuai standar .
Berikut halaman produk dari desain lama.
Inilah halaman yang sama seperti di situs baru saya.
Apakah Anda melihat ada perbedaan? Pertama, karena saya menghapus bilah sisi kiri, saya dapat meningkatkan ukuran gambar produk sebesar 266% .
Tidak hanya gambar utama yang jauh lebih besar, tetapi saya juga mengatur ulang elemen halaman produk untuk mendorong lebih banyak klik “Tambahkan Ke Keranjang”.
Misalnya, tepat di sebelah tombol "Tambahkan Ke Keranjang" adalah kotak teks yang meyakinkan pelanggan tentang pengiriman gratis dan pengembalian tanpa kerumitan.
Ada juga tautan di bagian atas yang secara dinamis memberi tahu pelanggan kapan mereka akan menerima pesanan mereka tergantung pada apakah mereka memilih standar atau ekspres, dan semua biaya pengiriman terkait yang terlibat.
Saya juga menempatkan tombol Pinterest dan Facebook langsung pada gambar itu sendiri untuk mendorong berbagi setelah mengetahui bahwa sebagian besar pengunjung bahkan tidak melihat tombol berbagi khusus di situs lama saya.
Satu hal yang menarik untuk dicatat adalah bahwa saya awalnya memiliki dua tombol biru dan merah besar untuk dibagikan di Facebook dan Pinterest tepat di bawah gambar seperti yang ditunjukkan di bawah ini.
Tetapi pada akhirnya saya memutuskan untuk menghapusnya karena mereka lebih menonjol daripada tombol "Tambahkan Ke Keranjang" merah muda. Pada akhirnya, saya menghargai tindakan “Tambahkan Ke Keranjang” jauh lebih banyak daripada berbagi media sosial.
Terakhir, saya juga meningkatkan ukuran bagian cross sell untuk menarik pelanggan agar membeli barang serupa.
Meningkatkan Pembayaran
Memperbaiki proses checkout bukanlah prioritas besar bagi saya karena tidak ada masalah besar dengan situs lama. Tetapi karena kap saya sudah terbuka, saya memutuskan untuk memperbaiki beberapa masalah luar biasa yang telah melekat di situs saya selama beberapa waktu.
Pertama, kadang-kadang kami akan mendapat telepon dari orang-orang yang bingung dan bertanya - tanya apakah mereka membutuhkan akun untuk berbelanja di situs kami. Inilah tampilan halaman checkout pertama di situs lama kami.
Solusi untuk masalah ini adalah menyembunyikan login secara default dan hanya menampilkan dua tombol hot pink untuk check out.
Saya juga membuat logo kepercayaan lebih menonjol untuk meyakinkan pelanggan bahwa checkout aman dan kepuasan mereka terjamin.
Perubahan besar lainnya adalah saya membuat checkout benar-benar responsif .
Catatan: Jika Anda menggunakan Shopify, maka Anda mungkin sudah melihat seperti apa tampilan proses checkout yang responsif.
Jadi, alih-alih menemukan kembali roda, pada dasarnya saya meniru desain checkout Shopify karena cukup mengagumkan.
Singkatnya, inilah tampilan checkout saya sekarang di berbagai ukuran layar.
Untuk desktop…
Untuk tablet dan ponsel
Beberapa Kata Tentang Seluler
Selama desain ulang situs terakhir saya pada tahun 2013, saya menerapkan situs web seluler yang sepenuhnya terpisah dari situs desktop yang berada di subdomain yang berbeda.
Dan sementara saya masih percaya bahwa itu adalah keputusan yang tepat pada saat itu, itu jelas tidak terjadi hari ini. Saat ini, ada banyak kerangka kerja seperti BootStrap yang membuat desain responsif menjadi lebih mudah.
Selama beberapa tahun terakhir, sangat sulit untuk menjaga situs seluler dan desktop saya tetap sinkron, jadi saya senang sekarang memiliki satu situs terpadu di semua platform.
Kelemahan utama dari menjadi responsif adalah saya harus menguji situs secara menyeluruh di 3 platform yang sama sekali berbeda , desktop, tablet, dan seluler. Dan di dalam setiap platform ada beberapa versi browser dan resolusi layar yang harus ditangani.
Misalnya, saya harus menguji IE 8, 9, 10 dan 11 untuk mesin Windows. Saya harus menguji Safari 6,7 dan 8 untuk Mac.
Pada akhirnya, saya memeriksa akun Google Analytics saya untuk melakukan pengujian kegunaan untuk setiap browser yang telah digunakan di situs saya dalam setahun terakhir menggunakan alat yang disebut Browser Stack.
Tak perlu dikatakan, proses ini payah dan merupakan bagian desain ulang yang paling tidak saya sukai :(
Bagaimanapun, berikut adalah beberapa sorotan mengenai desain ponsel baru. Sebagian besar item baris ini cukup standar jadi saya tidak akan membuat Anda bosan dengan terlalu banyak detail.
Di tablet dan seluler, saya mengubah menu menjadi satu menu pull down.
Berdasarkan situs seluler saya sebelumnya, saya menemukan bahwa setiap orang cenderung langsung menuju bilah pencarian, jadi saya memastikan untuk menyertakan bilah pencarian di depan dan di tengah setiap halaman di situs seluler.
Karena layar real estat jauh lebih kecil di ponsel, saya menghapus elemen halaman "tidak penting" tertentu untuk ukuran layar yang lebih kecil.
Perubahan Pinterest
Perubahan terakhir yang saya buat adalah saya benar-benar mengubah halaman konten saya. Seperti yang telah saya sebutkan berkali-kali di masa lalu, saya menggunakan halaman seni dan kerajinan kami untuk mengarahkan orang ke toko online kami. Dan Pinterest adalah sumber lalu lintas yang besar untuk halaman ini.
Hasilnya, saya benar-benar membuat ulang sebagian besar gambar kerajinan dan membuat versi tinggi dan kurus khusus hanya untuk Pinterest . Saya juga membuat gambar baru untuk foto produk kami juga.
Misalnya, alih-alih menggunakan gambar persegi panjang untuk Pinterest saat Anda mengklik tombol "pin", Anda sekarang mendapatkan versi tinggi dan kurus yang hi res.
Kesimpulan
Secara keseluruhan, 7 minggu dan $1840 adalah investasi yang cukup bagus untuk keuntungan yang saya alami sekarang. Masalah utama saya saat ini adalah bahwa saya memiliki terlalu banyak proyek yang berjalan secara bersamaan dan tidak cukup waktu untuk mengerjakan masing-masing proyek.
Tapi inilah hal…
Meskipun tingkat konversi saya bagus sebelumnya, peningkatan penjualan bersih karena tingkat konversi yang lebih baik kemungkinan akan mengalahkan upaya pembangunan lalu lintas lainnya yang telah saya rencanakan untuk diterapkan tahun ini.
Dan jika ada pelajaran yang bisa dipetik di sini, peningkatan rasio konversi untuk situs Anda akan meningkatkan penjualan di semua sumber lalu lintas Anda yang lain .
Fondasi untuk bisnis e-niaga Anda dimulai dengan platform Anda dan penting untuk memiliki semua tujuan Anda SEBELUM Anda fokus pada membangun lalu lintas.