Лендинг с личным кабинетом для сервиса «Customfactory»

Задача

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

Процесс работы:

1. Начали с определения общей стилистики

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

2. Выполнили дизайн лендинга

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

На главном экране сайта попросили изобразить такую идею: «Зарабатывать с нашим сервисом очень просто. Загрузили дизайны и получили деньги, никаких заморочек».

Так выглядел лендинг до редизайна:

3. Разработали дизайн личного кабинета

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

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

Меню, которое получилось:

Следующей задачей стало разработать пошаговую регистрацию в сервисе и профиль пользователя.

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

Поработали над страницей с видами продукции и карточкой товара.

После того, как дизайн и разработка сервиса были готовы, у дизайнеров была возможность также посмотреть в личном кабинете:

• все загруженные дизайны;
• товары, которые купили на маркетплейсе и размер вознаграждения.

В случае отклонения какого-то дизайна модеротором, дизайнер получал сообщение с причиной отклонения.

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

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

Идея была такая:

1. Дизайнер загружает макеты и отправляет на модерацию.
2. Модератор принимает файлы или отправляет их на доработку обратно дизайнеру, указав причину.
3. Дизайнер в списке своих загруженных товаров видит тот, который отправлен на доработку и вносит изменения. Пишет модератору комментарий, при необходимости.
4. Модератор вновь смотрит файлы и имеет возможность одобрить их со второго раза или отправить на доработку ещё раз, снова указав причину. Когда он получает макеты в третий раз, у него остается только возможность или принять их, или отклонить.

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

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

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

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

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

Модератор в свою очередь увидит во всплывающем окне файлы с дизайнами и миниатюры к ним, комментарий дизайнера, если тот его оставил.

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

В личном кабинете у дизайнеров решили добавить удобное окно со статистикой продаж. Здесь можно отследить количество продаж и выплат с помощью сервиса.

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

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

Итоги

Команда «Customfactory» получила макеты сайта и личного кабинета, готовые к верстке. Были выполнены макеты для десктопа (1920 рх) и мобильного телефона (375 рх). Разработан подробный UI Kit. Все работы были сданы в срок.