Если сроки ограничены, а объем работы внушительный, эта история будет особенно полезна.
За один месяц мы провели полное обновление сайта одного из ведущих российских онлайн-магазинов вело- и мототехники — Velocity.
Накануне старта сезона продаж в digital-агентство 4 пикселя обратилась компания с просьбой провести полный редизайн их интернет-магазина. Главным приоритетом было быстро и качественно обновить сайт, чтобы обеспечить его полноценный запуск в срок и сделать процесс покупки максимально удобным для пользователей — всего в несколько кликов. Кроме того, в рамках проекта ставились дополнительные задачи: улучшить клиентский опыт и укрепить доверие покупателей, разработать интуитивно понятный и эффективный интерфейс, а также подчеркнуть разнообразие и высокое качество ассортимента магазина.
Основанная в 1998 году компания VELOCITY заслужила репутацию крупного и надежного поставщика на рынке велосипедов. Сегодня это один из крупнейших интернет-магазинов России с ассортиментом, включающим свыше 22 000 мотоциклетных товаров и более 10 000 велосипедных позиций, а также собственным сервисным обслуживанием и возможностью доставки по всей стране.
Задачи
Воплощение проекта в жизнь потребовало тщательного планирования и точного распределения задач, что стало основой для успешного соблюдения сжатых сроков. Для этого мы разработали структурированный план, который позволил системно учитывать все важные детали и придерживаться установленного графика.
Основные этапы работы включали:
1. Анализ начальных условий
2. Создание концептуального решения
3. Тщательную проработку дизайна всех страниц сайта
4. Оптимизацию под различные устройства
Далее рассмотрим каждый из этих шагов более подробно.
Анализ начальных условий
Начальный анализ был направлен на изучение существующего состояния сайта, обнаружение проблемных зон и понимание потребностей пользователей. В рамках этого этапа был проведён аудит, в ходе которого мы сформировали ключевые рекомендации по улучшению главной страницы и карточек товаров. Мы тщательно рассмотрели каждый элемент, выявляя причины неудобств для пользователей и предлагая конкретные варианты их устранения.
В ходе анализа сайта были выявлены ключевые недостатки, влияющие на удобство пользователей. Главной проблемой стала избыточная загруженность страниц большим количеством различного по стилю контента — объемные текстовые блоки соседствовали с несвязанными баннерами, создавая ощущение хаоса. Пользователь сталкивался с отсутствием логичной структуры подачи информации: большинство страниц содержали слишком большие массивы текста без необходимой разбивки и постепенного раскрытия темы. Кроме того, визуальное оформление выглядело устаревшим и неинтересным, что снижало привлекательность ресурса. Также усложнял взаимодействие запутанный личный кабинет и недостаточно прозрачный процесс оформления заказа, который не имел четкого и быстрого алгоритма.
Для улучшения ситуации провели сравнительный анализ сайтов конкурентов, что позволило определить удачные подходы и методы организации контента и интерфейса. Эти находки были учтены при разработке рекомендаций по обновлению проекта и внедрению более эффективных решений.
Создание концептуального решения
В начале работы над проектом создали прототип главной страницы, который служил отправной точкой для визуального оформления. Этот макет помог определить стилистическое направление и предоставил клиенту возможность ознакомиться с несколькими вариантами дизайна. Получив одобрение на изначальный концепт и минимальное число правок, сразу согласовали общую структуру сайта. Особое внимание уделялось детализации ключевых элементов главной страницы, ведь именно она формирует первое впечатление пользователя и задаёт тон всему ресурсу. В частности, тщательно проработали первый экран, где разместили основные предложения, акции и подборку товаров недели.
Создание главной страницы вызвало значительные трудности, особенно при разработке навигационного меню. Главной задачей было сделать его максимально лаконичным и интуитивно понятным, учитывая, что на сайте представлено свыше 40 000 товаров. Важно было обеспечить пользователям быстрый и удобный доступ к любой нужной информации.
На проработку главной страницы ушла примерно неделя, после чего приступили к разработке всех остальных макетов.
Тщательная проработка дизайна всех страниц сайта
Самым сложным этапом проекта оказалась детальная разработка всего сайта. Объем задач был огромен, а сроки — крайне сжатые. За три недели нужно было подготовить около 65 уникальных макетов, при этом адаптивные версии не учитывались.
Описание товара в карточке
Создание продуманного дизайна страницы с подробной информацией о товаре представляет собой отдельную задачу. В крупных онлайн-магазинах такая страница выполняет роль панели управления сложным механизмом, объединяя все элементы, необходимые для принятия решения о покупке. Здесь можно найти выбор характеристик продукта, подробные описания, инструкции по использованию, сведения о наличии и сроках доставки, а также специальные предложения и скидки. Кроме того, предоставляется контактная информация и видеообзор. Главная сложность — представить обширный объем данных так, чтобы пользователь не запутался и не почувствовал информационной перегрузки.
Страница товара была организована в несколько четко разграниченных секций. Основной раздел включал название, артикул, изображения и подробные сведения, которые размещались в отдельных вкладках. Справа располагался ключевой блок с главной информацией, который мы неформально называем “блоком принятия решения”. Кроме того, присутствовали дополнительные секции с менее важными данными.
Чтобы не перегружать пользователя, информация подавалась дозировано: второстепенный контент скрывался и становился видимым только после осознанного взаимодействия с ним.
Карточка приобрела компактный и упорядоченный вид, благодаря чему основные сведения доступны пользователю сразу при первом открытии.
Страница “О компании”
Особое внимание заслуживает раздел «О компании». Многие заказчики недооценивают его важность и не придают ему должного значения. Однако данные аналитики свидетельствуют о растущем интересе пользователей к этому разделу — они стремятся получить больше информации о фирме, с которой собираются сотрудничать. Хотя далеко не все изучают историю развития бизнеса подробно, визуальная привлекательность и оформление страницы сразу привлекают внимание посетителей.
В процессе редизайна мы структурировали основную информацию в три раздела. Первый раздел представляет собой слайдер с хронологией ключевых событий, сопровождаемый наглядными изображениями — лаконично и понятно демонстрирующий развитие по этапам. Второй блок раскрывает достоинства компании, а третий подтверждает ее высокий статус с помощью официальных документов и сертификатов.
Проработка личного кабинета
Также к проработке при редизайне сайта был привлечен личный кабинет. Его функциональность и удобство играют решающую роль, особенно после оформления пользователем заказа.
Исходный личный кабинет отличался излишней загруженностью: разделы с активными и архивными заказами смешивались, а статусы в подробном просмотре покупок были недостаточно информативны. Для повышения удобства реорганизовали интерфейс, сведя количество разделов к пяти, выделив отдельный блок для активных заказов и значительно упростив структуру раздела с программой лояльности.
Помимо оптимизации функционала, мы также занялись созданием единого визуального образа сайта. Поскольку значительная часть контента регулярно обновляется, мы разработали набор баннеров для всех текущих акционных предложений. Эти баннеры стали базой для дальнейшего дизайна, сочетая яркость с лаконичностью, что позволило поддерживать свежий и стильный вид страниц.
Адаптирование сайта под разные размеры экранов
Согласно исследованию, проведённому Perficient, подавляющее большинство пользователей — около 68% — посещают сайты с мобильных устройств. Это подчеркивает необходимость создания удобных и функциональных мобильных версий веб-ресурсов.
Чтобы обеспечить комфортный опыт для мобильных посетителей, важно учесть несколько ключевых аспектов:
— Информацию следует подавать дозировано, чтобы избежать утомительного бесконечного прокручивания. Часть контента лучше скрыть и показывать только после явного действия пользователя, например, клика.
— Для быстрого доступа к основным функциям целесообразно использовать закреплённые элементы интерфейса. Например, кнопка «Купить» должна всегда оставаться видимой при просмотре товара, а внизу экрана — размещаться кнопки для корзины, личного кабинета, сравнения и избранного.
Правильная адаптация сайта под мобильные устройства значительно повышает удобство взаимодействия и способствует удержанию посетителей.
3. Интерактивное использование фильтра построено таким образом, что пользователю не показывается полный список параметров одновременно. Каждый критерий можно изменять независимо, и при выборе конкретных опций появляется специальная отметка, подтверждающая их активацию для поиска товаров.
Итоги
В итоге можно сказать, что все задачи были успешно реализованы, а команда приобрела ценный опыт работы над крупным проектом в сжатые сроки. После запуска сайта продолжилась разработка печатной продукции и различных цифровых материалов для заказчика. По окончании проекта была подготовлена визуальная презентация.
Для успешного выполнения подобных задач важно учесть несколько ключевых аспектов:
Во-первых, разработайте подробный план работы с указанием всех этапов и сроков. Перечислите все необходимые страницы и макеты, которые предстоит создать. Такой подход позволит избежать упущений и даст ясное представление о масштабах проекта.
Во-вторых, налаживайте эффективное взаимодействие с заказчиком, поддерживая постоянный контакт по любым вопросам. Внимательное восприятие пожеланий клиента и оперативное внесение изменений в каждый макет обеспечат согласование без задержек. Это способствует соблюдению графика и снижает необходимость повторных корректировок.
— Совместный анализ макетов значительно повышает качество дизайна. Вместо одиночной работы одного специалиста, привлечение всей команды способствует более глубокому обсуждению и поиску лучших решений в спорных моментах.
Если вам нужна помощь с разработкой дизайна или остались вопросы, смело обращайтесь в агентство 4 пикселя. Наши менеджеры доступны круглосуточно и предоставляют консультации бесплатно.