Bagaimana kami membangun situs web di Articulate Marketing

Pertama-tama, kami membangun situs web HubSpot CMS. Jika Anda tidak tahu apa itu HubSpot, jangan khawatir. Pergilah ke sini untuk pengenalan yang mudah. Bagi Anda yang masih bersama kami, hari ini kami menguraikan proses pembuatan situs web untuk klien kami.

Artikel ini didasarkan pada salah satu webinar kami, yang dipandu oleh saya sendiri, Ioana Negulescu, Kepala Studio di Articulate Marketing. Anda dapat melihat video dan mengunduh slide di bawah ini:

Tantangan pembuatan situs web

Seringkali ada langkah awal untuk membangun situs web baru (atau memigrasikan situs yang sudah ada). Kita perlu meredakan beberapa ketakutan. Tidak jarang memiliki klien yang telah dibakar sebelumnya oleh pengalaman dengan agensi sebelumnya.

Ketika kita mendengar...

'Kami khawatir tentang mendapatkan situs web baru karena yang terakhir sangat merepotkan.'

Kami melakukan ini...

Kami telah mendengar ini berkali-kali. Jadi, kami berusaha untuk menjadi lebih baik.

Misalnya, daripada menggunakan Gantt Charts, kami lebih suka menggunakan milestones . Salah satu hal yang kami fokuskan adalah memiliki proses yang transparan dengan kemajuan yang terus diperbarui. Ini memberi klien kami rasa aman.

Satu hal yang sangat, sangat penting bagi kami selama proses desain web adalah ini: panggilan video melalui email. Ini penting karena kami dapat mengukur reaksi klien kami. Jika mereka sedikit pendiam, jika mereka sangat bersemangat, dan sebagainya. Dengan begitu, kita bisa membuat rekomendasi yang sesuai dengan harapan mereka. Dan, tentu saja, juga menjawab pertanyaan apa pun yang mungkin mereka miliki.

Ketika kita mendengar...

'Kami telah mencoba mengejar pengembang berkali-kali, mereka tidak akan kembali kepada kami.'

Kami melakukan ini...

Untuk menandai kemajuan, kami menggunakan panggilan manajemen proyek reguler, dan kami memilikinya di kalender sejak hari pertama. Selama panggilan manajemen proyek itu, kami menyajikan pekerjaan baru dan mengidentifikasi pemblokir.

Desainer dan pengembang membutuhkan waktu untuk benar-benar menyelesaikan pekerjaan, jadi tidak selalu masuk akal bagi mereka untuk menghadiri setiap panggilan semacam itu. Kami membawa mereka saat itu relevan.

Ketika kita mendengar...

'Bagaimana jika situs web baru tidak memenuhi harapan kita?'

Kami melakukan ini...

Sebelum memulai proyek desain situs web apa pun, kami menjalankan fondasi strategi pemasaran mereka. Ini sangat penting karena pada tahap ini kita belajar tentang pelanggan klien, perjalanan pembeli, dan tujuan pemasaran bisnis. Ini akan menginformasikan banyak keputusan strategis yang kami buat tentang situs web, menetapkan harapan sejak awal.

Kemudian, kita beralih ke arsitektur merek. Di sini, kami memaparkan dasar-dasar situs web. Warna, gambar atau ilustrasi, elemen UX/UI, font - keseluruhan estetika situs web. Ini adalah proses yang sangat kolaboratif. Klien kami terlibat di setiap langkah , sehingga masukan dan persyaratan mereka dimasukkan ke dalam produk akhir.

Contoh: HTG

Kami membangun situs web pemenang penghargaan untuk HTG, jadi kami akan menggunakannya sebagai contoh di seluruh.

Mereka mengungkapkan ketakutan ini dan menguraikan tantangan mereka ketika kami pertama kali berbicara dengan mereka. Ini adalah masalah yang cukup umum di antara perusahaan teknologi B2B:

• Tujuan pertumbuhan bisnis yang ambisius
• Situs web usang (dan merek)
• Beberapa peluang penangkapan prospek
• Navigasi kikuk
• Pengalaman pengguna yang buruk
• Kinerja situs yang buruk

Jika ini terdengar seperti Anda, buka di sini untuk menilai situs web Anda.

Proses Artikulasi

Inilah proses kami, singkatnya. Klik gambar ini untuk melihatnya lebih detail:

Mari kita kembali ke contoh HTG. Bersama mereka, kami mengikuti proses tujuh tahap yang biasa kami lakukan:

1. Kick-off

Kick-off adalah interaksi pertama untuk proyek situs web. Selama panggilan itu, kami mencoba mengukur preferensi klien kami untuk desain dan aspirasi merek. Kami ingin menyelaraskan preferensi ini, secara strategis, dengan tujuan akhir untuk setiap situs web buatan Articulate: untuk membangun mesin pemasaran yang berfungsi dengan baik.

2. Moodboards dan struktur situs web

Di sini kita menjalankan dua proses internal. Salah satunya adalah menyusun moodboard, rekomendasi font, rekomendasi warna, citra, dan lain sebagainya.

Yang lainnya adalah, dengan tim copywriter pemasaran kami, kami menyusun rekomendasi peta situs. Ini adalah struktur navigasi dan halaman yang perlu kita buat.

Kemudian, kami memiliki panggilan tinjauan klien, yang merupakan tonggak besar pertama kami. Di akhir setiap tahapan, kami memiliki panggilan peninjauan. Jika semuanya disetujui, kami melanjutkan ke tahap berikutnya. Jika tidak, kami kembali dan mengulangi.

3. Desain dan gambar rangka awal

Di sini, kami mendesain beranda sebagai cara untuk menunjukkan estetika situs web. Biasanya, kami membuat beberapa opsi berbeda untuk dipilih klien. Saat kami mendesain dengan cara modular , kami menganggap ini sebagai langkah untuk menunjukkan seperti apa beberapa 'batu bata Lego' yang paling penting nantinya.

Secara paralel, kami menyusun strategi seputar struktur halaman. Artinya, konten seperti apa yang masuk ke halaman apa? Bata Lego mana yang kita butuhkan?

Tim kami kemudian membangun gambar rangka, yang seperti sketsa kasar halaman situs web tanpa elemen desain.

4. Rancang semua modul dan tulis draf salinan web

Pada tahap ini, tim copywriter kami mulai menyusun salinan sementara tim desain melanjutkan untuk merancang semua modul yang diperlukan untuk situs web. Kami tidak selalu menulis semua salinan di situs web klien kami, tetapi ketika kami melakukannya, kami menagih secara transparan per halaman berdasarkan peta situs yang telah disepakati sebelumnya.

5. Kembangkan situs web

Untuk menampilkan desain modul in situ, kami mengembangkan dan membangun semua halaman dengan salinan lorem ipsum dan gambar placeholder , sehingga klien kami bisa mendapatkan ide yang tepat tentang hasil akhirnya.

Saat bekerja dengan pengembang, pengembang mana pun, Anda ingin menanyakan beberapa pertanyaan terkait kepada mereka:

• Apa langkah utama yang Anda ambil untuk membuat kode situs web kami?
• Bagaimana Anda memastikan bahwa kodenya rapi? (Masalah utama dengan situs web template.)
• Kapan dan seberapa sering Anda memeriksa kecepatan dan kinerja secara keseluruhan?
• Bagaimana membangun halaman setelah situs web dikembangkan terlihat seperti? Apakah ini pengalaman pengguna yang ramah bagi siapa pun yang membuat halaman?

Atau jika Anda bekerja dengan Articulate, 'Berapa waktu tercepat Anda menyelesaikan kubus Rubik?' Kami menyambut pertanyaan seperti itu.

Proses pengembangan kami dimulai di Notion, di mana merencanakan pekerjaan kami. Kemudian, kami menetapkan kode dasar untuk navigasi dan beberapa modul global. Selanjutnya, kami menyiapkan daftar periksa Jaminan Kualitas untuk setiap elemen desain dan fungsionalitas yang perlu kami buat untuk situs web tertentu. Ini akan membuat kita tetap benar di seluruh pembangunan.

Kami membuat perancah semua modul dalam HTML, lalu mulai melihat penataannya. Jadi, pikirkan batu bata, plester, lukisan dan dekorasi.

Sepanjang, kami menguji semuanya, memeriksa kinerja dan melakukan peningkatan. Seringkali, kita akan belajar bagaimana melakukan sesuatu yang lebih baik dan akan membawa keahlian itu ke depan ke situs web kita berikutnya.

6. Isi halaman

Pada tahap ini, setelah beberapa iterasi dan tinjauan klien, kami mengisi halaman dengan salinan dan citra yang disetujui. Pada tahap ini, situs web hampir siap diluncurkan. Kami melewati tahap peninjauan klien lainnya, dan setelah itu, kami menjalankan daftar periksa QA pra-peluncuran yang menyeluruh.

7. Luncurkan!

Kami meluncurkan, dan kemudian kami menjalankan daftar periksa QA pasca-peluncuran lainnya, karena sangat penting untuk memastikan bahwa situs web berfungsi dan tidak ada yang rusak dari staging menjadi live.

Akhirnya, tentu saja, kami merayakannya!

10 tips untuk desain situs web yang bagus

Berikut adalah beberapa aturan yang telah kami pelajari selama bertahun-tahun, dan lebih dari lusinan pembuatan situs web:

1. Tempatkan preferensi Anda sebagai yang kedua, dan poin rasa sakit persona Anda terlebih dahulu.
2. Fokus pada bagaimana Anda membantu pelanggan Anda, bukan hanya mencantumkan layanan Anda.
3. Jangan mencoba untuk menemukan kembali roda. Apa yang berhasil, bekerja karena suatu alasan. Misalnya, hanya berfokus pada area paruh atas adalah mitos. Semua orang tahu cara menggulir. Bahkan ada situs web tentang itu: http://abovethefold.fyi/
4. Buat navigasi tetap pendek dan sederhana.
5. Jadikan tombol berbasis nilai. Hindari salinan generik jika memungkinkan.
6. Selalu tautkan ke halaman yang relevan jika ada halaman dengan lebih banyak konteks.
7. Pada halaman utama, hindari memiliki terlalu banyak tautan eksternal. (Blog Anda adalah cerita yang berbeda.)
8. Selalu akhiri halaman dengan satu atau lebih CTA (ajakan bertindak), membawa pengguna ke langkah berikutnya dalam proses.
9. Jangan meremehkan kekuatan halaman kontak - terlalu sering ini merupakan titik keluar, tetapi Anda benar-benar ingin membuat orang-orang tetap berada di halaman itu.
10. Kurang itu lebih!

Bonus: jangan biarkan logo mendikte desain yang buruk

Saat kami mendesain situs web HTG, logo mereka sudah ketinggalan zaman dan tidak lagi sesuai dengan merek yang kami tuju. Kami memodernkannya dengan beberapa perubahan sederhana:

Berikut adalah beberapa makanan untuk dipikirkan. Di era digital kita, merek Anda kemungkinan besar adalah situs web Anda daripada logo Anda. Jadi, pikirkan situs web terlebih dahulu, logo kedua.

Apa yang terjadi setelah peluncuran?

Baiklah. Anda memiliki situs web baru. Sekarang apa? Seperti yang telah kami katakan, di Articulate kami melihat situs web sebagai mesin pemasaran, jadi keterlibatan kami tidak harus berakhir saat peluncuran. Faktanya, itu hanyalah awal dari perjalanan sebagian besar klien kami.

Dari membuat konten baru seperti blog, halaman pilar, penawaran terjaga keamanannya dan halaman 'squeeze', hingga menjalankan pelacakan perilaku dan pengujian multivarian, masih banyak lagi yang dapat dilakukan situs web Anda.

Puncak menyelinap: Nukleus

Jadi bagaimana Anda bisa mendapatkan situs HubSpot? Ada beberapa opsi, seperti pembuatan situs web yang dipesan lebih dahulu, tetapi salah satu caranya adalah dengan menggunakan tema HubSpot. Nucleus adalah tema milik Articulate.

Tema seperti templat situs web yang jauh lebih canggih. Situs web kami sendiri dibangun di atas Nucleus, dan kami telah menggunakannya untuk beberapa klien dengan berbagai macam gaya desain. Kami meluncurkannya di HubSpot Marketplace pada tahun 2022. Dengan Nucleus, kami dapat membangun situs web yang sangat optimal dalam hitungan minggu, bahkan hari, untuk klien kami. Ini semua agak menarik!

>> Klik di sini untuk menjelajahi Nucleus <<