Редизайн винного интернет-магазина в Израиле: кейс бстд

Старт проекта: с чего все началось

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

Контекст: дизайн-система и платформа как два ключевых ограничения

Работа над интерфейсом строилась с учетом ограничений, которые были определены особенностями Magento и Hyvä. Некоторые пользовательские сценарии заложены в систему, поэтому дизайн собирался таким образом, чтобы соответствовать реальному поведению платформы.

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

Шаг за шагом: как мы выстроили работу

1. Определили ориентир для интерфейса

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

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

2. Собрали структуру ключевых страниц

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

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

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

Интерфейс собирался так, чтобы переход от выбора напитка к изучению деталей и покупке происходил естественно и без лишних действий.

3. Адаптировали интерфейс под особенности языка 

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

Дополнительная особенность — смешанное направление текста и чисел. В одном и том же блоке направление может «переключаться»: сумма читается привычно, а подпись — в обратную сторону. Из-за этого знак валюты и разделители (точки, дефисы) иногда смещаются: в одних случаях знак стоит перед числом, в других оказывается с противоположной стороны. 

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

4. Расширили компонентные решения под реальный контент

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

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

5. Зафиксировали реальные сценарии работы системы

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

6. Подготовили систему баннеров для главной страницы

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

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

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

7. Сопроводили реализацию и проверяли качество

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

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