Кейс. Сайт Taplink для личного бренда с нестандартным дизайном

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

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

Ну и конечно автоматизация.
Пока ты спишь — клиенты записываются на консультации и покупают твои услуги. Потому что сайт работает 24/7.

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

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

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

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

В этом кейсе рассказываю, как создавался такой сайт и что получилось.

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

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

Для разработки сайта клиентка предоставила:
✅ черновой вариант текстового прототипа сайта;
✅ сертификаты и отзывы.

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

Тестирование на архетип.

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

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

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

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

Я постаралась объединить архетипы не только в формах и шрифтах, но и в палитре. Поэтому основной цвет и его оттенки были выбраны в соответствии с архетипом Правитель, а дополнительный цвет по Мудрецу.

Подготовили фото.

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

Очень выручил мой обширный опыт работы с визуалом в запрещенной соцсети. Благодаря ему я собрала мудборд для фотосессии, ориентируясь на архетип клиентки. Это серьезно облегчило Анне процесс подготовки к фотосессии. Чтобы фотосессия прошла успешно я сформировала ТЗ для фотографа с четко прописанным числом фотографий по планам и ракурсам. Так фотограф понял, какой результат необходим клиенту, а моя клиентка гарантированно получила фото для разнообразного контента и гармоничной ленты блога.

Доработали текстовый прототип.

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

Утвердили стиль.

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

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

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

Это очень важный блок. Задача первого экрана — захватить внимание посетителя, дать ему понять, что он попал туда, куда планировал и предложить совершить целевое действие (в нашем случае получить консультацию).

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

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

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

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

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

Как работает раскрывашка. При нажатии на кнопку с определенной услугой вся информация о ней разворачивается вниз. И сворачивается при повторном нажатии на кнопку.

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

Еще одним условием эффективного взаимодействия пользователя с сайтом является его ритм и эстетика.

Для этого в лендинге Анны текстовые блоки чередуются с блоками фото, используется «табличная» верстка кодом html и цветовой контраст.

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

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

Дополнительно, чтобы дальнейшее взаимодействие с сайтом не вызывало у клиентки затруднений, я записала обзорное видео. В нем показала, где и как можно корректировать текст. Это особенно важный момент, потому что около 40% блоков сайта написаны кодом, специально разработанным мною под данный проект. А без знания кода люди чаще всего пугаются, видя перед собой непонятный набор символов.

Анна осталась очень довольна нашим сотрудничеством и оставила вот такой подробный отзыв:

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

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