medium_Kopylov_sajt_9c7b9a2b49.jpg

small_Kopylov_sajt_9c7b9a2b49.jpg

thumbnail_Kopylov_sajt_9c7b9a2b49.jpg

Kopylov_sajt_9c7b9a2b49.jpg

large_background profile (3).png

medium_background profile (3).png

small_background profile (3).png

thumbnail_background profile (3).png

background profile (3).png

Копылов Илья

Product Management

Management

Agile

╨Ю╨▒╨╗╨╛╨╢╨║╨░-╨║╨░╤В╨░╨╗╨╛╨│╨░.webp

На основе обновленного кей-вижуал бренда обновили внешний вид главной страницы сервиса по подбору психологов. И не уронили маркетинговые метрики, что тоже приятно.

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

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

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

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

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

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

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

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

<div>
<h3>Небольшие обновления</h3>
<p>Мы&nbsp;проработали текущую структуру, проанализировали конкурентов и&nbsp;релевантные сервисы. На&nbsp;этой основе разработали, предложили и&nbsp;в&nbsp;итоге внедрили в&nbsp;структуру нескольких новых блоков. Мы&nbsp;сохранили смысловую подачу, но&nbsp;добавили в&nbsp;новые блоки эмпатию и&nbsp;заботу, а&nbsp;еще&nbsp;возможность начать диалог с&nbsp;пользователем уже&nbsp;с&nbsp;первого скролла. Среди переработанных экранов была форма с&nbsp;СТА на&nbsp;главном экране, блок для тех, кто&nbsp;не&nbsp;знает, что с&nbsp;ним происходит и&nbsp;не&nbsp;может с&nbsp;этим справиться самостоятельно. Дополнительно проработали витрину с&nbsp;услугами для&nbsp;партнеров и&nbsp;форму с&nbsp;СТА. Мы&nbsp;поженили смысловую и&nbsp;юайную части, не&nbsp;побоялись экспериментов&nbsp;&mdash; и&nbsp;получилось хорошо. Продакты на&nbsp;клиентской стороне тоже рады: конверсию мы&nbsp;не&nbsp;уронили, а&nbsp;красивый и&nbsp;функциональный сайт сделали.</p>
</div>
<img src="/uploads/E_M_I_P_5e6e6239f5.webp"> 

<div>
<h3>И&nbsp;что дальше?</h3>
<p>На&nbsp;основе нашего редизайна заказчик принялся за&nbsp;обновление и&nbsp;других страниц, кроме главной. Подход команды Mish им&nbsp;зашел&nbsp;&mdash; а&nbsp;мы&nbsp;и&nbsp;рады делиться.</p>
</div>
<img src="/uploads/Sh_Z_V_M_I_3517a2ca7a.webp"> 

Header-╨║╨╡╨╕╠Ж╤Б╨░.webp

Редизайн главной страницы сервиса Zigmund

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

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

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

Cover_catalog.webp

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

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

<img src="/uploads/1_0a0bef8906.webp"> 

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

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

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

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

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

<img src="/uploads/20_a029d86a47.webp"> 

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

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

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

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

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

<img src="/uploads/7_554e4e8821.webp"> 

horizontal-cover_-mobile-cover.webp

Дизайн-система для Converse Bank

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

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

Обложка-квадрат.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