Прототипирование и дизайн сайта поставщика промышленного холода
АГЕНТСТВО
IgorPronin.com
ТИП ИНТЕРФЕЙСА
Отзывчивый веб-сайт
UI/UX–дизайнер
РОЛЬ
ДАТА
2019
СТАТУС
Запущен
ФОРМАТ РАБОТЫ
Удалённо
Зачем: бизнес–задачи
Ряд–Сервис — компания, более 26 лет занимающаяся проектированием, продажей, монтажом и обслуживанием климатического оборудования. Специалистами компании смонтировано и введено в эксплуатацию холодильное оборудование у более чем 10 000 клиентов в 12 регионах России, Казахстана и Монголии.
Основная задача — увеличить конверсию из посещения в заявку.
У компании есть действующий c 2010 года сайт. Целевым действием для всех групп посетителей является отправка формы «Оставить заявку». Средняя конверсия за последний год из посещения в заполнение формы — 0,5%.
Зачем: продуктовые задачи
Задачи нового сайта:
— ввести актуальную информацию для ключевых групп клиентов, ответить на их основные вопросы, «закрыть» страхи и возражения;
— избавиться от обилия неструктурированной и неотформатированной текстовой информации на главной странице, разработать современную четкую структуру контента;
— сделать форму обратной связи более очевидной.
— ввести актуальную информацию для ключевых групп клиентов, ответить на их основные вопросы, «закрыть» страхи и возражения;
— избавиться от обилия неструктурированной и неотформатированной текстовой информации на главной странице, разработать современную четкую структуру контента;
— сделать форму обратной связи более очевидной.
Важная задача — создать более эстетичный сайт, который будет повышать ценность компании и при этом транслировать её прежний графический стиль, поддерживая её узнаваемость.
Еще одним нюансом, который нужно было учесть при разработке нового сайта, является возможность масштабировать количество направлений деятельности компании, указываемых на первом экране главной страницы.
Для кого: аналитика, сценарии, структура
Проведя трёхчасовое интервью с заказчиком, я сформировала видение проекта в виде схемы с несколькими десятками ветвлений. Эта схема стала стартовой точкой для анализа целевых персон, формирования структуры сайта и структуры каждой страницы сайта. В процессе анализа целевых персон я выявила потребности 12 типичных клиентов «Ряд–Сервиса».
Чтобы точнее ухватить, как сейчас клиенты решают задачи, связанные с холодильным оборудованием, построила CJM для каждой персоны:
Используя полученные данные, сформировала структуру сайта и каждой страницы, чтобы ответить на вопросы и отработать страхи целевых групп:
Что: скетчинг
По спроектированной структуре сайта создала четыре наброска главной страницы. Этап скетчинга помог определить лучшую комбинацию элементов на главной.
На первом скетче классический блочный дизайн с карточками. Структура строго по схеме, созданной на этапе аналитики.
Второй скетч подразумевает наличие постоянно открытого подменю, в котором размещается 2-8 направлений деятельности компании. «Слоган» на первом экране расшифровывается идущими ниже карточками блога и отзыва («25 лет опыта» — записи блока по хэштэгу «кейсы», подтверждающие опыт, «более 10 000 клиентов» — отзыв клиента). То есть на первом же экране мы максимально снимаем опасения клиента по поводу качетсва потенциальных работ. Блок «О нас» раскрывается через прямую речь директора, что так же увеличивает доверие клиента. Так же в этом варианте присутствует блок «Мы гарантируем..» — он призван «добить» все сомнения и устранить все опасения клиентов, портреты которых были описаны на аналитическом этапе.
Третий скетч имеет почти аналогичный второму скетчу первый экран, отличие в слогане и отсутствии карточки отзыва, отзывы здесь выделены в отдельный блок ниже. Здесь присутсвуют благодарственные письма, что работает на увеличение степени доверия компании. Фишка этого варианта в блоке «Все услуги в один клик», который призван сделать максимально удобным и быстрым взаимодействие клиента и компании. На этапе аналитики было описано несколько ситуаций, когда клиент теряет большую прибыль в сезон из-за поломки оборудования. В этой напряженной ситуации он наверняка оценит возможно вызвать специалиста в один клик. Даже если дальнейший процесс будет обычным (надо оставить телефон, ему перезвонит специалист, уточнит детали т.д.), но под заголовком «в один клик» восприниматься это будет как более быстрый процесс, чем у других компаний.
Четвертый скетч наиболее продвинут в плане заложенного визуального дизайна, однако это и его слабость — решение может администрироваться сложнее, чем предыдущие. Под хедером отсутствует подложка, фоном первому экрану служит видео. Видео меняются по наведению на направления деятельности, расположенные внизу экрана. — Переход на страницу «О нас» осуществляется прямо с главного заголовка, без «привлечения» отдельной кнопки «О нас». На первом экране присутсвуют ссылки на скачивание прайса и презентации компании — для менеджеров / секретарей, которые должны «положить варианты на стол директору». Блоки «Блог» и «Отзывы» «завуалированы» под «Более 25 лет опыта» (далее идут посты блога с тегами «кейсы» / «проекты») и под «Более 10 000 клиентов» (отзывы) — такой приём использовался на первом экране второго скетча. Он позволяет интегрировать контент в преимущества, экономит место и время клиента.
На этапе скетчинга я предложила клиенту работать с макетами как с конструктором: он составлял итоговый макет из элементов, понравившихся в разных скетчах.
Второй скетч подразумевает наличие постоянно открытого подменю, в котором размещается 2-8 направлений деятельности компании. «Слоган» на первом экране расшифровывается идущими ниже карточками блога и отзыва («25 лет опыта» — записи блока по хэштэгу «кейсы», подтверждающие опыт, «более 10 000 клиентов» — отзыв клиента). То есть на первом же экране мы максимально снимаем опасения клиента по поводу качетсва потенциальных работ. Блок «О нас» раскрывается через прямую речь директора, что так же увеличивает доверие клиента. Так же в этом варианте присутствует блок «Мы гарантируем..» — он призван «добить» все сомнения и устранить все опасения клиентов, портреты которых были описаны на аналитическом этапе.
Третий скетч имеет почти аналогичный второму скетчу первый экран, отличие в слогане и отсутствии карточки отзыва, отзывы здесь выделены в отдельный блок ниже. Здесь присутсвуют благодарственные письма, что работает на увеличение степени доверия компании. Фишка этого варианта в блоке «Все услуги в один клик», который призван сделать максимально удобным и быстрым взаимодействие клиента и компании. На этапе аналитики было описано несколько ситуаций, когда клиент теряет большую прибыль в сезон из-за поломки оборудования. В этой напряженной ситуации он наверняка оценит возможно вызвать специалиста в один клик. Даже если дальнейший процесс будет обычным (надо оставить телефон, ему перезвонит специалист, уточнит детали т.д.), но под заголовком «в один клик» восприниматься это будет как более быстрый процесс, чем у других компаний.
Четвертый скетч наиболее продвинут в плане заложенного визуального дизайна, однако это и его слабость — решение может администрироваться сложнее, чем предыдущие. Под хедером отсутствует подложка, фоном первому экрану служит видео. Видео меняются по наведению на направления деятельности, расположенные внизу экрана. — Переход на страницу «О нас» осуществляется прямо с главного заголовка, без «привлечения» отдельной кнопки «О нас». На первом экране присутсвуют ссылки на скачивание прайса и презентации компании — для менеджеров / секретарей, которые должны «положить варианты на стол директору». Блоки «Блог» и «Отзывы» «завуалированы» под «Более 25 лет опыта» (далее идут посты блога с тегами «кейсы» / «проекты») и под «Более 10 000 клиентов» (отзывы) — такой приём использовался на первом экране второго скетча. Он позволяет интегрировать контент в преимущества, экономит место и время клиента.
На этапе скетчинга я предложила клиенту работать с макетами как с конструктором: он составлял итоговый макет из элементов, понравившихся в разных скетчах.
Что: прототипирование
На этапе прототипирования были сформированы ключевые дизайн–решения: использование трех колонок вместо традиционных двенадцати, нетрадиционное расположение блоков по сетке, широкая и контрастная типографика.
На главной нужно было представить большой объем информации, отражающей преимущества компании. Поэтому я разбила текстовый контент на небольшие части, показывая вход, кратчайшие пути и выход из массива информации.
Для оптимизации контента вместо традиционных заголовков «Проекты», «Отзывы» использовала «Более 26 лет опыта», «Более 10 000 клиентов». Так я убила двух зайцев: разделила заголовками текстовые блоки на смысловые части и обозначила ключевые преимущества компании.
Что: UI–дизайн
Передо мной стояла задача сделать дизайн страниц максимально простым, чтобы верстальщику было удобно создавать резиновую вёрстку. Поэтому вместо классических 12 колонок использовала 3 максимально широких колонки, которые при сужении окна браузера смогут сужаться, не деформируя блоки до невозможности считать контент. Я не использовала «обвесы» — левые и правые сайдбары, поэтому верстальщику не надо было думать о логике перетекания колонок на адаптивах.
Основа дизайна — контрастная и красивая типографика. В качестве шрифта заголовков был выбран Druk Wide, «растянутый» по горизонтали, что даёт отсылку к логотипу. Он отображает устойчивость, надежность компании. В пару ему для основного текста был использован бесплатный google-шрифт Rubik, аналогичный фирменному платному шрифту компании.
Основа дизайна — контрастная и красивая типографика. В качестве шрифта заголовков был выбран Druk Wide, «растянутый» по горизонтали, что даёт отсылку к логотипу. Он отображает устойчивость, надежность компании. В пару ему для основного текста был использован бесплатный google-шрифт Rubik, аналогичный фирменному платному шрифту компании.
Я сохранила стилистические приёмы старого сайта: фоновый цвет экрю, полосы фирменных оттенков, обилие текстовых блоков, широкие фотографии — обеспечив тем самым преемственность сайтов.
Композиция блоков, строящаяся на четырех вертикальных силовых линиях, нетрадиционна и создает особый, узнаваемый рисунок. Такая композиция свойственна скорее печатному дизайну, нежели диджиталу, поэтому выглядит свежо, выделяет среди конкурентов.
Я разработала три версии дизайна: для десктопов, планшетов, смартфонов. Все элементы и функции, доступные на ноутбуках и компьютерах, доступны и на мобильных экранах.
Итоги, критерии успешности
Мне удалось решить бизнес–задачу: конверсия из посещения в заявку увеличилась с 0,5% (по статистике за 2018 год) до 3,5% (по статистике за 6 месяцев 2020 года).
Также я решила продуктовую задачу: по оценке клиентов сайт компании стал визуально привлекательнее, приятнее. При этом сохранилась графическая преемственность с предыдущим сайтом.
Также я решила продуктовую задачу: по оценке клиентов сайт компании стал визуально привлекательнее, приятнее. При этом сохранилась графическая преемственность с предыдущим сайтом.
