Отрисовали приложение для выдуманного банка — и нашли реального клиента

Привет, с вами AZ Agency. Рассказываем, как мы нарисовали приложение для выдуманного банка и сделали с ним кейс на Behance. А там нас нашла клиентка из Индии и предложила нам заказ — уже на реальное приложение, которое помогает составлять образы.

AZ Agency — это международная digital-студия. Разрабатываем брендинг, делаем UX/UI-дизайн, создаём сайты и приложения.

За три года работы отрисовали 50+ проектов. Получили 40+ наград — среди которых 20 МОТ, 28 CSSDA, 3 AWWWARDS и 2 UI BEHANCE ribbon. А наша CEO Настя обучила дизайну 1000+ учеников. О работе, команде и проектах рассказываем в нашем телеграм-канале.

Взяли и с нуля придумали приложение современного банка типа Revolut или Wise. И что вы нам сделаете?

Назвали его SEF — от английского safe или русского «сейф». В фирстиле оттолкнулись от нейминга и построили айдентику на метафоре безопасности — системе из блоков и кубиков.

В качестве акцента решили не использовать конкретные образы, а нагенерить что-то абстрактное, но с прозрачными отсылками к банковской тематике. Покрутили варианты в Midjourney — и получили 3D-модели, похожие на монетки.

В результате наш выдуманный кейс получил реальную ленту Behance. А оттуда к нам пришло сразу несколько лидов — с одним из них мы поймали мэтч и начали работать.

Клиентка — индийская инста-инфлюенсер и блогер. Пишет и снимает видео про лайфстайл, путешествия и фэшн. А к нам пришла за дизайном приложения по подбору образов — Stylzen.

Суть такая: пользователь фотографирует вещи из своего гардероба, загружает в приложение, а нейросеть подбирает из них аутфиты. Итог — готовые луки на любой случай: хоть в офис, хоть на красную дорожку.

Клиентка пришла с максимально конкретной идеей. До нас она уже работала не с одним дизайнером, но результат ей не нравился. В наследство от предыдущих подрядчиков нам достались наработки и комментарии клиентки: что пошло не так и где дизайнеры не попали в её ожидания.

Референсов у нас не было: на рынке есть похожие приложения, но клиентке они не нравились, так что мы должны были сделать не так.

Зато был список согласованных юзер-флоу с проработанным UX. Клиентка уже придумала всё до последнего клика. По сути мы работали с готовым приложением, оставалось только создать UI.

Чтобы перейти к дизайну, нам нужен был брендинг. От предыдущих исполнителей к нам ничего не перешло — клиентке не понравился ни один из вариантов. Поэтому мы создавали лого и продумывали фирменные цвета и шрифты с нуля.

Приложение унисекс, поэтому заказчице важно было соблюсти гендерный баланс без перекоса в феминность. Наш логотип получился максимально нейтральным, почти абстрактным, но с подходящей метафорой. Мы взяли две половинки футболки и сложили их в символ, похожий на инь-янь.

В итоге у нас получился образ, который символизирует единство двух полов, а ещё похож на букву S, с которой начинается название приложения — Stylzen.

В качестве фирменных шрифтов мы выбрали Melodrama variable, Ephesis и Inter. А цвета подобрали сразу для двух тем — светлой и тёмной. Для первой использовали белый, голубой, оранжевый, чёрный и фиолетовый. А для второй — чёрный, белый, жёлтый, голубой и зелёный.

В качестве ключевой метафоры мы выбрали зеркальность. Смысл максимально прозрачный: когда подбираем луки — мы смотримся в зеркало. Сначала мы проиллюстрировали идею с помощью мудборда. Получили «ок» от клиентки — и перешли к дизайн-концепции.

Сгенерили в Midjourney 3D-модели одежды с текстурами стекла, которое переливается разными цветами.

И добавили на фон пунктир — чёрный для белой темы и белый — для тёмной. Его клиентка увидела у нас на сайте и попросила сделать ей такой же. В контенте приложения по подбору образов пунктир выглядит как стежки из ниток.

Напоминаем: у клиентки было чёткое тз и частично разработанное приложение, на которое оставалось натянуть UI. С одной стороны, это существенно упростило задачу: не нужно было продумывать UX. С другой, наложило ограничения: нам пришлось учитывать всё масштабное легаси. Но мы справились — и вот какие сценарии у нас в итоге получились:

Тут пользователь указывает информацию о себе: возраст, рост, вес, тип фигуры и даже форму плеч. А ещё рассказывает, куда ходит и чей стиль в одежде нравится. Например, Блэр Уолдорф, принцессы Дианы, Lil Nas X или героя «Острых козырьков». Также можно самому загрузить в приложение свои фэшн-иконы и референсы. На основе этих ответов AI и генерит образы

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

Стеклянные текстуры здесь тоже есть — за них отвечают волосы персонажей. Такими элементами мы объединяли ч/б иллюстрации с ярким 3D — и сделали дизайн более целостным.

Это флоу, где пользователь раскладывает свой гардероб и фотографирует каждую вещь. Затем сортирует всё по категориям и маркирует по цветам и стилям.

Штаны, юбки, жакеты, рубашки для обложек категорий — всё нагенерили с эффектом стекла.

Нейросеть собирает образы из гардероба пользователя или с вещами из базы, которая в неё загружены. Каждый аутфит можно отредактировать вручную. Например, если нравится топ, который подобрала нейросеть, а юбку хочется заменить на свою.

В этом флоу пользователь выбирает, для какого случая нужен лук, например на свидание, бизнес-встречу или вечеринку. А нейросеть предлагает 10 вариантов. Пока запрос обрабатывается, на экране — всё те же ч/б персонажи в одежды с текстурами стекла.

Оценить сгенерированные луки можно как в приложениях для знакомств. Свайп вправо — лайк, свайп влево — дизлайк, свайп вверх — суперлайк. Понравившиеся аутфиты сохраняются, неподходящие — нет. Со временем нейросеть учится и предлагает более релевантные образы.

Иконки для реакций выбрали минималистичные: дизлайк — крестик, лайк — сердечко, суперлайк — множество сердечек.

Для pinterest-эффекта в приложении есть инструмент Style inspiration. Тут нейросеть генерит луки без вещей пользователя — на основе одежды, которая загружена в неё разработчиками. Аутфиты можно сохранить, а можно отредактировать, заменив сгенерированный элемент одежды своим.

Тут у нас три стопочки с одеждой: луки из гардероба, от нейросети и отредактированные пользователем. С классическими функциями — отредактировать, удалить, добавить новое.

Тут могла быть классическая история о спорах дизайнеров и разработчиков. Но в случае со Stylzen это нам пришлось подстраиваться под разработку, а не наоборот. Мы учли все комментарии и ограничения, сейчас приложение на этапе вёрстки — и никаких вопросов к нам пока не было.

Вот так выдуманный финтех привел нас к дизайну реального аппа. Мы смогли смэтчиться с требовательной клиенткой, разработать дизайн для почти готового, но голого приложения и сильно прокачаться в работе с AI.

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