Задача:
Обновление дизайна и функционала сайта для сервиса доставки питьевой воды.
Цель:
Сделать удобный привлекательный сайт с возможностью оформления заказов.
Продукт:
Современный интернет-магазин с актуальным дизайном, быстрой загрузкой страниц и личным кабинетом пользователя.
Клиент
YourWater — сервис доставки артезианской воды «Plesca» в Санкт-Петербурге и области. Вода содержит полезные микроэлементы, поддерживающие энергию и бодрость организма. Постоянными клиентами компании стали РЖД, АТС Смольного, СПБ ГУ, магазин «Купишуз», ОборонЭнерго СПб, МУП Гатчина, Дом Ветеранов СПб и другие жители Санкт-Петербурга и области.
Проблематика
У компании уже был рабочий сайт, но функционал и оформление уже не соответствовали запросам пользователей. Поэтому было принято решение сделать более современный визуал, обновить структуру и функционал сайта.
Веб-ресурс внешне не особенно отличался от конкурентов и не привлекал внимание внешним видом. Был дискомфорт для пользователей: не очень удобно делать заказ, повторить предыдущий можно было только через оператора. Еще минус — каждый раз приходилось заново вводить данные при оформлении. По сути нам предстояло переформатировать существующую площадку в удобный интернет-магазин.Решение
Чтобы не лишать бизнес потенциальной прибыли, компании обновляют свои сайты 1 раз в 3–5 лет: улучшают дизайн, упрощают путь пользователя, добавляют новые возможности. Для начала нам требовалось оценить масштаб работ: понять, что нужно поменять, добавить, а что оставить по-прежнему.
Поэтому мы провели аудит существующего ресурса: проанализировали актуальность дизайна и графических элементов, оценили работу страниц и удобство для пользователя. У текущей версии сайта было несколько проблем: визуал устарел и не соответствовал современным трендам, а юзабилити было перегружено лишними элементами.
Изучили сайты с аналогичными предложениями и поняли, за счет чего можно отстроиться от конкурентов.
Основная проблематика площадок для доставки воды:
Не понятно, как делать заказ.
Иногда для этого приходится переходить на другую страницу и ждать, пока она загрузится, а где-то форма заказа визуально сливается с общим фоном и ее сложно сразу рассмотреть.
Нет акцентов на преимуществах сервиса.
Клиент не сразу видит, чем компания отличается от таких же, не находит для себя пользу и переключается на другой ресурс.
Нечитабельная информация.
Мелкие шрифты и изображения сложно и неудобно читать, легко пропустить что-то нужное. Причем эта ошибка встречается как в текстах страниц, так и на иллюстрациях.
Перегруз данными.
В информационных блоках стараются уместить вообще все — и важное, и второстепенное. Много элементов дизайна, которые отвлекают внимание.
Сложное меню.
Компании стараются сделать навигацию проще, поэтому разбивают разделы на множество подпунктов. Это кажется логичным, но на деле работает наоборот — пользователь теряется в длинных списках и закрывает сайт.
После исследований и аналитики мы сформировали концепцию будущего дизайна. В общих чертах — сайту YourWater нужен более легкий визуал с минимумом деталей, чтобы не отвлекать пользователя от целевого действия.
Сделали логотип проще.
Теперь он полностью в одном цвете. А еще заменили текстовое начертание на более изящное и скруглили углы.
Убрали акцентные цвета.
Раньше их задачей было привлечение внимания к точкам касания, но сегодня это уже неактуально — пользователи привыкли к стандартному расположению кнопок и находят их на автомате. Поэтому цветовое оформление сделали более спокойным, с минимумом раздражителей.
Вынесли важное на передний план.
Откорректировали контент и оставили самое основное. Например, из блоков с товарами на главной убрали списки с ценами и оставили только одну. Полный ценовой диапазон для каждого продукта вынесли на отдельную страницу.
Обновили инфографику с преимуществами.
А вот здесь мы отступили от общей концепции и сделали наоборот — добавили яркие цвета. Раньше раздел читался по диагонали и не привлекал внимание, а теперь взгляд цепляется за каждый блок. Посетитель тщательнее знакомится с преимуществами компании и не пролистывает их.
Также нужно было избавить пользователя от лишних действий и максимально облегчить получение и восприятие информации. Мы оценили сайт с точки зрения юзабилити: проанализировали поведение аудитории, элементы навигации, структуру контента.
Сократили разделы меню.
Изначально пунктов было не так уж и много, но мы нашли, что можно объединить или упростить: убрали отдельный раздел с акциями, а выпадающий список оставили только для доставки.
Упростили заказ.
Чтобы заказать воду, нужно было перейти с главной страницы в каталог. Сейчас для добавления товара в корзину достаточно нажать одну кнопку.
Продублировали каталог.
Теперь он есть не только в меню, но и показывается с левого края страницы — удобно сразу перейти в нужный раздел и выбрать товары.
Добавили личный кабинет.
После авторизации клиенты могут посмотреть и продублировать прошлые заказы в несколько кликов. Здесь же хранятся адреса, избранные товары и информация о движениях денежных средств — оплатах, возвратах.
Реализовали проект на реактивном фреймворке Vue.js
Он позволяет разрабатывать быстрые и эффектные интерфейсы для сайтов и мобильных приложений. Теперь карточки товаров и акций грузятся моментально и не заставляют пользователя ждать.
Ресурсы
Результат
Выполненные работы
- Освежили и актуализировали дизайн сайта
- Обновили логотип и шрифты
- Упростили восприятие контента
- Ускорили загрузку страниц
- Улучшили юзабилити
- Интегрировали оплату и заказ
- Разработали личный кабинет пользователя
Мы устранили неактуальные элементы — обновленный сайт компании выглядит спокойно и современно. Контент стал упорядоченным и понятным. Пользователю легко ориентироваться в разделах и находить нужное, а личный кабинет повышает лояльность — заказ теперь делать намного проще и быстрее.
Хотите так же? Напишите нам, и мы проконсультируем вас бесплатно.
