Munculnya layanan baru menjadi ujian untuk halaman utama Mail.ru - semakin sulit bagi pengguna untuk menemukan bagian yang mereka butuhkan, dan perusahaan memutuskan untuk memperbarui desain. Spesialis Grup Mail.ru berbicara tentang perubahan versi seluler dari halaman utama portal, tugas apa yang diselesaikan dan hasil apa yang telah dicapai.
Seperti sebelumnya
Versi lama beranda seluler selama beberapa tahun sepenuhnya menyelesaikan tugas yang diharapkan darinya. Pengguna dengan mudah berpindah antar tab, dengan mudah menemukan "Mail", "Search" dan "News". Namun, munculnya produk Grup Mail.ru baru menjadi tantangan yang semakin meningkat - lebih sulit untuk mengintegrasikannya ke dalam versi saat ini, dan ada fragmentasi di antara blok. Misalnya, baris "Pencarian" atau jendela masuk "Mail" mulai terlihat lebih buruk, kedalaman pengguliran halaman menurun, dan pengguna meninggalkan bagian tengah umpan berita. Versi seluler lama dari halaman utama Mail.ru
Selain itu, karena desain ulang merek Mail.ru, Mail dan Poisk mulai terasa berbeda dari gaya visual halaman utama. Menjadi jelas bahwa sudah waktunya untuk sepenuhnya memperbarui yang utama - untuk mengatur produk perusahaan saat ini secara organik, untuk meletakkan dasar untuk layanan dan mitra baru.
Rencananya terlihat seperti ini:
- Ubah gaya visual halaman utama berdasarkan desain baru sistem Mail.ru;
- Membuat akses ke semua layanan nyaman dan cepat;
- Tambahkan navigasi halaman yang menghibur melalui rekomendasi individu dari bahan dan metode desain mereka;
- Pertahankan visibilitas semua produk dan pertimbangkan minat yang paling sering dikunjungi pengguna dari halaman utama - "Surat", "Penelusuran" dan "Berita";
- Sesuaikan perubahan untuk perangkat dengan layar kecil, sehingga setiap pengguna merasa nyaman.
Dari mana Anda memulai?
Perubahan kuat dalam UX produk apa pun dapat menyebabkan kesulitan bagi pengguna. Untuk membuat adaptasi ke desain baru tidak terlalu menyakitkan, kami memutuskan untuk memperbarui yang utama secara bertahap.
Untuk memulainya, kami memutuskan untuk mengarahkan perhatian pengguna ke elemen penting hanya dengan alat visual. Opsi halaman UI pertama
Pada tahap pertama, tiga versi halaman utama dikembangkan. Urutan blok yang sama terlihat: "Surat" di bagian atas, "Telusuri" di tengah, lalu iklan dan "Berita". Kami menghapus semua elemen non-prioritas dari layar pertama untuk memfokuskan perhatian pengguna pada produk utama dan tidak mengalihkan perhatian dari Mail dan Penelusuran. Dalam varian ini, kami secara global hanya mengubah UI, menerapkan sebagian sistem desain baru kami, yaitu: blok dan tombol bulat, menambahkan bayangan dan membuat widget cuaca dan kutipan, tetapi meninggalkan banyak warna aksen.
Kemudian kami mengerjakan sisa produk bergulir. Setiap blok dan produk memperoleh desainnya sendiri, yang membantu memenuhi fungsinya. Pita Baru
Misalnya, untuk "Kino Mail.ru" mereka membuat latar belakang gelap - dengan cara ini konten multimedia lebih mudah dilihat. Untuk game, kami menambahkan kartu besar dengan sampul, di mana pembaruan terlihat. Perpindahan antar saluran yang nyaman ditambahkan ke program TV untuk memudahkan pengguna menemukan program yang menarik baginya. Kami juga baru-baru ini memperkenalkan Pulse, umpan rekomendasi yang dipersonalisasi. Di halaman utama baru, kami sedikit mengubah gayanya, menambahkan latar belakang gelap, yang meningkatkan kemampuan klik.
Saat mengubah halaman utama, kami melakukan serangkaian studi kegunaan di laboratorium kami untuk memahami bagaimana pengguna sebenarnya melihat perubahan tersebut. Menurut hasil studi pertama, 80% responden, terlepas dari lokasi iklannya, memilih topi biru karena lebih cerah dan lebih menarik. Mereka meninggalkannya. Tetapi masalah dengan memprioritaskan produk tetap ada - warna biru menarik banyak perhatian, itulah sebabnya "Pencarian" hilang. Pengguna tidak menyadarinya atau mengira itu adalah panel kata sandi untuk masuk ke akun email mereka.
Mengubah halaman UX
Saatnya untuk membangun kembali struktur halaman. Melalui penelitian sebelumnya dan visi produk strategis, kami memahami bahwa struktur layar pertama harus memungkinkan pengguna untuk langsung menavigasi layar beranda. Variasi beranda untuk penelitian UX Untuk pengujian di lab UX, kami mengumpulkan beberapa tata letak dengan tata letak blok yang berbeda untuk menentukan kombinasi mana yang lebih baik bagi pengguna. Di dalamnya kami mengubah strukturnya, yaitu:
- "Cari" ditempatkan di bagian atas, karena itu berarti awal dari studi halaman, dan pengaturan ini umumnya lebih akrab bagi pengguna;
- «» «» , . «», , «» . . : , ;
- «» «». , «» «». ;
- .
Pengujian UX menunjukkan hal berikut. Pengguna segera melihat "Cari", yang kami inginkan. "Mail" menjadi kurang terlihat, tetapi kami kemudian memperbaikinya secara visual, menambahkan warna dan animasi di pintu masuk.
"Berita" tetap di tempat yang sama, tetapi kami melakukan sedikit pekerjaan pada blok itu sendiri: kami mengubah jumlah berita (pengujian juga menunjukkan perlunya ini), menambahkan indentasi di antara materi dan meningkatkan ukuran font. "Pulsa" ditambahkan ke umpan, membuatnya tidak ada habisnya, jadi footer dipindahkan ke menu burger di kiri atas - ini adalah bagaimana kami mendapat tempat untuk proyek Grup Mail.ru lainnya tanpa kehilangan desain dan pengguna.
Awalnya, kami memutuskan bahwa iklan akan berada di atas, terpisah dari blok lainnya - bagi kami itu lebih nyaman. Tetapi peserta tes menganggap seluruh halaman sebagai iklan, jadi mereka menempatkannya di bawah.
Untuk pengembangan desain lebih lanjut, dipilih opsi dengan hasil terbaik setelah pengujian di laboratorium, di mana:
- Di bagian atas ada blok navigasi dengan menu, geolokasi dan profil;
- "Cari" di atas "Mail", dan "Cuaca" di sebelah "Berita";
- Warna aksen yang lebih sedikit (hanya logo dan Penelusuran yang tetap berwarna biru).
Sentuhan akhir
Kami telah memutuskan strukturnya, sekarang tidak ada hal yang kurang penting yang tersisa - bagian visual.
Kami memiliki beberapa opsi dengan bentuk dan detail yang berbeda. Akibatnya, halaman menjadi "bersih": putih dengan blok kunci bermerek bagus. Warna perusahaan secara organik membedakan "Search", "Mail" dan "News". Garis "Search" dibuat membulat agar lebih menonjol dan tidak menyatu dengan widget di bawah. "Cuaca" dan kutipan yang terpisah - blok horizontal lebih adaptif dan memungkinkan penambahan elemen baru. Menambahkan Widget Sekarang Anda dapat menambahkan beberapa produk di sebelah widget Mail tanpa merusak apa pun. Di versi lain, ini tidak dapat dilakukan karena korsel ganda. Akibatnya, Anda dapat membandingkan bagaimana itu dan bagaimana jadinya.
Perbandingan desain lama dan baru dari versi seluler halaman utama Mail.ru
Bagaimana rumah baru itu hidup dan berkembang
“Kami selalu meluncurkan pembaruan secara bertahap agar tidak merusak skenario pengguna yang biasa. Pengguna secara positif merasakan desain baru, yang dikonfirmasi oleh peningkatan konversi dan rujukan, ”kata Vyacheslav Yashkov.
Hasilnya, kami melihat perubahan berikut:
- + 12% untuk transisi ke proyek media, termasuk cuaca dan covid;
- + 4% untuk transisi ke "Cari";
- + 5% untuk transisi ke "Mail".
Saat ini, kami secara aktif bekerja untuk mempersonalisasi halaman agar hanya memberikan informasi yang berguna dan relevan. Bagi pengguna ekosistem, integrasi akan jauh lebih dalam.
Komposisi tim kreatif:
- Alena Kitabova - Manajer Produk.
- Vyacheslav Yashkov adalah kepala tim desain Pencarian & AI.
- — Search & AI.
- — frontend- .
- — frontend- .
- — frontend- .
- — frontend- .
- — .