Как мы разработали новый дизайна сайта для ООО "Издательство София"

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

Задачи и цели проекта

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

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

Целевую аудиторию сайта можно условно разделить на 2 подгруппы:

• B2C – конечные пользователи, покупающие книги для личных нужд.
• B2B – предприятия, организации и образовательные учреждения, закупающие книги оптом.

Ключевые функциональности сайта

Основными требованиями к функционалу сайта были:

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

Проблемы и вызовы

В процессе разработки мы столкнулись с проблемой интеграцией внешних систем, обладающих разным качеством и доступностью API документации и непосредственной разработкой нового дизайна с сохранением прежней “ДНК” бренда Sophia. Благодаря многолетнему опыту работы с e-commerce проектами, мы смогли сразу предложить эффективные решения и использовать лучшие практики.

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

Выбор технологического стека

Для реализации проекта был выбран следующий технологический стек:

• Figma - для разработки дизайна и прототипов.
• Яндекс Метрика - для анализа поведения пользователей и последующей оптимизации сайта.
• Vue.js - для динамичной работы интерфейса.
• 1С-Битрикс "Управление сайтом" - для управления контентом и обработки заказов.

Процесс разработки

Процесс работы над проектом был разделен на несколько этапов:

• Аудит и исследование. Сначала провели количественное и качественное исследование текущего состояния сайта. Это включало анализ работы существующего функционала и выявление слабых мест. Также была проведена аналитика лучших практик в дизайне сайтов книжных издательств.
• Разработка мокапов и прототипа. На основе анализа мы создали несколько концептуальных макетов (мокапов), которые отражали улучшения и решения для выявленных проблем. После согласования с клиентом, приступили к разработке прототипа.
• Дизайн и разработка. Прототип был превращен в полноценный дизайн, с учетом всех пожеланий клиента. Особое внимание было уделено современным UX/UI тенденциям и удобству пользователей.
• Разработка бэкенда и структуры базы данных. После утверждения дизайна, подготовили бэкенд сайта, включая настройку системы для обработки заказов и интеграцию с внешними сервисами.
• Вёрстка и программирование. На завершающем этапе был выполнен front-end и back-end, чтобы все элементы дизайна работали без сбоев на всех устройствах.

Особенности этапа дизайна

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

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

Результаты и достижения

По завершении проекта был достигнут значительный результат:

• Увеличение глубины просмотров. Пользователи стали проводить больше времени на сайте благодаря улучшенному интерфейсу и удобному поиску.
• Рост конверсии в заказы. Новый дизайн и улучшенная навигация способствовали увеличению процента пользователей, оформляющих заказы.

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