Summery
Моя роль
Middle designer
Как все было
Я пришел на это проект в самом начале и делал все с полного нуля. На проекте нас было четверо: арт директрок, двое диазйнеров и я. Надо было сделать веб-биржу для продажи электроники для реселлеров и крупных торговых сетей.
Что именно делал
Проводил исследования и разбирался в российском B2С рынке
Делал доклад для команды
Менторил 2-х дизайнеров
Проектировка wireframes
Спроектировал дизайн систему
Какие навыки использовал
Проведение UX/UI исследований, аналитика, создание пользовательских потоков и карты экранов, разработка wireframes и прототипов, создание дизайн системы, тестирование пользовательского интерфейса, работа в команде с арт-директором и другими дизайнерами, подготовка презентаций и отчетов для клиента, создание дорожной карты проекта.
Problem
Цели бизнеса
Сделать масштабируемую платформу
Сделать масштабируемый дизайн
Создать полноценный дизайн-отдел
Commercial offer
Обсуждение с CEO
Для того чтобы четко понять что именно хочет заказчик мы составили четкие вопросы для стейкхолдера который их задал закачику. Далее по методу SMART мы четко поняли цель:
Specific (Конкретная): Создать онлайн-платформу для автоматизации, прозрачности и ускорения процесса торговли между юридическими лицами (реселлерами), где пользователи смогут публиковать заявки, заключать контракты и отслеживать исполнение заказа в одном окне
Measurable (Измеримая): Достичь 500 активных пользователей в течение первых 6 месяцев после запуска, обеспечить автоматизацию 70% рутинных торговых операций для зарегистрированных компаний, снизить среднее время заключения сделки на платформе до 2 дней с момента публикации заявки
Achievable (Достижимая): Использовать современный стек технологий, продуманный юзер-флоу, провести маркетинговую кампанию и привлечь клиентов через партнерские соглашения с крупными торговыми организациями
Relevant (Релевантная): Решает проблему низкой эффективности и непрозрачности внутриторговых процессов между компаниями, упрощая документооборот, ускоряя коммуникацию и снижая операционные издержки
Time-bound (Ограниченная по времени): Запустить MVP платформы через 4 месяца с момента начала разработки, полностью реализовать функционал автоматизации, отчетности и чата для пользователей за 8 месяцев
План и сроки разработки
Для того чтобы и мы и закачик примерно понимали за какое количесво времени мы справимся была сделана диаграмма ганта со сроками (сделали ее прямо на созвоне со стейкхолдером).
Диаграмма Ганта со сроками разработки
Work Work Work
Сбор информации и исследование
Собрал информацию о российском B2С e-com рынке, читал профильные статьи, смотрел дизайн конкурентов и софрмировал ограничения
Собрал все эти данные воедино и сделал доклад для команды
Карта экранов
На основе собранной информации создал карту экранов и защитил её перед стейкхолдером
Карта экранов
Проектирование карточки ордера
Цель
Заказчик хотел видеть объявления товаров как на бирже - в формате ордеров.
Задача
Определить что и именно и как мы будет показывать на ордере
Исследование
Провел глубинные исследования с фокус группой предоставленной стейкхолдером - 6 человек, 3 из которых основатели ресейл бизнесов, 3 их менеджеры по закупкам.
По результатам опроса понял что надо разделить ордера на новые, уцененные и Б/У, тк ЦА очень важно быть уверенными в качестве товара.
Проанализировал ордера на биржах(Т-терминал, Альфа Инвестиции, Bybit P2P, Binance P2P)
Примеры терминалов конкурентов
WireFrames
После исследований сделал первый прототип ордера: инфа о продавце, цена+цена с доставкой и количество штук в партии
Первый прототип с ценой, ценой за доставку, количеством товара, профилем продавца
Затем пошёл за дополнительными исследованиями: спросил, какие в целом варианты продаж бывают в ресейле — оказалось, что бывают варианты с самовывозом, оплатой только наличными, а также должна быть возможность продавать не целиком партию, а лоты
Второй прототип: добавил лоты, город и доставку
Затем пошёл за дополнительными исследованиями: спросил, какие в целом варианты продаж бывают в ресейле — оказалось, что бывают варианты с самовывозом, оплатой только наличными, а также должна быть возможность продавать не целиком партию, а лоты
Второй прототип: добавил лоты, город и доставку
После утверждение вайрфреймов отрисовал итоговые ордеры
Дефолтная карточка, карточка с самовывозом, карточка с наличными+самовывозом
Затем итоговые карточки проверил на фокус-группе от стейкхолдера и убедился в том что они будут удобны для целевой аудитории. После для карточек сделал дизайн систему, описал состояния и отправил в разработку
Результат
Карточки оффера, удобство которых подтверждено исследованиями
Первый прототип с ценой, ценой за доставку, количеством товара, профилем продавца
Проектирование экрана сделки
Цель
Заказчику надо было сделать экран сделки, в который уже интегрирован чат между продавцом и покупателем, также будет панель статуса доставки и оплаты товара
Задача
Провести исследования и сделать этот экран
Исследование
Сначала собрал ограничения и требования помощью глубинных интервью с фокус-группой, после пошел собирать референсы с площадок онлайн торгов.
Экран сделки на “Портале поставщиков”
После исследований я решил использовать приницип взаимного подтверждения- бы сделка совершилась, Каждая сторона должна подтвердить каждый этап сделки. Если этого не происходит, то груз возвращается продавцу, а деньги покупателю.
WireFrames
Я нарисовал вайрфреймыи протестировал их на коридорных тестированиях с фокус-группой. После положительного фидбека сделал финальный вариант, сделал для него дизайн систему и отправил в разработку
Финальный макет
Результат
Благодаря моей работе был сделан экран сделки, который гарантирует её честность и выполнение до конца, а также защищает от мошенничества обе стороны сделки
Дизайн система
Уже во время работы мы составляли дизайн систему. В завершении работы я красиво ее распределил и полностью проверил.
Также я упростил работу разработчикам написав для них инструкции, и для дизайнеров, чтобы они создавали более типизированные элементы.
Внедрение дизайн-процесса и дизайн-ревью
Как все было
На проекте было 4 дизайнера: 2 джуна, мидл, я и лид. Чтобы грамотно выстроить работу над проектом, мы с лидом сначала спроектировали дизайн-процесс, а потом делали созвоны, на которых я с лидом рассказывали как именно по этому дизайн-процессу работать. И чтобы команде было проще и быстрее адаптироваться, я сделал вот такую напоминалку об этапах дизайн-процесса
Напоминалка
Дизайн ревью
Также на этом проекте я регулярно проводил дизайн-ревью и менторил младших дизайнеров. Ревьюил работы по такой методологии:
Выяснял задачу, требования, ограничения
Ревью продуктовой части: смотрю на исследование и гипотезы
UX-ревью сценариев и логики
UI-ревью визуальной составляющей и проверку технической реализуемость
Даю общую обратную связь, рисуем карту компетенций, даю какие-то материалы для обучения
Проверяю внесенные изменения
Результат
Внедрил дизайн-процесс, обучил младших дизайнеров по нему работать, благодаря этому повысилась скорость и качество работы, благодаря грамотному и объективному дизайн-ревью дизайнеры начали четко понимать им нужно прокачать, а также дополнительно повысилось качество работ.
Final
Insights and results
Что в итоге?
• На странице представлен комплексный кейс по разработке биржи спотовых торгов Contract Retail, включающий решение актуальных проблем, коммерческое предложение, таймлайн этапов работ, архитектуру процессов и демонстрацию ключевых интерфейсов системы.
• Был разработан структурированный продукт, учитывающий все этапы: подготовку, архитектурное проектирование, прототипирование, оформление интерфейсов и баланс отдельных пользовательских сценариев.
• Наглядно отработана дорожная карта и система этапов, что повысило прозрачность коммуникации с заказчиком и упростило управление проектом.
• В результате реализован современный интерфейс биржи, поддерживающий основные торговые функции, финансовый мониторинг и обработку сделок в различных сценариях
Чему я научился ?
• Улучшил навыки структурирования сложных проектов: научился разрабатывать подробную дорожную карту с декомпозицией задач и сроков, что стало важным инструментом планирования и коммуникации.
• Освоил принципы архитектурного проектирования цифровых продуктов: от анализа проблемы до схемы сквозных бизнес-процессов, что повысило качество конечного продукта и удобство его дальнейшей доработки.
• Получил опыт создания приемлемых прототипов интерфейсов и UX-дизайна с упором на реальность пользовательских сценариев, учета ролей, баланса информационной структуры и визуального восприятия данных.
• Развил умение готовить комплексные коммерческие предложения: структурировать цели, проблемы, решения и аргументированно защищать свой выбор технологий и архитектурных подходов на всех этапах взаимодействия с партнером.
• Научился интегрировать различные модули системы (торговый терминал, сделки, финансы) в единую ИТ-среду с учетом требований к безопасности, скорости реакции и масштабируемости
Inverse — продуктовое агенстово
Contract Retail - биржа
ресейл торгов
B2С веб-биржа в мобильной и десктопной версии для продажи товаров. Пользователи — менеджеры по закупкам, менеджеры по продажам. ЦА — ресейлеры или крупные торговые сети.
E-commerce
B2B2С
Middle +
Роль
Middle designer
Продолжительность
6 месяцев
Команда
Art Director, 4 designers,
2 steakholders, 3 developers
Назад