cover.webp

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

<div>
<h3>От порядка к порядку</h3>
<p>Заказчик пришел с&nbsp;задачей создать self-service портал для инвентаризации продуктов и&nbsp;управления их&nbsp;жизненным циклом. Система нужна, чтобы поддерживать продуктовый каталог в&nbsp;актуальном состоянии и&nbsp;получать дополнительную информацию о&nbsp;его элементах. С&nbsp;помощью системы сотрудники могут создавать типовые шаблоны, вычислять с&nbsp;их&nbsp;помощью показатели для индивидуальных программных сервисов, ĸомпонентов, продуктов и&nbsp;бизнес-активностей. Чем удобнее будет система, тем быстрее и&nbsp;легче пользователи получат удобный доступ к&nbsp;внутренней информации.</p>
</div>

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

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

<img src="/uploads/208189208176208187208190209129209140_74fb43bab6.webp">

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

<img src="/uploads/4_208164208190209128208188209139_f03b3127cc.webp">

</div>
<div>
<h3>Этап разработки</h3>
<p>Команда дизайнеров предоставила внутреннему отделу разработки Mish готовый UI-Kit. Мы&nbsp;собрали библиотеку компонентов, чтобы можно было быстро собирать функциональный интерфейс. Для это выбрали решения React и&nbsp;Storybook. Основная сложность разработки была в&nbsp;интеграции и&nbsp;получении данных из&nbsp;внутренних систем заказчика и&nbsp;в&nbsp;обратной синхронизации. Для бэкенда выбрали next.js, express и&nbsp;базу данных postgreSQL. Чтобы взаимодействовать с&nbsp;серверной частью, использовали REST API. Так получилось забрать данные из&nbsp;нашего портала и&nbsp;предоставить другим системам заказчика получать обновленные данные. Дополнительно организовали ролевую модель для серверной и&nbsp;клиентской частей системы. Этим занимались тестировщики в&nbsp;команде&nbsp;&mdash; и&nbsp;в&nbsp;итоге за&nbsp;две недели плотной работы проверили каждую виртуальную щель на&nbsp;безопасность.</p>
</div>

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

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

<img src="/uploads/209131208186209130209131209128208176_5ffaff35e5.webp">

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

<video
src="/uploads/6208177208190209128208180_60fps_v1_0_d80f6b9c35.webm"
loop
autoplay
muted
playsinline></video>

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

<img src="/uploads/209137208189208190209129209130208184_cd5691dc2c.webp">

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

preview.webp

preview-resize.webp

Разработка информационной системы

CapitalGroup1.webm

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

<div>
<h3>Капитальный клиент</h3>
<p>Capital Group&nbsp;&mdash; один из&nbsp;ведущих девелоперов в&nbsp;России. Для тендера мы&nbsp;сделали демоверсию будущего сайта с&nbsp;3D-визуализацией зданий на&nbsp;карте Москвы. В&nbsp;итоге наш проект выбрали, и&nbsp;мы&nbsp;приступили к&nbsp;работе. Нашей задачей было сделать сайт таким&nbsp;же топовым и&nbsp;современным: продемонстрировать уникальные локации проектов Capital Group. А&nbsp;еще&nbsp;&mdash; поработать над лендингом одного из&nbsp;их&nbsp;ведущих объектов прямо сейчас.</p>
</div>

<img src="/uploads/Pervaya_3c40482a3a_04599b1dd0.jpg">

</div>
<div>
<h3>Сложная стройка</h3>
<p>Изначально мы&nbsp;хотели собирать сайт на&nbsp;WebGL. Но&nbsp;его возможностей не&nbsp;хватало, чтобы разносторонне и&nbsp;полно показать объекты Capital Group. Мы&nbsp;протестировали несколько вариантов и&nbsp;решили сделать отрендеренные видео. Но&nbsp;в&nbsp;разработке при обратном скролле все ломалось. Так мы&nbsp;дошли до&nbsp;итогового варианта&nbsp;&mdash; WebP-секвенции. Разбили видео на&nbsp;картинки и&nbsp;одним махом решили проблемы обратного скролла.</p>
</div>

<video
src="/uploads/2_1280h720_f201ace0b6_1d223850e6.webm"
loop
autoplay
muted
playsinline></video>

</div>
<div>
<h3>Свобода в решениях</h3>
<p>Весь сайт наша команда делала под ключ: от&nbsp;концепции до&nbsp;разработки. В&nbsp;том числе мы&nbsp;придумали кастомное решение для страницы с&nbsp;проектами, чтобы заказчик мог сам заполнять объекты информацией. Для всего проекта подготовили типовые блоки, из&nbsp;которых легко собирать новые страницы в&nbsp;соответствии с&nbsp;нужным контентом. Все это делается через админку Strapi. Это современная &laquo;безголовая&raquo; CMS с&nbsp;открытым исходным кодом. Она привязывается к&nbsp;конкретному проекту и&nbsp;помогает без особых знаний управлять контентом. В&nbsp;админке Capital Group страницы объектов собираются из&nbsp;20&nbsp;разных блоков.</p>
</div>

<img src="/uploads/3_f5be47dfdb.webp">

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

<img src="/uploads/4_c91914f34a.webp">

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

<video
src="/uploads/5_1280h720_1_566bf05b10.webm"
loop
autoplay
muted
playsinline></video>

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

<img src="/uploads/6_5b3c403d11.webp">

</div>
<div>
<h3>Полеты во сне и наяву</h3>
<p>Мы&nbsp;анимировали много разных деталей: от&nbsp;появления текста на&nbsp;экране до&nbsp;полноценных 3D-моделей жилых комплексов. После отрисовки пролетов их&nbsp;рендерили в&nbsp;WebP-секвенции и&nbsp;анимировали по&nbsp;кадрам с&nbsp;привязкой к&nbsp;скроллу страницы.</p>
</div> 

<video
src="/uploads/7_1280h720_1_a933a8dbbb_a3cbeed1cc.webm"
loop
autoplay
muted
playsinline></video>

</div>
<div>
<h3>Объекты гордости</h3>
<p>Все проекты клиента показаны на&nbsp;главной пролетами над Москвой. От&nbsp;каждого объекта можно перейти на&nbsp;его лендинг и&nbsp;узнать больше о&nbsp;преимуществах комплексов.</p>
</div> 

<img src="/uploads/8_c3ecaa1b76.webp">

</div>
<div>
<h3>Самый главный</h3>
<p>Бадаевский&nbsp;&mdash; флагманский объект Capital Group. Его&nbsp;основная фишка&nbsp;&mdash; в&nbsp;&laquo;воздушных&raquo; квартирах, расположенных на&nbsp;высоких 35&nbsp;метровых стройных колоннах, отсылающих к&nbsp;индустриальной эстетике. Сейчас объект на&nbsp;стадии строительства, а&nbsp;наш сайт уже&nbsp;готов. Мы&nbsp;показываем детальную и&nbsp;очень подробную трехмерную модель&nbsp;ЖК, делаем акцент на&nbsp;каждой его детали и&nbsp;подсвечиваем преимущества: местоположение, концепцию жилья в&nbsp;воздухе, встроенность в&nbsp;исторический ландшафт. Прямые линии к&nbsp;важным городским точкам указывают расстояния до&nbsp;них и&nbsp;подчеркивают местоположение объекта.</p>
</div> 

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

</div>
<div>
<h3>Поиграться с картой</h3>
<p>Внизу лендинга Бадаевского мы&nbsp;сделали трехмерную карту объекта на&nbsp;базе WebGL&nbsp;&mdash; технологии, которая не&nbsp;подошла остальному сайту. Благодаря ней пользователь может по-разному обращаться с&nbsp;интерфейсом и&nbsp;переключаться между разными планами: верхним и&nbsp;нижним. Такой подход отражает концепцию застройщика &laquo;Жить на&nbsp;земле&raquo; и&nbsp;&laquo;Жить в&nbsp;воздухе&raquo;, которую мы&nbsp;реализовали на&nbsp;странице.</p>
</div> 
</div>
<p>Инфраструктура:<p>
<img src="/uploads/10_3fbe1fd7b0.webp">
<p>Входные группы:<p>
<img src="/uploads/11_0e50b923c6.webp">
<p>Жить на земле:<p>
<img src="/uploads/12_1973c0e5a5.webp">
<p>Жить в воздухе:<p>
<img src="/uploads/13_05bee5d1d2.webp">
<p>Квартиры в воздухе:<p>
<img src="/uploads/14_6a72762fb3.webp">
<p>Небесные виллы:<p>
<img src="/uploads/15_6faaae4982.webp">

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

<img src="/uploads/16_5135314a2e.webp">

</div>
<div>
<h3>Тестируем и оптимизируем</h3>
<p>Мы&nbsp;начали тестирование еще на&nbsp;этапе проектирования. Проверяли сайт не&nbsp;только руками, но&nbsp;и&nbsp;через специальные инструменты, например PageSpeed Insights от&nbsp;Google. Оптимизацию делали в&nbsp;конце работы, после готовой структуры и&nbsp;контента. Помогли современные форматы графики. Изображения сжимали в&nbsp;WebP, а&nbsp;видео&nbsp;&mdash; в&nbsp;WebM.</p>
</div> 

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

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

<img src="/uploads/18_07ed4700ea.webp">






2.webp

Сайт девелопера Capital Group

21-_1_.webp

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

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

<img src="/uploads/22_f2f6a740f2.png">

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

<img src="/uploads/5_be96d45789.png">

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

<img src="/uploads/3_5a190584c6.png">

</div>
<div>
<h3>Мегагерой</h3>
<p>Герой игры, которым &laquo;шагают&raquo; пользователи,&nbsp;&mdash; интерактивный заяц-маскот. Этого героя мы&nbsp;создали и&nbsp;адаптировали его под игровой формат.</p>
</div>

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

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

<img src="/uploads/1_fa4e84cff4.png">

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

<img src="/uploads/2_67fad4ea66.png">

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

<img src="/uploads/4_bfa9fb96c4.png">



MegaTower.png

Мегабашня для Мегамаркета

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>

Проекты

hello@mish.design

Москва

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