Магазин дизайнерской одежды LN Family

Разработали mobile-friendly сайт для модного московского фэшн-бренда.

Перейти на сайт

Клиент

«LN — это Лара и Ната. Почему Family? Ну, мы же семья». Так объясняют название бренда его создательницы, Лариса Сафутдинова и Наталья Никифорова. Идея создавать собственную одежду пришла к ним в 2012 году, а уже в 2013 в историческом центре Москвы открылся первых концептуальный магазин.

За это время элегантные женственные образы LN Family успели влюбить в себя сначала столичную богему, а затем знаменитостей, стилистов и блогеров по всей стране. Бренд готов выходить на новый уровень: первым шагом к этому должен стать современный интернет-магазин.

Задача

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

Решение — mobile first

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

Кастомный каталог

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

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

Страница товара

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

Чекаут

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

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

Instashop

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

Аналитика

С помощью Google Tag Manager мы настроили передачу событий о заказах, просмотрах категорий и товаров в систему аналитики магазина. Маркетологи магазина могут использовать эти данные при разработке новых рекламных кампаний.

Результаты

Готовим инфраструктуру к релизу английской версии сайта. А пока смотрите, что получилось — ln-family.com.

Стек технологий

TypeScript
React
Redux
Webpack
Gulp
Docker
SCSS
Git
Bitrix Framework

Награды

Лучший дизайн интернет-магазина
Золотой сайт

Кейсы

Интернет-магазины
Магазин для бренда FIT KIT
Больше кейсов в портфолио
Все кейсы