Редизайн приложения allall
Как и зачем я проводил редизайн основного приложения allall в 2024‑2025. Упаковывал кейс в выступление, можно посмотреть запись.
Контекст
Компания: ТК «Садовод» — крупнейший оптово‑розничный комплекс в России, находится в Москве. allall — стартап внутри ТК «Садовод», занимается онлайн‑продажами из комплекса.
Аудитория: Клиенты, которые хотят сэкономить, и бизнес, который покупает для перепродажи.
Моя роль: Старший дизайнер. В обязанности входили все задачи по дизайну, частично стратегия и менеджерские задачи.
Помогали: Таня — джуниор-дизайнер и Виталий — иллюстратор.
Предпосылки
1. Проблемы с UI, UX и вёрсткой.
Причины три:
1. На тот момент у меня не хватало опыта в больших системах (уже наверстал).
2. Сильно не хватало контекста, понимания паттернов и специфики аудитории (пришло после запуска и поездок «в поля»).
3. Вёрсткой занималась аутсорс студия, и результат был… ниже среднего (позже перешли на инхаус).
Из‑за этого клиенты не доверяли сервису и не конвертировались в покупку — ключевая проблема, которая блокировала рекламу и развитие сервиса.
2. Направление
На запуске приложения не было понимания, какие сегменты из целевой аудитории будут самыми выгодными. Спустя 2,5 года появилось достаточно информации, чтобы определить эти сегменты и сфокусироваться на них.
3. Аутсорс → Инхаус
В компании происходил переход от аутсорс разработки к своей инхаус команде и планировали переписывать часть сервисов. Редизайн приложения идеально вписывался в эту ситуацию.
Процесс
Для начала собрал информацию о проблемах в текущей версии: от службы поддержки, из отзывов, у команды, из беклога. Из этого получился список конкретных проблем, которые надо было решить при редизайне.
Потом собрал новую палитру на переменных и базу для ДС. Начал собирать прототипы, проверять гипотезы через небольшие коридорки на фигма прототипах.
Когда основные экраны были готовы, собрал прототип под айфон руководителя, презентовал и получил добро на полную реализацию.
Организация макетов
Так как фигма была основным источником информации, порядку и макетам было уделено большое внимание. Далее раскрою структуру файла с макетами приложения.
Страницы внутри файла расположены в соответствии с навигацией в приложении — это упростило поиск нужных макетов для всех участников, даже если они слабо включены в процесс.
На странице макеты собраны в секции по экранам/модалкам. Для каждой новой фичи создаётся новая версия секции, после публикации в прод старая секция уходит в архив.
Внутри секции сначала идут макеты экрана — все состояния во всех адаптивах. Чтобы ускорить дизайнерскую работу, адаптив происходит через компоненты на автолейаутах и переключение мода у переменных.
Далее выделены все интерактивные зоны на экране и что будет при взаимодействии с ними. Так разработка наглядно видит требования, а тестированию потом легко проверять сборки.
Далее сравнение экрана с предыдущей версией. При редизайне этот блок подсказывает, куда переместились текущие элементы и что было добавлено. В дальнейшем помогает конкретизировать требования в рамках задачи.
Закрывают секцию экрана прототипы. Нужны чтобы показывать такие флоу, которые сложно показать на статичных макетах. Собрать такой прототип внутри фигмы быстрее и нагляднее, чем расписывать требования текстом.
Внизу страницы находятся секции с планируемыми функциями. В процессе редизайна взял весь беклог и сделал наброски для каждой планируемой функции, чтобы предусмотреть место на макетах и не пришлось потом делать редизайн для редизайна.
Разработка и публикация
Вся разработка так же была разбита на экраны. В первый релиз вошли все самые главные экраны, через которые пользователь обязательно проходит при оформлении заказа. Под этот релиз сделали медийную поддержку в сторах и соцсетях сервиса.
Далее каждый экран публиковался как отдельный релиз. Благодаря такому подходу разработчиков можно было параллельно привлекать к другим задачам, постоянные релизы показывали живость проекта, пользователи получали регулярные улучшения продукта и исправление проблем.
Результаты
Скачать обновлённое приложение allall.
В приложении нет аналитики, поэтому результаты собирались из отзывов, комментариев, обращений в поддержку и личного общения с клиентами (с крупными налажено прямое общение).
- Клиентам стало проще ориентироваться в приложении, они стали своевременно получать ответы на свои вопросы внутри интерфейса. Это снизило нагрузку на поддержку и снизило негатив у клиентов.
- Пропала проблема с доверием, интерфейс теперь выглядит ближе к привычным маркетплейсам. Это разблокировало возможность запуска крупной рекламы.
- Команда отладила совместную работу, появились процессы взаимодействия дизайна, разработки и тестирования.
- Появился план развития на ближайшее время и система для его реализации.
Было/стало
На главной добавились шорткаты к самым востребованным разделам и подготовили верхнюю часть к дальнейшим обновлениям (пока секрет). В карточке товара основной фокус сделали на фото товара, кнопку добавления в корзину подняли ближе к фото, добавили информацию о продавце и дату публикации товара — очень важная информация для клиентов.
В корзине карточка товара стала компактнее, вычистили лишнюю информацию и аккуратнее структурировали нужную. Добавили удаление только товаров по группам и изменили отображение товаров не в наличии, уменьшив количество технических проблем.
На экране оформления заказов значительно сократил количество кликов, вместо ~10 кликов теперь нужен всего один. Для клиентов, которые заказывают на разные адреса (есть такой сегмент) упростили смену адреса и получателя.
Просто немного красоты
