Дон баллон. Редизайн интернет-магазина товаров для праздника

Главное о кейсе

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

--------

We have developed the new visual style of Don Ballon’s online-store.
We have succeeded in solving the problem of information density necessary for choosing items - the new design represents information in a compact, well-organized and intuitive way.
Don Ballon’s regular clients have given a lot of positive feedback about the new website UX and prefer to use it while placing their orders.

Бизнес-задача и ее решение

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


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

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

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

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

Анализ процесса покупки показал, что часто при выборе товара покупателям нужен не только непосредственно просматриваемый товар, но и комплементарный к нему (из той же коллекции или в той же цветовой гамме) для составления композиции. Эти данные, как и наличие в розничных магазинах, характеристики и прочая важная информация, отражены на странице товара. Несмотря на большой объем информации страница товара понятно и удобно организована.

Оптовым покупателям часто удобнее работать с заказом через excel-файл. В корзине есть возможность выгрузить в файл текущий состав товаров в корзине и добавить в корзину товары из файла.
Товары в корзине делятся на доступные, частично доступные (в наличии меньше, чем в загруженном excel-файле) и недоступные. Это помогает клиентам удобнее работать с большими заказами, загруженными через файл.

Чекаут одностраничный, ничего лишнего. Большое количество способов доставки удобно сгруппированы для облегчения выбора.

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

В визуальной коммуникации используется фирменный персонаж — Дон Баллон. Его можно найти на главной, в пустой корзине, при пополнение счета в ЛК, в лоадере и множестве других мест.

--------

Task
The project had previously undergone a poor redesign which incorporated a number of usability failures and arguable visual solutions. As a result, the majority of B2B-clients continued using the old version of the website.
Don Ballon’s specialists refreshed the corporate style and contacted us in order to relaunch the online-store with the brand-new design prioritized in usability.


Solution
We analyzed consumer behaviour at both versions of the website as well as traffic report and other analytical data. Beside that, we had a number of interviews with Don Ballon’s Sales Department and figured out the way customers choose items, what frequently asked questions they make and what information customers should know before choosing goods. All the collected data was taken into account when forming the structure and navigation of the new site.

We completely restructured the home page and added theme-based collections of goods for the upcoming holidays. Wholesale buyers should know Don Ballon’s official representative companies in their regions that’s why we added that information on the home page: when one clicks on the required region on the map, the relevant information about a local representative (which is synchronized with 1C local ERP system) pops up. For those who struggle to navigate maps there is a text region search above the map performing the same function.

Peculiarities of the company goods required providing a great amount of information in the goods list item cards — old and new prices, discount percentage, unit price (for goods sold in packs), marketing labels, information labels, manufacturers, country of origin, number of items when added to the cart etc.
At the same time item cards should not look overcluttered whereas the catalog should be user-friendly. And we succeeded in solving the task!

Balloon shapes have different names, but common users are not aware of those special terms, however exactly the shape turns out to be the key search criteria. In order to fix this problem we came up with an idea to use images instead of names in the search filter.
Some goods are available only in the retail shops of the brand. The catalog enables customers to filter goods not only according to the properties, but also availability in each shop.

The purchase process analysis demonstrated a frequent customer urge to buy complimentary items when choosing originally requested goods in order to create a matching composition of similar color or collection. This information is provided on the item page together with availability, properties and other relevant data. Despite the massive amount of information item pages are visually attractive and user-friendly.

Wholesale buyers often tend to process orders via Excel-files. The cart provides an option of downloading the current cart nomenclature in Excel and adding items to the cart from it.
Items in the cart are divided into available, partially available (the number in the uploaded Excel-file is more than that available in shops) and unavailable. This helps clients to facilitate work with massive orders uploaded with the file.

One-page checkout is nice and neat. A vast number of delivery methods are grouped for customers’ convenience.

Frontend performance has been prioritized while working on the project. All the images are postloaded and get downloaded only upon getting into viewport, sliders are initialized only upon getting into viewport and stop automatic scrolling upon exit, only scripts working on the particular page are loaded additionally etc.

Don Ballon is a corporate character used for visual communication. It can be found on the home page, in the empty cart, when topping the personal account, in the loader and many more places.

Прочая информация о кейсе

------
English case description is in https://docs.google.com/document/d/1gUKLOJUNpHggjItT9dFdqZaRI3vXyZOAPq8xBsQmXv0/edit?usp=sharing
------


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

Мы провели полный редизайн интернет-магазина: разработали новый визуальный стиль платформы и перепроектировали все интерфейсы с упором на usability.

--------

Don Ballon is a major wholesale supplier and manufacturer of air balloons, partywear and equipment for decoration and trade.

We have fully reinvented the online-store by developing the new visual style of the platform and redesigning all the interfaces with the focus on usability.

Скриншоты