46 labs case study: telecom platform redesign

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

Все, что вам необходимо знать

Клиент

46 labs — это компания по разработке программного обеспечения, предоставляющая современное ПО и оснащение для телекоммуникационной отрасли. Это позволяет повысить качественный уровень сети голосового управления с использованием machine learning и автоматизации.

Цель

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

Решение

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

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

The workflow

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

Как только структура продукта, его макет, цветовое решение и типографика стали ясны, появился нюанс с контентном. Его было слишком много. С согласия клиента мы его немного поправили, это решало проблему, но не целиком. Для того, чтобы оформление сайта стало более визуально привлекательным, информативным и структурированным мы решили использовать блоки с фиксированным положением при скролле. Так мы решили задачу с большими массивами текста. Просмотреть как это выглядит вы можете в нашем кейсе на Behance.

Особое внимание мы уделили шрифтовой части, где нужно было повысить уровень читабельности. Выбор был сделан в пользу шрифта Muli Regular, а для заголовков выбрали Poppins Black. Они без засечек и хорошо гармонируют между собой, идеально подходят для выполнения поставленной задачи.

К дизайну здесь было меньше всего вопросов, мы крайне быстро нарисовали концепт. Цветовое решение было утверждено, placeholders размещены и это позволяло начинать работу с иллюстрациями и иконками.

Воздушный шар с логотипами продуктов.

Искусство создания иллюстраций

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

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

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

Эта иллюстрация символизирует успешное сотрудничество, а окно с кнопками служит прекрасным призывом к действию.

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

Логотипы продуктов

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

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

Каждый элемент продукта имеет свое цветовое решение, которое используется в иконках.

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

Результат

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

С помощью кастомных иллюстраций и брендинга были расставлены акценты на сложных процессах телекоммуникационного продукта. Это помогло приблизить клиента к своей целевой аудитории и в довершение — эстетически привлекательно оформить визуальную часть.