MyTaxi ilovasi dizayni

Rollarda
Art-direktor: Farhodjon Chinberdiyev
Dizayner: Nodir Xalilov
Grafik dizayner: Javohir Nazarov
Dasturchilar: Nuriddin Yuldashev, Bahrom Sarimsaqov
Buyurtmachi: Newmax Technologies

Vazifa

Toshkent shahrida taksi buyurtma berishni mobil ilova orqali avtomatlashtirish. Foydalanuvchilar ko‘chaga chiqmasdan, qulay foydalanuvchi interfeysi orqali taksi buyurtma qilishi, haydovchi va yo‘nalish haqida to‘liq ma’lumot olish va manzilga qulay mashinada yetib olishni ta’minlash.

Jarayon

Birinchi iteratsiya

Buyurtmachi bilan uchrashamiz va ular qanday muammoni yechishga harakat qilayotganini yaxshilab o‘rganamiz. O‘zimizda bor savollarga ulardan javob olamiz va ishni boshlaymiz.

GoodPhoton studiyasida biz TZ (Texnicheskoye zadaniye) bo‘yicha ishlmaganmiz. Chunki biz odamlarning muammolarini yechadigan loyihalar qilganmiz. Qandaydir 50 sahifadan iborat buyurtmachi tuzgan hujjat bo‘yicha ishlamaganmiz.

Mijoz mobil ilova qanday ko‘rinishi haqidagi tasavvurini vayrfreym shaklida bizga beradi:

 

Vayrfreym bilan tanishib chiqamiz va har xil taksi ilovalarini o‘rganib chiqamiz:

 

Bu orada O‘zbekiston bozorida taksi buyurtma berish uchun mo‘ljallangan ilovalar Yandeks Taksi interfeysini ko‘chirib qo‘ya qolishardi. Biz esa o‘zimiz mustaqil dizayn yechim qilishga harakat qilar edik. O‘xshash ilovalarni o‘rganib chiqqach, art-direktor eskizlarni qog‘ozga tushiradi:

 

Mijozga eskizlarni tasdiqlatamiz va interfeysni chizishni boshlaymiz. Ilovadagi ranglar va elementlar stilini aniqlab olish uchun ishni asosiy ekran — Buyurtma berish ekranidan boshlaymiz. Bizning gipotezamiz bo‘yicha foydalanuvchi uchun har doim turgan joyi belgilanib turadi. Shuning uchun buyurtma berish ekranida «Qayerdan» bandi aktiv turadi va foydalanuvchi «Qayerga» bandini tanlab, manzilni kiritadi. Vaqt tanlash imkoniyati ham bor:

 

Asosiy ekranni tayyorlash jarayoni uzoqroq kechgan. Lekin jarayondagi dizayn fayllarini saqlab qo‘ymagan ekanman 🙂

Buyurtmachiga asosiy ekranni tasdiqlatamiz, dasturchilarga dizaynni beramiz va keyingi ekranlar ustida ishlashni boshlaymiz.

 

Navbatdagi ekran, foydalanuvchiga vaqt tanlash imkoniyatini beradi. Buyurtmachi bizga foydalanuvchilar uchun 3 kun oldin aniq vaqtni belgilagan holda, taksi buyurtma qilish imkoniyatini qo‘shishimizni so‘raydi. Birinchi iOS va Android platformasidagi standart vaqt tanlaydigan interfeysni ishlatib ko‘ramiz. Lekin dizayn bizga yoqmaydi.

Art-direktor: Haqiqiy analog soat interfeysini chizsakchi? Foydalanuvchi soatni aylantirib vaqt tanlashi mumkin bo‘ladi.

Dizaynerga bu fikr juda yoqadi va o‘zi yoqtirgan Braun soatlari kabi minimalistik ko‘rinishdagi dizayn chizadi:

 

Art-direktor: Ko‘rinishi yaxshi. Lekin foydalanuvchilar uchun tushunarsiz. Interfeysga qarab odamlar vaqt tanlashi mumkinligini bilishi qiyin.

Dizayner muammoni yechish uchun animatsiya ko‘rinishdagi yo‘riqnoma qilish taklifini beradi:

 

Vaqt tanlash ekrani rangi kun va tun rangiga qarab o‘zgarishi mumkinligi haqida o‘ylaymiz va har xil ranglarni tanlab olamiz:

 

Ranglar o‘zgarishini animatsiya holatiga keltiramiz:

Animatsiya 2013 yilda Fotoshopda qilingan. Yangitdan qilishga erindim 🙂 Buyurtmachiga vaqt tanlash ekrani juda yoqdi.

Tarif tanlash ekranini chizamiz:

 

Art-direktor: Bu ekranning vazifasi foydalanuvchiga tanlov imkoniyatini berish. Asosan o‘xshash matn takrorlanyapti va ko‘rinishi juda ham sodda (primitiv). Tariflarni bir-biridan ajratish qiyin. Har bir tarifga mashina ikonklarini qo‘ysakchi?

Grafik dizayner – Javohir Nazarov har bir tarif uchun mos mashinalar ikonkalarini chizib beradi:

Qolgan ekranlarni ham tayyorlab chiqamiz.

 

Tablar ustida ishlaymiz va rang va stilini aniqlab olamiz:

 

Ilovani ochganda birinchi ko‘rinadigan ekran ustida ishlaymiz:

 

Buyurtma tugagach, umumiy ma’lumot beradigan ekran dizayni:

 

Ro‘yxatdan o‘tish va profilni sozlash ekranlarini tayyorlab chiqamiz:

 

Relizga tayyorlash uchun intro ekranlarini tayyorlab chiqamiz:

Shu bilan birinchi iteratsiya o‘z nihoyasiga yetadi. Buyurtmachi ilovani test qilishni boshlaydi va foydalanish uchun qiyin holatlarni yig‘ib chiqishadi va biz keyingi iteratsiyani boshlaymiz.

Ikkinchi iteratsiya

Bu iteratsiyada asosiy o‘zgargan ekranlar dizayni:

 

Ikkinchi iteratsiyada intro ekranlari ham o‘zgargan:

 

Bu iteratsiyada biz vaqt tanlash ekranini olib tashlaganmiz. Chunki bunday imkoniyatni hech kimga keragi bo‘lmagan.

Dizayn tayyor bo‘lgach o‘sha vaqtdagi MyTaxi direktori — Bahtiyor Hasanov (Ben Khasanov) bilan interfeysni ishlatish qulayligini foydalanuvchilar bilan test qilamiz. Bahtiyor Hasanov test jarayonini videoga oladilar:

Testlar natijasida foydalanuvchilar buyurtma berishga qiynalishganini aniqladik va interfeysni soddalashtirish uchun keyingi iteratsiya ustida ishladik.

Uchinchi (oxirgi) iteratsiya

Bu iteratsiyada asosan interfeysni soddalashtirganmiz:

Ilova ikonkasi

Ilovaning ustida dizaynni boshlashimiz bilan grafik dizaynerimiz ikonka ustida ishlaydi va o‘zining tasavvuridagi ikonkani chizadi:

Buyurtmachi soddaroq ko‘rinishdagi ikonka bo‘lishini xohlashadi va o‘zlari boshqa dizayner bilan ishlab quyidagi yechimga keladi:

Ilovani barcha foydalanuvchilarga chiqarishdan oldin buyurtmachi boshqa dizayn studiya bilan brending qilishadi va MyTaxi logosi va ikonkalari vujudga keladi:

Tamom!

Telegram