Авторизация
Забыли пароль?
Сброс пароля
Вернуться к авторизации
Digital-кейс дня

Сайт веб-студии fuse8

Вхождение в кейс дня

16 августа ‘19

Заказчик: fuse8

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

Агентство-исполнитель кейса

fuse8

fuse8 (читается «фьюз эйт») — веб-студия из Челябинска, которая выросла из технического отдела одноимённой британской компании. Мы любим работать над сложными и уникальными веб-проектами и мобильными приложениями. Не занимаемся созданием сайтов-визиток и типовых продуктов.

1. Вводная задача от заказчика, проблематика, цели

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

ЦЕЛИ И ЗАДАЧИ

Антон Пермяков, директор fuse8, заказчик: «Создание новой версии fuse8.ru стало необходимым тактическим шагом к развитию компании. Сложно думать о различных PR- и маркетинговых активностях, когда сайт студии застрял в 2013 году и его не очень-то хочется показывать. Новая версия должна была иметь современный адаптивный интерфейс, понятную навигацию и ясные тексты о том, кто мы такие и чем отличаемся от других. Акцент — на наших работах и сильных сторонах. Например, конечная цель раздела “Команда” — показать каждого сотрудника: его экспертность, участие в проектах, дать ссылки на его статьи».

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

Предыдущая версия сайта застряла в 2013 году: на нём было много ненужных артефактов, запутанная навигация и куча ссылок в футере на мини-страницы с SEO-контентом

2. Описание реализации кейса и творческого пути по поиску оптимального решения

ФОРМИРОВАНИЕ КОМАНДЫ И РАБОТА ПО SCRUM

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

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

СТРУКТУРА САЙТА

Как было

Мы — партнёры веб-студии из Великобритании. В 2013 наши европейские коллеги сменили название на Delete Agency, а мы продолжили работать под именем fuse8 и запустили свой сайт — переводную версию fuse8.com.

Мы скрыли некоторые разделы и взяли новое доменное имя — fuse8.ru. Структура сайта отвечала требованиям SEO того времени: там было много страниц об услугах обеих студий — русской fuse8 и британской Delete Agency.

Как стало

Структуру нового сайта мы решили упростить. Мы хотели, чтобы любой, кто зайдёт на fuse8.ru, быстро и легко…

  • понял, что мы за веб-студия;
  • узнал, как ведём проекты;
  • ознакомился с нашим портфолио;
  • решил, подходим ли мы ему как разработчики;
  • связался с нами.

ДИЗАЙН

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

Затем мы попросили наших сотрудников оценить концепции по нескольким параметрам: визуальное оформление, анимация и доступность идеи — даёт ли сайт понять, чем мы занимаемся. Фаворитом стал вариант с белым фоном, геометрией и кэбом.

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

Новый сайт fuse8 — контентный. Важно было, чтобы креатив не мешал чтению текстов. Отсюда белый фон, минимум анимации и комфортный для чтения шрифт.

ТЕХНОЛОГИИ И ПРОЦЕСС РАЗРАБОТКИ

Новый сайт fuse8 создан на Umbraco. Есть несколько причин, по которым мы выбрали именно эту CMS.

Максим Захаров, ведущий бэкенд-разработчик проекта: «Функциональность Umbraco соответствует всем нашим запросам. Новый fuse8.ru — контентный сайт, а в этой CMS — удобная административная панель для работы с текстами, фото и видео. В открытом доступе есть огромное количество модулей для оптимизации сайтов на Umbraco. Мы, например, использовали тот, что сжимает картинки и ускоряет загрузку страницы, но при этом не сильно «бьёт» по качеству. Ещё одна причина, по которой мы выбрали Umbraco — это возможность поглубже освоить её. Это бесплатная CMS с большим сообществом поддержки. В будущем мы вполне можем использовать её на коммерческих проектах».

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

Максим Храмцов, фронтент-разработчик: «Мы сделали сайт максимально доступным. Страницы грузятся быстро даже при «полумёртвом» интернете. Для этого, в том числе, мы подключили Турбо-страницы от Яндекса. Они экономят трафик на мобильных устройствах и сокращают нагрузку на сервер. Мы добавили микроразметку schema.org. Она преобразует статью, новость или любой другой текст в виджет в поисковой выдаче. Open Graph делает из любой нашей ссылки, опубликованной в соцсетях, красивый пост с кликабельными заголовком и обложкой. Также мы настроили RSS, чтобы свежие материалы с нашего сайта сразу попадали в новостные агрегаторы (например, в feedly или Яндекс.Дзен)».

КОНТЕНТ

Через тексты в слайдере на главной странице и в разделе «Компания» мы хотели донести, кто мы такие, чем отличаемся от других, каких проектов ждём. Поэтому контенту было уделено много времени:

Марина Медведева, редактор: «Автор большинства текстов на новом сайте — Антон Пермяков. Он кратко, доступно, но при этом подробно рассказал о нас всё: что мы делаем, чего не делаем, как развиваемся, и кому стоит обратиться за разработкой именно к нам. Мы старались писать в инфостиле: избавлялись от стоп-слов, выдавали факты и конкретику вместо обещаний и самовосхваления».

СРЫВ СРОКОВ

Мы хотели запустить сайт 14 декабря 2018 года. Планировалось, что это будет усечённый вариант — без мобильной версии и нескольких разделов (статьи, команда). В итоге релиз состоялся только в апреле 2019 года. Мы регулярно срывали сроки по ряду причин:

  • Занятость команды: сайт fuse8 — внутренний проект. Команда могла уделить ему только то время, которое не было занято коммерческими задачами.
  • Эмоции: каждый член команды хотел внести в сайт что-то своё, поэтому много времени уходило на коммуникации (а иногда и споры): как лучше сделать, какую фичу добавить первой, а от какой лучше избавиться.
  • Ошибки в планировании: мы не заложили время на развёртывание сайта на живом сервере (например, настройку редиректов со старых страниц).
  • Недооценённый контент: мы не ожидали, что на написание, редактуру и согласование текстов уйдёт так много времени.
  • Расширение MVP: к апрельскому релизу мы сделали больше, чем планировали к декабрьскому. И это хорошо! Сайт вышел адаптивным, на нём появились разделы «Статьи» и «Новости», и мы сразу начали публиковать полезный контент.

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

На новом сайте всего шесть разделов, которые помогают составить правильное представление о нас: знакомят с командой, компетенциями и готовыми проектами

Кэбы, панорамы Лондона и полёт над королевским лесом Дин — нам хотелось через дизайн сайта поведать историю веб-студии

Итоговый дизайн стал компиляцией нескольких идей — мы переняли старые цветовые схемы и иллюстрации, но организовали всё иначе

3. Результаты сотрудничества

Результатом работы стал новый сайт нашей веб-студии — со свежим дизайном, понятными структурой и навигацией, полезными текстами. Старая версия «тормозила» нас: мы избегали рекламных предложений, опасались спугнуть потенциальных заказчиков, не раздавали свои визитки на IT-мероприятиях.

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

Результаты в цифрах:

  • по данным Яндекс.Метрики в январе 2019 (до выхода новой версии сайта) средняя посещаемость в день составляла 19 человек, октябре — 55 человек;
  • в январе 2019 Яндекс.ИКС составлял 10, в октябре 2019 — 70.

Конечно, на посещаемость могли повлиять и другие факторы: мы начали активно вести Instagram, группу во «ВКонтакте», сообщество в Facebook, стали спонсором и спикером на конференции UWDC. Но всей этой деятельности не было бы без релиза новой версии сайта. Так что мы считаем эти результаты эффектом комплексной работы.

В октябре мы обновили на сайте раздел «Команда». Теперь там есть информация не только о руководителях компании и ведущих специалистах, но и обо всех подразделениях. В планах — создать персональные страницы для каждого сотрудника: с указанием компетенций, достижений, сертификаций и авторских статей каждого их них.

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

В административной панели Umbraco удобно работать с текстом

В разделе «Компания» четыре блока текстов: пробежавшись по ним, посетитель поймёт, подходим ли мы ему как разработчики

4. Заключение

Антон Пермяков, директор fuse8, заказчик: «Я очень рад, что мы запустили новую версию нашего сайта. Огромная задача, висевшая над нами пару лет, наконец выполнена! Нам пришлось отказываться от каких-то идей, чтобы не затягивать с релизом ещё сильнее. Например, раздел «Команда» после релиза был представлен в усечённой версии. В октябре мы его обновили — добавили много информации обо всех сотрудниках. А от раздела “История компании” мы совсем отказались. Просто в какой-то момент пришло понимание, что главное — выпуститься, а недостающие части мы сможем развивать эволюционным образом.

Большое спасибо команде проекта. Я знаю, через какие эмоциональные сложности ребятам пришлось пройти. Но мы это сделали, научились работать слаженно, и это очень классно. Главная цель достигнута — новый сайт запущен. Ура!!!»

Вениамин Мустафин, руководитель проекта: «Работая на этом проекте, мы погрузились в незнакомые процессы, научились делать то, с чем раньше не сталкивались: своими силами настраивать поисковую оптимизацию, много писать о себе. Мы многое меняли на ходу, но твёрдость нашего главного заказчика Антона Пермякова не давала уйти в сторону от основной идеи. В итоге мы получили именно то, что хотели».

Агентство-исполнитель кейса

fuse8

fuse8 (читается «фьюз эйт») — веб-студия из Челябинска, которая выросла из технического отдела одноимённой британской компании. Мы любим работать над сложными и уникальными веб-проектами и мобильными приложениями. Не занимаемся созданием сайтов-визиток и типовых продуктов.