КЕЙС: Разработка сайта услуг по доставке груза из Китая

Сегодня я вам покажу разработку сайта услуг для компании TLC. Регион продвижения ориентирован на всю страну, но основной — это Москва и область.

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

Итак поехали….

Из чего состоит любая разработка:

Разберем каждый из этих пунктов и выжмем самый сок

Идея создания сайта

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

У заказчика было представление о аудитории с которой предстоит работать — начиная от возраста и заканчивая достатком.

Целевая аудитория определена

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

Бриф опрос клиента

Вы спросите — для чего заказчику заполнять какие-то вопросы? Часто бывает что у человека в голове есть абстрактная идея, но нет четкого представления. Для этого стоит ответить на ряд вопросов, позволяющих структурировать желания и представить их в виде четкого плана.

Так например вопросы могут быть следующего плана:

Получив такие ответы, остальным специалистам проще справится со своими задачами

Техническое задание на разработку

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

Чек-лист задач на проекте

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

Анализ конкурентов

Имея на руках представление о идеи в форме ТЗ можно приступать к сбору необходимой информации. На первом этапе стоит анализ конкурентов.

Почему он важен спросите вы? Отвечу — зачем изобретать велосипед, возьми и объедени, то что работает, скорректировав од себя. Данный этап нужно делать скрупулёзно и ответственно, выявляя главные фишки лидирующих конкурентов.

Формат анализа конкурентов представлен на следующем рисунке:

Анализ конкурентов

Как видно из скриншота — отобраны растущие конкуренты (Зеленый цвет), как по Яндекс, так и по Google. Получив достаточный список конкурентов, выделяются самые жирные — на них мы и будем ориентироваться в первую очередь!

Структурная карта типовых страниц

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

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

Структура типовых страниц

Прототипы типовых страниц

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

Часть прототипа главной страницы

Часть прототипа услуги логистики

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

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

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

Пример описания элементов прототипа

Подготовка дизайна сайта

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

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

Дизайн главной страницы — яркий, насыщенный и информативный

Дизайн главной страницы

Дизайн всех типовых страниц десктопной версии и мобильной

Далее процесс шел по накатанной. Дизайнер опираясь на прототип подготовил красочные страницы по типовым страницам. Стоит отметить что в своей работе мы используем такой сервис, как https://www.figma.com/

Дизайн типовой страницы

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

Верстка макетов

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

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

Выполненная задача должна работать, как швейцарские часы

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

Натяжка макетов на CMS

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

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

Наполнение сайта контентом

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

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

Первичная SEO оптимизация

Что представляет из себя данный пункт? Это проверка сайта после работ программиста:

1. Проверка валидности кода
2. Проверка микроразметки
3. Наличие на страницах 1 единственного H1
4. Проверка SEO тегов (их я готовлю заранее, чтобы к моменту внедрения страниц уже все было готово)
5. Проверка alt изображений
6. Проверка сайта на наличие битых ссылок
7. Проверка сайта на дубликаты

Все ошибки после выявления сразу же устраняются.

Командная работа — это часть успеха компании!

Тестирование

Стараюсь следовать в совей работе поговорке:

Семь раз отмерь, один раз отрежь

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

За свою работу у болею душой, поэтому стараюсь делать с максимальной ответственностью!

Настройка аналитики

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

Не забывайте данный момент! В одном из следующих своих кейсов выложу алгоритм по которому проверяю сайт перед открытием, думаю вам будет интересно.

Артём Опарин

Ведущий SEO специалист компании

Запуск проекта

После всех настроек и проверок сайт открывается к индексации.

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

Проект был запущен в августе 2021 года и в настоящее время я наблюдаю за его активностью

Подводя итог могу сказать следующее — разработка сайта это кропотливая работа, требующая от каждого звена ответственного подхода. Хороший продающий сайт — это как лицо компании, поэтому стоит понимать, на таких вещах нельзя экономить!