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

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

Копылов Илья

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

hello@mish.design

Москва

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