Разработка лендинг пейдж с UI/UX дизайном
Главной целью проекта стала разработка сайта-пригласительного на мероприятие, которое наш клиент вскоре планировал провести в рамках социального проекта Black Box. Формат ивента – благотворительный ужин, организованный для сбора средств на покупку принтеров Брайля. Подобные устройства производят печатную продукцию, помогающую незрячим людям познавать мир.
Для реализации проекта в сети мы решили разработать лендинг пейдж. Такой веб-ресурс создается по принципу «одна страница, одно предложение, одно целевое действие», что полностью соответствовало основным задачам проекта.
Правильно сформированный лендинг должен вызывать у посетителя желание:
Создать одностраничный сайт, решающий такие задачи, стало нашей целью для Black Box. В ходе начального этапа работы мы традиционно глубоко изучали специфику проекта, чтобы впоследствии разработать эксклюзивные маркетинговые и рекламные решения.
Идея социального проекта
Мы выяснили, что уникальность проекта заключается в том, что Black Box позволяет не просто пожертвовать средства на благотворительность, а действительно прочувствовать и открыть для себя, как устроен мир незрячих людей. Организаторы гала-вечера планировали в рамках мероприятия предложить своим гостям на несколько часов погрузиться в полную темноту. Участники акции должны были войти в зал ресторана с завязанными глазами. Затем при помощи волонтеров – пройти к своим столикам, чтобы, слушая живую музыку, насладиться ужином из трех блюд. Что именно будет подано, гостям не сообщалось.
Снять повязки с глаз и обменяться впечатлениями гости должны были только после завершения вечера. До этого мероприятие подобного формата от Let's help уже успешно прошло в Киеве, Одессе и Львове.
Концепт
1
В рамках первого этапа работы специалисты Сlock Creative Lab обнаружили, что особенность Black Box заключается в том, что значительная доля в проекте отводится эмоциональному восприятию. Тому эффекту, который должно произвести на гостей участие в гала-ужине: прочувствовать, понять на своем, пускай и коротком опыте, как это – жить без зрения. Именно эту уникальность Black Box мы стремились передать через сайт-пригласительное.
2
Каждый экран нашего лендинг пейдж должен был погружать пользователя в новый для него мир незрячих людей все больше и рассказывать о проблематике, на решение которой направлен проект. Сбор средств нужен был, чтобы обеспечить специализированной литературой, напечатанной шрифтом Брайля, библиотеки и школы самых крупных областных центров Украины. Крайний дефицит книг для незрячих образовался по причине многолетнего недофинансирования производства подобной литературы из госбюджета.
3
В успешности и работоспособности концепции проекта мы не сомневались, поскольку на момент создания сайта-пригласительного на благотворительный ужин в Днепре, Black Box уже получил несколько наград как «лучший инновационный проект» на всеукраинских конкурсах Ukrainian Event Awards и «Благодійна Україна — 2015».
Создание лендинга для клиента Let’s help специалисты Clock Creative Lab выполняли поэтапно в такой очередности:
Сбор бизнес-аналитики. Исследование рынка на основе максимально полной информации о компании клиента и конкурентах. Погружение в специфику ивента и компании. Выделение уникальности мероприятия, формирование предложения для конечного потребителя, работа с позиционированием проекта.
Формирование концепта лендинг пейдж. На основе данных, полученных в ходе первого этапа, создаем наше видение реализации проекта. Работаем над целостным стратегическим предложением.
Создание дизайна – визуальных и технических решений, логики расположения элементов одностраничного сайта в соответствии с принципами UI/UX и общей стратегией проекта.
Веб-девелопмент. Внедряем разработанные решения, создаем мобильную версию сайта, выполняем SEO-оптимизацию и детальное тестирование.
Аудит веб-ресурса на предмет ошибок. Генеральная сверка проекта по показателям эффективности.
Структура лендинга
Разрабатывая структуру лендинг пейдж, мы стремились максимально эффективно донести до пользователя ключевое сообщение – те уникальные преимущества, которые получит гость, посетив гала-ужин. На главном экране размещена кнопка с подписью «Выключите свет. Включите свои чувства». Нажав на нее, пользователь переходит на одностраничный сайт. Главный экран преображается. На нем появляется фото сервированного стола с красивым блюдом и бокалом вина. На фоне изображения – текст, сообщающий дату, место, время и название мероприятия, которому посвящен сайт.
Картинка состоит из двух частей – цветной и черно-белой. Ниже на белом фоне находится описание цели проекта. Напротив на черном фоне размещен тот же текст, написанный шрифтом Брайля.
Главный экран интерактивный. Анимация позволяет цветной и черно-белой половинам экрана меняться местами при наведении. Так же действуют текстовые блоки со стандартным шрифтом и шрифтом Брайля. Целью подобного дизайна было показать, насколько по-разному любая информация и мир выглядят для человека со зрением и того, кто лишен этой способности. На следующих экранах:
В любой момент пребывания на лендинге пользователь имеет возможность зарегистрироваться для посещения благотворительного ужина, внести пожертвования в проект, увидеть, сколько средств уже собрано и сколько требуется для воплощения заявленной цели. Все это позволяет сделать динамическая кнопка призыва к действию «Давай допоможемо».
При разработке визуальных и технических элементов лендинг пейдж и размещении их на странице мы руководствовались принципами UI/UX дизайна. Это необходимо, чтобы сделать восприятие информации максимально удобным и привлекательным для пользователя. А также для того, чтобы все заложенные разработчиком возможности использования лендинга были интуитивно понятны с первых секунд пребывания на сайте.
Мы организовали экраны одностраничного сайта для Let’s help так, чтобы их содержимое было логически связано и подводило пользователя к совершению целевых действий – посетить гала-ужин или внести удобную для себя сумму денег в поддержку проекта.
Создавая одностраничный сайт-пригласительный на благотворительный ужин Black Box, команда Clock Creative Lab работала над: оптимальным размером страницы, подборкой эффективного медиаконтента и разработкой уникальных текстов. Все примененные стилевые приемы, как и сайт в целом, являются адаптивными. Это необходимо, чтобы ресурс одинаково эффективно функционировал и отображался на всех видах устройств.
Результат
В ходе работы над проектом Black Box нам удалось выполнить все поставленные клиентом задачи – создать лендинг пейдж, отражающий уникальность формата мероприятия, чтобы привлечь целевую аудиторию принять участие в благотворительном ужине.
Для нас было честью вместе с Международным благотворительным фондом Let’s help работать над реализацией такого социально важного проекта.