large_background profile (3).png

medium_background profile (3).png

small_background profile (3).png

thumbnail_background profile (3).png

background profile (3).png

Чикильдин Илья

UI/UX

Business System

Product Analytics

UX writing

Dashboard

Fintech

E-commerce

Website

SBI mocap.mp4

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

<img src="/uploads/001_0d8c7a6365.jpg?updated_at=2023-04-02T18:29:50.048Z" alt="enter image description here">
<div>
<h3>Семейный банкинг</h3>
<p>Мы&nbsp;отразили новую для рынка идею, family banking&rsquo;а, в&nbsp;виде детского и&nbsp;взрослого приложений, которые помогают вместе копить на&nbsp;общую мечту, вместе тратить и&nbsp;вместе зарабатывать кэшбэк.</p>
</div>

 <img src="/uploads/002_dcabe32094.jpg?updated_at=2023-04-02T18:29:49.955Z" alt="enter image description here">

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

  <img src="/uploads/004_1c73d338ba.jpg?updated_at=2023-04-02T18:29:49.990Z" alt="enter image description here">
  
<div>
<h3>Детское приложение</h3>
<div>
<p>Стиль детского приложения не&nbsp;такой строгий, как у&nbsp;взрослого: обращение на&nbsp;&laquo;ты&raquo;, яркие иллюстрации, возможность поставить на&nbsp;фон картинку из&nbsp;мультика или фото супергероя, но&nbsp;в&nbsp;то&nbsp;же время оно похоже на&nbsp;взрослое и&nbsp;выглядит как серьезный финансовый сервис.</p>
 <p>Такое решение позволяет формировать финансовую грамотность у&nbsp;подрастающего поколения. Приложение позволяет младшим членам семьи планировать свои накопления, расходы и&nbsp;получать переводы от&nbsp;родителей в&nbsp;интерактивной форме.</p>
</div>
</div>

  <img src="/uploads/006_f63ec80210.jpg?updated_at=2023-04-02T18:29:49.975Z" alt="enter image description here">
  <div>
  <h3>Элемент игры</h3>
  <p>Внутри приложения родители могут назначать задания детям и&nbsp;назначать им&nbsp;награду. Средства автоматически перечисляются в&nbsp;копилку ребенка после подтверждения родителем.</p>
  </div>
<video
src="/uploads/sbi_budget_abe241ab65.mp4"
loop
autoplay
muted
playsinline></video>
</div>
  <img src="/uploads/007_9ee6f66a1c.jpg?updated_at=2023-04-02T18:29:49.870Z" alt="enter image description here">
 
 <div>
 <h3>Комплексный сервис</h3>
<p>Мы&nbsp;реализовали все основные функции платежей: переводы между своими счетами, клиентам других банков, платежи за&nbsp;ЖКХ, интернет, телефон, по&nbsp;реквизитам и&nbsp;другие финансовые возможности.</p>
 </div> 

  <img src="/uploads/003_05939f2545.jpg?updated_at=2023-04-02T18:29:48.727Z" alt="enter image description here">
  <img src="/uploads/005_e8473fac76.jpg?updated_at=2023-04-02T18:29:49.501Z" alt="enter image description here">

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

SBI Bank.jpg

SBI Bank

SBI.jpg

Крестов Иван

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

Костромицкий Владимир

Кретинин Андрей

Торги233.png

Сделали отдельную страницу для фармацевтического направления компании «Торги 223»


<img src="/uploads/2_4_7a4b0f1591.png">
</div>
<div>
<h3>Что такое Pharma</h3>
<p>Инновационное решение от «Торги 223» для дистрибьюторов лекарственных препаратов. Pharma позиционирует себя как digital-платформу, которая трансформирует фармацевтическую индустрию точно так же, как когда-то технологии сделали с банкингом и ритейлом.
Фактически — все, что нужно фармбизнесу. Детально — автоматизирует вопрос поставок для фармацевтических компаний и аптек: менеджерит продажи, обрабатывает счета, регулирует ценообразование. Все это — при помощи умного ИИ-алгоритма. Pharma значительно бустит развитие фармкомпании и дает качественный профит.</p>
</div>
</div>

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

</div>
<div>
<h3>Как мы делали лендинг</h3>
<p>На нас было полное визуальное оформление посадочной страницы. У лендинга две аудитории — дистрибьюторы и владельцы аптечных сетей. Мы разделили страницу так, чтобы каждый вариант имел одинаковую структуру, но разное целевое содержание.</p>
</div>
</div>

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

</div>
<div>
<h3>Что по контенту</h3>
<p>Заказчик отдал нам тексты, из которых нужно было сделать понятную для пользователя сущность. Мы работали над узко специализированным продуктом, а тексты важно было написать на человеческом языке.</p>
</div>
</div>

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

<div>
<h3>Что по 3D-шке</h3>
<p>Для визуальной поддержки технологичного продукта использовали 3D-абстракции и интерактивные анимации. В основное 3D-изображение засунули метафорическую аналогию. Две основные части — направление дистрибьюции и аптечные сети. Шар в центре — Торги, которые скрепляют все вместе. </p>
</div>
</div>

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

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



Торги223бг.png

Pharma

Кириллов Сергей

Макарова Оксана

Мазаев Денис

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

Data-Track.png

На примере ПО для Абинского
металлургического завода

 <img src="/uploads/1_11_4f6b371f78.png" alt="enter image description here">
 <div>
<h3>Что же это такое?</h3>
<div>
<p>Data-Track — это MES (от англ. manufacturing execution system), т.е. система управления производственными процессами — специализированное прикладное программное обеспечение, предназначенное для решения задач синхронизации, координации, анализа и оптимизации выпуска продукции в рамках производства. MES-системы относятся к классу систем управления уровня цеха, но могут использоваться и для интегрированного управления производством на предприятии в целом.
</p>
</div>
</div>
  <img src="/uploads/2_f908d5038d.png" alt="enter image description here">
 <div>
<h3>Зачем же это нужно?</h3>
<div>
<p>Прежде всего, для систематизации и визуализации данных, выделении главного, поскольку в основе ПО лежат excel-таблицы, которые заложены во всех заводских процессах: планы производства, загрузка склада, перемещение материалов и т.д. А это значит, что требуется удобный интерфейс, ведь сотрудники работают подолгу с ним, иногда в условиях недостаточной освещенности.
</p>
</div>
</div>
  <img src="/uploads/3_ecfb833ed6.png" alt="enter image description here">
 <div>
<h3>Проблематика</h3>
<div>
<p>Еще перед началом работ вскрылось множество проблем, которые и подтолкнули нас к поиску наиболее оптимальных решений. Проблемы следующие: </p>
 <ul>
 <li>Много бумажного документооборота. Много процессов на производстве фиксируется только на бумаге. Их сложно отслеживать, хранить и передавать;</li>
 <li>Сложные условия на рабочих местах. Сотрудники работают подолгу с этим интерфейсом, иногда в условиях недостаточной освещенности; </li>
 <li>Много данных. Нет возможности быстро на одном экране увидеть ситуацию на производстве; </li>
 <li>Неактуальность. Как правило, для руководства доступны данные только за предыдущий день. Нет возможности следить за производством в реальном времени; </li>
 <li>Скорость работы. Данные между отделами передаются в течение нескольких суток; </li>
</ul>

</p>
</div>
</div>
  <img src="/uploads/4_e8d08a61ed.png" alt="enter image description here">
 <div>
<h3>Что же мы сделали</h3>
<div>
<p>В итоге мы разработали современный интерфейс в Figma. Также создали дизайн-систему, позволяющую быстро собирать любые требуемые интерфейсы.
Использовали следующие цифровые технологии и решения: </p>
 <ul>
 <li>HTML/CSS/JS;</li>
 <li>React (CRA);</li>
 <li>Storybook;</li>
 <li>Цифровой двойник;</li>
 <li>Датчики и камеры.</li>
</ul>

</p>
</div>
</div>
  <img src="/uploads/5_ce5fae8f9c.png" alt="enter image description here">
 <div>
 <h3>Технологическая независимость</h3>
<div>
<p>Одно из преимуществ данного ПО — технологическая независимость, то есть используются открытые технологии на базе open-source. Исходный код таких программ доступен для просмотра, изучения и изменения, что позволяет убедиться в отсутствии уязвимостей и неприемлемых для пользователя функций (к примеру, скрытого слежения за пользователем программы), принять участие в доработке само́й открытой программы, использовать код для создания новых программ и исправления в них ошибок.
</p>
</div>
<br>
<br>
<h4>Совместно с компанией <a href="https://dc.ru/">ДАТА-ЦЕНТР Автоматика</a></h5>

Data-Track-1.png

Система производственного мониторинга Data-Track

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

Чулкова Елена

Соколенко Владислав

Максимкин Александр

Бажанов Максим

PAN CLUB Main.webp

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


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

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

<img src="/uploads/Illustration_3_8a349c5d12.png">
<video 
src="/uploads/pan_club_82f9b6e39f.mp4"
loop
autoplay
muted
playsinline></video>
</div>

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

<img src="/uploads/Illustration_2_f58b565226.png">
<img src="/uploads/Illustration_4_4da31d2782.png">

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

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

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

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

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

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

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


Cover.webp

PanClub

Пименова Миша

Попов Алексей

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

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

Макаров Сергей

Ерохов Дмитрий 

Авдеев Алексей

Серов Владимир

Семенчук Юлия

Силаев Герман

Шушкевич Виталий

Авдеева Юлия

Усатюк Владислав

Кошман Александра

Шапор Константин 

Мисюра Станислав

Попова Виктория

Алимов Нурсултан

Селиванов Никита

Кашаев Андрей 

Штоль Александр 

Обложка-квадрат.webp

Сделали дизайн внутреннего приложения для креативных специалистов и их заказчиков.

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

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

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

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

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

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

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

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

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

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

<div>
<h3>Преимущества «Студии»</h3>
<p>Среди конкурентов действительно существуют площадки по&nbsp;поиску исполнителей или заказчиков, отдельные платформы с&nbsp;портфолио. &laquo;Студия&raquo; объединяет этот функционал. В&nbsp;приложении можно залогиниться через VK&nbsp;ID&nbsp;и&nbsp;автоматически заполнить базовые данные. Еще один плюс&nbsp;&mdash; это специфика аудитории: Простор объединяет молодых креаторов, поэтому заказчикам через приложение проще найти уникального специалиста под свой проект. &laquo;Студия&raquo; стала органичным продолжением и&nbsp;развитием возможностей креативной площадки Простор, дала коммьюнити новые пути для роста.</p>
</div>

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


Обложка основаня 1920х768 Новая2.webp

Мини-приложение «Студия»

Кремнев Илья

Скрынник Елизавета

Попов Олег

Копылов Илья

Дарья Егорова

Неижко Глеб

Лобач Вячеслав

Моторина Юлия 

Александра Ежова

Анищенко Александр

convers03 (video-converter.com).webm

После разработки дизайн-системы для армянского банка приступили к мобильному приложению — и сделали это на основе передовых подходов к интерфейсам. 

<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>


Чикильдин Илья

The brief doesn't fill in on its own

hello@mish.design

Moscow

Nizhny Novgorod