LittleKisa – a marketplace for kids’ merchandise

littlekisa_perspective LittleKisa is a mobile marketplace for kids’ clothing, toys, accessories and more. Think of it as Amazon for the kids products niche. It is focused on the Russian market. So the app is in Russian. I was brought in the project from the very early stage. I helped to define the task within the allocated budget, designed the whole UI, logo, documented the UI specs and managed the development of the app for Android. The budget was somewhat limited, so the main task we agreed on with a client was to design and develop a good minimum product. It was decided to go along with Android Material Design guidelines, but in the end I was way too frustrated with Material Design’s aesthetics of some of the elements, and decided to go with a little bit more custom look. For the interactions though and basic interface elements, we stayed within the guidelines. In this post I want to illustrate as much of my input to the project as possible.

Task document

As I mentioned, I created the technical task, added necessary details, removed the things that were out of scope, negotiated and agreed on everything with a client and developer.
Задание - Google Docs

2. UI Sketches

So, after getting all the details, I started sketching the main screens to conceptualize the overall UI.
VAmywTK_IkQ

Mockups design

After getting an idea of the UI concept and overall architecture, I proceeded to creating layouts in photoshop. Starting from lower-fidelity mockups, reviewing and iterating over them, I came to a final high-fidelity mockups. I thought of all interactions and states and illustrated them in the mockups, as well. Here I present the final designs:
Старт_0000_Дефолт Старт_0001_Слайд2 Старт_0002_Слайд3 Старт_0003_ДанныеВведены Старт_0004_Ошибка Регистрация_0000_Дефолт Регистрация_0001_ВведенаИнформация Регистрация_0002_Ошибка ДобавитьАватар ВосстановитьПароль_0000_Дефолт ДобавитьРебёнка_0000_Дефолт ДобавитьРебёнка_0001_ПриРегистрации_Есть-возможность-пропустить ДобавитьРебёнка_0002_Нажатие ДобавитьРебёнка_0003_ПолВыбран Меню_0000_Дефолт Меню_0002_Новое Меню_0001_Нажатие Объявления_0000_Дефолт Объявления_0001_НажатиеНаИконку Объявления_0002_НажатиеНаЗаголовок Объявления_0003_ЛайкНажатие Объявления_0004_ЛайкНажатиеПосле Объявления_0005_СубменюИконкаНажатие Объявления_0006_Субменю Объявления_0007_СубменюНажатие Объявления_0008_ЖеланиеДобавлено Объявления_0009_Поделиться Объявления_0010_Tab2 Объявления_0011_Tab3 Объявления_0012_Поиск Объявления_0013_ПоискВводимТекст Объявления_0014_ПоискРезультат Объявления_0015_Фильтр Объявления_0016_ФильтрДропдаун Объявления_0017_ФильтрДропдаунНажатие Объявления_0018_ФильтрСкролл Объявления_0019_ФильтрНажатие Объявления_0020_РасшПоиск Объявления_0021_РасшПоискВводимТекст Объявления_0022_РасшПоискНажатие Объявление_0000_Дефолт Объявление_0001_Субменю Пользователь_0000_Дефолт Пользователь_0001_ИконкаПодписчикиНажатие Пользователь_0002_ИконкаПодпискиНажатие Пользователь_0003_ДропдаунИконкаНажатие Пользователь_0004_ДропДаун+Нажатие Пользователь_0005_Подписаться Пользователь_0006_ПодпискаУспешна Пользователь_0007_Отписаться Пользователь_0008_ДропдаунОтписаться Пользователь-Подписки Пользователь-Подписчики ОбоМне_0000_Дефолт ОбоМне_0001_ВводИмени ОбоМне_0002_Сохранено ОбоМне_0003_ВводСтатуса ОбоМне_0004_ИконкаМенюНовое ОбоМне_0005_ИконкаМенюНовоеБольшоеЧисло ОбоМне_0006_ПриРегистрации МоиОбъявления_0000_Дефолт МоиОбъявления_0001_Алёрт МоиОбъявления_0002_Купить МоиОбъявления_0003_Ошибка МоиОбъявления_0004_Успешно МоиОбъявления_0005_Пригласить МоиОбъявления_0006_ОповешениеНовоеСообщение МоиОбъявления_0007_ОповещениeПодписчик МоиОбъявления_0008_ОповещениеСписокЖеланий МоиОбъявления_0009_ОповещениеЛайк МоиОбъявления_0010_ОповещениеДопОбъявлениеclick here width="380" srcset="http://alexandertazh.com/wp-content/uploads/2016/02/МоиОбъявления_0010_ОповещениеДопОбъявление-576x1024.png 576w, http://alexandertazh.com/wp-content/uploads/2016/02/МоиОбъявления_0010_ОповещениеДопОбъявление-168x300.png 168w, http://alexandertazh.com/wp-content/uploads/2016/02/МоиОбъявления_0010_ОповещениеДопОбъявление.png 1080w" sizes="(max-width: 576px) 100vw, 576px" /> МоиОповещения_0000_Дефолт МоиОповещения_0001_Нажатие МоиОповещения_0002_Прочитано МоиДети_0000_Дефолт МоиДети_0001_ИконкаРедактироватьНажатие МнеПонравилось_0000_Дефолт МоиПодписки_0000_Дефолт МоиПодписки_0001_Нажатие МоиПодписчики МоиСообщения_0000_Дефолт МоиСообщения_0001_Нажатие МоиСообщения-Разговор_0000_Дефолт МоиСообщения-Разговор_0001_ВводимТекст Настройки_0000_Дефолт Настройки_0001_ВводимДанные Настройки_0002_Сохранено СписокЖеланий Условия ДобавитьОбъявление РедактироватьОбъявление

Logo

Kisa means cat or kitty in Russian. I wanted the identity to be easy-to-remember. So, since the name is LittleKisa, then lets use visual of a cat. It was a bit of a hard time convincing the client, that using the cat image is better than using a teddy image, if the company name is about a cat… Anyways, as always I started with some sketching:
RZhXEaqDCms
I came up with a quite a few logo concepts:
logo_concept1 logo_concept2 logo_concept3 logo_concept4 logo_concept5 logo_concept9 logo_concept11 logo_concept13 logo_concept13_2
logo_concept14 logo_concept15 logo_concept16 logo_concept17 logo_concept18 logo_concept19
Finally, the client picked the one with a bag and cat image in it:
logo_v15_2
Knowing, that the simpler and outlined logo would work better, I included the outlined versions and showed the examples of use:
logo_v15_3 logo_v15_4 mockup_v15_3 mockup_v15_4 mockup_v15_2
Alas, the kisa was approved:
logo_1024x1024 logo_horizontal logo_horizontal_b logo_with_name_1024x1024 logo_with_tagline_1024x1024 logo_with_tagline_b_1024x1024 logo_with_tagline_w_1024x1024 logo_horizontal_w

UI Specs

As it was time to proceed to development, I exported all assets in all Android’s resolution categories. Provided detailed measurements in dp. Created a UI specs document.
МоиСообщения-Разговор ОбоМне Объявления Объявления_поделиться Объявления_поделиться2 Объявления_фильтр Регистрация Старт Субменю Условия ДобавитьОбъявление ДобавитьРебёнка дропдаун Меню МнеПонравилось МоиДети МоиОбъявления МоиОбъявления_snackbar МоиОбъявления_snackbar_doubleLine МоиОбъявления_алёрт МоиОповещения МоиПодписки МоиСообщения UI Specs - Google Docs

Development and testing

It is practically impossible to design a perfect UI and take care of EVERY detail in the design stage. That’s why close collaboration with developers is very beneficial. We have successfully came up to solutions in some of the UI situations with a developer, where an easier approach could be taken, without sacrificing usability. That’s one example. Then, I made some mistakes and had to correct a couple things and send him the amended files and screens. Had to design 1 extra screen. Etc., etc., things like that. I led the development and testing, and helped with publishing the app. Happy shopping and selling on LittleKisa!