large_Vevericza_sajt_65d68d90b6.jpg

medium_Vevericza_sajt_65d68d90b6.jpg

small_Vevericza_sajt_65d68d90b6.jpg

thumbnail_Vevericza_sajt_65d68d90b6.jpg

Vevericza_sajt_65d68d90b6.jpg

large_Веверица фон.jpg

medium_Веверица фон.jpg

small_Веверица фон.jpg

thumbnail_Веверица фон.jpg

Веверица фон.jpg

Веверица Карина

UI/UX

Product Design

Fintech

Usability Testing

Product Support

medium_Kostrom_sajt_cd16586cb8.jpg

small_Kostrom_sajt_cd16586cb8.jpg

thumbnail_Kostrom_sajt_cd16586cb8.jpg

Kostrom_sajt_cd16586cb8.jpg

small_mish_Logo.jpg

thumbnail_mish_Logo.jpg

mish_Logo.jpg

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

Business System

Product Analytics

UX writing

Dashboard

E-commerce

Website

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

Nebula.png

Фирменный стиль, промо-лендинги и админ-панель для агрегатора криптобирж. 

<img src="/uploads/00_Title_Nebula_f5a9c89f38.jpg?updated_at=2023-03-31T14:53:20.450Z" alt="enter image description here">
<div>
<h3>Так что же это такое</h3>
<p>Nebula — это агрегатор криптобирж для поиска лучшей цены криптовалют. Самый доступный способ найти наиболее адекватный прайс среди сотен сайтов, продающих крипту, в которых легко запутаться. </p>
</div>
<img src="/uploads/01_Nebula_28fe0fdea0.jpg?updated_at=2023-03-31T14:53:18.775Z" alt="enter image description here">
<img src="/uploads/02_Nebula_a0bc418b08.jpg?updated_at=2023-03-31T14:53:21.287Z" alt="enter image description here">
<div>
<h3>3D-схема работы агрегатора</h3>
<div>
<p>Клиент хотел создать крипто-сервис, который был&nbsp;бы не&nbsp;только удобным и&nbsp;понятным, но&nbsp;и&nbsp;визуально технологичным, отвечающим запросам аудитории.</p> 
<p>Начинали, конечно, с брендинга. Это не та история, где нужно изобретать велосипед и нырять в пучины креатива (тз есть тз), но сделать красиво и футуристично очень важно. За основу взяли темную тему с тремя основными цветами (сиреневым, розовым и темно-синим) как прямую ассоциацию с трейдингом и криптой. </p>
</div>
</div>

<img src="/uploads/03_Nebula_908a585fb4.jpg?updated_at=2023-03-31T14:53:21.590Z" alt="enter image description here">

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

<img src="/uploads/05_Nebula_3be0f6f304.jpg?updated_at=2023-03-31T14:53:18.519Z" alt="enter image description here">

<div>
<h3>Разработка</h3>
<div>
<p>На этом проекте мы были ответственны за frontend, что очень ускорило запуск, поскольку у внутренних команд дизайнеров и разработчиков хорошо налажен диалог. В основе стэка React, TypeScript и Redux как наиболее очевидные в данном случае, а также Openware и Web3. Многие графики на Recharts. Тестирование на Jest, Enzyme и Cypress. </p>
</div>
</div>
<img src="/uploads/06_Nebula_f5963947f0.jpg?updated_at=2023-03-31T14:53:15.937Z" alt="enter image description here">
<img src="/uploads/07_Nebula_32544c7c48.jpg?updated_at=2023-03-31T14:53:12.642Z" alt="enter image description here">
</div>
</div>
<div>
<h3>Понятный агрегатор</h3>
<div>
<p>При подаче такой непростой информации легко запутаться, однако мы сразу сконцентрировались на главном — UI. Именно на прекрасно продуманном интерфейсе и был построен этот проект. Хотя и удачный брендинг играет не последнюю роль. Футуристичный визуал, основанный на 3D, дополняет главную составляющую и выгодно отличает агрегатор от других. </p>


Nebula ECN

Крестов Иван

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

Мазаев Денис

Дудин Дмитрий

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

PickselMocap.mp4

Веб-кабинет владельца магазина, приложение и сайт для покупателей сервиса покупок, работающего по стандартам Open Banking.

<img src="/uploads/Brend_1_b2c16f78d5.jpg?updated_at=2023-04-05T09:57:51.104Z" alt="enter image description here">
<video
src="/uploads/tagline_animation01_picksell_aca725850c.mp4"
loop
autoplay
muted
playsinline></video>
</div>
<div>
<h3>Единая корзина покупок</h3>
<p>Когда клиент пришел к нам с этим проектом, наши арт-директора прыгали от радости: сложный кейс, не имеющий аналогов, где одна только логика чего стоит. Грубо говоря, для покупателя это быстрый шопинг, а для магазина новый канал продаж. Сервис создает полный цикл магазин-клиент, где пользователи приложения сканируют QR-коды товаров различных магазинов, а приложение формируют для них единую корзину покупок. Пользователи платят напрямую со&nbsp;своего счета магазину, что позволяет экономить бизнесу на&nbsp;эквайринге и&nbsp;обеспечивает безопасность переводов по&nbsp;единому европейскому формату. </p>
</div>
<video
src="/uploads/tagline_animation02_picksell_d0b30c9b03.mp4"
loop
autoplay
muted
playsinline></video>
</div>
  <img src="/uploads/prilka_1_3db4c40648.jpg?updated_at=2023-04-05T09:58:28.785Z" alt="enter image description here">
  <img src="/uploads/prilka_2_14395fbc68.jpg?updated_at=2023-04-05T09:58:56.386Z" alt="enter image description here">

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

  <img src="/uploads/Adminka_1_f5c9ba7351.jpg?updated_at=2023-04-05T09:55:22.412Z" alt="enter image description here">
  <img src="/uploads/Adminka_2_72de15d20c.jpg?updated_at=2023-04-05T09:54:59.867Z" alt="enter image description here">

<div>
<h3>Система QR-кодов</h3>
<div>
<p>Далее встроили в&nbsp;интерфейс канал коммуникации между клиентом и&nbsp;магазином, следуя стандартам безопасности и&nbsp;открытости: Picksell предоставляет все необходимые данные покупателя магазину, но бережно их хранит, а покупатель управляет своими персональными данными. В общем, всем сильно проще следовать директиве GDPR (без нее никуда).</p>
<p>Также создали систему QR-кодов, с&nbsp;помощью которой покупатели могут набирать единую корзину товаров из&nbsp;различных магазинов, чтобы быстро и&nbsp;легко оформить покупку. А еще это простой и&nbsp;удобный способ продажи товара с заранее заложенным агентским вознаграждением, например, для блогеров.</p>
</div>
</div>

  <img src="/uploads/veb_pokupatelya_1_257d05082b.jpg?updated_at=2023-04-05T09:57:51.128Z" alt="enter image description here">
  <img src="/uploads/veb_pokupatelya_2_1e2c28b857.jpg?updated_at=2023-04-05T09:55:40.777Z" alt="enter image description here">

 <div>
 <h3>Инструменты магазина</h3>
 <p>Мы&nbsp;продумали и&nbsp;отобразили в&nbsp;интерфейсе разные варианты доставки товаров покупателям, а&nbsp;также интегрировали полную аналитику продаж и&nbsp;информацию о&nbsp;складских остатках в&nbsp;личный кабинет магазина.</p>
 </div>
  <img src="/uploads/Lending_3_765ce761ec.jpg?updated_at=2023-04-05T09:59:34.716Z" alt="enter image description here">
<div>
<h3>Коммуникации</h3>
<div>
  <p>А что там по маркетинговой коммуникации? В ход пошли как классические инструменты (персональные скидки подписчикам магазинов, снижение цены на залежавшиеся корзинах товары), так и более современные и нетипичные для Европы — QR-коды.</p>
  <p>Для клиентов создали комфортное пространство, где они могут планировать свои покупки, делиться товарами, делать списки, дарить подарки в системе, а также видеть подробный анализ своих расходов.</p>
  <p>В качестве промоматериалов мы создали несколько лендингов, где доступно и наглядно объяснили суть платформы Picksell. </p>
  </div>
</div>

  <img src="/uploads/Lending_2_4bf729d939.jpg?updated_at=2023-04-05T09:54:59.860Z" alt="enter image description here">

<div>
<h3>Идеальная экосистема</h3>
<div>
<p>Всего за&nbsp;полгода мы&nbsp;разработали уникальную экосистему, предлагающую набор сервисов для работы с&nbsp;заказами, покупателями и&nbsp;логистикой, а также удобную платформу для покупок, переосмысляющую концепцию шопинга.</p>
<p>Самым сложным в&nbsp;нашей работе было абстрагироваться от&nbsp;существующих маркетплейсов и&nbsp;разработать по-настоящему работающий инструмент, не&nbsp;создающий конкуренции между магазинами. Но нам это удалось. Была проделана очень внушительная работа, которая стала для нас большим испытанием, но результат того стоит.</p>
</div>
</div>
<video controls src="/uploads/2203_2_043d79ac11.mp4"></video>

Picksell.jpg

Picksell

Пиксель.jpg

Барковская Алина

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

Гайбарян Карина

Денисова Христина

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

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

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

Alfa.png

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

<video
src="/uploads/alfa13_f4fc8c3742.mp4"
loop
autoplay
muted
playsinline></video>
</div>
 
<div>
<h3>Концепция</h3>
<div>
<p>Альфа-Банк использует 3D-иллюстрации практически во&nbsp;всей коммуникации: приложения, сайты, социальные сети и&nbsp;т.д. При помощи необычных решений в&nbsp;визуалах бренд передаёт свою диджитальность и&nbsp;способность подстраиваться под изменчивый мир.</p>
</div>
</div>

 <img src="/uploads/2_2a8f0198e8.jpg" alt="enter image description here">

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

 <img src="/uploads/3_7531705676.jpg" alt="enter image description here">

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

<video
src="/uploads/invest_Kopilka_Anim4_13f2256c8f.mp4"
loop
autoplay
muted
playsinline></video>
</div>

<div>
<h3>Сохраняем рассудок</h3>
<div>
<p>Наши 3D-дизайнеры постоянно экспериментируют со&nbsp;светом и&nbsp;материалами. Они стараются предугадать&nbsp;то, как объект будет вести себя в&nbsp;трёхмерной среде на&nbsp;уже готовой двухмерной картинке. Всё это для того, чтобы избежать лишней мультяшности или простоты.</p>
</div>
</div>

 <img src="/uploads/5_1c03cf2f31.jpg" alt="enter image description here">
 <img src="/uploads/6_325e982f3c.jpg" alt="enter image description here">

<div>
<h3>Особенное вдохновение</h3>
<div>
<p>Промышленный дизайн полон идей. Из&nbsp;него можно позаимствовать материалы, которые передают ощущения через изображение&nbsp;&mdash; например, матовое стекло или другие soft touch текстуры. Благодаря им&nbsp;объекты становятся тактильными и&nbsp;живут в&nbsp;digital-среде, а&nbsp;у&nbsp;зрителя создаётся ощущение, будто их&nbsp;можно потрогать. Это интересный опыт для нас и&nbsp;мы&nbsp;очень довольны результатом, и&nbsp;самое главное&nbsp;&mdash; доволен клиент.</p>
</div>
</div>

 <img src="/uploads/7_7bef023f75.jpg" alt="enter image description here">

Альфа-Банк

Alfa.jpg

Неижко Глеб

Константинов Данила

Усанов Никита

Acra small.png

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

<img src="/uploads/1_ad22cdc68d.png" alt="enter image description here">

<div>
<h3>Кому делали</h3>
<p>Рейтинговому агентству АКРА с аккредитацией Банка России. АКРА присваивает кредитные рейтинги эмитентам по национальной и международной шкалам, а значит должно отвечать зарубежным требованиям к функциональности платформы.</p>
</div>
 
  <img src="/uploads/2_d58c433869.png" alt="enter image description here">
  <img src="/uploads/3_c67f0838c4.png" alt="enter image description here">
<div>
<h3>Обновление для результата</h3>
<div>
<p>Обычно рабочие инструменты настраиваются под бизнес-процессы. В нашей истории все по-другому. Сайт АКРА базировался на нишевом языке, поэтому обслуживать софт было долго и дорого. Из-за этого приходилось плясать от неудобного функционала — а там и ошибки, и сложности, и риски. Агентство обратилось к нам, чтобы мы создали удобный портал для работы.<p>
</div>
</div>
  <img src="/uploads/4_40053c47a7.png" alt="enter image description here">

<div>
<h3>Погружение в процессы</h3>
<p>Одно дело — просто обновить визуал на сайте. Совсем другое — обновить его в соответствии с бизнес-процессами клиента, чтобы сайт был не просто красивый, но и удобный. Для этого мы погрузились в детали работы агентства и изучили процесс присвоения и поддержания рейтингов. Да, даже арт-директоры иногда занимаются такими задачами. Дальше пошло-поехало: построили архитектуру сервиса и навигацию, проработали UX, собрали UI-кит и обновили визуал сайта под утвержденный фирменный стиль.</p>
</div>
</div>
  <img src="/uploads/5_4dbe5a2fdd.png" alt="enter image description here">

  <div>
<h3>Проектная разведка</h3>
<div>
  <p>Вся работа совместная с клиентом — это про результат, а не разделение ответственности. Мы предложили оптимизировать рабочий флоу агентства и под него адаптировать сайт. В итоге разработали объектную модель сайта, взяли в руки и в реализацию перечень фичей проекта и поняли, куда копать дальше.</p>
</div>
</div>
 <img src="/uploads/6_dcd9330bbb.png" alt="enter image description here">

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

 <img src="/uploads/7_d7a2678d4a.png" alt="enter image description here">

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

Acra.png

АКРА

Cover square.jpg

Провели исследование, чтобы понять, насколько хорошо интернет-банкинг закрывает основные потребности пользователей

<img src="/uploads/1_2_ae70be2f3f.png">
<div>
<h3>Что нужно предпринимателям</h3>
<div>
<p>Чтобы решить сегодня базовые финансовые вопросы, не нужно идти в отделение банка, брать талончик и долго общаться с менеджером в окошке. Достаточно взять в руки телефон или открыть страницу мобильного банка на компьютере — и вот вам весь функционал. Решили провести исследование и понять, насколько хорошо мобильный банкинг отвечает запросам пользователей и что можно подтянуть в его юзабилити.</p>
</div>
</div>

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

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

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

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

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

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

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

<div>
<h3>И что в итоге?</h3>
<div>
<p>Лидерами гонки стали Альфа-Банк, Промсвязьбанк и ВТБ. В пятерку также попали Сбербанк и Тинькофф. У отдельных банков мы зафиксировали дружелюбную коммуникацию — и поставили лайк. У других отметили строгость и минимализм, которые очень удобны пользователям. В результате наметили траекторию, по которой банкам с меньшим количеством баллов можно развивать пользовательский опыт.</p>
</div>


Banking.png

Юзабилити интернет-банкинга

Попов Олег

Fintech

hello@mish.design

Москва

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