2013-2015 йилларда Good Photon студиясида MyTaxi иловасини ишлаб чиқдик. Дизайн жараёни қандай кечгани ҳақида батафсил маълумотни орадан 4 йил ўтгач бўлишяпман.

Ролларда

Арт-директор: Фарҳоджон Чинбердиев
Дизайнер: Нодир Халилов
График дизайнер: Жавоҳир Назаров
Дастурчилар: Нуриддин Юлдашев, Баҳром Саримсақов
Буюртмачи: Newmax Technologies

Вазифа

Тошкент шаҳрида такси буюртма беришни мобил илова орқали автоматлаштириш. Фойдаланувчилар кўчага чиқмасдан, қулай фойдаланувчи интерфейси орқали такси буюртма қилиши, ҳайдовчи ва йўналиш ҳақида тўлиқ маълумот олиш ва манзилга қулай машинада етиб олишни таъминлаш.

Жараён

Биринчи итерация

Буюртмачи билан учрашамиз ва улар қандай муаммони ечишга ҳаракат қилаётганини яхшилаб ўрганамиз. Ўзимизда бор саволларга улардан жавоб оламиз ва ишни бошлаймиз.

GoodPhoton студиясида биз ТЗ (Техническое задание) бўйича ишлмаганмиз. Чунки биз одамларнинг муаммоларини ечадиган лойиҳалар қилганмиз. Қандайдир 50 саҳифадан иборат буюртмачи тузган ҳужжат бўйича ишламаганмиз.

Мижоз мобил илова қандай кўриниши ҳақидаги тасаввурини вайрфрейм шаклида бизга беради:
mt-wireframe

Вайрфрейм билан танишиб чиқамиз ва ҳар хил такси иловаларини ўрганиб чиқамиз:
mt-similars

Бу орада Ўзбекистон бозорида такси буюртма бериш учун мўлжалланган иловалар Яндекс Такси интерфейсини кўчириб қўя қолишарди. Биз эса ўзимиз мустақил дизайн ечим қилишга ҳаракат қилар эдик. Ўхшаш иловаларни ўрганиб чиққач, арт-директор эскизларни қоғозга туширади:
mt-sketches-1
mt-sketches-2

Мижозга эскизларни тасдиқлатамиз ва интерфейсни чизишни бошлаймиз. Иловадаги ранглар ва элементлар стилини аниқлаб олиш учун ишни асосий экран — Буюртма бериш экранидан бошлаймиз. Бизнинг гипотезамиз бўйича фойдаланувчи учун ҳар доим турган жойи белгиланиб туради. Шунинг учун буюртма бериш экранида «Қаердан» банди актив туради ва фойдаланувчи «Қаерга» бандини танлаб, манзилни киритади. Вақт танлаш имконияти ҳам бор:
mt-add-order

Асосий экранни тайёрлаш жараёни узоқроқ кечган. Лекин жараёндаги дизайн файлларини сақлаб қўймаган эканман :)

Буюртмачига асосий экранни тасдиқлатамиз, дастурчиларга дизайнни берамиз ва кейинги экранлар устида ишлашни бошлаймиз.
mt-screens-2

Навбатдаги экран, фойдаланувчига вақт танлаш имкониятини беради. Буюртмачи бизга фойдаланувчилар учун 3 кун олдин аниқ вақтни белгилаган ҳолда, такси буюртма қилиш имкониятини қўшишимизни сўрайди. Биринчи iOS ва Android платформасидаги стандарт вақт танлайдиган интерфейсни ишлатиб кўрамиз. Лекин дизайн бизга ёқмайди.
Арт-директор: Ҳақиқий аналог соат интерфейсини чизсакчи? Фойдаланувчи соатни айлантириб вақт танлаши мумкин бўлади.

Дизайнерга бу фикр жуда ёқади ва ўзи ёқтирган Braun соатлари каби минималистик кўринишдаги дизайн чизади:
mt-time

Арт-директор: Кўриниши яхши. Лекин фойдаланувчилар учун тушунарсиз. Интерфейсга қараб одамлар вақт танлаши мумкинлигини билиши қийин.

Дизайнер муаммони ечиш учун анимация кўринишдаги йўриқнома қилиш таклифини беради:
mt-time-animation

Вақт танлаш экрани ранги кун ва тун рангига қараб ўзгариши мумкинлиги ҳақида ўйлаймиз ва ҳар хил рангларни танлаб оламиз:
mt-time-colors

Ранглар ўзгаришини анимация ҳолатига келтирамиз:
mt-time-hours
Анимация 2013 йилда Фотошопда қилинган. Янгитдан қилишга эриндим :) Буюртмачига вақт танлаш экрани жуда ёқди.

Тариф танлаш экранини чизамиз:
mt-car-classes

Арт-директор: Бу экраннинг вазифаси фойдаланувчига танлов имкониятини бериш. Асосан ўхшаш матн такрорланяпти ва кўриниши жуда ҳам содда (примитив). Тарифларни бир-биридан ажратиш қийин. Ҳар бир тарифга машина иконкларини қўйсакчи?
mt-car-classes-2
График дизайнер – Жавоҳир Назаров ҳар бир тариф учун мос машиналар иконкаларини чизиб беради:
car-icons

Қолган экранларни ҳам тайёрлаб чиқамиз.
mt-additional-screens
mt-drivers

Таблар устида ишлаймиз ва ранг ва стилини аниқлаб оламиз:
tabs

Иловани очганда биринчи кўринадиган экран устида ишлаймиз:
mt-main-screen

Буюртма тугагач, умумий маълумот берадиган экран дизайни:
mt-receipts

Рўйхатдан ўтиш ва профилни созлаш экранларини тайёрлаб чиқамиз:
mt-registration-and-profile

Релизга тайёрлаш учун интро экранларини тайёрлаб чиқамиз:
mt-intro-01

Шу билан биринчи итерация ўз ниҳоясига етади. Буюртмачи иловани тест қилишни бошлайди ва фойдаланиш учун қийин ҳолатларни йиғиб чиқишади ва биз кейинги итерацияни бошлаймиз.

Иккинчи итерация

Бу итерацияда асосий ўзгарган экранлар дизайни:
mt-screens-v2

Иккинчи итерацияда интро экранлари ҳам ўзгарган:
mt-intro-screens-v2

Бу итерацияда биз вақт танлаш экранини олиб ташлаганмиз. Чунки бундай имкониятни ҳеч кимга кераги бўлмаган.

Дизайн тайёр бўлгач ўша вақтдаги MyTaxi директори — Баҳтиёр Ҳасанов (Ben Khasanov) билан интерфейсни ишлатиш қулайлигини фойдаланувчилар билан тест қиламиз. Баҳтиёр Ҳасанов тест жараёнини видеога оладилар:

Тестлар натижасида фойдаланувчилар буюртма беришга қийналишганини аниқладик ва интерфейсни соддалаштириш учун кейинги итерация устида ишладик.

Учинчи (охирги) итерация

Бу итерацияда асосан интерфейсни соддалаштирганмиз:
mt-screens-v3

Илова иконкаси

Илованинг устида дизайнни бошлашимиз билан график дизайнеримиз иконка устида ишлайди ва ўзининг тасаввуридаги иконкани чизади:
sketch1

1

2

final

Буюртмачи соддароқ кўринишдаги иконка бўлишини хоҳлашади ва ўзлари бошқа дизайнер билан ишлаб қуйидаги ечимга келади:
mt-icon-2

Иловани барча фойдаланувчиларга чиқаришдан олдин буюртмачи бошқа дизайн студия билан брендинг қилишади ва MyTaxi логоси ва иконкалари вужудга келади:
mt-final-logo

Тамом!

Телеграм
Линкедин
Пинтерест