large_Трипутень Максим.jpg

medium_Трипутень Максим.jpg

small_Трипутень Максим.jpg

thumbnail_Трипутень Максим.jpg

Трипутень Максим.jpg

large_background_profile_3_992ad6887c.png

medium_background_profile_3_992ad6887c.png

small_background_profile_3_992ad6887c.png

thumbnail_background_profile_3_992ad6887c.png

background_profile_3_992ad6887c.png

Трипутень Максим

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;категорию полноценных пользователей. В&nbsp;ЛК&nbsp;разработчика можно посмотреть список заказов от&nbsp;бизнеса и&nbsp;вести коммуникацию напрямую через платформу для обсуждения задачи и&nbsp;нюансов. Разработчики дополнительно сделали фичу, чтобы отслеживать статистику обращений и&nbsp;выполненных проектов. Дополнительно разработали&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;нише. Каждому пользователю коммуникационной платформы разработчики добавили рейтинг и&nbsp;возможность оценивать посты или комментарии других участников. В&nbsp;целом в&nbsp;проекте использовали технологии 1C: Битрикс, Vue.Js, MindBox, Keycloak.</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

Лисунова Карина

Хамзин Эдуард

Ионин Максим 

Олехнович Артем

Закиров Арсений

Всеволод Григорьев

Воронова Мария

Толстых Кристина

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>

Трипутень Максим

Бриф сам себя не заполнит

hello@mish.design

Москва

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