Кейс по разработке веб сайта для аналитического сервиса маркетплейса

Сервис аналитики
и управления
рекламой
на Wildberries

Разработка лендинга

ПРОЦЕСС РАБОТЫ

Игорь
Проект-менеджер

Алексей
Дизайнер

Слава
Верстальщик

Лена
Копирайтер

Катя
Старший дизайнер

СПЕЦИАЛИСТЫ

Ислам
Разработчик

СРОК

ИНСТРУМЕНТЫ

29
дней

ЗАКАЗЧИК

Сервис аналитики MarketKepeer

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

ЗАДАЧА ПРОЕКТА

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

ПЕРВЫЙ ЭТАП | 1 ДЕНЬ

Анализ сайта заказчика

Провели аудит действующего сайта клиента.

ВТОРОЙ ЭТАП | 2 ДНЯ

Аналитика

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

Изучили

Все материалы, которые нам предоставил заказчик.

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

Сайты конкурентов.

Выявили

Быстрая адаптивность.

Следующие конкурентные преимущества сервиса клиента:

Точность данных.

Удобство настройки рекламы.

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

ТРЕТИЙ ЭТАП | 3 ДНЯ

Текстовый прототип

Облом. На этом этапе картинок тоже не будет.

Выстроили структуру

Это важно — подавать информацию в нужной последовательности. Так мы увеличиваем вероятность того, что читатель заинтересуется, прочитает до конца или не прочитает, но всё самое важное всё равно увидит. А соответственно совершит целевое действие.

Написали текст

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

ЧЕТВЕРТЫЙ ЭТАП | 3 ДНЯ

Дизайн-концепция

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

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

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

ОБСУЖДЕНИЯ

Планёрка

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

В результате обсуждения приняли решение

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

Второй вариант доработать по цветам, чтобы уйти от ассоциации с ОЗОН.

А также сделать третий вариант в более строгой стилистике.

ПЯТЫЙ ЭТАП | 3 ДНЯ

Разработка логотипа

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

ШЕСТОЙ ЭТАП | 3 ДНЯ

Продолжение дизайна страницы

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

Расскажем о каждом блоке отдельно

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

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

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

Преимущества сервиса подчеркнули графическими элементами в виде минималистичных современных иконок.

Отдельно выделили важную привлекательную информацию
«3 дня бесплатно».

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

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

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

Таким образом, пользователь
сразу видит:

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

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

- инструмент;

- какие задачи он выполняет;

- видео инструкцию по использованию. Может открыть
и посмотреть её.

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

Отрисовали отдельными
плашками и сконцентрировали внимание на важных данных.

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

Ещё одно важное преимущество. Чтобы пользователь не пропустил, подкрепили визуальным образом, по которому сразу понятно, о чём речь в блоке.

Привели иконки к общему цветовому стилистическому решению сайта.

Наушники ассоциируются с поддержкой, а знак вопроса усиливает эту взаимосвязь.
Использовали
3д изображения — это всегда стильно, современно и очень подходит для сервисов.

Для поддержания
стилистического решения
на главном экране в этом блоке тоже использовали
изображение человека.

И не случайно мужчину - так мы показываем, что сервис ориентирован и на мужскую аудиторию.

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

Данный блок решили оформить карточками с 3д иконками - современно и цепляюще, подобрали в общей стилистике
и привели к единому цветовому решению.

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

Мы разделили тарифы на категории — два самых выгодных вынесли в первую
строку, три стандартных расположили ниже.

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

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

В каждой карточке сделали
акцент на общей стоимости за указанное время.

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

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

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

ТАКИМ ОБРАЗОМ

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

СЕДЬМОЙ ЭТАП | 1 ДЕНЬ

Адаптивы

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

ВОСЬМОЙ ЭТАП | 2 ДНЯ

Вёрстка. Оптимизация

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

ЗАКЛЮЧИТЕЛЬНЫЙ ЭТАП | 1 ДЕНЬ

Тестирование. Проверка. Передача

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

Протестировали работу сайта на исправность. Проверили отображение в нескольких браузерах, и на мобильных устройствах Andriod и IOS.

СДАЧА ПРОЕКТА

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

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

Проверка дизайна

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

Проверка
текста

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

Игорь Костромин
CEO студии

Оставить заявку

Написать в Telegram

Давайте обсудим
ваш проект

МЕДИА

Telegram

YouTube

VC.ru

DSGNERS!

Данный сайт носит информационно-справочный характер
и ни при каких условиях не является публичной офертой