Ringostat
688
Блоги

Как своими силами сделать новый сайт и не умереть: драматическая история в 4-х действиях

Две недели назад мы выкатили новый сайт Ringostat. Делали мы его без подрядчика, силами своей команды. И вот решили поделиться опытом и рассказать, какие круги ада нам пришлось пройти. Безусловно, тем, кто профессионально занимается созданием сайтов, мы не скажем ничего нового, а возможно (и скорее всего) даже покажемся смешными.

Поделиться

В избранное

В избранном

Но тем, кто так же, как и мы, пытается сделать все самостоятельно, будет интересно и, может, даже полезно. Мы описали весь процесс, инструменты и моменты, на которые обязательно нужно обратить внимание. А также поделились своими факапами — как же без этого)

Действие 1. Идея

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

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

  • Он был в формате лендинга, что для сложного В2В продукта, такого как коллтрекинг, не есть хорошо. Лендинг отлично работает с простыми товарами и услугами — когда пользователь читает описание и в итоге “приходит” к кнопке действия (купить, заказать). У нас это не работало — коротко описать, в чем суть сервиса коллтрекинга, невозможно. Тем более, что он состоит из многих модулей и инструментов, каждому из которых лучше выделить отдельный раздел или вкладку на сайте.

  • Информация на старом сайте была подана очень сжато и, что называется, заумно. Как там у Довлатова было: “Вашу программу даже глушить не надо, все равно вас поймут только доценты МГУ”. Вот так было и у нас — понять, что к чему, могли лишь люди, уже знакомые с предметом — то есть, прошаренные маркетологи и аналитики. Остальным же приходилось сначала гуглить, а затем возвращаться на сайт, чтобы разобраться, что мы вообще им предлагаем.

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

Кстати, пока созревала идея создать новый сайт, мы проводили маркетинговое исследование. И в числе прочего пытались выяснить предпочтения пользователей. Мы не спрашивали напрямую: “Как вам наш сайт?” а задавали наводящие вопросы о том, что для них “хороший” сайт коллтрекинга, каким он должен быть по дизайну, юзабилити и т. д.

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

Действие 2. Дорогу осилит идущий: этапы работ и инструменты

Мы не стали привлекать к разработке сайта подрядчика — только свои силы, только хардкор. У нас был фронтендер, бекендеры, дизайнер (1 шт) и целый отдел маркетинга. Поэтому мы решили, что уж как-то справимся.

С самого начала мы наметили этапы работ и назначили ответственных (кстати, этапов получилось ровно 9, как и кругов ада. Совпадение? Хммм, даже не знаем):

1. Концепт (отдел маркетинга и ТОПы компании);

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

Продукт — что мы предлагаем;
Почему Ringostat — чем отличаемся от конкурентов;
Поддержка — как клиентам обратиться в техподдержку или найти нужную информацию самостоятельно;
Партнерам — партнерская и реферальная программы;
Интеграции — с какими сервисами и платформами мы интегрируемся;
Тарифы — здесь все понятно.
Также на главной странице мы разместили вот такой важный блок:

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

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

2. Прототип (отдел маркетинга).

По уже утвержденному концепту в отделе маркетинга рисовался прототип сайта. Делали мы это в сервисе moqups. Он удобен тем, что позволяет очень быстро “набросать” нужные блоки и распределить по ним текст. Также быстро блоки можно изменять и передвигать. Это решило сразу две задачи — с проверкой жизнеспособности прототипа в принципе, а также с определением размеров иллюстраций и необходимого количества текста для каждого блока.

3. Графический дизайн сайта (директор по маркетингу, дизайнер).

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

4. Иллюстрации (директор по маркетингу, дизайнер).

Здесь ничего необычного. Дизайнер и руководитель отдела маркетинга закрывались в переговорке и по нескольку часов брейнштормили. Причем, цель сделать “сурдоперевод” текста картинками не ставилась. Все иллюстрации скорее ассоциативны, нежели прямолинейны. И иногда ассоциации совсем уж неочевидны. К примеру, как связана остановка с пропущенными звонками — понятно.

А при чем Хайзенберг из Breaking Bad к отчетам — остается только догадываться.

Кстати, чтобы прочувствовать всю боль нашего дизайнера, просто представьте, что ему приходилось это:

Превращать вот в это:

5. Тексты (копирайтер, директор по маркетингу).

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

6. Верстка и наполнение сайта (Front-end разработчик, маркетолог)

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

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

  • сервис доступен онлайн с любых устройств, а все макеты хранятся в облаке;
  • в макете одновременно могут работать несколько членов команды: к примеру, дизайнер — создавать иллюстрации, а контент-маркетолог — заливать тексты, смотреть, как они выглядят, сокращать-дописывать и т. д.;
  • дизайнер может открыть фронтендеру файл “только для чтения”, что позволяет первому не волноваться за сохранность и целостность макета, а второму — вовсю резвится и кликать на любой элемент, не боясь внести изменения в макет. Фронт-энд разработчик может смело смотреть цвета, расстояния, размеры и прочее прочее.
  • синхронизация. Дизайнеру не нужно каждый раз заливать новую версию макета — все, у кого есть к нему доступ, видят самый последний вариант.
  • комментарии. Всё обсуждение по макету происходит здесь же — не приходится бежать в рабочий чат или еще куда-то, чтобы оставить комментарий или задать вопрос.

Одновременно с заливкой текстов, фронт-енд разработчик верстала сайт и принимала все новые и новые правки: серый недостаточно серый, добавь рамку, почини слайдер, которого нет, убери рамку, а нет все же добавь, нет убери.

7. Программирование (команда разработки)

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

8. Тестирование & SEO-оптимизация (QA engineers, SEO-специалист)

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

9. Релиз

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

Действие 3. Факапы

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

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

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

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

Действие 4. После релиза

После дня Х — когда все наконец-то выдохнули и поздравили друг друга, оставалось одно — проверить, как все работает в боевых условиях. А работало все на удивление хорошо. Была лишь одна небольшая проблема — ненастроенные редиректы с контекстной рекламы. Но все это наши бравые разработчики пофиксили за несколько часов. Затем мы еще два дня молча смотрели, не вылезет ли какой-нибудь баг, а когда убедились, что нет, все хорошо — выкатили сайт на публику.

Послесловие

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

Этапы работ:

  • Брифование. Если речь идет о студии, которая занимается разработкой, то бриф заполняет компания-заказчик. Но так как мы были и заказчиком, и исполнителем в одном лице, то у нас бриф заполнялся директором по маркетингу с учетом предпочтений пользователей. Плюс, разумеется, исследование рынка.

  • Проектирование и прототипирование. Создается прототип и рисуются мокапы — все просто.

  • Графический дизайн + иллюстрации. Создается дизайнером на основе ранее утвержденных мокапов и стилистики.

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

  • Верстка и программирование. Делается на основе ТЗ и готового макета сайта от дизайнера.

  • Тестирование и проверка. QA проверяют все ли работает по заданному сценарию, редакторы — нет ли ошибок в текстах.

  • Запуск.

  • Исправление багов.

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

PROFIT. Вы великолепны, можете собой гордиться!

Инструменты:

  • Moqups — прекрасный сервис для создания мокапов

  • Figma — идеальное решение для веб-дизайна

  • Serpstat — все, что нужно для SEO-оптимизации

  • Google Docs — идеальное решение для написания, комментирования и обсуждения текстов

Чек-лист проверки сайта:

  • Качество дизайна и верстки: умные дядьки говорят, что сайт должен “дышать”, это важно (и мы с ними согласны) + все элементы сайта должны быть на своих местах.

  • Очевидность навигации — пользователям должно быть интуитивно просто находить нужные разделы.

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

  • Информативность — сайт должен давать исчерпывающую информацию о вашем продукте или услуге.

  • Адекватные цвета — не пугайте своих посетителей кислотными цветами или радужным разнообразием, выберите три корпоративных и работайте с ними.

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

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

  • Качество изображений — уделите этому пункту внимание, особенно если вы используете стоковые изображения. Если они разобьются на пиксели, то испортят все впечатление — будет унылая и грустная картина. Еще один момент: использовать очевидные стоковые изображения, которые уже по третьему кругу гуляют по интернету — моветон.

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

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

Здесь находится опрос. Но он пока не работает в приложении.

Как вам в общем и целом дизайн?

Переголосовать

Здесь находится опрос. Но он пока не работает в приложении.

Насколько сайт удобен? Все ли легко найти?

Переголосовать

Здесь находится опрос. Но он пока не работает в приложении.

Оцените подачу информации: все ли понятно?

Переголосовать

Спасибо!

{ "author_name": "Ringostat ", "author_type": "self", "tags": [], "comments": 9, "likes": 8, "favorites": 18, "is_advertisement": false, "section_name": "blog", "id": "35420", "is_wide": "" }
{ "is_needs_advanced_access": false }

Комментарии Комм.

Популярные

По порядку

0

Прямой эфир

Подписаться на push-уведомления
[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "create", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } } ]