Рефакторинг интерфейсов фандоматов для проектов Ecoplatform, Sparklo и SIRC
UI/UX, Прототипирование / 2025
Количество пользователей приложений:
Sparklo
более 571 110
Ecoplatform
более 850 320
SIRC
более 165 850
В этом кейсе я хочу рассказать, как я проводила рефакторинг макетов для фандоматов (RVM/Reverse Vending Machine) для трех брендов с фокусом на консистентность и масштабируемость, что позволило снизить сложность интерфейса, улучшить предсказуемость пользовательского опыта и ускорить разработку новых сценариев.
Сейчас
- Интерфейсы продуктов приведены к единой системе (включая бренды, требующие адаптацию под RTL направление);
- Улучшена структура экранов с учётом потребностей пользователей и команды разработки продукта;
- Создан полноценный UI-kit, содержащий необходимые данные о цветах, типографике и компонентах, используемых в макетах.
Итоги в цифрах
- Скорость создания дизайна увеличилась более чем в 4 раза;
- Скорость разработки увеличена более чем в 5 раз;
- Количество обращений от сотрудников отдела тестирования снизило более чем в 2 раза.*
*Согласно данным за 8 месяцев использования макетов.
Рефакторинг — это процесс улучшения структуры системы без изменения её основной функциональности. В дизайне это означает пересборку интерфейсов и компонентов с целью устранения дублирования, повышения консистентности и приведения решений к единой системе. Рефакторинг помогает снизить дизайн- и технический долг, упростить взаимодействие между дизайном и разработкой и подготовить продукт к масштабированию новых сценариев.
На момент начала моей работы:
Все это усложняло создание новых макетов, последующий процесс разработки и тестирования, а также ухудшало эффективность коммуникации с пользователями.
Целью было унифицировать компоненты, уменьшить дублирование решений и привести макеты к более системной архитектуре, чтобы упростить разработку и масштабирование продукта.
На момент начала моей работы:
- Отсутствовал UI-kit, не было привязки параметров к переменным, возможности auto-layout не использовались, имена для элементов не назначались и часто оставались в виде «Group1287», а сами элементы имели дробные размеры;
- В части сценариев интерфейс не отвечал ожиданиям пользователей, влияя негативно на пользовательский опыт;
- Макеты не всегда были упорядочены относительно сценариев, в них было сложно ориентироваться.
Все это усложняло создание новых макетов, последующий процесс разработки и тестирования, а также ухудшало эффективность коммуникации с пользователями.
Целью было унифицировать компоненты, уменьшить дублирование решений и привести макеты к более системной архитектуре, чтобы упростить разработку и масштабирование продукта.
О чём речь
- Провела аудит существующих интерфейсов трех брендов, выявила дублирование компонентов в макетах, несогласованность паттернов и проблемы в структуре экранов;
- Создала UI-kit с базовыми компонентами, стилями типографики и переменными, с учётом разницы визуальных решений брендов, что позволило привести интерфейсы к единой системе и упростить дальнейшую работу с макетами;
- Перестроила структуру экранов и компонентов, устранив избыточные и неээфективные решения, и повысив консистентность интерфейса;
- Адаптировала UI-kit и экраны под особенности языков, требующих использование RTL направления в интерфейсах;
- Стандартизировала нейминг элементов и контейнеров, что упростило навигацию по макетам и взаимодействие с разработчиками;
- Пересобрала макеты с использованием правильных привязок и auto-layout, повысив адаптивность интерфейсов и упростив поддержку изменений (общее количество собранных макетов — более 600);
- Подготовила обновлённые макеты и компоненты к передаче в разработку, и далее консультировала коллег и вносила необходимые изменения в процессе разработки и тестирования новых макетов.
Что я сделала
Компании Ecoplatform (Россия и Беларусь), Sparklo (Ближний Восток и Северная Африка) и SIRC (Саудовская Аравия) — это производители и операторы фандоматов — оборудования для сбора вторсырья.
При этом пользователи могут не только позаботиться об окружающей среде, но и получить выгоду — бонусы, которыми можно оплачивать коммунальные услуги, проезд в транспорте, продукты, а также скидочные купоны.
При этом пользователи могут не только позаботиться об окружающей среде, но и получить выгоду — бонусы, которыми можно оплачивать коммунальные услуги, проезд в транспорте, продукты, а также скидочные купоны.
Взаимодействие с пользователями ведётся через фандоматы для сбора вторсырья и мобильные приложения сервисов. Каждый из сервисов — отдельный бренд со своим регионом реализации, аудиторией, набором языков и дизайн-элементами.
О проекте
Проблема и задача
Запросом бизнеса было повышение скорости разработки и вывода новых функций в интерфейсах фандоматов, а также снижение затрат на поддержку и развитие продукта.
Проблема: в процессе роста продукта в макетах накопился значительный дизайн-долг — увеличилось количество несистемных решений, дублирующихся компонентов и расхождений в UI-паттернах. Это приводило к росту design–development gap, замедляло разработку, усложняло поддержку интерфейсов и увеличивало вероятность ошибок при реализации.
Задача: без изменения пользовательских сценариев провести рефакторинг дизайн-макетов фандоматов, выстроить системную структуру интерфейсов и компонентов, снизить дизайн-долг и сократить разрыв между дизайном и разработкой, подготовив продукт к масштабированию и более быстрому запуску новых функций.
Проблема: в процессе роста продукта в макетах накопился значительный дизайн-долг — увеличилось количество несистемных решений, дублирующихся компонентов и расхождений в UI-паттернах. Это приводило к росту design–development gap, замедляло разработку, усложняло поддержку интерфейсов и увеличивало вероятность ошибок при реализации.
Задача: без изменения пользовательских сценариев провести рефакторинг дизайн-макетов фандоматов, выстроить системную структуру интерфейсов и компонентов, снизить дизайн-долг и сократить разрыв между дизайном и разработкой, подготовив продукт к масштабированию и более быстрому запуску новых функций.
Решение
- Провести рефакторинг дизайн-макетов интерфейсов фандоматов без изменения пользовательских сценариев;
- Пересобрать структуру экранов и компонентов, неээфективные решения или изубыточные решения;
- Создать UI-kit с базовыми компонентами, типографикой и переменными, с учётом разницы визуальных решений трёх брендов, а также необходимости реализовать RTL направление в интерфейсах;
- Стандартизировать нейминг элементов и контейнеров;
- Сделать макеты гибкими и адаптивными для упрощения поддержки и доработок.
При этом учитывая специфические особенности каждого из трех брендов.
А подробнее процессы и результаты (один из которых — ребрендинг всех макетов одного за один рабочий день) я с радостью обсужу на личной встрече :)
Спасибо за внимание к этому кейсу!
