Coral Club, 2023-2025
B2B2C приложение в сфере wellness на токенизированной дизайн-системе
Международная компания, производящая БАДы и доставляющая их в 175 стран. Цифровые продукты компании объединяют e-com и инструменты для бизнеса дистрибьюторов
Проблема
Устаревшее приложение на хардкоде и WebView, закрытая аналитика, отсутствие дизайн-системы и UX-процессов. Пользователи уходили в web-версию, потому что мобильное приложение не закрывало их задачи и имело сложную навигацию.
Цели проекта
- Повысить консистентность и удобство интерфейсов текущего приложения.
- Подготовить дизайн нового мобильного приложения.
- Создать фундамент масштабируемого дизайна.
- Встроить UX-исследования в рабочий процесс.
- Перейти с операционного на тактический уровень развития дизайна в компании.
Роль
Senior продуктовый дизайнер.
Вела направление мобильных приложений и помогала web-команде выстроить единый UX-подход.
Вела направление мобильных приложений и помогала web-команде выстроить единый UX-подход.
Результаты
- MAU с начала 2023 к концу 2023 выросла с 32 до 54% от общего числа пользователей компании.
- Количество новых пользователей приложения увеличилось на 204%.
- Подготовлены макеты к релизу нового приложения.
- Разработана и используется система UX-тестирования
Действия
Организация процессов
- Запустила 3-месячные дорожные карты и единый шаблон задач.
- Внедрила регулярные качественные исследования с пользователями.
- Помогала младшему дизайнеру и адаптировала новых сотрудников.
- Создала changelog для прозрачности изменений.
Исследования и выявление проблем
- Проводила полевые исследования в офисах продаж, глубинные интервью с пользователями и опросы в чатах дистрибьюторов.
- На основе карт персонажей и UX-аудита зафиксировала ключевые точки трения в старом приложении.
- Анализировала B2B2C-сервисы, чтобы выделить лучшие паттерны взаимодействия.
- На usability-тестах подтвердила, какие изменения должны быть внесены в сценарии.
Дизайн
- Работала с дизайн-долгом, унифицировала визуальные паттерны и логику экранов.
- Подготовила к релизу ядро нового приложения (обновленные сценарии частично внедрены и протестированы на старом приложении);
- Учитывала адаптацию под разные валюты и языки, включая правосторонние (иврит);
- Участвовала в подготовке, тестировании и внедрении токенизированной дизайн-системы для всех платформ;
- Помогала веб-дизайнерам в редизайне личного кабинета дистрибьютора.
Ключевые направления
Инструменты для бизнеса дистрибъюторов
Цель
Упростить дистрибьюторам работу (выполнение конусных целей, продажи и их анализ, работа со структурой клиентов). Для этого могут использоваться отчёты и закрытие рангов, финансовые инструменты, работа с лидами и членами структуры.
Упростить дистрибьюторам работу (выполнение конусных целей, продажи и их анализ, работа со структурой клиентов). Для этого могут использоваться отчёты и закрытие рангов, финансовые инструменты, работа с лидами и членами структуры.
Зоны работы
Через общение с пользователями стало понятно, что наиболее часто используемые функции (балансы кошельков, регистрация в структуру, заказы, офисы продаж, смена языка и региона) спрятаны глубоко в структуре ЛК. Отчеты сложно просматривать с телефона: мелкий шрифт, неудобный формат скролла. Разметка не помогает наметить реалистичный план, с которым было бы удобно сверяться. Сохранять промо-материалы и делиться ими неудобно (нет визуализации процесса скачивания, не ясно куда сохраняется файл, поиск не учитывает вложенность). Запись контакта (лида) требует заполнения длинной формы и не дает возможности быстрых заметок, информация по лидам представлена таблицей с длинным горизонтальным скроллом. О некоторых полезных разделах пользователи не знают или не могут их найти.
Через общение с пользователями стало понятно, что наиболее часто используемые функции (балансы кошельков, регистрация в структуру, заказы, офисы продаж, смена языка и региона) спрятаны глубоко в структуре ЛК. Отчеты сложно просматривать с телефона: мелкий шрифт, неудобный формат скролла. Разметка не помогает наметить реалистичный план, с которым было бы удобно сверяться. Сохранять промо-материалы и делиться ими неудобно (нет визуализации процесса скачивания, не ясно куда сохраняется файл, поиск не учитывает вложенность). Запись контакта (лида) требует заполнения длинной формы и не дает возможности быстрых заметок, информация по лидам представлена таблицей с длинным горизонтальным скроллом. О некоторых полезных разделах пользователи не знают или не могут их найти.
Исследования
• Были проведены опросы пользователей в комьюнити-чатах и пользовательские интервью, в том числе в полях (офисы продаж). На их основе стала понятна приоритетность функционала, запрос на сценарии быстрой работы с телефона (при знакомстве с заинтересованным человеком, его ведении, общении на конференциях и встречах структуры).
• Выявление проблемы: структура сложна настолько, что пользователи часто обращаются к видео-инструкциям по использованию личного кабинета сайта или специально заучивают последовательность выхода на ту или иную функцию.
• Был проведен UX-анализ личных кабинетов банков и интернет-магазинов в сфере красоты.
• Были проведены опросы пользователей в комьюнити-чатах и пользовательские интервью, в том числе в полях (офисы продаж). На их основе стала понятна приоритетность функционала, запрос на сценарии быстрой работы с телефона (при знакомстве с заинтересованным человеком, его ведении, общении на конференциях и встречах структуры).
• Выявление проблемы: структура сложна настолько, что пользователи часто обращаются к видео-инструкциям по использованию личного кабинета сайта или специально заучивают последовательность выхода на ту или иную функцию.
• Был проведен UX-анализ личных кабинетов банков и интернет-магазинов в сфере красоты.
Результат
• Среднее количество экранов на один сценарий сократилось на 2–5.
• Изменения частично протестированы на старом приложении и получили положительный фидбэк от пользователей.
• Изменения показали себя удачно на 14 usability-тестах.
• Среднее количество экранов на один сценарий сократилось на 2–5.
• Изменения частично протестированы на старом приложении и получили положительный фидбэк от пользователей.
• Изменения показали себя удачно на 14 usability-тестах.
01
из 05
На главную страницу дистрибьютора вынесена аналитика, быстрый доступ к счетам и быстрые действия. Каждый слот данной панели можно включить или отключить для отображения. В личном кабинете востребованные действия вынесены наверх, а вся структура расположена на одной странице в аккордеоне.
результат
На usability-тестах такая структура показала снижение временных затрат на поиск необходимого раздела в 3 раза.
02
из 05
Раздел Лиды был превращен в Мои контакты и спроектирован по аналогии с записной книжкой, чтобы было удобно завести контакт на бегу и поставить напоминание. Предусмотрены теги и заметки, чтобы удобно вести лиды, находящиеся в работе.
результат
Интервью с пользователями показало, что раздел является востребованным и ожидаемым в релизе нового приложения
03
из 05
Ежемесячно дистрибьюторы перераспределяют накопленные баллы. Для удобного контроля получения рангов в трансфером счете добавлена возможность перевода нескольким членам структуры, введено напоминание о сроках переводов, добавлены ФИО и аватарки пользователей к ID.
результат
Дистрибьютор получит возможность гибко распределять накопленные баллы для максимальной выгоды.
потенциал
Выводить кому из структуры не хватает баллов и/или объединить функционал с разметкой (система планирования покупок структуры на месяц)
04
из 05
Таблица расчета бонусов по странам происхождения была пересобрана для более комфортного изучения из мобильного приложения. Добавлена возможность выбрать сокращенный вид таблица по конкретным столбцам и подсказка о проступке.
потенциал
Откреплять и закреплять первую колонку, а также сделать горизонтальную адаптацию
04
из 05
Таблица расчета бонусов по странам происхождения была пересобрана для более комфортного изучения из мобильного приложения. Добавлена возможность выбрать сокращенный вид таблица по конкретным столбцам и подсказка о прокрутке.
потенциал
Откреплять и закреплять первую колонку, а также сделать горизонтальную адаптацию
05
из 05
В файловом хранилище добавлен прогресс скачивания и подсказка куда сохраняется файл. Добавлен учет вложенности и возможность делиться файлами напрямую, без скачивания.
результат
Сценарий был внедрен в старое приложение и получил положительную обратную связь, отзывы о потере скачанных файлов прекратились
E-com: главная, каталог и карточка продукта, корзина
Цель
Сделать процесс покупки простым и понятным и для новичков, и для опытных дистрибьюторов.
Сделать процесс покупки простым и понятным и для новичков, и для опытных дистрибьюторов.
Зоны работы
Приложение было закрыто для незарегистрированных пользователей, что отталкивало потенциальных пользователей. Главная страница была занята аккордеоном каталога и не несла полезного функционала как с точки зрения дистрибьюторского бизнеса, так и с точки зрения маркетинга. Каталог был сложно структурирован по категориям, невозможно было перейти ко всем товарам категории. Корзина существовала только в web-view, групповые заказы были спрятаны в ЛК (используются дистрибьюторами для экономии на доставке и при проведении марафонов, для бизнеса увеличивает чек).
Приложение было закрыто для незарегистрированных пользователей, что отталкивало потенциальных пользователей. Главная страница была занята аккордеоном каталога и не несла полезного функционала как с точки зрения дистрибьюторского бизнеса, так и с точки зрения маркетинга. Каталог был сложно структурирован по категориям, невозможно было перейти ко всем товарам категории. Корзина существовала только в web-view, групповые заказы были спрятаны в ЛК (используются дистрибьюторами для экономии на доставке и при проведении марафонов, для бизнеса увеличивает чек).
Исследования
• Кабинетные исследования (NN Group, Baymard) показали: доступ к товарам до регистрации снижает барьер входа и повышает возвраты.
• Анализ конкурентов (Oriflame, Herbalife, NL Store) подтвердил, что открытый каталог становится стандартом индустрии.
• Кабинетные исследования (NN Group, Baymard) показали: доступ к товарам до регистрации снижает барьер входа и повышает возвраты.
• Анализ конкурентов (Oriflame, Herbalife, NL Store) подтвердил, что открытый каталог становится стандартом индустрии.
Результат
• Количество возможных действий на главной выросло с 2 до 8, скролл до ключевых действий сократился.
• Путь от выбора до оформления сократился на 3–4 экрана.
• Изменения не вызвали затруднений на 14 usability-тестах.
• Пользователи особенно тепло приняли групповые корзины и получателей.
• Количество возможных действий на главной выросло с 2 до 8, скролл до ключевых действий сократился.
• Путь от выбора до оформления сократился на 3–4 экрана.
• Изменения не вызвали затруднений на 14 usability-тестах.
• Пользователи особенно тепло приняли групповые корзины и получателей.
01
из 04
Переработана структура каталога, добавлена возможность перейти ко всем продуктам. Каталог вынесен на отдельную вкладку тап-бара. Карточки переведены на двухколоночную сетку для ускорения визуального обзора.
результат
Usability-тесты подтвердили удобство новой структуры каталога. Ранее пользователи пытались запомнить в какой категории раздела находится продукт.
02
из 04
Бейджи вынесены под карточку, добавлен калькулятор доставки и наличие в офисах продаж. Добавлены блоки допродаж и зафиксированная кнопка с ценой.
результат
Решения внедрены в старое приложение и получили положительную обратную связь от пользователей. Косвенно стали причиной роста ежемесячной аудитории приложения, так как именно e-com часть выделяли в опросах об удобстве старого приложения.
03
из 04
Продукты в истории заказов визуализированы, добавлены фиксированные кнопки управления заказом, добавлена возможность повторить заказ или добавить продукт в корзину не выходя из истории.
результат
Путь повтора заказа сократился вдвое и стал быстрее из-за визуализации продуктов.
04
из 04
Подготовлены макеты корзины с проработкой сценариев трансферного заказа (специальный вид заказа, за который начисляются баллы, которые можно использовать для закрытия рангов членов структуры), акции N+1, гибкое выключение продуктов из трансферного заказа и подсказки.
результат
Решения подтвердили свою интуитивность на usability-тестах с дистрибьюторами.
Что дала моя работа?
Для дистрибьюторов
Улучшение пользовательского опыта текущего приложения. Готовится к продакшену новое приложение, где дистрибьюторам будет легче работать и вести бизнес.
Улучшение пользовательского опыта текущего приложения. Готовится к продакшену новое приложение, где дистрибьюторам будет легче работать и вести бизнес.
Для бизнеса
Прозрачный, легко масштабируемый продукт, у которого есть потенциал повышения удержания и среднего чека.
Прозрачный, легко масштабируемый продукт, у которого есть потенциал повышения удержания и среднего чека.
Для команды
Основа для системного UX и общий язык между дизайнерами и разработчиками в виде дизайн-системы.
Основа для системного UX и общий язык между дизайнерами и разработчиками в виде дизайн-системы.
Рефлексия
Этот проект стал примером, как UX-решения можно строить без аналитики, опираясь на качественные и кабинетные исследования, а также использование фреймворков. Здорово, когда метрики доступны, но когда их нет есть реальные люди. Проект научил ценить обратную связь и общаться с пользователями всеми доступными способами.
