Кейс продуктового дизайну
Конструктор сайтів, онлайн-магазини
Система для створення онлайн-магазинів · Іврит / англійська · E-Commerce
Про e-commerce проєкт
Деталі проєкту
Це не просто дизайн-проєкт онлайн-магазину. Я працював над створенням системи компонентів, шаблонів, адаптивів та елементів для зручного й швидкого створення онлайн-магазинів. Це допомогло аутсорсинговій компанії брати велику кількість замовлень на створення онлайн-магазинів і виконувати їх у дуже стислі терміни.
Моя роль
UX-дизайнер / візуальний дизайнер
«Війна в моїй країні сильно вплинула на багатьох людей. Мені доводилося працювати в кафе, коворкінгах, гаражах і на парковках. Це допомогло абстрагуватися й значно глибше занурюватися в проєкти».
Процес дизайну
Шлях проєкту охоплював визначення бізнес-проблеми наших клієнтів, розуміння її нюансів, визначення проблем і потреб користувачів, перенесення дизайну, створення низькодеталізованих шаблонів і екранів для адаптивного дизайну. Процес був ітеративним, тому допоміг створити не одну структуру онлайн-магазинів і забезпечити зручну взаємодію з клієнтами та командою розробки.
Робота над ідеєю
Під час щоденних брейнштормів ми проводили повторні інтерв’ю з клієнтами й аналізували ці дані. Персони та мапи емпатії допомогли краще зрозуміти і клієнтів, і користувачів онлайн-магазинів.
Дизайнери команди дослідили конкурентів і застосували найкращі рішення в нашому проєкті. Перші етапи були сповнені зустрічей з розробниками й менеджерами, і це згодом також допомогло заощадити цінний час.
Дослідження і візуалізація
Це був довгий і цікавий шлях розробки вайрфреймів для різних блоків системи онлайн-магазину. Потім блоки об’єднали в повноцінні вебсторінки. Останній крок цього етапу — створення екранів для адаптивного дизайну.
Запуск продукту
Фронтенд-розробники створили шаблони коду для швидкого впровадження й використання в різних замовленнях. Менеджер приймає замовлення від клієнта, дизайнер робить креативний візуальний дизайн, а розробники підключають дизайн, редагуючи код шаблону.
Зміни
Після створення першої версії шаблонів онлайн-магазинів більшість процесів змінили. У результаті в нашій компанії з’явилося 3 типи e-commerce систем. Це допомогло розширити клієнтську базу й запустити дуже простий, але креативний процес створення онлайн-магазинів.
У цьому кейсі я візьму як приклад візуальний дизайн одного з онлайн-магазинів, які я створив. Також покажу, як будувалися блоки сторінок після етапу дослідження конкурентів, роботу над різними макетами сторінок і процес створення адаптивного дизайну.
Робота над ідеєю
Персона Марк: онлайн-магазин
Інтереси
Причини замовити наш продукт: контекст / проблема
Дослідження і візуалізація
Ще на етапі дослідження конкурентів, щоденних зустрічей з командою й аналізу структури онлайн-магазинів тривала робота над будівельними блоками (шаблонами) для майбутніх екранів.
Паралельно розроблялися й екрани адаптивного дизайну — для зручної роботи розробників. Це заощадило багато часу на наступних етапах розробки проєкту.
Запуск продукту
Надшвидкі кроки дизайну
Менеджмент
Тут відбувається взаємодія між клієнтом і менеджером компанії. Опрацювання технічного завдання й передача дизайнерам.
Візуальний дизайн
На цьому етапі дизайнер знайомиться з технічним завданням і робить візуальний дизайн готових шаблонів. Залежно від побажань клієнта дизайн виходить або суперкреативним, або строгим і стриманим
Запуск
Розробники отримують дизайн і підключають його до готових шаблонів коду. Потім дизайн звіряють з результатом фронтенду. І нарешті — запуск магазину й задоволений клієнт.
eco-techno store
Кольори
Коли клієнт звертався до нашої компанії, у його продукту вже був певний брендинг. Якщо в компанії не було айдентики, ми проводили невелике опитування й ураховували побажання клієнта у виборі кольорів.
Типографіка
Здебільшого в нас були клієнти з Ізраїлю, тому ми використовували шрифти з підтримкою івриту. Якщо сайт був англійською, ми обирали шрифт, що відповідає айдентиці й брендингу компанії клієнта.
Візуальний дизайн: десктоп
Візуальний дизайн: мобільна версія
Запуск
У цьому кейсі я візьму як приклад візуальний дизайн одного з онлайн-магазинів, які я створив. Також покажу, як будувалися блоки сторінок після етапу дослідження конкурентів, роботу над різними макетами сторінок і процес створення адаптивного дизайну.
Підсумки
Цей e-commerce проєкт виходить за межі простого дизайну онлайн-магазину: це створення цілісної системи з компонентів, шаблонів, адаптивів та елементів. Такий підхід допоміг аутсорсинговій компанії ефективно виконувати безліч замовлень на онлайн-магазини в дуже стислі терміни. Моя подвійна роль UX-дизайнера й візуального дизайнера відіграла в цьому успіху ключову роль.
Посилання на сайт компанії, в якій мені вдалося реалізувати цей проєкт: navoto.com.
Дякую!
Дякую за перегляд! І дякую Збройним силам України за можливість працювати!
