Кейс: UX/UI разработка дизайна маркетплейса

GoBizy

КЕЙС: UX/UI разработка маркетплейса

ОПИСАНИЕ ЗАДАЧИ

Разработать маркетплейс готового бизнеса и франшиз, который будет лучше конкурентов с наличием УТП.

ЭТАПЫ РАБОТЫ

Перед началом работ я учитываю все комментарии и требования заказчика, а также работаю с возражениями и пониманием рынка.

1

Оценка и анализ требований

Перед началом работ я обязательно узнаю возможности программистов и стек, на котором работает или будет работать проект.

2

Знакомство с командой и стеком

Оценка рынка и оценка конкурентов. Подробный анализ с презентацией сильных и слабых мест, а также фичей наиболее сильных конкурентов.

3

Анализ рынка, конкурентов и ЦА

Если это готовый проект, то я обязательно провожу исследование аудитории: глубинные интервью и обрабатываю статистическую информацию.

4

Анализ UX (пользовательского опыта)

Перед стартом разработки и дизайна необходимо описать и отобразить основные flow (пути) пользователя в блок-схемах.

5

Составление User Flow (Путь пользователя)

По сути, это создание каркаса сайта, основанного на построенных ранее User Flow. Наброски быстро создаются, их легко править и первично тестировать.

6

Создание Wireframe (Каркас проекта)

Нанесение дизайна и улучшение user interface, проработка мелких деталей, вроде теней или градиентов.

7

UI дизайн и прототипирование

Тестирование может проводиться как на этапе 4, так и на этапе 8 - на готовом дизайне. Зависит от целей и задач проекта.

8

Тестирование интерфейса

После тестирований необходимо снять аналитические данные и обработать их, затем выбрать наиболее успешный дизайн или внести правки и повторить тестирование.

9

Срез аналитики и статистических данных

MIND MAP ПРОЕКТА

Диаграмма связей отображает основные разделы маркетплейса:

- Главная (агрегатор маркетплейса)
- Каталог готового бизнеса
- Каталог франшиз
- Посадочные страницы
- Личный кабинет
- Покупка онлайн бизнеса и франшиз

Диаграмма связей

FULFILLMENT: ВСЕ РАБОТЫ ПО ДИЗАЙНУ И ИССЛЕДОВАНИЯМ ВЫПОЛНЯЛИСЬ МНОЙ

От разработки логотипа и дизайн системы маркетплейса до исследований и реализаций финального дизайна с прототипами и тестами.

ОБЗОР КОНКУРЕНТОВ

Среди ключевых конкурентов находятся каталоги франшиз и готовых бизнесов, а также популярные доски объявлений.

Прямые конкуренты

Косвенные конкуренты

АНАЛИЗ КОНКУРЕНТОВ

Анализ конкурентов позволяет отследить характерные рынку тренды
и акцентировать внимание пользователя на важных деталях

1

Конкуренты добавляют блоки с горизонтальным скроллом для отображения популярных и новых объявлений.

2

Конкуренты используют стандартную строку поиска для навигации по сайту вместе с категориями и фильтрами.

3

Конкуренты выделяют ключевую информацию связанную с финансами и бизнесом.

CUSTDEV

Исследование потребностей клиента с помощью проведения специальных «глубинных» интервью.

Исследование потребностей

Потребность в быстрой продаже бизнеса

Потребность в приобретении онлайн

Потребность в консалтинге при покупке бизнеса

Потребность в достоверной информации о бизнесе

РОЛИ В ПРОЕКТЕ (АНАЛИЗ ЦА)

Люди заинтересованные в покупке готового бизнеса или франшизы.

Покупатели бизнеса

Продавцы бизнеса

Люди заинтересованные в продаже готового бизнеса или франшизы.

Изучение целевой аудитории необходимо для того, чтобы сервис отвечал всем потребностям и запросам пользователей. Также следует углубленно изучать пользовательский опыт.

Портреты ЦА

РЕШЕНИЕ

Разработать удобную систему поиска и фильтрации

Добавить на страницы ключевую финансовую информацию

Проработать поэтапную покупку бизнеса и франшиз онлайн

Добавить обновляющийся компонент новостей для SEO

РАЗРАБОТКА ЛОГОТИПА МАРКЕТПЛЕЙСА

ЦВЕТОВАЯ ГАММА

#1F75FE

#F1F6FF

#FFFFFF

#1653B4

ШРИФТЫ

Для рекламных блоков

Для заголовков

Для текста

СЕТКА

Сетка помогает создать базовую структуру, скелет из «невидимых» линий, на который ложатся элементы дизайна. Это связывает их в общую систему и рационально поддерживает композицию.

Сетка

WIREFRAMES

Каркас необходим для фокусировки заказчика и исполнителя на том, как именно экраны взаимодействуют между собой, а не на том, как они выглядят.

Каркас маркетплейса

ДИЗАЙН СИСТЕМА

#ff5400

Атомарный подход позволяет легко вносить изменения в весь дизайн. Дизайн построенный из компонент быстро поддаётся изменениям.

Дизайн система

AUTO LAYOUT

#ff5400

Инструмент Auto Layout в Figma позволяет указывать отступы и выравнивать соседние модули автоматически

Умный подход к дизайну

ИНФОРМАЦИЯ О ПРОЕКТЕ

>100

Более 100 экранов

Обширный проект наполнен прототипированными экранами.

>30

Более 30 компонентов

Более 30 компонентов составляют дизайн систему и позволяют в несколько нажатий менять дизайн.

ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ, КОТОРОЕ ИСПОЛЬЗОВАЛОСЬ

СКРИНШОТЫ ИЗ FIGMA

USER FLOW

Заранее построенный user или screen flow позволяют предусмотреть максимальное количество вариантов развития событий с участием пользователя.

Пути пользователя

#ff5400

РАЗБОР ФИЧЕЙ

Позволяет пользователям приобрести бизнес или франшизу не выходя из дома, проведя и зафиксировав все необходимые этапы.

Сделка онлайн (купля-продажа бизнеса)

#ff5400

Динамические новости создают эффект присутствия и оживляют портал, а также способны улучшить показатели SEO.

Динамические новости

#ff5400

Зачастую франшизы продаются пакетами, таким образом можно сразу отобразить преимущества определенных пакетов их отличие и другие важные компоненты: стоимость, паушальный взнос и роялти.

Пакеты франшиз

#ff5400

Раздел, отображающийся в личном кабинете и показывающий все сделки, в которых когда либо принимал участие пользователь (а также статус сделок и стороны).

Мои сделки

#ff5400

Этапы в сделке

Весь процесс сделки разбит на этапы для удобства пользователей и во избежании ошибок. Стабильная схема купли-продажи для всех пользователей.

Консалтинг в момент сделки поможет покупателю или продавцу не допустить ошибок в сфере юриспруденции и продать бизнес или франшизу по всем правилам.

Консалтинг в момент сделки

Хранение документов

Автоматическое сохранение загруженных и согласованных документов в момент сделки (и после завершения), а также шаблоны основных документов для удобства

КОНЕЧНЫЙ ПРОДУКТ

Личный кабинет

Каталоги франшиз и готового бизнеса

Главная

Посадочные рекламные страницы

Сделка онлайн

ГЛАВНАЯ СТРАНИЦА

ДИЗАЙН КАТАЛОГОВ

Каталоги - ключевое место поиска подходящих бизнесов. Основная задача каталогов упростить поиск и выбор подходящего бизнеса.

Каталоги

КАТАЛОГ ГОТОВОГО БИЗНЕСА И ФРАНШИЗ

ПОСАДОЧНЫЕ СТРАНИЦЫ

Посадочные страницы необходимы для рекламы нового функционала или УТП проекта. Таким образом получается концентрировать информацию на определенных фичах.

Лендинги

ПОСАДОЧНЫЕ СТРАНИЦЫ

ДИЗАЙН ЛИЧНОГО КАБИНЕТА

Раздел аккаунт в первую очередь необходим для сохранения избранных объявлений и для проведения сделок онлайн.

Аккаунт

ЛИЧНЫЙ КАБИНЕТ

СДЕЛКА ОНЛАЙН

Поэтапная покупка бизнеса позволяет структурировать сделку и не допустить базовых ошибок. Также сокращает затраты время на выезд, позволяет подключать профильных юристов онлайн.

Поэтапная покупка бизнеса

СДЕЛКА ОНЛАЙН

АДАПТИВНОСТЬ

Адаптивность позволяет использовать сервис на всех популярных устройствах и улучшает параметры SEO, что крайне важно для маркетплейсов так как даёт условно-бесплатный трафик.

Макеты адаптированы под все виды экранов

Готов к решению сложных задач

Рассматриваю разные варианты и формы сотрудничества

Сделать оффер

+995 595 09 11 98 / +7 977 287 94 57 / tsanavagn@gmail.com

© Вся представленная информация на сайте достоверна.
Цанава Георгий - UX/UI дизайнер.
tsanava.com