jestei pool
- арт-директор
- ui/ux лид
- синиор графический дизайнер
музыкальный сервис для диджеев, музыкальных редакторов и продюсеров. главный российский диджейский пул с музыкальной библиотекой для подготовки к выступлениям.
артдирекшн сервиса
- анализ конкурентов, дизайн-систем и трендов изучение лучших практик, внедрение избранных решений в дизайн-систему сервиса и адаптация их под контекст и аудиторию.
- разделение аудитории клубные и ивент-диджеи получили отдельную сепарацию визуального языка.
- ребрендинг логотип, цветовая палитра, визуальная система, коммуникация с разными аудиториями.
- цветовая система тарифы, аудитории и сценарии получили акценты, контрасты и навигационную логику.
- новый визуальный язык ии-арты, иллюстрации, 3d-леттеринг, метафоры, ирония, фотореалистичные изображения диджеев, разнообразие форм, текстур и подходов к созданию контента, а также различные цвета для разных продуктов.
- иконки и графические метафоры формы, текстуры, коллажи, баннеры и правила оформления материалов.
- редполитика и коммуникационная платформа tone of voice, рассылки, подсказки и оповещения.
- легализация шрифтовой политики бренда подбор, покупка и внедрение лицензированных шрифтов.
- внедрение нейросетевых инструментов легализация подхода к созданию изображений для плейлистов и промо материалов.
разработка ui/ux-стратегии сервиса
- редизайн раздела event упрощение навигации, реструктуризация плейлистов, создание отдельной ленты треков для раздела, проектирование и дизайн отдельных поисковых инструментов.
- упрощение архитектуры меньше вложенности, бесполезных кликов и тупиковых маршрутов.
- редизайн системы фильтрации и поиска прогрессивная трёхуровневая фильтрация для каждого из продуктов.
- прогрессивные фильтры отдельные сценарии фильтрации для разделов event и record pool.
- адаптивная логика проектирование, внедрение горизонтального скролла и разных типов модульных сеток.
- инструменты продаж рассылки для реанимации клиента, виджеты и поп-апы с предложением апгрейда подписки, дополнительные пейволы, посадочные страницы и модульная система лендингов.
- экосистема лендинговых страниц редизайн и масштабирование страниц для разных аудиторий.
- проектная документация внутренние брифинги, карты сценариев, документация и справочная информация для команды.
- взаимодействие с командой разработки консультирование, брифинги, ревью, контроль соответствия макетам и написание кода для анимированных организмов и лендинговых страниц.
- дизайн-система проекта проработка, чистка и внедрение современных решений.
дизайн-лид
- архитектура дизайн-системы сервиса проработка масштабируемости и преемственности внутри команды сайта, креативного отдела, графических дизайнеров, копирайтеров, редакторов, разработчиков и кураторов продуктовых направлений сервиса.
- прототипы и новые инструменты поиск и внедрение новых инструментов, технологий и подходов для создания дизайна и графики, а также обучение команды работе с ними.
- дизайн-сущности и прототипы обложки, баннеры, иконки, иллюстрации, коллажи, 3d-графика, рекламные материалы, оформление плейлистов, css и canvas-анимации, видеогенерации, монтаж, субтитры и другие материалы с дальнейшей передачей.
- постановка задач для дизайнеров разъяснение контекста, объяснение устройства сервиса и аудитории, бизнес-задач креативов, ограничений и ожидаемого результата.
- обучение дизайнеров визуальная система, логика и язык бренда.
- ревью и анализ проблем ревью ux-решений, проверка выразительности, соответствия дизайн-системе, графического дизайна и интерфейса сервиса.
- контроль качества макетов проверка перед передачей в продакшн.
Ребрендинг
Анализ пользователей и конкурентов позволил взглянуть на бренд по-новому. Благоджаря этому мы изменили логотип, цветовую палитру, разработали новую коммуникационную платформу -- фирменный стиль, редакционную политику, и освежили портрет бренда в глазах пользователей. Бренд заговорил на новом языке, стал более современным, выразительным и заметным. Дизайн стал бодрым и эмоциональным, в соцсетях появились видео ролики, у бьренда появился фирменный шрифт, голос и лица.
новый логотип
логотип стал самостоятельным визуальным объектом для интерфейса, промо, продуктовых карточек, подписок и анимаций. у него появились объём, шрифт, версии, разделение по аудиториям, перспектива и ощущение движения.
логотип в дизайн-системе
он перестал быть просто знаком и стал полноценной частью визуальной системы. появилась логика версий, язык стал масштабируемым, а бренд стал заметнее.
новая эмблема
- знак был собран заново, сохранив исходный вид его читаемость была увеличена и теперь он читается в любом размере
- логотип получил чистый и современный вид, он стал плотным и осязаемым, его форма стала похожей на диск диджейского пульта, сохранив при этом геометрическую основу
- каждый элемент нового логотипа был проработан итаким образом что логотип получил ритм, вес, символ стал уравновешенным и при этом динамичным
новый шрифт
- бренд приобрел лицензионный шрифт druk wide на основе которого было сделано брендовое название. геометрия названия сочетается с геометрией логотипа, эмблема и текстовое название стали узнаваемыми и комбинируемыми характерными элементами фирменного стиля работающими в паре и по отдельности
- брендовый шрифт используется для акцентов внутри интерфейса и для коммуникации любого уровня: от заголовков на сайте и до постов в соцсетях и рекламных материалах бренда
масштабируемость
- логотип и брендовый шрифт позволили использовать айдентику в любых носителях и размерах. бренд теперь легко адаптируется и к постам в соцсетях и к иконкам любого размера для десктопных и мобильных устройств, фав-иконок, фирменных иконок внутри сайта, визиток, печати на футболках и плакатах
- логотип используется и как 3д модель и как плоский свг ассет и как декоративный элемент для обложек и как самостоятельная визуальная единица для обложки трека плаката футболки или анимации
новые цвета
при мне цветовая система стала шире: кроме оранжевого у бренда появились ещё три опорных цвета, а внутри интерфейса возникло разделение по аудиториям, продуктам, состояниям и сценариям. раньше визуальный язык сервиса почти полностью держался на серо-оранжевой палитре и технических акцентах
- gold-drop-500 #f18200
- gold-drop-100 #ffddb4
- gold-drop-300 #ffb45a
- gold-drop-700 #b65b00
- dodger-blue-500 #157aff
- dodger-blue-100 #bbd8ff
- dodger-blue-300 #62a6ff
- dodger-blue-700 #0d4c9f
- pear-500 #d1e231
- pear-100 #f1f8b8
- pear-300 #e3ef68
- pear-700 #899519
- biloba-flower-500 #b2a1ea
- biloba-flower-100 #e2daff
- biloba-flower-300 #c8bcf4
- biloba-flower-700 #74649f
старая палитра
раньше визуальный язык сервиса почти полностью держался на серо-оранжевой палитре и технических акцентах. цвет работал как декоративный акцент, а не как полноценный инструмент навигации и разделения.
цвет и аудитория
между ивент-диджеями и клубными диджеями есть устойчивое напряжение, которое мешает сервису работать с обеими сразу. мы сгладили углы с помощью цвета. раздел для ивент-диджеев и все связанные с ним креативы и инструменты получили яркий и насыщенный грушевый цвет, связанный с весенней и летней энергетикой дневных мероприятий, где ивентщики работают чаще. клубные диджеи сохранили за собой оранжевую палитру.
общие эксклюзивные продукты получили синий цвет, а новые экспериментальные инструменты используют лавандовый цвет: который хорошо подходит и к оранжевой и к грушевой теме.
разделили аудитории на три группы и добавили цветовую палитру для каждой из них
- разгрузили интерфейс фильтра : вместо модалки где все было вперемешку создали раскрываемую вариативную панель фильтрации в контексте ленты
- прогрессивно разделили панель на три типа : мини фильтр, базовый фильтр и продвинутый фильтр
- изучили какими параметрами чаще пользуются
- разместили параметры в логическом порядке и разложили по версиям фильтра
внедрили отдельные цветовые решения для акцентов и экспериментальных функций
- основная цветовая палитра не мешает активно использовать другие цветовые сочетания
- для сезонных акций и коллекций подбираем свои цветовые палитры, например подборки только русской музыки опираются на многообразие фольклорных цветовых палитр и национальных узоров, а новогодние плейлисты используют зеленый цвет новогодней елки, красный цвет подарочной бумаги и сочетают их с холодными синими и голубыми цветами льда, снега и костюма снегурочки
отказались от светлой темы в пользу цветовых тем для продуктов
- вместо использования дневной и ночной темы мы внедрили цветовые темы для различных продуктов, чтобы лучше отражать их функциональность и аудиторию.
Редакционная политика сервиса
Вместе с редактором и командой бренда разработали комминуникативные принципы и правила бренда.
01 / 25
Пользовательский опыт
Опредлеление ключевых пользователских путей, жалоб, потребностей и целей позволило определить стратегию развития интерфейса. Мы построили из разрозненных макетов полноценную дизайн систему сервиса, создали ключевые cjm для поиска музыки, оформления и апгрейда подписки, упроситили навигацию в разделах с коллекциями плейлистов, создали новый раздел для ивент-диджеев, прорабьотали фильтртационые инструменты и упроститлт навигацю при помощи простых правил : использования цвета, формы и понятных текстов. Вместе с этим единственный лендинг сервиса превратила в экосистему, со страницами для таргетированной роекламы, превью отдельных треков, интерактивными элементами, знакомящими пользователей с продуктами сервиса. Мы создали пейвол и систему триггеров для апдейта подписок, систему рассылки для реаинимации клиента, внедрили в лендинги анимации, упростили навигацию и проработали фильтр и отдельные виды карточек плейлистов, инструментов дял прослушивания и поиска музыки.
оформили новый дизайн тарифов
создали превью-страницы треков для рекламных рассылок и шеринга: диджеи могут отправлять ссылки на сайт и быстро показывать конкретные треки.
подзаголовок списка
- пункт списка
- пункт списка
подзаголовок списка
- пункт списка
- пункт списка
подзаголовок списка
- пункт списка
- пункт списка
карта пользовательских маршрутов
отдельный экран показывает, как пользователь проходит путь от первого касания до выбора трека, просмотра превью, перехода на сайт и дальнейшего действия внутри сервиса.
Создали системы фильтрации
добавили принципы прогрессивной вложенности, разделили инструменты на базовые и продвинутые и дали возможность выбора.
продвинутый и базовый фильтр
- разгрузили интерфейс фильтра : вместо модалки где все было вперемешку создали раскрываемую вариативную панель фильтрации в контексте ленты
- прогрессивно разделили панель на три типа : мини фильтр, базовый фильтр и продвинутый фильтр
- изучили какими параметрами чаще пользуются
- разместили параметры в логическом порядке и разложили по версиям фильтра
разные ленты треков для разных аудиторий
- создали отдельную ленту для аудитории ивент-диджеев, потому что подход к поиску радикально отличается от сценариев клубного диджеинга.
- изучили сценарии поиска и потребности ивент диджеев и разработали для них отдельные фильтрационные сценарии, новые свойства, убрали то что им не нужно и добавили то чего не хватало при поиске и фильтрации
инструменты для специалистов
- разработали новый дизайн для фильтрации треков по тональности : визуализировали кольцо камелот и классическую тональную сетку на основе квинто-квартового круга вместо решетки
- переработали систему исключения параметров, нарисовали новые иконки и визуальные подсказки для поиска и фильтра
упростили запутанную навигацию
сложные разделы получили понятную иерархию: вложенность осталась там, где помогает ориентироваться, главное и вторичное разделились, а сложные разделы начали собираться из простых и понятных блоков.
распаковали лишнюю вложенность плейлистов при помощи папок и коллекций
- разобрались какие плейлисты всегда должны быть на виду а какие используются редко
- собрали главные плейлисты в коллекции и папки, котоыре доступны сразу на страницах
- распаковали многократную вложенность и пересобрали плейлисты опираясь на их значимость для диджеев и актуальность в рамках сезона
- придумали новые названия для всех папок, коллекций и подборок, сопроводили каждый плейлист и папку описаниями
- для важных сезонных и нузжных всегда колелкций придумали свое оформление: свойи цвета, свои символы и паттерны
зрительно разделили коллекции с плейлистами от плейлистов с треками
- коллекции с плейлистами остались только у крупныхъ сценариев, например у гурппы свадебных плейлистов
- коллекции собрали в бенто-грид показывающий какие в нем плейлисты и описывающий текстом что внутри
- коллекции напротив показывают обложку и выстраиваються в логические или сценарные группы
- важные сезонные и новые плейлисты выделяются позиционированием, размерами и собираются в отдельные ленты
разделили карточки по ролям
- плейлисты от артистов, авторские паки и и коллекции от одного человека стали круглыми
- алгоритмические, тематические и жанровые плейлисты стали квадратными или прямоугольными
- теперь карточки ритмично выстраиваются в плитки, а это задает ритм сетке
- начали раскрашивать некоторые карточки, акцентируя внимание на их единстве или значимости
система лендинговых страниц
создали новый лендинг для клубных диджеев и ивент-диджеев: разделили сценарии, усилили первое знакомство с сервисом и собрали страницу так, чтобы она работала как промо, навигация и вход в продукт.
Создали раздельные лендинги для клубных диджеев и ивент-диджеев
Для эффективного продвижения мы создали отдельные посадочные страницы
Удобство
- Стало удобно запускать кампании
- Стало удобнее направлять клиента
- Стало проще отслеживать результаты
Гибкость
- Модули собираются в экосистему, которую легко масштабировать
- Лендинги легко адаптируются под разные кампании, они взаимозамеяемы
- Изменять сообщение можно практически моментально
Точность
- Модуль лендинга собирается под любую рекламную цель
механики апгрейда
анимации начали показывать состояния, переходы и сценарии, а не просто украшать интерфейс.
промо-организмы
создали превью-страницы треков для рекламных рассылок и шеринга: диджеи могут отправлять ссылки на сайт и быстро показывать конкретные треки.
виджеты
анимационные блоки показывают, как сервис может двигаться: по дуге, по диагонали, горизонтальным потоком, через карточки и смену состояний.
модалки
движение стало повторяемым приёмом презентации продукта и усилило ощущение музыкального ритма внутри интерфейса.
Графический дизайн
3д и коллажи
геометрия стала повторяемой, компоненты — более узнаваемыми, а визуальная система получила основу для масштабирования на новые разделы, продукты и сценарии. карточки, обложки, баннеры, кнопки и интерфейсные блоки начали работать в одном пластическом языке.
объём
- знак, буквы и карточки получили физичность
- появилась глубина для промо и интерфейса
вариативность
- сцены можно быстро адаптировать под аудиторию
- один язык держит разные продукты
пайплайн
- генерация, ретушь и 3d стали частью системы
- материалы проще поддерживать сериями
графический дизайн и микс медиа
одна геометрическая логика связала карточки, обложки, промо и интерфейсные состояния без ощущения разрозненных решений.
быстрый скетчинг
- игривые рисунки веселят и радую
- иллюстрации привлекают внимание
- ирония и юмор укрепляют связь
иллюстрации нейросетями
- поработали со всеми моделями и инструментами, существующими на сегодняшний день
- обучали свои lora и тюнили модели
- простроили собственные пайплайны в облаке и на локалке
- использовали и коммерческие и опенсорс модели и инструменты
паттерны
- расширили пластический инструментарий
- геометрия стала последовательной, формы подчеркивают сущность и разделяют их
- заговорили с пользователем на языке плоскостей и пространственных метафор