Merancang Go Bilingual

Dec 15 2022
Sebuah kisah tentang banyak iterasi, pembelajaran, dan pemecahan masalah
Kembali pada bulan September 2019 saya dipekerjakan sebagai Desainer UX/UI untuk bekerja di Spot Educação. Proyek yang ditugaskan kepada saya adalah produk B2B yang ditujukan untuk sekolah beranggaran rendah yang mencari solusi sempurna untuk kecemasan belajar bahasa Inggris mereka.

Kembali pada bulan September 2019 saya dipekerjakan sebagai Desainer UX/UI untuk bekerja di Spot Educação .

Proyek yang ditugaskan kepada saya adalah produk B2B yang ditujukan untuk sekolah beranggaran rendah yang mencari solusi sempurna untuk kecemasan belajar bahasa Inggris mereka. Tujuan utama Go Bilingual adalah mendekati sekolah tersebut dengan aplikasi ramah yang ditujukan untuk guru dan manajer mereka, memberikan keahlian kami dalam hal pembelajaran bahasa Inggris dengan biaya rendah.

Konsep tersebut menjanjikan banyak fitur. Tapi apa sebenarnya itu? Apa pengguna kami, perjalanan mereka? Berapa banyak hal yang sebenarnya bisa kita kembangkan dalam waktu sesingkat itu?

Di sini saya akan membahas perjalanan kami sejauh ini, semua yang kami pelajari dari mengembangkan dan merancang produk serta masa depan yang kami impikan.

1. Penemuan

Segera setelah saya mulai bekerja untuk Spot Education , segala sesuatunya tampak suram: kami memiliki gagasan tentang konsep tersebut, tetapi gagasan itu masih belum ada; Kami tidak tahu apa-apa tentang itu selain fakta bahwa itu perlu memiliki beberapa fungsi, tetapi itu pun tidak berjalan mulus. Jalan itu berkabut dan penuh dengan ketidakpastian. Kami tidak tahu siapa pengguna akhir kami; kami tidak tahu apakah banyak fitur tersebut benar-benar layak di MVP kami ; kami bahkan tidak tahu apakah produk tersebut akan ditulis dalam arsitektur yang sama sekali baru, dibangun dari awal, atau apakah kami akan mengkloning yang sudah ada, dari produk yang sudah berfungsi dari perusahaan kami bernama Edify , dan mulai dari sana.

Menemukan produk kami sangatlah penting; Jadi perusahaan kami menyewa bantuan dari luar dalam bentuk Grito.cc .

Grito adalah agensi desain digital dari Rio de Janeiro, Brasil. Fokus mereka adalah memberikan solusi yang bagus dan ramping untuk kesengsaraan kami. Mereka telah melakukan beberapa penelitian dengan guru dan profesor dan menyiapkan segalanya untuk sprint desain kami . Mereka juga akan memberi kami 6 layar untuk aplikasi desktop dan seluler, berdasarkan latihan ini dan etos dan arah desain kami sendiri.

Mulai dari awal, kami mulai mendiskusikan apa yang dibutuhkan produk kami, untuk dimiliki dan apa yang tidak dan tidak akan dimiliki. Kami menyusun empat persona, semuanya guru, dari berbagai latar belakang, usia, dan status sosial. Hal utama yang ditunjukkan oleh penelitian dan latihan empati kami adalah bahwa salah satu kesengsaraan utama para guru adalah mereka merasa perlu mendapatkan lebih banyak dukungan profesional dan juga lebih berhubungan dengan konten penting dan relevan yang ditujukan untuk kebutuhan mengajar mereka. Mereka ingin meningkatkan diri sebagai profesional.

Secara internal, kami juga merasa perlu merenungkan kesengsaraan para pengelola dan administrator sekolah; jadi kami melakukan riset sendiri dan menghasilkan persona kami sendiri, seseorang yang akan menggunakan aplikasi kami secara internal, mengelola staf, memesan buku, dan lainnya.

Jadi, pada dasarnya, kami memiliki dua produk dalam satu: ekstranet, yang digunakan oleh administrator dan manajer; dan Portal Guru, digunakan oleh guru dan, akhirnya, siswa. Jadi kami pergi merancang dan mengembangkan keduanya.

2. Mendefinisikan

Jadi bagaimana kita mengembangkan dan merancang aplikasi kita? Teknologi apa yang akan digunakan? Akan seperti apa desainnya? Setelah sprint desain, penelitian kami sendiri, dan kebutuhan bisnis kami, bagaimana kami mendefinisikan produk kami?

Karena produk sudah terjual, kami mulai berdiskusi apakah akan menguntungkan untuk merancang seluruh arsitektur baru dari bawah ke atas atau hanya mengkloning arsitektur yang sudah ada yang sudah digunakan oleh salah satu produk perusahaan, Edify . Pengambil keputusan memutuskan yang terakhir, karena jadwal kami padat dan perlu mengirimkan ekstranet sesegera mungkin.

Kami juga, pada saat yang sama, mulai menentukan seperti apa Portal Guru itu; solusi responsif web untuk guru kami, di mana mereka dapat memperoleh bimbingan dan pendampingan profesional dari pedagog kami.

Jadi, pada dasarnya, semua keputusan dan definisi yang masuk akal itu memungkinkan kami untuk mengembangkan dan merancang produk dengan cara dua arah dan juga memungkinkan kami untuk memulai sprint dan siklus produk kami. Sementara saya bertugas merancang produk secara keseluruhan dan melihat gambaran besarnya, para pengembang ditugaskan untuk membangun dari bawah ke atas sesuai dengan keputusan kami.

3. Merancang

Bersiaplah karena ini akan menjadi yang panjang.

Segera setelah kami mendapat lampu hijau untuk mulai mengembangkan dan mendesain produk, saya membuat file Figma bernama " Go Bilingual Design System ". Awalnya, kami tidak punya banyak hal untuk dilanjutkan; apa konsep sistem desain kita? Apa tujuan kami mengembangkan sistem tersebut?

Mengambil isyarat dari Desain Atom , saya memutuskan untuk memulai dengan Ikon kami , karena itu adalah elemen terkecil yang dibutuhkan produk kami. Setelah beberapa penelitian, saya menemukan sistem desain yang luar biasa dari orang-orang di Akveo , Eva . Ikon dari sistem desain ini memiliki kebulatan dan keterbacaan yang kami cari, jadi keduanya sangat cocok. Namun, satu-satunya perbedaan adalah kami membuat aturan dasar saat menggunakan ikon; alih-alih memiliki dua set ikon, kami memutuskan untuk membuat satu set tersedia dan set lainnya menjadi set interaksi, artinya setiap kali Anda berinteraksi dengan ikon dengan cara tertentu, kemungkinan ikon kedua akan ditampilkan kepada pengguna.

Ikon-ikon dari Sistem Desain Eva sebagaimana ditafsirkan dan digunakan oleh kami

Setelah kami memutuskan akan seperti apa Ikon kami — dan karena tidak perlu mendesainnya dari bawah ke atas — langkah selanjutnya adalah melihat merek kami, logo, nilai, dan identitas visualnya, karena Sistem Desain biasanya mengambil pendekatan yang berbeda, lebih terbuka, dan cair untuk pengembangan dan desain merek.

Identitas visual Go Bilingual pertama kali dirancang oleh orang-orang di Quintal . Manual yang mereka berikan kepada kami menyertakan logo dan beberapa aplikasi, palet warna, dengan opsi dan tipografi primer dan sekunder, dengan Panton sebagai opsi utama dan Open Sans sebagai sekunder. Namun, tim bisnis merasa bahwa pendekatan mereka terlalu "bahagia", "muda", dan "berwarna" dan itu belum tentu menjadi target kami, karena pengguna utama produk kami adalah manajer sekolah dan guru. Kami membutuhkan identitas visual yang lebih sadar, di mana pengguna kami akan merasa lebih betah dan nyaman menggunakan produk untuk jangka waktu yang lama. Kami juga berpendapat bahwa produk digital harus lebih fleksibel dan lancar terkait sistemnya, dan identitas visualnya harus mencerminkan hal itu.

Merek

Kami memutuskan untuk meregangkan warna proyek; hanya tiga rona utama yang mungkin bagus untuk proyek desain cetak yang bagus, tetapi itu tidak cukup untuk nuansa yang perlu dicakup oleh proyek digital, setidaknya menurut pengalaman saya. Jadi yang kami lakukan adalah mengambil setiap warna utama dan membuat tiga corak berbeda berdasarkan warna tersebut dan kami juga menambah jumlah nada utama dan anak perusahaan. Aturan lain yang kami tetapkan adalah bahwa sejumlah gradien antara salah satu dari dua warna dari set kami dimungkinkan, membuat desain kami cair dan sangat serbaguna.

Palet warna yang luas

Logo baru kami dikembangkan sendiri; itu hanya imajinasi ulang dari yang lama, lebih fokus pada gradien dan garis luar, sehingga membawa visual yang lebih modern ke merek kami. Kami juga mengikat konsep di balik seluruh Sistem Desain saat kami melihat logo kami dan saat itulah ide "Kisi" lahir. Karena semua sistem kami harus mudah dibangun dan sangat mudah dikelola, kami memikirkan kisi-kisi, kisi-kisi terbuka, tempat gagasan dapat ditempatkan, dikembangkan, dan dirancang dengan bebas dan terus berkembang.

Kami benar-benar percaya pada desain dan sistem yang cair dan lingkungan yang selalu berubah.

Sistem Desain Kisi

Dengan set tema Sistem Desain kami , kami mulai merancang Komponen kami dan setiap bit yang akan hadir dalam aplikasi digital kami. Kami mengambil apa yang dipelajari dari sprint desain kami dan semuanya diproduksi sejauh ini dan memulai produksi, mencoba untuk menjadi kohesif dan bekerja di sekitar pedoman yang ditetapkan. Saya percaya bahwa desain dan pengembangan produk adalah tentang kohesi dan tema; sesuatu yang saya bawa dari hari-hari saya sebagai desainer game dan direktur seni yang masih berlaku hingga hari ini dan saya senang bahwa kami, sebagai sebuah perusahaan, mengikuti premis yang sama.

Dan ada banyak dari mereka! Dapatkah Anda mengidentifikasi telur paskah? :D

4. Menyampaikan

Jadi tibalah waktunya, setelah siklus desain dan pengembangan yang panjang, untuk mengirimkan produk kami. Apa sebenarnya fungsi yang ada pada produk kami dan bagaimana cara kerjanya?

Produk kami dikembangkan menggunakan Ruby untuk back-endnya dan React untuk front-endnya dan pengembang kami menggunakan pedoman yang dibuat oleh sistem desain untuk mengimplementasikan Portal Guru kami .

MVP kami akan memiliki halaman arahan , yang akan menampilkan nilai dan misi produk kami dan apa yang akan kami capai; halaman tren , tempat pengguna dapat melihat, menonton, membaca, dan mendengarkan konten yang dirancang khusus untuk guru, pendidik, dan profesor; halaman sumber daya , di mana Anda akan menemukan keseluruhan konten yang dibuat oleh pedagog kami; halaman jalur pengembangan , tempat guru dapat belajar bagaimana menjadi profesional yang lebih baik lagi dengan mengikuti kursus khusus kami; dan halaman bicara dengan kami , di mana pengguna yang sama dapat menghubungi kami dan menyelesaikan pertanyaan dan kecemasan mereka.

Kami butuh beberapa saat untuk mengembangkan keseluruhan produk karena memiliki banyak fungsi, tetapi pada akhirnya, semuanya bekerja dengan baik dan ini dia; Go Bilingual's Teacher's Portal , dalam kemuliaan penuhnya.

Go Bilingual Seluler
Halaman login Portal Guru
Laman landas desktop kami

Kebutuhan bisnis selalu berubah dan Go Bilingual dihentikan saat Spot Educação menjadi Edify Education . Namun, semua kerja dan upaya yang dilakukan ditunjukkan di sini dan kami sangat bangga dengan apa yang kami hasilkan. MVP kami benar-benar sulit untuk diproduksi dan kami memiliki banyak tantangan di sepanjang jalan, tetapi saya kira begitulah desain dan pengembangan produk, dan itu sangat menyenangkan dan mengasyikkan secara profesional. Tidak hanya itu, proyek ini membangun fondasi bagi banyak produk di dalam perusahaan.

Situs web utama Go Bilingual adalah http://www.gobilingual.com.br/ , tetapi saat ini offline karena produk tersebut tidak ada lagi. Anda masih dapat mengakses Portal Guru di sini: http://teachersportal.gobilingual.com.br/ . Terima kasih sudah membaca!