Summary
Система OverGrower
Моя роль
Middle designer
Как все было
На проекте нас было четверо: арт-директор, я и еще два junior дизайнера. Арт-директор фактически был тем, кто просто менторил меня и получал хорошую долю за то что нашел этот проект. Меня фактически поставили на роль дизайн-лида. Пришел в проект я на моменте уже придуманного фирменного стиля. Мне надо было взять на себя всю продуктовую аналитику и упралять командой из 2 junior designers. Главная задача на момемент моего попадания в команду - доделать начатый проект до конца. Сам проект - это веб-интерфейс для управления работниками ферм тепличным оборудованием.
На проекте нас было
Что именно делал
Сделал всю продуктовую аналитику
Внедрил новый дизайн процессы
Управлял и наставлял 2 junior designers
Проектировка wireframes
Участвовал в создании дизайн системы
Какие навыки использовал
Проведение UX/UI исследований, аналитика, создание пользовательских потоков и карты экранов, разработка wireframes и прототипов, создание дизайн системы, тестирование пользовательского интерфейса, работа в команде с арт-директором и другими дизайнерами, подготовка презентаций и отчетов для клиента, создание дорожной карты проекта.
Problem
Что у нас есть ?
Работникам очень трудно разобраться в сервисе, много времени (около месяца) уходит на онбординг сотрудников из-за сложной информационной архитектуры
Из-за этого OverGrower тратит большое количество ресурсов на штат сотрудников поддержки и наставников для работников
Устаревший дизайн, из-за которого сервис проигрывает конкурентам
Сотрудникам не нравится работать с системой из-за её сложности и непривлекательного дизайна
Старый дизайн
Commercial offer
Обсуждение с CEO
Для того чтобы четко понять что именно хочет заказчик мы составили четкие вопросы для стейкхолдера который их задал закачику. Далее по методу SMART мы четко поняли цель:
Specific (Конкретная) : Внедрение современного конкурентоспособного дизайна и единой системы хранения данных для повышения эффективности работы сотрудников и уменьшения нагрузки на поддержку.
Measurable (Измеримая): Уменьшение количества обращений в поддержку примерно на 40% , повышение лояльности сотрудников к системе по опросу на 30%, уменьшение времени новых сотрудников на 2,5 недели
Achievable (Достижимая):Показатели подкреплены результатами пилотного внедрения: уже были отмечены сокращение обращений на 41%, рост лояльности и уменьшение времени онбординга.
Relevant (Релевантная): Цели соответствуют стратегии компании по цифровизации и ориентации на пользователя (дизайн-центричность).
Time-bound (Ограниченная по времени): Достижение целевых метрик в течение 6 месяцев после внедрения обновленного интерфейса и систем.
Один из созвонов, на которых разбирали со стейкхолдером старый интерфейс
План и сроки разработки
Для того чтобы и мы и закачик примерно понимали за какое количество времени мы справимся была сделана диаграмма ганта со сроками (сделали ее прямо на созвоне со стейкхолдером).
Диаграмма Ганта
Проектирование информационной архитектуры
Сбор информации и исследование
Начал погружаться в бизнес, исследовать саму нишу и смотреть конкурентов бизнеса
Вместе со стейкхолдером собрал пользователей платформы в отдельный чат, созвонился с каждым из них
Каждый респондент ответил на все 17 вопросов. Ответы были открытыми (качественными), чтобы собрать детальные инсайты.
После сбора данных я проанализировал ответы: кодировал их по темам, подсчитал частоту упоминаний и рассчитал проценты (например, % респондентов, упомянувших определенную проблему), для упрощения работы я записывал кажое интервью на диктофон и анализировал его с помощью chat gpt.
На основе анализа я выделил топ-гипотезы которые начал проверять
Список вопросов для глубинного интервью. Составлял по книге «Спроси маму»
Затем сформулировал список разделов и функций в разделах в старой версии и на этих же работниках сделал карточную сортировку, чтобы понять как им удобнее воспринимать информацию (я сделал это с помощью oprosso.ru)
Новая архитектура приложения
На основе ответов пользователей и исследований старой версии приложения сделал новую архитетктуру и представил её в иерархическом виде: у каждой теплицы есть зоны выращивания, в каждой зоне есть установки, а у каждой установки есть розетки, установка полива и установка введения удобрений
На основе ответов пользователей и исследований старой версии приложения сделал новую архитеткуру и представил её в иерархическом виде: у каждой теплицы есть зоны выращивания, в каждой зоне есть установки, а у каждой установки есть розетки, установка полива и установка введения удобрений
В итоге создал новую информационную архитектуру, которая позволит работникам теплиц гораздо быстрее и лучше ориентироваться в приложении
После всего анализа
Wire frames
По информационной архитектуре отрисовали с командой UserFlow, карту экранов, и на основе всего этого сделали вайрфреймы основных страниц и компоненотов. После тестов на фокус группе (сделали ее карточной сортировкой ) согласовали их со стейкхолдером
Процесс работы
Сам процесс работы строил итеративный - придумываем идею, тестируем, реализуем, тестируем, правим - и так с каждой гипотезой.
Так как я управлял командой дизайнеров и был целиком ответственен за дизайн, я решил сразу внедрить дизайн-процесс, задокументировать его, и донести до всей команды: дизайнеров научить по нему работать, а разработчикам рассказать для чего это и как им влиять на дизайн
Карта нашего дизайн процесса. Когда делал вдохновлялся best practicies из книги Юры Ветрова
Решение
Проблема – Пользователю необходимо следить за всеми зонами выращивания
Итог: Ранее надо было делать много свайпов в поиске нужных данных, мы же с командой сделали главный экран, на котором сразу будут видны основные показатели профилей. Мы знали что это будет отличным решением заранее тк проводили интервью с респондентами.
Проблема – Пользователю неудобно переходить в разные разделы и выбирать профиль
Старая версия приложения
Новая версия приложения
Итог:
Так как я поменял информационную архитектуру, то теперь необходимо на главном экране выбрать профиль → разделы будут внутри профиля.
Теперь есть глобальные функции, которые отображены справа, а есть функции для конкретного профиля
Гипотеза – Данные о выращивании, это часто используемая функция, которая должна быть в быстром доступе
Гипотеза – Если устройства тоже будут внутри профиля, то это будет понятнее и быстрее для управления/редактирования
Гипотеза – Управление устройством с экрана профиля, упросит и ускорит взаимодействие с менеджером устройств
Гипотеза – Пользователи не понимают как добавлять удобрения во время пауз
Я спроектировал функцию добавления («+»), благодаря ей можно добавлять удобрения в паузы сразу на экране, ранее приходилось лезть в настройки удобрений
Гипотеза – Пользователи не понимают как добавлять удобрения во время пауз
Я сделал отображение характера уведомления, также спроектировал функции внутри самого уведомления, чтобы быстро решить проблему, а не лезть в настройки
Далее
Далее отрисованные экраны мы сначала тестировали на пользователях (у нас была фокус группа которая нам помогала во всем этом), после тестировки мои дизайнеры защищали работу на демо перед CEO.
Дизайн система
После презентации макетов я сделал дизайн систему, в которой спроектировал большинство состояний компонентов
Также я упростил работу разработчикам написав для них инструкции, и для дизайнеров, чтобы они создавали более типизированные элементы.
Дизайн-система. Да, ниче не видно, но на созвоне смогу показать больше :)
Insights and results
Что в итоге?
Команда начала работать по дизайн-процессу, вся компания начала двигаться к дизайн-центричности
Теперь у OverGrower’a современный конкурентноспособный дизайн
Обращения в поддержку сократились на 41% (количество обращений в месяц до внедрения дизайна и после). Практически на половину!
Провели опрос среди сотрудников (опрос до внедрения дизайна и через месяц после внедрения):
Выросла лояльность к сервису — более половины ответили, что теперь им нравится работать с интерфейсом
Выросла юзабилити — люди стали работать продуктивнее и быстрее
Сократилось время онбординга — с 1 месяца до 2,5 недель!
Система стала проще и прозрачнее, и теперь один сотрудник поддержки может параллельно помогать 2-ум людям, а не одному, как раньше
Чему я научился ?
• Научился разрабатывать и визуализировать сложную архитектуру IoT-продукта с учетом интеграции разных компонентов (датчики, исполнительные устройства, облако, приложение).
• Получил опыт шаг за шагом выстраивать логику взаимодействия между аппаратными и программными модулями — от сбора сырых данных до их отображения в дружелюбном интерфейсе.
• Улучшил навыки проектирования вопросов-целей: ставил правильные вопросы на каждом этапе и формулировал измеримые цели, что позволило не упустить важные нюансы при проектировании.
• Освоил работу с диаграммами разработки (Gantt, информационные блоки), научился визуально структурировать процесс.
• На практике убедился в важности продуманного UX/UI в агротехе — делал акцент на удобстве, наглядности и простоте управления сложными системами через мобильный и web-интерфейс.
• Получил ценный опыт в планировании сроков, ведении документации, создании универсальных технических заданий.
• Научился учитывать реальные сценарии использования (user story) и интегрировать их в техническую архитектуру для повышения востребованности продукта среди конечных пользователей.
Inverse — продуктовое агенстово
OverGrower - агротех из Skolkovo
Веб-приложение для контроля и управления параметрами гидропонной и аэропонной установки стартапа OverGrower, члена Сколково. OverGrower продает комплекс автоматизации для выращивания растений. Пользователи - работники ферм
Agrotech
B2B
Web design
APP
Роль
Middle designer
Продолжительность
6 месяцев
Команда
Art Director, 3 designers
Назад