Memperkenalkan Instapage 3.0: Lebih Cerdas, Lebih Cepat, Lebih Berani, dan Lebih Baik.

Tim Instapage telah melakukan pekerjaan luar biasa dalam membangun UI kami selama bertahun-tahun. Namun, kami melihat bahwa itu tidak lagi melayani kebutuhan pengguna kami dan sudah waktunya untuk perubahan.

Przemek Cholewa, Pemimpin Sistem Desain Instapage, menguraikan pemikiran tim selama proses pembaruan antarmuka pengguna ini:

Kami tahu bahwa perubahan persepsi perlu terjadi untuk merangkul produktivitas dan kinerja sambil menjaga semuanya tetap mudah digunakan. Tim kami memahami bagaimana UI dapat mengalihkan atau membantu pengguna mencapai tujuan mereka. Bentuk harus mengikuti fungsi, bukan sebaliknya. Kami ingin Sistem Desain Instapage menjadi kurang menarik dan lebih minimalis dan fungsional.

Secara historis, kami tidak memiliki kemewahan waktu, sumber daya, dan pengetahuan untuk menerapkan sistem desain yang canggih dengan benar. Sekarang, kami melakukannya, dan hari ini kami menyoroti peningkatan terbesar dari tim di balik itu semua.

(Catatan: ini bukan evolusi terakhir dari UI dan Anda dapat mengharapkan banyak pembaruan selama beberapa minggu ke depan.)

De-noising UI Instapage

Di Instapage, kami percaya pada desain berulang dan bahwa pengerjaan desain tidak pernah selesai — itu terus berkembang. Kit UI pertama kami terinspirasi oleh Desain Material dan melayani produk kami dengan baik, tetapi kami menyadari seiring waktu Kit UI awal tidak memiliki semua komponen yang kami butuhkan dan terlalu membatasi untuk apa yang sedang dibangun Instapage.

Apa yang Anda lihat hari ini dengan UI Instapage baru adalah kisah indah tentang desain berulang dalam upaya kami untuk memberikan pengalaman pengguna yang selalu meningkat. Ini dimulai dengan menerapkan Desain Material kami dan mengembangkannya menjadi sistem desain transisi (dan sementara). Kami menyebutnya " Crystal ," karena dimaksudkan untuk memberikan kejelasan lebih lanjut.

Crystal ditujukan untuk mengadaptasi Desain Material dengan kebutuhan Instapage tanpa terlalu banyak mengubah bahasa desain. Ini mengatasi tantangan utama — memiliki semua elemen desain yang kami butuhkan tersedia, didokumentasikan, dan memiliki cuplikan kode Angular. Kami memulai pekerjaan pada pertengahan 2019 dan selesai akhir tahun lalu, hanya untuk mulai mengerjakan langkah terakhir – bahasa visual kami sendiri yang disebut “ Crystal Clear .”

Crystal Clear adalah langkah terakhir transisi kami, ini adalah UI kami sendiri, dan bahasa visual kami sendiri, yang disesuaikan untuk kebutuhan Instapage, dibuat dengan cermat dengan detail yang kami butuhkan.

Chief Design Officer, Uldis Leiterts, menjelaskan:

Sebagai proses berulang, pekerjaan tidak pernah selesai. Kami masih memperbaiki, meningkatkan, dan memperbarui. Misalnya, beberapa bagian grid masih membutuhkan pekerjaan. Tetapi alih-alih menyimpan segala sesuatunya di bawah tenda, kami ingin membagikan pekerjaan kami karena kami bangga dengan versi "final" yang kami antisipasi, kami juga bangga dengan sifat desain yang berulang dan bagaimana fungsinya.

Kami berharap rilis pertama Crystal Clear dan pembaruan berikutnya akan terus meningkatkan pengalaman pelanggan kami di Instapage, produk yang kami sukai.

Apa yang baru dengan UI Instapage?

Secara keseluruhan, kami menghilangkan kebisingan seluruh antarmuka pengguna sehingga konten pelanggan terlihat terlebih dahulu, seperti yang akan Anda lihat di bawah.

Salinan UX

Seiring dengan desain Crystal transisi, kami memperkenalkan penulis UX ke tim desain kami yang berbakat. Instapage dibangun oleh para insinyur, begitu juga salinan yang Anda lihat. Ini membantu kami dengan baik, tetapi juga meninggalkan ruang untuk perbaikan.

Misalnya, satu pesan status kosong mengatakan "Dasbor Anda Kesepian" — itu sendiri tidak salah, tetapi itu mungkin bukan bahasa terbaik yang cocok untuk perangkat lunak bisnis serius yang kita lihat sendiri. Dengan Crystal Clear, UX/Content Writer Instapage, Mateusz Sochoń, lebih konsisten dengan nada dan pesan. Seperti yang dikatakan Mateusz:

Kami membuat semua status kosong dan komunikasi yang diarahkan pengguna terasa kohesif dengan mengatasi semua kendala. Kami memodifikasi salinan setiap kali ada ruang untuk perbaikan yang terkait erat dengan sintaks atau nada pesan.

Gaya dan warna baru

Untuk menemukan gaya antarmuka seimbang yang meningkatkan produktivitas pengguna, kami memperbarui palet warna dan gaya kami ke nada netral dan skala abu-abu. Palet warna baru kurang dekoratif tetapi jauh lebih fungsional. Sebagai contoh, biru tua hanya disediakan untuk tindakan, sebagian besar tombol CTA:

Konon, desain yang bagus tidak terlihat, dan tim mengambil inspirasi dari Dieter Rams, yang menciptakan aturan untuk desain yang bagus. Dari prinsip Rams, tim memperbarui antarmuka menjadi lebih abadi.

Sebelum: Kristal

Saat ini: Sebening Kristal

Hirarki level baru & menghapus bayangan

Konvensi Levels yang baru memungkinkan kami untuk memperkenalkan gagasan tentang hierarki komponen dan elemen ke UI dengan cara yang lebih terarah dan terorganisir. Komponen berbeda yang ditemukan dalam sistem Desain Kristal ditampilkan pada tingkat yang berbeda untuk menyoroti beberapa elemen dan mengelompokkannya dalam kelompok konteks yang kohesif secara visual.

Empat level utama ada dalam aplikasi kami:

• Level 0: Berfungsi sebagai latar untuk semua konten yang tersisa
• Level 1: Level di mana sebagian besar komponen ditampilkan
• Level 2: Memungkinkan elemen dari level yang lebih rendah untuk digulir di bawahnya
• Level 3: Elemen overlay ditampilkan di semua level yang lebih rendah

(Catatan: Level Intermediate 1.5 adalah level yang menampung semua komponen yang ditampilkan di atas bagian Level 1, 2 atau 3 tetapi masih akan bersembunyi di bawah level yang lebih tinggi. Komponen tersebut termasuk tooltips, popovers, dropdown. Pembaruan baru menghilangkan bayangan dari keadaan menengah. Ini lebih ringan dan konsisten secara visual terlepas dari level yang ditempatkan.)

Selain itu, kami belajar bahwa salah satu faktor yang menjaga UI tetap bersih adalah penggunaan bayangan yang minimal. Desain Material secara historis menggunakan bayangan untuk dekorasi, sedangkan Instapage menggunakan bayangan untuk memisahkan level utama seperti overlay:

Ikonografi garis besar yang konsisten

Di seluruh aplikasi, Anda akan melihat ikonografi di menu, dropdown, dll. Ikonografi baru lebih bersih dan sederhana:

Grid jarak yang berbeda

Di balik setiap antarmuka terdapat fondasi yang kokoh, baik struktur maupun kisi. Memperbaiki kisi struktur baru diperlukan, dan dengan Crystal Clear, antarmuka memiliki lebih banyak ruang untuk bernafas dan membantu pengguna memindai dengan lebih mudah:

Menghilangkan sudut membulat

Pembaruan ini lebih halus, tetapi patut ditunjukkan karena tim desain percaya bahwa menghilangkan sudut membulat lebih mutakhir:

UI pembangun

Anda dapat melihat bagaimana pembaruan Crystal Clear baru diimplementasikan ke dalam builder. Perhatikan palet skala abu-abu, kecuali untuk gambar, tombol CTA, dan logo:

Apa yang kita pelajari

Kepala Pengembangan UI, ukasz Grądzki, menyoroti bagaimana tim dan teknologi meningkat. Plus, bagaimana investasi yang kami lakukan pada tahun 2016 terbayar sekarang:

Selama empat tahun terakhir, kami telah berubah dari komponen umum yang disatukan secara longgar menjadi sesuatu yang hari ini dapat kami sebut sebagai sistem desain lengkap. Sistem yang digunakan bersama di seluruh produk dan alat internal kami.

Sebagai referensi, pada tahun 2016, kami menulis ulang seluruh aplikasi di sisi frontend dan menerapkan versi pertama Kit UI. Butuh lebih dari tiga bulan untuk menyelesaikan tugas dan melibatkan sekitar selusin anggota tim. Perlu juga disebutkan bahwa aplikasi itu sendiri relatif kecil dibandingkan dengan hari ini. Sekarang, kami dapat menerapkan desain ulang aplikasi Instapage lengkap tanpa masalah besar dalam satu siklus pengembangan.

Lihat sendiri UI barunya

Sistem desain Crystal Clear yang baru memberi Anda kejelasan tentang apa yang paling penting — inti dari alasan Anda menggunakan aplikasi Instapage. Kami ingin memberdayakan Anda untuk fokus pada tugas, pada penggunaan Instapage harian Anda.

Kami senang mendengar dari Anda jika Anda memiliki saran tentang bagaimana kami dapat meningkatkan, atau umpan balik menggunakan UI baru kami. Masuk di sini untuk mengalaminya sendiri dan lihat posisi terbuka kami jika Anda tertarik untuk bergabung dengan tim.