convers03 (video-converter.com).webm

After developing a design system for the Armenian bank, we moved on to the mobile app. We created it based on cutting-edge interface approaches.

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

<div>
<h3>Профиль</h3>
<p>Стандартная функция профиля в&nbsp;банковских приложениях&nbsp;&mdash; дать возможность менять пароль, добавить аватарку или сменить тему со&nbsp;светлой на&nbsp;темную. У&nbsp;Converse Bank в&nbsp;профиле кроме настроек есть разделы &laquo;Документы&raquo; и&nbsp;&laquo;Имущество&raquo;.</p>
</div>

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

<div>
<h3>Документы</h3>
<p>У&nbsp;всех бывают ситуации, когда очень срочно нужна какая-то бумажка, а&nbsp;под рукой ее&nbsp;нет. У&nbsp;клиентов Converse Bank есть&nbsp;&mdash; как раз в&nbsp;разделе &laquo;Документы&raquo; профиля. При этом вводить реквизиты и&nbsp;данные вручную не&nbsp;нужно: можно перепоручить это банку. Банк запросит информацию у&nbsp;соответствующей госслужбы, сам ее&nbsp;получит и&nbsp;сам&nbsp;же сохранит. Это&nbsp;удобно&nbsp;еще по&nbsp;одной причине: если&nbsp;пользователю придет платеж, например, от&nbsp;коммунальной службы, где потребуется вводить какие-то данные&nbsp;&mdash; они подтянутся автоматически.</p>
</div>

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

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

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

<div>
<h3>Есть нюанс</h3>
<p>И&nbsp;не&nbsp;один. Функционал мобильного приложения Converse Bank&nbsp;&mdash; это темная и&nbsp;светлая тема, мультиязычные интерфейсы и&nbsp;своя платежная система Converse Pay. Для дальнейшего расширения продумали будущий флоу по&nbsp;программе лояльности, которую формим по&nbsp;принципу сундука&nbsp;&mdash; как&nbsp;отдельное приложение внутри приложения.</p>
</div>

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


horizontal-cover, mobile-cover.webp

Converse Bank Mobile App

╨Ю╨▒╨╗╨╛╨╢╨║╨░-2.webp

Created a turnkey vibrant portal for the Youth Policy Department of the Voronezh Region. It is for active young people to find current events, participate in competitions and festivals, learn new things about the city and its life. At first look, you’d hardly say this is administrative.

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

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

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

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

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

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

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

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

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

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

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

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

╨Я╤А╨╡╨▓╤М╤О.webp

NeuroAstro Mobile App

Обложка-1х1.webp

<div>
<h3>Точка отсчёта</h3>
<p>Нам заказали разработку сайта для государственного проекта, которым бы активно пользовалась молодёжь. А для привлечения молодых людей нужен не строгий и нейтральный дизайн, а яркий и живой — как раз такой и запросил клиент.</p>
</div>

<video
src="/uploads/1_b1a5909b76.webm"
loop
autoplay
muted
playsinline></video>

<img src="/uploads/2_a71ae7e48b.webp"> 

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

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

<video
src="/uploads/4_a5bcbf38ce.webm"
loop
autoplay
muted
playsinline></video>

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

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

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

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

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

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

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

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

<img src="/uploads/10_fab89a5a02.webp"> 

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

<img src="/uploads/11_52a6d2882e.webp"> 




Case studies

hello@mish.design

Moscow

Nizhny Novgorod