На примере лендинга компании Woodpecker, которая предлагает сервис рассылки «холодных» писем (cold emails) и инструменты follow-up-маркетинга, сейчас мы разглядим эффективность применения анимированной посадочной страницы для генерации лидов.
В августе 2015 года эксперты компании сделали вывод, что им легко нужен новый лендинг, что будет основан на какой-нибудь уникальной идее. На протяжении мозгового штурма высказывались совсем, казалось бы, нежизнеспособные идеи. Наименование компании переводится как «дятел», и один из участников команды внес предложение дятла, долбящего клювом по регистрационной форме (sign-up form).
Тогда никто и поразмыслить не имел возможности, что эта мысль «выстрелит».
- 4 вида анимации для улучшения юзабилити лендинга
С чего все начиналось?
Сперва разглядим первые варианты страниц бета-версии. Обе были достаточно несложными и "настойчиво попросили" всего около часа, дабы их настроить.
Первая версия посадочной страницы не включала логотип (в то время у компании Woodpecker его и не было). Но кроме того первая, достаточно «сырая» версия, принесла лиды. Вторая версия кроме этого была весьма простой, но на ней уже присутствует логотип.
И этого хватало, пока в один раз команда Woodpecker не сделала вывод, что желает создать еще один лендинг, дабы максимально полно раскрыть клиентам идею собственного стартапа.
Для привлечения внимания было решено применять уникальный дизайн.
В то время, когда работа над новой страницей лишь начиналась, команда, по сути, концентрировалась лишь на двух вещах:
- Нужна была несложная, но «цепляющая» страница
- На странице необходимо применять логотип
Тогда было решено, что именно логотип может играть роль главного мотива и в один момент завлекать внимание визитёров. Дабы добиться всех поставленных целей, команда обратилась к польскому агентству интернет-маркетинга LemonTea. Руководствуясь принципом: одна голова — прекрасно, а две — лучше, разработчики решили совершить мозговой штурм и выяснить, как сделать лендинг запоминающимся для каждого визитёра.
Миссия: оживить дятла
По окончании дискуссий команда пришла к выводу, что возможно применять логотип в качестве необычного талисмана на лендинге. Идеи были самые различные: двигающийся глаз дятла, что смотрит за каждым посланным письмом, «ожившая» голова с клювом, говорящим о форме регистрации. Члены команды позднее согласились, что первая реакция была приблизительно таковой: «Это через чур сложная анимация для лендинга, идеи хороши, но нереалистичны».
Но, как продемонстрировала практика, время от времени стоит поверить в неосуществимое.
- Функциональная анимация в UX дизайне
Анимированный дизайн
Мысль об ожившем дятле никак не покидала разработчиков, и они решили отыскать лендинги с анимационными элементами, созданные агентством LemonTea. Как выяснилось, страницы удачно завлекали новые лиды и отличались уникальным дизайном. Это подтверждение перевесило чашу весов, и было решено воплотить идею с ожившим дятлом в лендинг.
В отличие от самых первых посадочных страниц компании, на разработку нового лендинга ушло много времени.
Один из разработчиков израсходовал пара дней только на то, дабы убедиться, что анимированный дятел будет двигаться как живой. Помимо этого, параллельно шла работа над образом дятла для мобильного приложения компании.
Анимация "настойчиво попросила" много упрочнений от экспертов: под конец проекта, как они позднее признавались, они испытывали редкое сочетание невероятного истощения и удовольствия.
дизайнерам и Разработчикам было нужно скрупулезно трудиться над небольшими подробностями. К примеру, брови не должны быть расположены через чур высоко, а зрачок — через чур низко. Казалось бы, простой смертный невооруженным глазом и не увидит такие вещи, но дизайнер обязан учитывать каждую мелочь.
Через пара недель усердной работы посадочная страница готовься . Визитёры имели возможность видеть дятла, что глазом смотрел за тем, дошли ли письма до получателей в необходимое время. Помимо этого, дятел кроме того клевал регистрационную форму!
Данный эффект казался невыполнимым для лендинга на протяжении первых дискуссий. Так на лендинге компании Woodpecker поселился живой дятел, что покорил всю команду с первого взора.
Позднее разработчики взяли фидбэк от визитёров лендинга, которых так впечатлил дятел, что они сходу стали заполнять регистрационную форму из интереса, что же будет делать дятел затем.
- 39 примеров уникального дизайна лендингов
Предстоящий апдейт
В феврале была выложена новая домашняя страница, где также находился анимированный дятел. Конверты с письмами разработчики решили убрать, но добавили больше информации о компании.
Эксперты усовершенствовали страницу, добавив краткие описания главных функций сервиса и графику. Уместить в нескольких предложениях всю основные данные — сложная задача для копирайтера, но не забывайте о том, что перегруженный лендинг не будет приносить лиды.
На странице разработчики кроме этого разместили отзывы настоящих клиентов. Фидбэк иногда заменяет (и превосходит) долгие описания, являясь лучшим доказательством полезности продукта.
- Практические способы дизайна анимации
Анимированный лендинг для вашего стартапа
У команды Woodpecker все оказалось, но какие конкретно уроки возможно извлечь из их опыта? Предлагаем вашему вниманию 7 советов, каковые окажут помощь усовершенствовать любой лендинг.
1. Запрягайте медлительно, но езжайте скоро
Не ожидайте, пока ваш продукт станет совершенным — излишний перфекционизм может привести к прокрастинации. Запускайте страницу, даже в том случае, если у нее имеется недостатки. Первый лендинг рекомендован для проверки догадки, имеется ли у вас потенциальные заказчики, которым будет весьма интересно само ответ конкретной неприятности.
Само собой разумеется, без завораживающей страницы взять лиды сложнее, но, в случае если имеется пользователи с «болью», которую вы снимете посредством вашего продукта либо услуги, они заполнят регистрационную форму уже на этапе тестирования бета версии.
2. Применяйте веб-дизайн для продвижения вашего решения
Если вы являетесь владельцем лендинга либо сайта с уникальным дизайном, продвигайте его через ресурсы-галереи и веб дизайна для стартапов. Эти ответы разрешат вам взять больше трафика. Кое-какие сайты предоставляют такую возможность безвозмездно, другие будут взимать маленькую плату, но среди всего многообразия вы в любом случае имеете возможность выбрать несколько ресурсов, соответствующих вашим потребностям.
3. Не отказывайтесь от взора со стороны
Время от времени при разработке лендингов вы имеете возможность застрять в собственных идеях и пропустить кое-какие серьёзные подробности. Дабы этого не произошло, предложите посотрудничать приятелям (кроме того если они трудятся в второй сфере бизнеса). В полной мере возможно, они смогут по-новому посмотреть на ваши идеи и дать полезный фидбэк о ваших разработках.
4. Соберите отзывы клиентов перед запуском
В тот момент, в то время, когда вы взяли первую версию готовой страницы, привлеките к сотрудничеству тех пользователей, каковые соответствуют совершенному образу клиента. Определите их вывод и учитывайте его при предстоящей модерации лендинга. В случае если вашим настоящим клиентам понравится посадочная страница, значит, вы сможете взять больше новых лидов в будущем.
5. Заголовок должен быть предельно несложным и понятным
Это правило знают все, но оно соблюдается далеко не на каждом лендинге. Убедитесь, что визитёр вашей страницы сходу осознаёт, какое как раз ответ вы предлагаете. Вы имеете возможность применять в заголовке интригу, другие приёмы и игру слов. В случае если ваш бренд не так известен как Airbnb либо Nike, не поленитесь растолковать визитёрам, что конкретно вы делаете. В полной мере быть может, что пользователь до тех пор пока ничего не знает о вашей компании.
Следуйте правилу: через 2 секунды любой визитёр обязан осознать, кто вы и как вы имеете возможность решить его проблему.
6. Текст необходимо писать для клиента и под клиента
Кроме того в холодных письмах все обожают просматривать, в первую очередь, о себе любимом. Убедитесь, что визитёры вашего лендинга, просматривая о вас, видят себя.
7. Заявить, что вы лучшие — не достаточно. Докажите это!
В случае если у вас уже имеется настоящие клиенты, попросите их покинуть отзыв и применяйте его на странице, дабы продемонстрировать, что вы в действительности решаете конкретную проблему и делаете это прекрасно.
Высоких вам конверсий!
По данным: blog.woodpecker.coimage source Matt Wagner
Случайные статьи:
Cоздание landing page на платформе Adobe Muse. Mossebo
Подборка похожих статей:
-
Как сделать товарный лендинг продающим: 5 эффективных методик с каталогом товаров
Процесс оптимизации посадочной страницы воистину не имеет какого-либо четкого финала. Да, ваша цель — взять впечатляющий итог, да, вы стремитесь к тому,…
-
Лендинг vs домашняя страница: что эффективнее?
Многие стартаперы и просто начинающие предприниматели довольно часто задаются вопросом: «Вправду ли лендинг пейдж действеннее простой домашней страницы…
-
Каким должен быть эффективный лендинг: инструкция от lpgenerator
Лендинг пейдж (от англ. landing page) — хороший метод презентовать собственный бизнес аудитории в лаконичной и увлекательной форме. В отличие от…
-
5 Способов сделать ваш лендинг более эффективным
У вас уже имеется сайт либо лендинг? Либо вы лишь планируете приступить к его разработке? 5 способов, каковые мы обрисуем ниже, будут одинаково нужны и в…