Переделываем оформление действующих сайта и мобильного приложения для роста конверсии — раздельно или в связке, с общим фирменным языком. Разбираем текущий интерфейс, перестраиваем пользовательские сценарии, обновляем визуал под бренд и выпускаем обновление. Если стек устарел — переводим сайт и приложение на общую кросс-платформенную основу Flutter.
Редизайн — это обновление оформления и логики работающего продукта: сайта, мобильного приложения или их связки. Освежаем визуал под бренд, перестраиваем сценарии там, где теряется конверсия, и внедряем обновление — сохраняя базу клиентов, аккаунты в сторах и интеграции.
Адреса, заголовки и тексты при этом сохраняем, чтобы сайт удержал позиции в поиске. Если продукта ещё нет и дизайн нужно создавать с нуля — это другая задача, разработка UX/UI-дизайна приложения и сайта.
Разработка UX/UI-дизайна с нуляВ работу берём действующий продукт — с живой аудиторией и данными. Освежаем визуал, перестраиваем слабые сценарии и внедряем обновление, сохраняя базу клиентов, аккаунты в сторах и интеграции.
Что переделать в первую очередь, показывает аудит UX/UI или аудит мобильного приложения — с него удобно начать переработку.
Переработку запускают по одному из четырёх сигналов. Каждый одинаково относится и к приложению, и к сайту: совпал хотя бы один — оформление работает против бизнеса.
Оформление проигрывает конкурентам и расходится с текущими рекомендациями по дизайну iOS, Android и веба. Ещё до первого заказа посетитель считывает сигнал «бренд отстал».
Люди не добираются до оплаты: больше брошенных корзин, ниже рейтинг приложения в сторах и меньше глубина просмотра сайта. Оформление мешает целевому действию.
Обновились логотип, цвета и айдентика — но сайт и приложение остались в прежнем стиле и выбиваются из нового бренда в рекламе и на точках продаж.
Сайт и приложение существуют как отдельные проекты на устаревших технологиях: обновляются вразнобой и дорого обходятся в поддержке. Общая Flutter-основа объединяет их.
Пока не ясно, что менять? Стартуйте с диагностики — аудит UX/UI покажет слабые места пути и подскажет, что окупится переделать в приложении и на сайте.
Работаем в двух направлениях. Их берут по отдельности или объединяют — во втором случае приложение и сайт получают общий визуальный язык и единую дизайн-систему.
Обновляем оформление действующего приложения и выкладываем новую версию в сторы. База клиентов, аккаунты бренда и интеграции остаются на месте. Если стек устарел, переводим приложение на кросс-платформенный Flutter с общим кодом для iOS и Android — это приложение интернет-магазина на нашей платформе.
Меняем оформление и структуру страниц действующего сайта на Flutter Web: витрину, каталог, карточку товара, оформление заказа. Поисковые позиции удерживаем через сохранение адресов и переадресацию. Подробнее — сайт интернет-магазина на платформе FITTIN.
Когда нужны и приложение, и сайт в едином стиле, оптимальный путь — сайт и приложение на одной Flutter-базе: общая дизайн-система, синхронные правки оформления и меньше расходов на поддержку.
Работа идёт четырьмя этапами — одинаково для приложения и для сайта. Первый закрывает диагностику, два следующих — переработку интерфейса, последний доводит обновление до клиентов.
Проходим ключевые сценарии сайта и приложения глазами клиента, снимаем показатели, отмечаем, где путь ломается и теряется конверсия. Итог — перечень проблемных мест с приоритетами: с чего начинаем переработку.
Заново выстраиваем маршрут клиента по важным экранам и страницам — витрина, каталог, карточка, оформление. Убираем лишние шаги там, где уходили пользователи, и делаем навигацию прозрачной под бизнес-цели.
Рисуем итоговые макеты под обновлённый бренд — цвет, шрифт, иконки, состояния элементов — и оформляем общую дизайн-систему с токенами и сеткой отступов, чтобы сайт и приложение читались как один продукт.
Программируем новый интерфейс, проверяем на живых устройствах с разными версиями iOS и Android, выкладываем новую версию в App Store, Google Play, RuStore и другие магазины приложений и публикуем обновлённый сайт.
База клиентов, аккаунты бренда и интеграции остаются на месте: обновляем оформление и сценарии, а не запускаем продукт заново.
Переработку оформления ведут двумя способами. Выбор зависит от состояния продукта и готовности бизнеса к паузе в развитии.
Обновляем оформление шаг за шагом — по экрану и по странице — поверх текущей версии. Продукт не встаёт на паузу, аудитория и данные на месте, а первые улучшения видны раньше. Так безопасно доводить работающие сайт и приложение без угрозы показателям.
Переделываем продукт целиком — нередко с переводом сайта и приложения на общую Flutter-основу. Разовые вложения выше, зато появляется новый фундамент и дешевеет поддержка. Пример связки на одной базе — Fashouse: сайт и приложения для iOS и Android на общей Flutter-кодовой базе.
| Параметр | Эволюционный редизайн | Полный редизайн |
|---|---|---|
| Скорость первых изменений | Обновлённые экраны и страницы появляются по одному, раньше | Виден после переработки всего продукта целиком |
| Влияние на аудиторию | Почти нет — сайт и приложение продолжают работать | Нужен аккуратный перенос базы, контента и интеграций |
| Единовременный бюджет | Меньше, разбит по шагам | Больше, но сразу закрывает и переработку, и смену стека |
| Когда выбирать | Продукт рабочий, задача — поднять конверсию | Устаревший стек, разнесённые сайт и приложение, ребрендинг |
У нас есть опыт работы с такими проектами — перезапуск приложений и перенос на новый фундамент на Flutter. Готовые приложения опубликованы в App Store и Google Play.
Бренд одежды перевёл приложение на Flutter: iOS и Android теперь на общей кодовой базе, привычные покупателям сценарии сохранены, добавлена интеграция Mindbox.
Fashion-марка ушла с готового стороннего продукта на своё кроссплатформенное приложение: бренду завели аккаунты в сторах и выпустили обновление поверх прежнего решения.
Сеть перезапустила приложение на Flutter с новым оформлением, заказом с нескольких складов и сканером штрихкодов.
Приложения перезапущены на Flutter и опубликованы в сторах. Другие проекты — в портфолио.
Цена определяется объёмом работ — считаем его по итогам аудита продукта и закрепляем смету и срок до старта. Формат подбираем под размах задачи.
Поэтапные изменения интерфейса
Оплата по модели Time & Materials с оценкой в часах перед началом задачи. Подходит, когда обновляем сайт и приложение постепенно.
Полная переработка на Flutter
Разовая интеграция под бренд (до 30 рабочих дней) и ежемесячная лицензия с техподдержкой команды FITTIN внутри; всё сверх базового набора — по Time & Materials.
До старта
Объём работ считаем по итогам аудита продукта, смету и срок закрепляем до старта. Ориентир по бюджету заранее даст калькулятор стоимости.
Тарифы платформы опубликованы на странице тарифов. Прикинуть диапазон бюджета под свой случай можно на калькуляторе стоимости. Если перед редизайном нужно расставить приоритеты, поможет аудит UX/UI, а принять на доработку продукт другого подрядчика — техническая поддержка приложений.
Тексты в блоге помогут подготовиться к редизайну и разобраться, как оформление влияет на продажи.
Как оформление влияет на покупки в приложении и на сайте.
Читать статью →Как дизайнер работает над интерфейсом по шагам.
Читать статью →Аудит только ставит диагноз: разбирает интерфейс и путь клиента, показывает, где утекает конверсия, — это стартовая точка. Редизайн идёт следом: на основе аудита перерисовывает сценарии и оформление сайта или приложения и доводит результат до публикации. Нужна лишь диагностика — начните с аудита UX/UI или аудита мобильного приложения.
Да. Формируем общую дизайн-систему — цвет, шрифт, компоненты — и переносим её и в приложение, и на сайт, чтобы бренд читался одинаково во всех каналах. На Flutter сайт и приложение можно держать на общей кодовой базе, тогда правки оформления выходят синхронно, как в проекте Fashouse.
Редизайн трогает оформление, а не смысловое наполнение страниц. Адреса, заголовки и тексты сохраняем, а если адреса меняются — настраиваем переадресацию со старых страниц на новые. Обновлённый сайт удерживает набранные позиции. Перед стартом стоит расставить приоритеты через аудит UX/UI.
Не обязательно. Поэтапный редизайн меняет оформление постепенно, поверх текущей версии — код остаётся. Полная переработка нередко подразумевает переход на кросс-платформенный Flutter: сайт и приложение переезжают на общую кодовую базу, когда старый стек дорого держать или продукт разнесён по разным проектам.
Цена зависит от объёма и определяется после аудита продукта — смету и срок закрепляем до старта. Поэтапные правки оформления идут по модели Time & Materials с оценкой в часах перед задачей. Полная переработка с переходом на модульную Flutter-платформу FITTIN считается по модели платформы — цифры на странице тарифов. Ориентир по бюджету даст калькулятор.
Срок определяется объёмом переработки и закрепляется после аудита. Поэтапный редизайн ведём без остановки развития продукта. При полной переработке с переходом на модульную Flutter-платформу FITTIN интеграция под бренд укладывается в 30 рабочих дней.
Да. Принимаем на редизайн продукты от других подрядчиков: стартуем с аудита текущего кода и оформления, затем перерабатываем сценарии и интерфейс и внедряем обновление. Такой продукт можно параллельно взять на техническую поддержку с дальнейшим развитием.
