Marketolog Case - Preview.webp

Взяли под ключ оформление мероприятия, подготовили панорамное видео на экран 270°,  сделали интро-ролики и кей-вижуал для клиента.

<div>
<h3>Ну очень большая конференция</h3>
<p>Масштабное мероприятие от&nbsp;экосистемы МТС&nbsp;для&nbsp;специалистов индустрии&nbsp;&mdash; презентация мультифункционального сервиса &laquo;МТС Маркетолог&raquo;. Конференция проходила в&nbsp;зале МТС Live Холл площадью 4000&nbsp;м2, который вмещает 8500&nbsp;посетителей. Все визуальные материалы сделали мы&nbsp;&mdash; студия Mish.</p>
</div>
</div>

<video src="/uploads/Video_MTS_Mish_full_hd_1e218e6497.webm"
loop
autoplay
muted 
playsinline></video>
</div>

<div>
<h3>Дизайн, продакшн и&nbsp;постпродакшн</h3>
<p>Мы&nbsp;полностью отвечали за&nbsp;визуальное сопровождение конференции и&nbsp;масштабные интро-ролики с&nbsp;многослойной режиссурой. Перед нами стояла задача создать множество разных сущностей, которые сообща работали бы в&nbsp;рамках конференции.</p>
</div>

<img src="/uploads/02_280914a268.webp">

<div>
<h3>Маркетолог в кубе</h3>
<p>Куб как метафора многогранности сервиса стал основным дизайн-элементом конференции. На&nbsp;гранях куба и&nbsp;вокруг него размещены иконки, которые отражали разные возможности сервиса &laquo;МТС Маркетолог&raquo;. Куб и&nbsp;окружающие его элементы связывает единая сущность&nbsp;&mdash; фирменный провод экосистемы МТС.</p>
</div>
</div>

<video src="/uploads/kub_2625f8593e.webm"
loop
autoplay
muted
playsinline></video>
</div>
</div>

<img src="/uploads/04_Updated_d697162f19.webp">
</div>
<div>
<h3>Гигантские проекции</h3>
<p>Каждый из&nbsp;блоков конференции начинался со&nbsp;светового шоу и&nbsp;проекции-тизера на&nbsp;огромном экране, который по&nbsp;периметру охватывал зал. Объем, масштаб, многомерность&nbsp;&mdash; так мы&nbsp;сформулировали идейную и&nbsp;образную составляющую шоу. Основной визуальный элемент был основан на&nbsp;метафоре Big Data, которую визуализировали в&nbsp;виде матрицы из&nbsp;иконок сервисов экосистемы МТС. Мы&nbsp;делали не&nbsp;просто графику&nbsp;&mdash; с&nbsp;помощью видео и&nbsp;звука создавали многомерное пространство, которое погружало зрителя в&nbsp;происходящее и&nbsp;отражало масштаб события.</p>
</div>
</div>

<video src="/uploads/10_Proj_Video_a1d67e63d7.webm"
loop
autoplay
muted
playsinline></video>
</div>
</div>
<img src="/uploads/06_3323acc442.webp">
</div>
<div>
<h3>Хорошо забытое новое</h3>
<p>Создали новый визуальный язык из&nbsp;существующих элементов бренда МТС. С&nbsp;помощью активного использования фирменного красного цвета, новых градиентов, монтажа, звука и&nbsp;пост-обработки сформировали новый образ, развивающий идеи бренда в&nbsp;неожиданном направлении.</p>
</div>

<img src="/uploads/07_9c112fac57.webp">

</div>
<div>
<h3>Что было дальше</h3>
<p>Мероприятия МТС не&nbsp;закончились одной конференцией (пускай даже очень большой). После этого проекта клиент пришел к&nbsp;нам за&nbsp;видеороликом для следующей конференции. Сейчас он&nbsp;на&nbsp;этапе продакшена.</p>
</div>

Marketolog Case - Cover.webp

Конференция МТС Маркетолога 

vivusAnim2.webm

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


<div>
<h3>Международный заказчик</h3>
<p>Vivus&nbsp;&mdash; международный кредитный продукт, который пришел в&nbsp;Mish за&nbsp;френдли дизайном для мексиканской аудитории. Мы&nbsp;применили современные практики и&nbsp;предложили приложение, которое легко масштабируется на&nbsp;аналогичные продукты заказчика.</p>
</div>

<img src="/uploads/VIVUS_Mish_1_7e561e7bee.webp">

<div>
<h3>Бизнес-задача через дизайн</h3>
<p>Отрисовать мобильное приложение&nbsp;&mdash; задача для студентов дизайн-курсов. Повысить конверсию в&nbsp;повторную заявку на&nbsp;банковский продукт и&nbsp;увеличить количество кредитных клиентов&nbsp;&mdash; бизнес-задача, которую можно решить через дизайн. В&nbsp;первую очередь мы&nbsp;создавали удобный интерфейс: он&nbsp;мягко направлял пользователя по&nbsp;флоу к&nbsp;нужной для клиента сделке.</p>
</div>

<img src="/uploads/VIVUS_Mish_2_f2cc0340a5.webp">

<div>
<h3>Из точки А в точку Б</h3>
<p>Чем проще взять кредит&nbsp;&mdash; тем с&nbsp;большей вероятностью его будут брать. Нам было важно создать интуитивно понятный интерфейс. Расставить визуальные акценты и&nbsp;ключевые точки, чтобы на&nbsp;каждом этапе у&nbsp;клиента не&nbsp;было вопросов, что сейчас происходит на&nbsp;экране смартфона. Мы&nbsp;проработали систему нотификации, чтобы подсветить пользователю проблемные точки. Приложение получилось прозрачным, без мелкого текста и&nbsp;скрытых юридических тонкостей.</p>
</div>

<img src="/uploads/VIVUS_Mish_3_6017dd223e.webp">

<div>
<h3>Мексиканский вайб</h3>
<p>В&nbsp;зарубежных проектах важно не&nbsp;экстраполировать местный опыт на&nbsp;иностранный продукт. Мы&nbsp;учли менталитет мексиканских пользователей: они склонны бросать заполнение длинных форм заявки на&nbsp;середине пути и&nbsp;могут вернуться к&nbsp;заполнению только спустя несколько дней или даже недель. При этом регистрация, по&nbsp;требованиям мексиканского законодательства, остается довольно длинной. Мы&nbsp;разбили всю обязательную информацию на&nbsp;шаги, чтобы внимание пользователя не&nbsp;терялось и&nbsp;он&nbsp;мог завершить начатое сразу.</p>
</div>

<img src="/uploads/VIVUS_Mish_4_c167690781.webp">

<div>
<h3>Не школьный калькулятор</h3>
<p>Продумали отдельную фичу&nbsp;&mdash; удобный калькулятор платежей. Здесь пользователь может настроить свой запрос по&nbsp;кредиту: сумму, частоту платежей, регулярность. Так он&nbsp;видит предварительные условия от&nbsp;организации и&nbsp;принимает обоснованное решение.</p>
</div>

<img src="/uploads/VIVUS_Mish_5_f096509dbd.webp">

<div>
<h3>Регресс — значит возможности</h3>
<p>Внутренней задачей было увеличить количество кредитов, которые пользователи закрывают без просрочки. Для этого в&nbsp;интерфейс добавили регресс-бар, на&nbsp;котором отмечалось количество дней&nbsp;&mdash; сколько осталось до&nbsp;даты платежа. Цвет прогресс-бара меняется от&nbsp;зеленого к&nbsp;ярко-оранжевому: чем меньше дней осталось, тем &laquo;опаснее&raquo; выглядит интерфейс. Когда платеж просрочен, система меняет цвет кнопки на&nbsp;акцентный, чтобы ярче подсветить состояние кредита.</p>
</div>

<img src="/uploads/VIVUS_Mish_6_e0324d21d8.webp">

VIVUS Mish ¦ЯTА¦¦¦-TМTО  2.webp

VIVUS Mish Превью  3.webp

Vivus Mexico

Торги 223.webp

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

<div>
<h3>Так, чтобы было стильно</h3>
<p>&laquo;Торги 223&raquo;&nbsp;&mdash; крупная торговая площадка с&nbsp;технологичным профилем и&nbsp;разнообразными направлениями деятельности. Клиент захотел сделать корпоративный мерч&nbsp;&mdash; стильный, модный и&nbsp;молодежный. И&nbsp;никак не&nbsp;связанный с&nbsp;фармой.</p>
</div>

<img src="/uploads/TRG_1080_h_720_8e1089a8e9.png">

</div>
<div>
<h3>Мерч и стритвир</h3>
<p>&laquo;Торги 223&raquo; хотели сделать яркий, носибельный и&nbsp;необычный мерч. Такой, чтобы его хотелось носить. Поэтому мы&nbsp;решили пойти не&nbsp;от&nbsp;дизайна, а&nbsp;от&nbsp;фэшн. Вдохновились собственными любимыми брендами, которые могут в&nbsp;уличную моду, и&nbsp;предложили клиенту концепцию современного мерча, не&nbsp;похожего на&nbsp;мерч.</p>
</div> 

<img src="/uploads/TRG_1080_h_720_1_a3bad91551.webp">

</div>
<div>
<h3>Айтемы, а не вещи</h3>
<p>Нестандартному мерчу нужно нестандартное воплощение. Поэтому мы&nbsp;сразу отказались от&nbsp;карандашей и&nbsp;футболок скучных фасонов. Вместо этого предложили более яркие и&nbsp;говорящие сами за&nbsp;себя айтемы. Выбрать из&nbsp;них клиенту было сложно. Мы&nbsp;делали ставку на&nbsp;сочетание спорт-шика и&nbsp;технологичности, поэтому предлагали для первой партии зарядное устройство, шелковый платок, рубашку&nbsp;&mdash; да, все вместе.</p>
</div> 

<img src="/uploads/TRG_1080_h_720_2_85ee775d70.webp">

</div>
<div>
<h3>Реалии производства</h3>
<p>Итоговые айтемы не&nbsp;слишком, но&nbsp;отличались от&nbsp;изначальной концепции: реалии производства не&nbsp;удалось обмануть. В&nbsp;результате в&nbsp;первой партии мы&nbsp;сделали: оверсайз худи и&nbsp;футболку, бутылку и&nbsp;термос-чашку для&nbsp;воды, вариации ежедневников и&nbsp;календарь, брендинг для&nbsp;умной колонки, непродуваемую жилетку, шоппер.</p>
</div>

<img src="/uploads/TRG_1080_h_720_3_0b2058e757.webp">

</div>
<div>
<h3>Лицо мерча</h3>
<p>В&nbsp;дизайне придерживались монохромных оттенков: черного и&nbsp;желтого, которые фигурировали в&nbsp;фирменном стиле &laquo;Торгов&raquo;. Вдохновившись уличной модой, добавили на&nbsp;мерч не&nbsp;только логотип и&nbsp;графические элементы, но&nbsp;еще отдельные слова и&nbsp;целые фразы.</p>
</div>
</div>

<img src="/uploads/TRG_1080_h_720_9_1b0cd266c2.webp">
<img src="/uploads/TRG_1080_h_720_4_e5fef33bc8.webp">

</div>
<div>
<h3>Из области типографики</h3>
<p>Технологичному бренду&nbsp;&mdash; технологичные материалы. На&nbsp;некоторых айтемах мы&nbsp;задумали светоотражающие элементы, на&nbsp;других&nbsp;&mdash; объемную, &laquo;высокую&raquo; бархатную печать и&nbsp;вышивку. На&nbsp;термокружках и&nbsp;блокнотах предложили сделать УФ-лаковое покрытие цвет в&nbsp;цвет: надпись и&nbsp;графические элементы в&nbsp;этом случае видны только при отражении света.</p>
</div>
</div>

<img src="/uploads/TRG_1080_h_720_6_151c32ea5d.webp">
<img src="/uploads/TRG_1080_h_720_7_41ff77c187.webp">

</div>
<div>
<h3>Не концепция, а жизнь</h3>
<p>Не&nbsp;одной идеей жив дизайн мерча. После разработки идеи мы&nbsp;дождались момента, когда физические айтемы доехали до&nbsp;нашего офиса. Пощупали их&nbsp;руками и&nbsp;сфоткали со&nbsp;всех сторон.</p>
</div>
</div>

<img src="/uploads/TRG_1080_h_720_8_f5b007b1f6.webp">

</div>
<div>
<h3>Новое развитие моды</h3>
<p>В&nbsp;ближайшее время &laquo;Торги 223&raquo; собираются заметно переработать первую партию мерча, сделать ее&nbsp;на&nbsp;более качественных материалах с&nbsp;запланированным нами форматом печати. После тестовой партии клиент собирается реализовать идеи на&nbsp;более качественном материале и&nbsp;выпустить все запланированные айтемы.

А&nbsp;в&nbsp;перспективе&nbsp;&mdash; масштабировать мерч из&nbsp;корпоративного в&nbsp;общедоступный. Потому что стритвер&nbsp;&mdash; это для всех, даже если на&nbsp;заднем фоне маячит фарма.</p>
</div>
</div>

обложка юольшая.webp

облога маленькая .webp

Мерч для «Торги 223»

exolveBlack3.webm

Собрали сайт для облачного решения по автоматизации бизнес-коммуникаций.


<div>
<h3>Кейс о кейсе</h3>
<p>МТС Exolve&nbsp;&mdash; это коммуникационная платформа, которая помогает компаниям взаимодействовать с&nbsp;клиентами через различные каналы: мессенджеры, соцсети, SMS, звонки.</p>
</div>

<img src="/uploads/IMG_Block_1_72dc69f709.webp">

</div>
<div>
<h3>Взгляд на экосистему</h3>
<p>Мы&nbsp;объединили общим визуальным стилем МТС все части платформы: сайт, комьюнити-площадку, кабинет интегратора и&nbsp;ЛК разработчика. Задача проекта&nbsp;&mdash; привлечь целевую аудиторию в&nbsp;продукт и&nbsp;перевести аудиторию сайта в&nbsp;категорию полноценных пользователей.</p>
</div> 

<img src="/uploads/IMG_Block_2_b5847f471c.webp">

</div>
<div>
<h3>Современный конструктивизм</h3>
<p>Изначально мы&nbsp;получили наброски брендинга. Потом предложили идею тетриса&nbsp;&mdash; она перетекла в&nbsp;формат конструктора.</p>
</div>
</div>

<video src="/uploads/exolve_Black_loop_x2_3dcf004828.webm"
loop
autoplay
muted
playsinline></video>
</div>
<div>
</div>
<div>
<h3>Персонализация и&nbsp;автоматизация</h3>
<p>Структурно и&nbsp;визуально мы&nbsp;выстроили проект вокруг концепции объединения разных функций продукта в&nbsp;близкие блоки. Здесь и&nbsp;проявляется идея конструктора: для конкретных целей бизнес может выбрать отдельные продукты, которые лучше отвечают его потребностям.</p>
</div>
</div>

<img src="/uploads/IMG_Block_3_7d6eeeebe3.webp">

</div>
<div>
<h3>Подсветили изюминку</h3>
<p>Конструктивистская форма визуальной концепции помогла подчеркнуть уникальные решения самой платформы. В&nbsp;плане пользовательской части многие сценарии выстроены по&nbsp;принципу блоĸ-схем, ĸвизов и&nbsp;модулей.</p>
</div>
</div>

<img src="/uploads/IMG_Block_4_c7e09ad0b1.webp">
</div>
</div>

<video src="/uploads/2560_b4103ef081.webm"
loop
autoplay
muted
playsinline></video>
</div>
<div>
</div>
<div>
<h3>Простор выбора</h3>
<p>На&nbsp;общем экране собрали информацию о&nbsp;тарифах и&nbsp;полный каталог услуг и&nbsp;партнеров. Такое решение поможет пользователям МТС Exolve быстро выбирать необходимые продукты и&nbsp;упрощать касание с&nbsp;клиентами.</p>
</div>
</div>

<img src="/uploads/IMG_Block_6_e90a863bdf.webp">

</div>
<div>
<h3>Разговоры о важном</h3>
<p>Отдельной сущностью стала коммуникационная платформа проекта. На&nbsp;ресурсе собрана информация для внедрения решений МТС Exolve: документация, кейсы, блог, календарь событий, форум. Так пользователям и&nbsp;разработчикам проще следить за&nbsp;обновлениями, задавать вопросы и&nbsp;подбирать для себя продукты, которые лучше сработали у&nbsp;коллег по&nbsp;нише.</p>
</div>
</div>

<img src="/uploads/IMG_Block_7_f4453c049c.webp">

</div>
<div>
<h3>Личный кабинет интегратора</h3>
<p>Кабинет интегратора&nbsp;&mdash; ресурс, предоставляющий возможность стать новым партнером, добавлять и&nbsp;управлять своими проектами на&nbsp;платформе, получать и&nbsp;учитывать вознаграждение.</p>
</div>
</div>

<img src="/uploads/IMG_Block_8_26fabddee9.webp">

</div>
<div>
<h3>Что было дальше</h3>
<p>Всего мы&nbsp;предоставили клиенту около 150 вариантов макетов. Сейчас платформа запущена, и&nbsp;в&nbsp;планах&nbsp;&mdash; ее&nbsp;расширение.</p>
</div>
</div>

Frame 2.webp

Сайт МТС Exolve

KTS mob cover 2.webp

Во второй раз создали визуальный облик для посадочных страниц IT-компании. И во второй раз сделали это успешно.


</div>
<div>
<h3>Технологичное бунтарство</h3>
<p>KTS — это IT-компания, которая занимается удобными, технологичными и функциональными решениями для начинающих стартапов и крупных корпораций.

Ребята обратились к&nbsp;нам за&nbsp;редизайном сайта, который до&nbsp;этого делали тоже&nbsp;мы, только в&nbsp;2021&nbsp;году. Со&nbsp;временем он&nbsp;устарел: ребята из&nbsp;KTS обнаружили в&nbsp;себе юношеское бунтарство и&nbsp;захотели подготовить подходящий по&nbsp;духу сайт.</p>
</div>
</div>

<img src="/uploads/KTS_cases_3_1c58ef5320.webp">

</div>
<div>
<h3>Подстраиваемся под обстоятельства</h3>
<p>Айдентику мы&nbsp;не&nbsp;разрабатывали, за&nbsp;него стоит сказать спасибо агентству embacy&nbsp;&mdash; получилось замечательно. С&nbsp;нас был только дизайн сайта. Команда из&nbsp;KTS пришла к&nbsp;нам с&nbsp;готовым гайдом и&nbsp;идеей, к&nbsp;которому нужно было применить удобный и&nbsp;функциональный&nbsp;UX вместе с&nbsp;ярким и&nbsp;самобытным дизайном.</p>
</div>
</div>

<img src="/uploads/KTS_cursors_3_d223c56714.webp">

</div>
<div>
<h3>Вы кто такие</h3>
<p>Важное преимущество обновленной страницы&nbsp;&mdash; это прозрачный образ самих KTS. Структура сайта собрана так, что сразу становится понятно, какие проекты выполняли ребята, с&nbsp;какими компаниями работали и&nbsp;для каких заказчиков будут полезны. 

Формат галереи продолжили в&nbsp;разделе с&nbsp;партнерами. При наведении появляются теги с&nbsp;направлениями клиентов в&nbsp;виде анимационных карточек.</p>
</div>
</div>

<img src="/uploads/KTS_footer_be040807af.png">

</div>
<div>
<h3>А что в подвале</h3>
<p>Команда смогла сделать его нескучным. Помимо контактной информации, которой в&nbsp;подвале никого не&nbsp;удивишь, мы&nbsp;&laquo;накидали&raquo; в&nbsp;лапы котика кликабельные лейблы, которые гиперссылками переносят либо на&nbsp;соответствующие части сайта, либо направляют дальше.</p>
</div>
</div>
<img src="/uploads/KTS_usability_3b6258eac3.png">

</div>
<div>
<h3>DevOps — это про порядок</h3>
<p>Помимо главной страницы мы&nbsp;работали над посадочной для DevOps-направления. Удобно и&nbsp;нативно настроили раздел с&nbsp;готовыми и&nbsp;решениями кейсами. Карточки меняются по&nbsp;автоскроллу, их&nbsp;сопровождает курсор, меняющий облик: то&nbsp;это привычная стрелка, то&nbsp;задорные глаза, то&nbsp;когтистая лапка. Все кейсы поделены на&nbsp;категории и&nbsp;отмечены тегами, по&nbsp;которым легче определять нишу компании.</p>
</div>
</div>
<img src="/uploads/KTS_illustrations_2_4867c0131b.png">

</div>
<div>
<h3>Не только котики</h3>
<p>Отдельно мы&nbsp;рисовали иллюстрации&nbsp;&mdash; с&nbsp;котиками и&nbsp;без. За&nbsp;основу взяли уже упомянутую айдентику, гайд и&nbsp;любовь клиента к&nbsp;животным.</p>
</div>
</div>

KTS desk cover 2.webp

Редизайн сайта KTS

PAN CLUB Main.webp

Из ювелирного бренда в ювелирный мультибренд


</div>
<div>
<h3>Ребрендинг</h3>
<p>Бренды приходят и уходят, а покупать и носить красивые ювелирные изделия хочется всегда. Это поняли в PanClub (бывшая Pandora Russia) и решили со сменой названия обновить и сайт — а еще позиционирование, но об этом позже.

К нам ребята пришли на «легкий» редизайн. Времени на разработку нового визуального тона бренда с нуля не было — команда занималась платформой всего 2,5 месяца. Поэтому мы сделали аудит текущих страниц и выбрали те, которые точно нуждаются в доработке.</p>
</div>
</div>

<img src="/uploads/Illustration_3_b99f6a2e90.webp>
<video 
src="/uploads/pan_Club_0fe1ab931f.webm"
loop
autoplay
muted
playsinline></video>
</div>

<div>
<h3>Корни</h3>
<p>При редизайне нельзя было ударяться в крайности и полностью сносить стиль, на котором основывался бренд раньше. Большая часть аудитории сайта — это преданные поклонники Pandora Russia, которые хотят продолжать покупать украшения любимого бренда. Поэтому было важно сохранить узнаваемость элементов дизайна. Но при этом не сделать еще одну бело-розовую копию сайта.</p>
</div>
</div>

<img src="/uploads/Illustration_2_cf4e6c07ff.webp">
<img src="/uploads/Illustration_4_a2fa09d154.webp">

</div>
<div>
<h3>Позиционирование</h3>
<p>Раньше бренд был частью мирового сообщества Pandora. Теперь же компания переориентировалась и стала мультибрендовой площадкой. С учетом этого нужно было доработать дизайн сайта: сделать так, чтобы на нем было комфортно разместить украшения российских и не только брендов.

Для этого сохранили простоту дизайна страниц PanClub: так пестрые и разнообразные украшения брендов не будут конфликтовать с общей идеей сайта. </p>
</div>
</div>

<img src="/uploads/Illustration_1_c8f004f52b.webp">

</div>
<div>
<h3>Анимации</h3>
<p>Чтобы облегчить коммуникацию с разработчиками, сделали анимационные ролики и показали, как должны вести себя элементы интерфейса.</p>
</div>
</div>

<img src="/uploads/Illustration_6_52c1cf94bc.webp">

</div>
<div>
<h3>Брендинг</h3>
<p>В качестве вишенки на торте подготовили UI Kit и систему компонентов для дальнейшего использования клиентом. Благодаря этому дополнительно сэкономили время: разработчикам не пришлось переверстывать все с нуля, нужно было просто обновить основные элементы сайта.

Итоговая работа стала не только «лицом» бренда, но и в каком-то роде самим брендом. На старте у PanClub был только логотип, а теперь есть свой фирменный стиль.</p>
</div>
</div>


Проекты

hello@mish.design

Москва

Нижний Новгород