Go İki Dilli Tasarlamak

Dec 15 2022
Birçok yinelemenin, öğrenmenin ve problem çözmenin hikayesi
Eylül 2019'da Spot Educação'da çalışmak üzere UX/UI Tasarımcısı olarak işe alındım. Bana verilen proje, İngilizce öğrenme kaygıları için mükemmel bir çözüm arayan düşük bütçeli okulları hedefleyen bir B2B ürünüydü.

Eylül 2019'da Spot Educação'da çalışmak üzere bir UX/UI Tasarımcısı olarak işe alındım .

Bana verilen proje, İngilizce öğrenme kaygıları için mükemmel bir çözüm arayan düşük bütçeli okulları hedefleyen bir B2B ürünüydü. Go Bilingual'ın ana hedefi, söz konusu okullara öğretmenlerine ve yöneticilerine yönelik samimi bir uygulama ile yaklaşmak ve düşük maliyetle İngilizce öğrenimi söz konusu olduğunda uzmanlığımızı sağlamaktı.

Konsept birçok özellik vaat ediyordu. Ama gerçekten neydi? Kullanıcılarımız, yolculukları nelerdi? Bu kadar kısa sürede kaç şey geliştirebiliriz?

Burada şimdiye kadarki yolculuğumuzu, ürünü geliştirip tasarlarken öğrendiğimiz her şeyi ve onun için tasavvur ettiğimiz geleceği ele alacağım.

1. Keşif

Spot Education için çalışmaya başlar başlamaz , işler içler acısı görünüyordu: konsept hakkında bir fikrimiz vardı ama hala yoktu; Birkaç işlevselliğe sahip olması gerektiği gerçeği dışında onun hakkında hiçbir şey bilmiyorduk, ama bu bile sorunsuz bir seyir değildi. Yol sisli ve belirsizliklerle doluydu. Son kullanıcımızın kim olduğunu bilmiyorduk; MVP'mizde söz konusu pek çok özelliğin gerçekten geçerli olup olmayacağını bilmiyorduk ; Ürünün sıfırdan inşa edilmiş tamamen yeni bir mimaride mi yazılacağını veya Edify adlı şirketimizin zaten çalışan bir ürününden mevcut bir ürünü klonlayıp oradan başlayıp başlamayacağımızı bile bilmiyorduk.

Ürünümüzün ne olduğunu keşfetmek gerçekten önemliydi; Böylece şirketimiz Grito.cc şeklinde dışarıdan yardım aldı .

Grito , Brezilya, Rio de Janeiro'dan bir dijital tasarım ajansıdır. Odak noktaları, sıkıntılarımıza güzel, yalın ve çevik bir çözüm sunmaktı. Öğretmenler ve profesörlerle biraz araştırma yaptılar ve tasarım sprintimiz için her şeyi hazırladılar . Ayrıca, bu alıştırmaya ve kendi tasarım anlayışımıza ve yönümüze dayalı olarak bize hem masaüstü hem de mobil uygulamalar için 6 ekran sağlayacaklardı.

Sıfırdan başlayarak, ürünümüzün ne olması gerektiğini, nelere sahip olması gerektiğini ve nelere sahip olup olmayacağını tartışmaya başladık. Farklı geçmişlere, yaşlara ve sosyal konumlara sahip, tümü öğretmen olan dört kişi hazırladık. Araştırmamızın ve empati uygulamamızın bize gösterdiği en önemli şey, öğretmenlerin en büyük sıkıntılarından birinin, daha fazla profesyonel desteğe ihtiyaç duymaları ve aynı zamanda öğretim ihtiyaçlarına yönelik önemli, ilgili içerikle daha fazla iletişim halinde olmalarıydı. Kendilerini profesyonel olarak geliştirmek istediler.

İçeride okul müdürlerinin ve idarecilerin dertlerini de düşünme ihtiyacı hissettik; bu yüzden kendi araştırmamızı yaptık ve uygulamamızı dahili olarak kullanacak, personeli yönetecek, siparişleri kitaplaştıracak ve daha fazlasını yapacak olan kendi karakterimizi bulduk.

Yani temelde iki ürün bir aradaydı: Yöneticiler ve müdürler tarafından kullanılan bir extranet; ve öğretmenler ve nihayetinde öğrenciler tarafından kullanılan bir Öğretmen Portalı. Böylece her ikisini de tasarlamaya ve geliştirmeye başladık.

2. Tanımlama

Peki uygulamalarımızı nasıl geliştirir ve tasarlarız? Hangi teknoloji kullanılacak? Tasarım nasıl olacaktı? Tasarım sprintinden, kendi araştırmalarımızdan ve iş ihtiyaçlarımızdan sonra ürünlerimizi nasıl tanımlardık?

Ürün zaten satıldığı için sıfırdan tamamen yeni bir mimari tasarlamanın mı yoksa şirketin ürünlerinden biri olan Edify tarafından halihazırda kullanılan mevcut bir mimariyi klonlamanın mı karlı olacağını tartışmaya başladık . Karar vericiler, yoğun bir programımız olduğundan ve Extranet'i mümkün olan en kısa sürede teslim etmemiz gerektiğinden ikincisine karar verdiler.

Aynı zamanda Öğretmen Portalı'nın nasıl olacağını da tanımlamaya başlıyorduk; öğretmenlerimize, pedagoglarımızdan profesyonel rehberlik ve akıl hocalığı alabilecekleri web duyarlı bir çözüm.

Yani, temel olarak, tüm bu mantıklı kararlar ve tanımlar, ürünü iki yönlü bir şekilde geliştirmemize ve tasarlamamıza ve ayrıca sprintlerimizi ve ürün döngülerimizi başlatmamıza izin verdi. Ben ürünü bir bütün olarak tasarlamak ve büyük resmi görmekle görevliyken, geliştiriciler bizim kararlarımıza göre sıfırdan inşa etmekle görevlendirildiler.

3. Tasarım

Kemerlerinizi bağlayın çünkü bu uzun olacak.

Ürünü geliştirmeye ve tasarlamaya başlamak için yeşil ışık yaktığımız anda " Go İki Dilli Tasarım Sistemi " adlı bir Figma dosyası oluşturdum . Başlangıçta devam edecek fazla bir şeyimiz yoktu; tasarım sistemimizin konsepti ne olurdu? Söz konusu sistemi geliştirirken hedeflerimiz nelerdi?

Atomik Tasarımdan ipuçları alarak , ürünümüzün ihtiyaç duyacağı en küçük öğe oldukları için Simgelerimizle başlamaya karar verdim . Biraz araştırma yaptıktan sonra, Akveo , Eva'daki insanlardan mükemmel bir tasarım sistemine rastladım . Bu tasarım sistemindeki simgeler, aradığımız yuvarlaklığa ve okunabilirliğe sahipti, dolayısıyla mükemmel bir eşleşmeydi. Ancak tek fark, simgeleri kullanırken bir temel kural koymamızdır; iki set simgeye sahip olmak yerine, bir seti kullanılabilir ve diğer seti etkileşim seti yapmaya karar verdik, yani bir simgeyle belirli bir şekilde etkileşime girdiğinizde, kullanıcıya olası bir ikinci simge gösterilecek.

Bizim tarafımızdan yorumlanan ve kullanılan Eva Tasarım Sistemindeki simgeler

Simgelerimizin ne olacağına karar verdikten sonra - ve onları sıfırdan tasarlamaya gerek olmayacağından - bir sonraki adım, markamıza, logosuna, değerlerine ve görsel kimliğine bakmak olacaktır, çünkü Tasarım Sistemleri genellikle marka geliştirme ve tasarımına farklı, daha açık ve akıcı bir yaklaşım.

Go Bilingual'ın görsel kimliği ilk olarak Quintal çalışanları tarafından tasarlandı . Bize sağladıkları kılavuz, logoyu ve birkaç uygulamayı, birincil ve ikincil seçeneklerle birlikte renk paletini ve birincil seçenek olarak Panton ve ikincil olarak Open Sans ile tipografiyi içeriyordu. Ancak işletme ekipleri, yaklaşımlarının fazla "mutlu", "genç" ve "renkli" olduğunu ve ürünümüzün ana kullanıcıları okul yöneticileri ve öğretmenler olacağından, hedefimizin bu olmadığını düşündüler. Kullanıcılarımızın ürünü uzun süre kullanırken kendilerini daha rahat ve evlerinde hissedecekleri daha ölçülü bir görsel kimliğe ihtiyacımız vardı. Ayrıca dijital bir ürünün sistemlerinde daha esnek ve akıcı olması gerektiğini ve görsel kimliğinin bunu yansıtması gerektiğini düşündük.

Marka

Projenin renklerini esnetmeye karar verdik; harika bir baskı tasarımı projesi için yalnızca üç ana ton iyi olabilir, ancak en azından benim deneyimime göre, bir dijital projenin kapsaması gereken nüanslar söz konusu olduğunda, bu neredeyse yeterli değil. Biz de ana renklerin her birini alıp bunlara göre üç farklı ton oluşturduk ve ana ve yardımcı tonların sayısını da artırdık. Belirlediğimiz bir başka kural da, setteki iki renkten herhangi biri arasında herhangi bir sayıda gradyanın mümkün olmasıydı, bu da tasarımımızı akıcı ve son derece çok yönlü hale getiriyordu.

Kapsamlı renk paleti

Yeni logomuz kendi bünyemizde geliştirildi; sadece eskisinin yeniden tasavvuruydu, gradyanlara ve dış hatlara daha fazla odaklanarak markamıza daha modern bir görsel getirdi. Ayrıca logomuzu incelerken tüm Tasarım Sisteminin arkasındaki konsepti de bağladık ve "Kafes" fikri o zaman doğdu. Tüm sistemlerimizin inşa edilmesi kolay ve üst düzeyde yönetilebilir olması gerektiğinden, fikirlerin üzerine yerleştirilebileceği, özgürce geliştirilip tasarlanabileceği ve sürekli gelişen bir kafes, açık bir ızgara düşündük.

Akıcı tasarımlara ve sistemlere ve sürekli değişen ortamlara gerçekten inanıyoruz.

Kafes Tasarım Sistemi

Tasarım Sistemi tema setimiz ile Bileşenlerimizi ve dijital uygulamalarımızda yer alacak her bir parçayı tasarlamaya başladık. Tasarım sprintimizden ve şimdiye kadar üretilen her şeyden öğrendiklerimizi aldık ve tutarlı olmaya çalışarak ve belirlenen yönergeler etrafında çalışarak üretime başladık. Ürün tasarımı ve geliştirmesinin tamamen uyum ve tema ile ilgili olduğuna inanıyorum; oyun tasarımcısı ve sanat yönetmeni olarak günlerimden getirdiğim ve bugün hala geçerli olan bir şey ve bir şirket olarak aynı önermeleri takip ettiğimiz için mutluyum.

Ve birçoğu var! Paskalya yumurtasını tanımlayabilir misin? :D

4. Teslimat

Böylece, uzun bir tasarım ve geliştirme döngüsünden sonra ürünümüzü teslim etme zamanı geldi. Ürünümüzde ortaya çıkan işlevler tam olarak nelerdir ve nasıl çalıştı?

Ürünümüz , arka ucu için Ruby ve ön ucu için React kullanılarak geliştirildi ve geliştiricilerimiz, Öğretmen Portalımızı uygulamak için tasarım sistemi tarafından belirlenen yönergeleri kullandı .

MVP'mizin , ürünümüzün değerlerini ve misyonunu ve neyi başarmaya çalışacağımızı gösteren bir açılış sayfası olacaktır; kullanıcının öğretmenlere, eğitimcilere ve profesörlere özel olarak hazırlanmış içeriği görebileceği, izleyebileceği, okuyabileceği ve dinleyebileceği bir trendler sayfası; pedagoglarımız tarafından oluşturulan içeriğin tamamını bulabileceğiniz bir kaynaklar sayfası; öğretmenlerin özel kurslarımızı alarak nasıl daha da iyi profesyoneller olabileceklerini öğrenebilecekleri bir gelişim yolu sayfası; ve aynı kullanıcıların bizimle iletişime geçerek sorularını ve endişelerini giderebilecekleri bir bizimle konuş sayfası.

Birçok işlevi olduğu için tüm ürünü geliştirmemiz biraz zaman aldı ama sonunda her şey yolunda gitti ve işte burada; İki Dilli Öğretmen Portalı'na tüm görkemiyle gidin.

İki Dilli Cep Telefonuna Geçin
Öğretmen Portalı giriş sayfası
Masaüstü açılış sayfamız

İş ihtiyaçları sürekli değişiyor ve Spot Educação , Edify Education olduğunda Go Bilingual durduruldu . Ancak, ortaya konulan tüm çalışma ve çaba burada gösterildi ve ortaya koyduklarımızdan gerçekten gurur duyuyoruz. MVP'mizi üretmek gerçekten zordu ve bu süreçte tonlarca zorlukla karşılaştık ama sanırım ürün tasarımı ve geliştirme böyle bir şey ve profesyonel olarak oldukça eğlenceli ve sürükleyiciydi. Sadece bu değil, bu proje şirket içindeki birçok ürünün temelini oluşturuyor.

Go Bilingual'ın ana web sitesi http://www.gobilingual.com.br/ idi , ancak ürün artık mevcut olmadığı için şu anda çevrimdışı. Öğretmen Portalına buradan erişmeye devam edebilirsiniz: http://teachersportal.gobilingual.com.br/ . Okuduğunuz için teşekkürler!