свежий кейс
SHINGLAS — новый сайт для топовой компании
Иногда полезно получить проект, который выжимает из менеджеров буквально все соки и заставляет их работать на пределе своих возможностей. Сразу становится ясно, готова ли студия к встрече с особо крупным заказчиком.
Гибкая черепица SHINGLAS — это бренд холдинга «ТехноНИКОЛЬ», входящего в первую сотню списка Forbes по объемам годовой выручки. Его штат насчитывает почти 7000 человек, отличается масштабной иерархией и системой подразделений. Наш проект тщательно согласовывался внутри этой большой компании, поэтому требования к разработке довольно часто менялись и уточнялись. И если бы не грамотная постановка процессов в нашей студии, они бы просто погребли нас под собой.
Задачи
Нам нужно было не только дать наглядное представление о продукте и создать в голове у пользователя четкую ассоциацию «гибкая черепица = SHINGLAS», но и свести на сайте разнообразную целевую аудиторию — архитекторов, подрядчиков, торговых представителей и простых покупателей — сделав его одинаково удобным и информативным для всех.
В итоге на нас свалилось гигантское количество контента. Его предстояло как-то распределять по сайту и следить за тем, чтобы самая важная информация была всегда на видном месте. О масштабе проекта и сложности этой задачи можно судить уже по эпичному Mind Map.
Мы согласовывали мельчайшие детали — например, заголовки на прототипе, порядок пунктов меню, размещение логотипов в шапке. Несколько раз меняли цвета бокового меню, переделывали фотографии в слайдере на главной и меняли в нем подсветку при наведении... В случае с топовыми компаниями по-другому, похоже, и не бывает — каждому заинтересованному лицу важно свое.
Ирина
Руководитель проекта
Дизайн
Мы разработали несколько оригинальных концепций для главной страницы, от интерактива до слайдера с крутыми фотографиями. Согласование макетов происходило в несколько этапов: сначала мы утверждали их с подразделением маркетинга, затем дизайн уходил на согласование дальше — всем заинтересованным в проекте лицам. Всего их было больше десяти. Для нас это был полезный опыт!
Первая концепция представляла собой испытание для черепицы: можно было проверить ее на устойчивость к снегу, дождю и огню. Все эти эффекты вызывались по клику пользователя и сопровождались красивой анимацией.
Алексей
дизайнер
В какой-то момент мы предложили вставить на главную видео, и в итоге туда попал рекламный ролик «ТехноНИКОЛЬ». Мы также дополнили его триггерами, разработанными другим подрядчиком, но обязательными к использованию. Последние концепции мы защищали уже лично в московском офисе заказчика. Успешно!
Утвержденный вариант главной страницы: видеоролик с триггерами
Можно идти далее. В каталоге есть 4 вида продукции: 1-, 2-, 3-слойная черепица и комплектующие. Мы хотели представить ее не просто в виде фотографий и сопроводительного текста, но так, чтобы пользователь постепенно открывал для себя преимущества продукта и знакомился с ним.
Но самое сложное и важное — это сервис подбора черепицы. Он позволяет наглядно увидеть сочетание всех видов гибкой черепицы SHINGLAS с различными фасадами, комбинировать их цвета, подбирать к ним окна и водостоки.
С виду вроде бы ничего особенного, просто симпатичная картинка, но стоит заглянуть чуть глубже...
Разработка
Конструктор состоит из нескольких слоев, как гамбургер: отдельно рендеры крыш, фасадов и остальных частей дома — водостоков, вентиляции, окон. Всего здесь несколько сотен картинок, которые собирались нами вручную. Мы поджали их под размер сайта и оптимизировали, так что теперь конструктор работает довольно быстро. Также у пользователей есть возможность распечатать результат или сохранить получившуюся картинку.
Иван
Руководитель отдела программирования
Хотите узнать, как выглядит фасад из красного клееного бруса с белыми окнами, синим водостоком и однослойной классической черепицей оливкового цвета? Легко!
В паре с конструктором создана функция подбора климатических условий для использования черепицы (вообще-то они связаны с регионом пользователя и определяются автоматически, но их можно отредактировать и вручную, выставляя параметры влажности, яркости солнца и ветровой нагрузки, для получения более точных рекомендаций). Такой фишки нет ни у кого из конкурентов «ТехноНИКОЛЬ»!
Для подробного и компактного рассказа о черепице мы решили сделать инфографику. А чтобы довести ее до совершенства, некоторым в студии пришлось вспомнить университетские годы.
Здесь есть анимация: сектор окружности меню закрашивается по движению курсора. И я высчитывала угол, на который необходимо закрасить сектор, в зависимости от его, курсора, позиции. Расчеты заняли 8 страниц! Кто-то даже сказал, что мой блокнот для заметок больше похож на тетрадь по физике.
Дарья
Разработчик
На сайте также работает определение города по IP, что не совсем типично для корпоративного проекта. Это было нужно не только для фильтра климатических условий, о котором мы уже говорили, но также для отображения региональных новостей и событий и наконец для того, чтобы пользователь мог посмотреть адреса и контакты торговых партнеров, архитекторов и подрядчиков «ТехноНИКОЛЬ» SHINGLAS в своем городе. Всего в разделе «Контакты» около 2000 разных объектов!
SHINGLAS — это большой, сложный и дорогой нам проект. Словами всего и не передать, смотреть надо.