CONCEPT — Профессиональная косметика для волос

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

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

• 1. Удобно и доступно для пользователя предоставить необходимую информацию по ассортименту, технологиям использования и др. 2. Показать какие преимущества получит потребитель работая с Concept. 3. Мотивировать потребителя начать работать с Concept. 4. Подключить средства web-аналитики. 5. Создать сайт с «заделом» на будущее — с возможностью, в дальнейшем, добавить мультиязычность. 6. Создать сайт с учетом элементов фирменного стиля бренда Concept (который на момент запуска разработки был еще не до конца закончен, но это не помешало). 7. Создать сайт с нормальной адаптивностью – должен отлично смотреться как на больших мониторах, так и на дисплеях телефонов. 8. Обучить сотрудников заказчика базовым навыкам использования CMS, для того, чтобы базовые операции по добавлению и обновлению контента они могли производить самостоятельно.

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

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

Интерактивные прототипы, или как их еще называют wireframe нужны для того, чтобы:

• продумать показать все интерфейсы и их состояния;
• продумать наиболее оптимальное расположение элементов;
• понять какие элементы есть, чтобы сделать UI-kit в дальнейшем;
• продумать все формы/их состояния;
• показать клиенту как будут располагаться элементы на страницах и как будет происходить взаимодействие пользователя с сайтом.

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

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

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

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

Верстка и программирование

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

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

Проблема была только в том, что выбранная заказчиком лицензия «1С-Битрикс Стандарт» такого функционала не имеет. Пришлось выкручиваться и создавать свою.

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

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

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

• инструкции по использованию;
• рекламные материалы;
• видео-материалы;
• записи вебинаров по этому продукту;
• палитры оттенков.

А еще, дополнительные связи есть на этом сайте не только у товаров, но и у товарных линеек (разделов). При этом, поддерживается полноценная логика наследования. Это было нужно для того, чтобы дать возможность, более подробно познакомиться с косметическими линиями продукции не сильно перегружая обычных пользователей лишней информацией, но и не обделяя профессионалов, которым важны технические нюансы – на страницах сайта в контенте страниц показываем только самое важное, а все остальное «убираем» в другие типы контента – pdf, графика, видео и «прилинковываем» к товару или целиком разделу.

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

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