[email protected]
Главная/Услуги/UI/UX-дизайн

UI/UX-дизайн приложений и сервисов

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

  • Исследования пользователей и аналитика сценариев
  • Интерактивные прототипы и тестирование до разработки
  • Дизайн-системы, готовые к передаче разработчикам
Мои задачи+

Дизайн — это то, как продукт работает

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

01

UX — логика и сценарии

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

02

UI — визуальный язык

Сетка, типографика, цвет, иконки, анимации и состояния элементов. Всё собрано в систему, а не нарисовано отдельно для каждого экрана.

03

Измеримый результат

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

Что мы проектируем

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

01

Мобильные приложения

Интерфейсы для iOS и Android с учётом нативных паттернов каждой платформы: навигация, жесты, системные элементы, тёмная тема, адаптация под разные размеры экранов и динамический шрифт.

02

Веб-сервисы и личные кабинеты

Клиентские кабинеты, сервисы бронирования, маркетплейсы, онлайн-платформы. Адаптивный дизайн, который одинаково удобен на широком мониторе и в браузере смартфона.

03

Корпоративные системы

Интерфейсы CRM, ERP и внутренних инструментов, где сотрудник проводит по восемь часов в день. Здесь важны плотность информации, скорость работы с клавиатуры и минимум лишних кликов.

04

Редизайн существующих продуктов

Анализируем текущую версию, находим узкие места по данным аналитики и отзывам, предлагаем изменения, которые можно внедрять поэтапно, не пугая привыкших пользователей.

Частые ошибки интерфейсов, которые мы исправляем

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

  • Регистрация обязательна до того, как человек понял ценность продукта, — и половина уходит на первом экране
  • Важная информация вроде цены доставки или условий возврата появляется только на последнем шаге
  • Сообщения об ошибках говорят «что-то пошло не так» вместо того, чтобы объяснить, что именно исправить
  • Кнопки слишком маленькие для пальца и расположены там, куда неудобно дотянуться одной рукой
  • Пустые экраны без подсказки, что делать дальше, когда у пользователя ещё нет данных
  • Внутренний жаргон компании в названиях разделов, непонятный клиентам
  • Формы, которые сбрасывают введённые данные после ошибки в одном поле

Многие из этих проблем исправляются за несколько дней работы и дают ощутимый прирост метрик ещё до глубокого редизайна.

Процесс работы над дизайном

Каждый этап заканчивается конкретным артефактом, который вы можете оценить и согласовать. Так проект не уходит в бесконечные правки «сделайте поярче».

1

Погружение и исследование

Изучаем бизнес-цели, аудиторию и конкурентов. Проводим интервью с пользователями и сотрудниками, анализируем данные аналитики и обращения в поддержку. Формулируем ключевые сценарии и гипотезы.

2

Информационная архитектура

Составляем карту экранов и пользовательских потоков, определяем, какая информация где находится и как пользователь между ними перемещается.

3

Прототип

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

4

Визуальная концепция

Предлагаем стиль на нескольких ключевых экранах. После согласования распространяем его на весь продукт и собираем библиотеку компонентов.

5

Дизайн-система и передача в разработку

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

Почему мы тестируем прототипы до разработки

Исправить ошибку в прототипе стоит часы работы дизайнера. Исправить её в готовом приложении — недели работы разработчиков, повторное тестирование и публикацию в сторах.

Пять пользователей находят большинство проблем

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

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

Для продуктов, которые уже работают, дополняем качественные исследования количественными: анализируем воронки, тепловые карты и записи сессий, проводим A/B-тесты отдельных изменений.

Что проверяем на тестах

  • понятна ли структура и навигация
  • можно ли выполнить задачу без подсказки
  • как пользователь реагирует на ошибки
  • понятны ли тексты и названия кнопок
  • что вызывает сомнения перед покупкой

Дизайн-система вместо набора картинок

Продукт живёт и развивается. Если дизайн существует только в виде отдельных макетов, каждая новая функция рисуется заново, а интерфейс постепенно превращается в лоскутное одеяло.

01

Токены

Цвета, размеры шрифтов, отступы, радиусы и тени заданы как переменные. Смена фирменного цвета занимает минуты, а не неделю перерисовки.

02

Компоненты

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

03

Шаблоны экранов

Типовые раскладки для списков, карточек объектов, форм и настроек. Новый раздел собирается из готовых блоков, сохраняя единство продукта.

04

Правила использования

Документация, когда применять какой компонент, как писать тексты в интерфейсе, как вести себя при ошибках. Это помогает новым дизайнерам и разработчикам.

05

Связь с кодом

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

06

Доступность

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

Что меняется после редизайна

Средние результаты по проектам, где мы перерабатывали ключевые сценарии существующего продукта и замеряли метрики до и после.

+35%конверсия в оформление заказа в мобильном приложении
−50%обращений в поддержку по вопросам «как сделать»
×2быстрее выполнение типовой операции в корпоративной системе
4,8средняя оценка приложений в сторах после обновления интерфейса

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

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

Инструменты

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

FigmaFigJamProtopieMiroMaterial DesignHuman Interface GuidelinesЯндекс МетрикаВебвизорLottieRiveDesign TokensStorybook
  • Все макеты и прототипы доступны вам в реальном времени, можно оставлять комментарии прямо на экранах
  • Анимации передаются в формате, который разработчики подключают без перерисовки
  • Иллюстрации и иконки готовятся в векторе и масштабируются под любые экраны
  • После передачи в разработку дизайнер проверяет реализацию и принимает экраны

Стоимость дизайна

Объём работ зависит от количества сценариев и экранов, глубины исследований и необходимости дизайн-системы. Даём фиксированную оценку после брифа.

UX-аудит

Экспертный анализ продукта, разбор аналитики, список проблем с приоритетами и рекомендациями

от 150 000 ₽

Прототип и исследование

Интервью, карта сценариев, кликабельный прототип, юзабилити-тестирование с отчётом

от 300 000 ₽

Дизайн мобильного приложения

UX и UI для iOS и Android, библиотека компонентов, анимации, передача в разработку

от 500 000 ₽

Дизайн веб-сервиса или корпоративной системы

Адаптивные макеты, дизайн-система, документация, авторский надзор за реализацией

от 600 000 ₽

Нас удивило, что дизайнеры начали не с мудбордов, а с разговоров с нашими курьерами и клиентами. Половину идей, которые казались нам очевидными, тестирование отбросило, а несколько неожиданных находок дали заметный рост повторных заказов.

Продакт-менеджер, сервис доставки

Дизайн — часть наших проектов по мобильной разработке, веб-приложениям и запуску MVP, но его можно заказать и отдельно.

Вопросы о дизайне

Можно ли заказать только дизайн, без разработки?

Да. Мы передаём макеты, дизайн-систему и документацию вашей команде или подрядчику и можем сопровождать реализацию в формате авторского надзора.

Сколько вариантов дизайна вы предлагаете?

Мы показываем одну-две продуманные концепции на ключевых экранах с объяснением решений. Десяток случайных вариантов отнимает время и не помогает выбрать лучший.

Сколько длится работа над дизайном приложения?

Прототип небольшого приложения занимает три–четыре недели, полный дизайн с дизайн-системой — от полутора до трёх месяцев в зависимости от числа сценариев.

Учитываете ли вы фирменный стиль компании?

Да, берём за основу брендбук и адаптируем его для цифровой среды: подбираем цифровую палитру, проверяем контрастность, дополняем элементами, которых нет в печатном гайде.

Нужно ли делать разный дизайн для iOS и Android?

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

Сделаем интерфейс, которым удобно пользоваться

Расскажите о продукте и аудитории. Предложим формат работ — от аудита до полного дизайна с дизайн-системой.

Оставить заявку+