Блог Максима Волкова: заметки с тегом кейс

Страховка для лыжников и сноубордистов

Thu, 09 May 2024 16:55:05 +0300

Какая была проблема
У страхования туристов появился новый вид страхования для горнолыжников и сноубордистов. Нужно привлечь клиентов на этот вид страхования и помочь им оформить страховку.

Что мы сделали
Написали отдельный раздел в действующем разделе помощи о страховке для туристов. В разделе ответили на самые частые вопросы и рассказали, как оформить такой полис.

В чем польза для клиента
Найдет ответы, что это за страховка, от каких рисков защищает и как оформить полис.

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

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

Страховка для лыжников и сноубордистов

Наместе — сервис бронирования отелей

Thu, 09 May 2024 11:31:27 +0300

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

Что мы сделали
Написали новый хелп, в котором ответили на самые частые вопросы. Вопросы собирали по ощущениям и статистики обращений по Тинькофф Отелям.

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

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

Какая дистрибуция
Поддержка будет давать ссылку по запросу клиента + сео + ссылки на вопросы в чате приложения «Наместе».

В апреле 2024 года этот сервис отключили, но я сохранил страницу хелпа для потомков:

Экскурсии в Тинькофф Путешествиях

Sun, 05 May 2024 10:32:01 +0300

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

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

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

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

Какая дистрибуция. Через поддержку Тинькофф и сео-продвжиение.

Экскурсии в Тинькофф Путешествиях

Мой главный проект 2023 года: сайт-портфолио

Sat, 23 Dec 2023 11:54:12 +0300

Это рассказ о создании моего сайта-портфолио maksvolkov.ru, который запущен 21 ноября 2022 года (специально записал в подвале). Работа над сайтом длилась весь 2023 год, но только сейчас, к декабрю, он более-менее меня начал устраивать и новых идей по доработкам не появляется.

Сайт помогает рассказывать потенциальным заказчикам о моих навыках, красиво показать выполненные работы и собирать их в одном месте. Ссылка на сайт опубликована на Бирже Главреда и в Табло. И я им очень горжусь!

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

UPD: а вот и результаты подъехали.

Зачем нужен мне сайт

Созданием своего сайта я хотел решить несколько проблем:

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

Не потерять знания из Школы редакторов. После окончания Школы редакторов остались знания ХТМЛ, навыки верстки и несколько шаблонов из школьных заданий. Хотелось быстро это все применить, чтобы не забылось и сразу начало приносить пользу.

Например, остались вот такие шаблоны:

На первой ступени нужно сверстать ХТМЛ‑страницу с собственным резюме. Я верстал в Codepen, за основу брал свое резюме на Хедхантере. По-моему, получилось очень похоже

На второй ступени нужно сверстать веб‑страницу о себе (без ХТМЛ). Миша Нозик поставил за эту работу 4,08 из 5

Где-то публиковать выполненные проекты. Для публикации своих проектов я пробовал сервисы по созданию микролендингов и гугл-доки. Сервисы микролендингов меня не устраивали по ограниченности функционала и сбору денег за что-то клевое, а гугл-доки тогда не умели убирать разделение страниц и после Школы редакторов выглядели несерьезно.

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

Изначально всё, что я где-либо писал, я добавлял на страницу в Taplink. Например, вот одна из самых первых моих статей в ВК с советами для рекламных постов. Сейчас она выглядит смешно и наивно, но тогда мне казалась очень серьезной работой.

Моя страница на Taplink доступна до сих пор

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

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

Мое портфолио в гугл-доке. По факту — кладбище ссылок, чтобы не забыть

Создать свою песочницу. Мне хотелось сделать что-то с нуля и применить весь тот багаж, которому я научился за 9 месяцев обучения в Школе редакторов.

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

Ни один инструмент, кроме создания своего сайта на ХТМЛ, не позволял сделать то, что я хочу, а у конструкторов сайтов были ограничения, с которыми я не готов был мириться.

Первая версия сайта в Редимаге

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

Сайт в Редимаге просуществовал пару недель. Редимаг не устраивал по нескольким причинам:

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

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

Сайт на ХТМЛ

Из-за минусов Редимага решил не пробовать другие конструкторы, а сразу делать все в ХТМЛ. Свой сайт позволил бы решить все проблемы, но, забегая вперед скажу, что это отняло кучу времени и сил, потому что внутренний перфекционист не мог успокоиться.

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

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

Макеты и заготовки для сайта собирал в Фигме

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

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

Следующие версии сайта. К советам Миши Нозика я не прислушался, но он подтолкнул на изменения и появился стимул сделать новую главную. Новую версию снова собирал в Фигме, а затем переносил в код прямо в файловом менеджер хостинга. За основу новой главной взял сайт aino.agency, на котором понравился контраст заголовка и остального текста:

Идею контраста зага и остального текста подсмотрел на сайте этого агентства

Версии первого экрана сайта в Фигме. Хотелось повторить контраст с сайта агентства

Итоговая главная, спустя много промежуточных версий

Трудности, которые удалось решить

Хостинг и домен. Хостинг выбирал недолго. Загуглил рейтинги, открыл штук 5 лучших и почитал условия. Выбрал Бегет, потому что у них можно разместить один сайт бесплатно. Но есть ограничения по объему места на диске, количеству сайтов и нагрузке.

Специально искал что-то бесплатное, чтобы сайт жил максимально долго. Зная себя, я могу потом забить на оплату и сайт снимут с публикации. Также был челендж обойтись минимальной суммой денег.

Домен купил там же, в Бегет, после регистрации хостинга. Было несколько вариантов, которые стоили недорого, но остановился на maksvolkov.ru — остальные варианты казались сложнее.

Варианты доменов в заметках, которые более-менее понравились и стоили недорого

Шрифт. Для надписи фамилии и имени на главной выбрал шрифт Neue Metana Next Free Font, который бесплатный и поддерживает кириллицу. Но из файла лицензии шрифта я не понял, можно ли его использовать для сайта. Не постеснялся и написал письмо студии. Они ответили, что никаких проблем нет, на личном сайте использовать можно.

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

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

до 360px,
до 455px,
до 755px,
до 1100px,
от 1440px.

Вот так меняется главная сайта в зависимости от ширины экрана

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

Вот так меняются обложки статей в зависимости от ширины экрана

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

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

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

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

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

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

При загрузке страницы видео автоматически запускается без звука

Трудности, которые остались

Ssl-сертификат. Если у сайта нет ssl-сертификата, он считается небезопасным и все браузеры об этом предупреждают. А еще адрес такого сайта начинается с http, а не https. Это влияет на выдачу в поисковиках и СЕО-продвижение.

Эту проблему я попытался решить с помощью Cloudflare. Это что-то типа ВПН для сайта, который выдает бесплатный ssl-сертификат и фильтрует все входящие и исходящие соединения. То есть условно каждый запрос сначала попадает в Cloudflare, а потом на хостинг, который высылает в ответ файлы сайта.

Но при использовании Cloudflare отвалилась Эгея, а она была нужна, чтобы писать заметки и рассказывать о выполненной работе. Поэтому пришлось все откатить и жить без ssl-сертификата. Конечно, можно перейти на платный хостинг, куда входит бесплатный ssl-сертификат, но я пока не вижу в этом смысла: сайт открывается и работает, кому надо его увидят, а СЕО-продвижение для меня не важно.

У Бирмана написана отдельная заметка о том, что Эгея с Cloudflare ведет себя странно

Опенграф. Есть еще одна проблема у бесплатного тарифа в Бегет: заблокирован доступ ботов к сайту, поэтому опенграф (картинка для шеринга в соцсети) не отображается. То есть тупо вставляется ссылка без сопровождающего текста и картинки.

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

Хотя нужные теги с заголовком, текстом и картинкой добавлены в код сайта

Нафига я это все рассказал

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

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

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

Короче, заходите на мой сайт: http://maksvolkov.ru/
Смотрите заметки: http://maksvolkov.ru/blog/
И подписывайтесь на пустой телеграм-канал (может это сподвигнет меня написать туда первый пост): https://t.me/+VsGdSQkYXjs1YWNi

Долями: ответы на частые вопросы покупателей

Fri, 22 Sep 2023 08:38:10 +0300

Собрал справочник для клиентов Долями, в котором собрал ответы на частые вопросы.

Задача. Сервис сильно вырос и поменялся, поэтому нагрузка на поддержку выросла, а текущая страница FAQ устарела.

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

Результат. Скопировал структуру старого справочника и пересобрал его по-новому. Добавил в него частые вопросы от клиентов, которых раньше не было, и вопросы, которые объясняют работу в личном кабинете и возврат товара. Сложные моменты объяснил на примерах и показал на иллюстрациях.

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

https://dolyame.ru/help/customer/

Как оформить европротокол в приложении «Помощник ОСАГО»

Mon, 04 Sep 2023 09:30:16 +0300

Написал статью для Тинькофф Помощи о том, как оформить европротокол в приложении «Помощник ОСАГО».

Если ДТП несерьёзное: нет жертв, у обоих участников есть ОСАГО и пострадали только машины, можно не вызывать ГИБДД, а оформить электронный европротокол в специальном приложении. Также у электронного европротокола больше лимит возмещения: 400 000 против 100 000 ₽ у европротокола на бумаге.

Проблема

Электронный европротокол можно оформить в двух мобильных приложениях: «Госуслуги Авто» и «Помощник ОСАГО». У «Госуслуги Авто» понятная и подробная инструкция, а у «Помощник ОСАГО» официальная инструкция скудная и состоит всего из шести пунктов, тогда как там целый процесс.

Инструкция по оформлению европротокола в «Госулсуги Авто»

Официальная инструкция по оформлению европротокола на сайте Российского союза автостраховщиков

Решение

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

Что делал

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

Затем собрал ТЗ дизайнерам, чтобы подготовили иллюстрации по стандартам и проверил результат.

У сео-специалиста заказал мета-теги и сео-оптимизацию, а потом все отнес на верстку, проверил и исправил недостатки.

Какая польза

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

Результат

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

В выдаче поисковика статья стабильно появляется на 3-4 месте

Почитайте и сохраните в закладки, если водите машину:
https://www.tinkoff.ru/insurance/help/europrotocol-pomoshnik-osago/

Базовые принципы переговоров на английском, и вообще

Mon, 04 Sep 2023 09:00:52 +0300

Написал статью для онлайн-школы «Инглекс». Статья хоть и называется про переговоры на английском на самом деле подходит для любых переговоров.

Задача

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

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

Решение

Написал статью, в которой рассказал об основных принципах переговоров Джима Кэмпа из его книги «Сначала скажите „Нет“».

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

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

Read and you: https://englex.ru/principles-of-business-communication/

Статья для Тинькофф Блога об электронной подписи

Mon, 04 Sep 2023 08:35:59 +0300

Задача. В Тинькофф появилось приложение «Тинькофф Подпись», с помощью которого клиенты могут подписывать документы от банка электронной подписью. Многие клиенты не знают, что это такое, и опасаются, что электронная подпись ненадежна и хотят всё подписывать на бумаге. Но банк по закону обязан часть документов утверждать с клиентом электронно.

Решение. Нужно написать статью и разместить ее на главном экране приложения «Тинькофф Подпись». Ссылку на статью разослать поддержке, чтобы она могла делиться ей с клиентами. В статье объяснить, что такое электронная подпись, почему банк не может подписать документ на бумаге, а также рассказать по шагам, как утредвить документ в приложении «Тинькофф Подпись».

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

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

Статья: https://www.tinkoff.ru/blog/articles/what-is-esign/

UPD: статью тотально переписали, но я сохранил себе исходник.

Статья для «Кинжала» о том, как задавать вопросы на переговорах

Mon, 04 Sep 2023 08:31:21 +0300

Эта статья выросла из курсовой в конце первой ступени Школы редакторов. Максим Ильяхов предложил опубликовать текст в «Кинжале» с небольшими доработками.

За курсовую получил 415 баллов из 500

Чтобы это сделать, понадобилось два раунда редактуры: Максим попросил сократить подводку примеров на 20%, поменять Степана на Ибрагима, а потом еще раз все сократить.

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

Оригинал курсовой собран на html и лежит в Codepen.

Поcмотрите, что получилось: https://kinzhal.media/peregovoril/