Проекты

Сайт с каталогом
брендов для MTA
Group

Что сделано:

Адаптивный сайт с каталогом брендов:trademta.com

Технологический стек:

Python, Django, React SPA, PostgreSQL

Интеграции:

Leaflet

Задача:

MTA Group требовалось разработать сайт для текущих и потенциальных партнеров, чтобы:

— рассказать им о компании и ее команде;
— показать многообразие брендов-производителей, с которыми работает MTA Group и чьи товары она может предоставить для реализации магазинам.

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

Ссылка на проект

Заказчик

MTA Group — поставщик детских товаров от известных брендов, таких как LEGO, Barbie, L.O.L., Enchantimals, My Little Pony и PAW Patrol. Компания соединяет ключевых производителей и ритейлеров по всему миру, позволяя находить лучшие решения и бренды.

В числе партнеров компании такие площадки, как Amazon, Wildberries, X5 Retail Group, Ozon, Яндекс.Маркет, Магнит, Лента, СберМаркет и Самокат.

Реализация

Мы тщательно изучили нишу, в которой работает MTA Group, и ее конкурентов. Исследовали сайты-референсы: обратили внимание на те решения, которые заказчик посчитал правильными и удачными для своего бизнеса. Это помогло нам лучше понять задачу, разработать структуру и дизайн в соответствии с бизнес-целями компании.

Дизайн

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

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

Главная страница

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

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

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

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

Список брендов

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

Страница бренда

Для каждого бренда предусмотрена отдельная страница с его описанием — все они соответствуют единой структуре.
В административной панели установили CKEditor — редактор, позволяющий вносить свой текст и свободно его форматировать как с помощью инструментов, так и в формате HTML. Благодаря редактору заказчик в любой момент может скрыть бренд, добавить новый, заполнить и отредактировать в нем информацию по своему усмотрению.

Все текстовые поля в административной панели дублируются: для русской и английской версии сайта.

Также в административной панели мы реализовали возможность загружать документы в формате .pdf и .doc. При необходимости администратор может добавить один и тот же документ на разных языках: пользователю будет отображаться нужная версия.

О компании

Чтобы не плодить лишние страницы, на каждой из которых планировалось не так много информации, мы решили объединить страницы «О компании» и «Партнерам» в одну.

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

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

Стать партнером

Добавили форму заявки, которая позволила бы посетителям сайта, заинтересованным в партнерстве, оставить свои контактные данные.

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

Контакты

Страницу «Контакты» мы сделали классической: она содержит карту, адрес и форму обратной связи.

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

MTA Group — международная компания с представительствами в Казахстане и ОАЭ. Вместо Яндекс.Карт мы использовали Leaflet — одну из наиболее популярных картографических библиотек с открытым исходным кодом, которая работает без дополнительных регистраций или SMS.

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

Результат

Разработали для MTA Group минималистичный сайт с каталогом брендов. Рассказали о компании потенциальным партнерам, а также показали многообразие брендов-производителей, с которыми она работает и чьи товары может предоставить для реализации магазинам.

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