YetiCrab — студия разработки и дизйна
OverGrower - интерфейс для теплиц Skolkovo
OverGrower - интерфейс для теплиц Skolkovo
B2B веб-приложение на телефон и на планшет для управления теплицами стартапа OverGrower, члена Сколково. OverGrower будет продавать теплицы + это ПО. Пользователи — работники теплиц
Agrotech
B2B
Middle +
Процесс работы
Установочный созвон
Погружение в бизнес, исследование ниши, синхронизация знаний команды, создание общих артефактов
Внедрение дизайн-процесса, описание всех этапов, синхронизация команды
Анализ UX-проблем
Анализ конкурентов
Выявил и протестировал гипотезы и реализовал в дизайне гипотезы, которые реально решили проблемы бизнеса
Анализ текущей информационной архитектуры и проектирование новой
Отрисовка UserFlow и вайрфремов
Отрисовка самих экранов
Тестирование, правки, презентация экранов
Составление дизайн-системы
Передача в разработку, синхронизация знаний команды дизайна и команды разработки
Внедрение дизайн процесса
Так как я управлял командой дизайнеров и был целиком ответственен за дизайн, я решил сразу внедрить дизайн-процесс, задокументировать его, и донести до всей команды: дизайнеров научить по нему работать, а разработчикам рассказать для чего это и как им влиять на дизайн
Карта нашего дизайн процесса. Когда делал вдохновлялся best practicies из книги Юры Ветрова
Анализ UX-проблем
Вместе со стейкхолдером собрал пользователей платформы в отдельный чат, созвонился с каждым из них, провёл глубинки
Список вопросов для глубинного интервью. Составлял по книге «Спроси маму»
Анализ и проектирование новой информационной архитектуры
Проанализировал информационную архитектуру, выписал основные проблемы, которые увидел сам и которые отметили пользователи
Спроектировал новую вместе с командой и провёл лекцию о том, что такое информационная архитектура и зачем она нужна
UserFlow и вайрфреймы
По информационной архитектуре отрисовали с командой UserFlow с картой экранов
Также отрисовали вайрфреймы основных страниц и компонентов и протестили их на пользвоателях и согласовали со стейкхолдером
Гипотезы и отрисовка
Процесс работы строил итеративный — придумываем идеию, тестируем, реализуем, тестируем, правим — и так с каждой гипотезой
Гипотеза – Пользователю необходимо следить за всеми зонами выращивания
Да, пользователю необходимо следить за уведомлениями и данными датчиков.
Ранее надо было делать много свайпов в поиске нужных данных, мы же с командой сделали главный экран, на котором сразу будут видны основные показатели профилей
Гипотеза – Пользователю необходимо следить за всеми зонами выращивания
Так как я поменял информационную архитектуру, то теперь необходимо на главном экране выбрать профиль → разделы будут внутри профиля
Теперь есть глобальные функции, которые отображены справа, а есть функции для конкретного профиля
Старая версия приложения
Новая версия приложения
Гипотеза – Данные о выращивании, это часто используемая функция, которая должна быть в быстром доступе
Теперь, информацию можно узнать сразу с главного экрана, или просто зайдя в раздел
Гипотеза – Если устройства тоже будут внутри профиля, то это будет понятнее и быстрее для управления/редактирования
Гипотеза – Управление устройством с экрана профиля, упросит и ускорит взаимодействие с менеджером устройств
Гипотеза – Пользователи не понимают как добавлять удобрения во время пауз
Я спроектировал функцию добавления («+»), благодаря ей можно добавлять удобрения в паузы сразу на экране, ранее приходилось лезть в настройки удобрений
Гипотеза – Пользователи не понимают как добавлять удобрения во время пауз
Я сделал отображение характера уведомления, также спроектировал функции внутри самого уведомления, чтобы быстро решить проблему, а не лезть в настройки
Тестирование и дизайн-система
Все отрисованные экраны мы сначала затестили на пользователях, а уже потом я и мои дизайнеры защищали их на общем демо.
После того, как презентовали макеты, я собрал дизайн-систему, в которой спроектировал все основные состояния большинства компонентов
Сразу же проектировал систему, чтобы:
Чтобы систему было легко масштабировать
Чтобы система сама про себя рассказывала, чтобы максимально сократить количество вопросов, как у дизов, так и у фронтов, чтобы меньше времени тратить на синхронизацию команд
Также написал инструкции для разработчиков, чтобы они быстрее привыкли к новой ДС, и для дизайнеров, чтобы они создавали строго типизированные компоненты
Дизайн-система. Да, ниче не видно, но на созвоне смогу показать больше :)
Результаты
Качественные
Команда начала работать по дизайн-процессу, вся компания начала двигаться к дизайн-центричности
Теперь у OverGrower’a современный конкурентноспособный дизайн
Джуны выросли: каждый выполнил свои личные планы развития и прокачался в продуктовой аналитике (про подход к управлению детальнее расписал в соответствующем разделе)
Количественные
Обращения в поддержку сократились на 41% (количество обращений в месяц до внедрения дизайна и после). Практически на половину!
Провели опрос среди сотрудников (опрос до внедрения дизайна и через месяц после внедрения):
✓ Выросла лояльность к сервису — более половины ответили, что теперь им нравится работать с интерфейсом
✓ Выросла юзабилити — люди стали работать продуктивнее и быстрее
✓ Сократилось время онбординга — с 1 месяца до 2,5 недель!
✓ Система стала проще и прозрачнее, и теперь один сотрудник поддержки может параллельно помогать 2-ум людям, а не одному, как раньше
German8741@yandex.ru
+7 952 132-35-53
Главная
Навыки
Проекты
Карьера
Стоимость
Назад
2024
Детальная информация
Детальная информация
Вводные
Вводные
✓ Команда: 2 junior designers, 1 senior designer
✓ Продукт: Веб-интерфейс управления тепличным оборудованием
✓ ЦА: работники ферм, на которых используется обородомание OverGrower
✓ Сфера: B2B, hardware
✓ Команда: 2 junior designers, 1 senior designer
✓ Продукт: Веб-интерфейс управления тепличным оборудованием
✓ ЦА: работники ферм, на которых используется обородомание OverGrower
✓ Сфера: B2B, hardware
Проблемы бизнеса
Проблемы бизнеса
✓ Работникам очень трудно разобраться в сервисе, много времени (около месяца) уходит на онбординг . сотрудников из-за сложной информационной архитектуры
✓ Из-за этого OverGrower тратит большое количество ресурсов на штат сотрудников поддержки и наставников для работников
✓ Устаревший дизайн, из-за которого сервис проигрывает конкурентам
✓ Сотрудникам не нравится работать с системой из-за её сложности и непривлекательного дизайна
✓ Работникам очень трудно разобраться в сервисе, много времени (около месяца) уходит на онбординг . сотрудников из-за сложной информационной архитектуры
✓ Из-за этого OverGrower тратит большое количество ресурсов на штат сотрудников поддержки и наставников для работников
✓ Устаревший дизайн, из-за которого сервис проигрывает конкурентам
✓ Сотрудникам не нравится работать с системой из-за её сложности и непривлекательного дизайна
Цели бизнеса
Цели бизнеса
Уменьшить количество обращений в поддержку от работников, чтобы сократить штат
поддержки и наставников
Сделать интерфейс понятней, чтобы секономить на обучении будущих сотрудников
Провести редизайн, чтобы использовать о как конкурентное преимущество
Повысить удовлетворенность сотрудников от сервиса
Спойлер решения: от прошлой системы ничего не осталось, был проведён полный редизайн, переработана информационная архитектура, провели исследования, внедрили новые дизайн-процессы
Уменьшить количество обращений в поддержку от работников, чтобы сократить штат
поддержки и наставников
Сделать интерфейс понятней, чтобы секономить на обучении будущих сотрудников
Провести редизайн, чтобы использовать о как конкурентное преимущество
Повысить удовлетворенность сотрудников от сервиса
Спойлер решения: от прошлой системы ничего не осталось, был проведён полный редизайн, переработана информационная архитектура, провели исследования, внедрили новые дизайн-процессы
Уменьшить количество обращений в поддержку от работников, чтобы сократить штат
поддержки и наставников
Сделать интерфейс понятней, чтобы секономить на обучении будущих сотрудников
Провести редизайн, чтобы использовать о как конкурентное преимущество
Повысить удовлетворенность сотрудников от сервиса
Спойлер решения: от прошлой системы ничего не осталось, был проведён полный редизайн, переработана информационная архитектура, провели исследования, внедрили новые дизайн-процессы
Уменьшить количество обращений в поддержку от работников, чтобы сократить штат
поддержки и наставников
Сделать интерфейс понятней, чтобы секономить на обучении будущих сотрудников
Провести редизайн, чтобы использовать о как конкурентное преимущество
Повысить удовлетворенность сотрудников от сервиса
Спойлер решения: от прошлой системы ничего не осталось, был проведён полный редизайн, переработана информационная архитектура, провели исследования, внедрили новые дизайн-процессы
Мои задачи
Мои задачи
Внедрил дизайн-процесс с исследованиями, синками, тестированием и демо для всей команды
Спроектировал информационную архитектуру для упрощения навигации и масштабирования продукта
Взаимодействовал с разработкой, ввёл дизайн-ревью с фронтендом и демо для команды
Управлял двумя джунами, развивал их навыки и менторил
Проверял и реализовывал гипотезы
С командой создал, протестировал и передал более 250 новых экранов
Собрал компоненты в дизайн-систему и написал инструкции для разработчиков
Внедрил дизайн-процесс с исследованиями, синками, тестированием и демо для всей команды
Спроектировал информационную архитектуру для упрощения навигации и масштабирования продукта
Взаимодействовал с разработкой, ввёл дизайн-ревью с фронтендом и демо для команды
Управлял двумя джунами, развивал их навыки и менторил
Проверял и реализовывал гипотезы
С командой создал, протестировал и передал более 250 новых экранов
Собрал компоненты в дизайн-систему и написал инструкции для разработчиков
Анализ и проектирование новой информационной архитектуры
Проанализировал информационную архитектуру, выписал основные проблемы, которые увидел сам и которые отметили пользователи
Спроектировал новую вместе с командой и провёл лекцию о том, что такое информационная архитектура и зачем она нужна
UserFlow и вайрфреймы
UserFlow и вайрфреймы
По информационной архитектуре отрисовали с командой UserFlow с картой экранов
Также отрисовали вайрфреймы основных страниц и компонентов и протестили их на пользвоателях и согласовали со стейкхолдером
По информационной архитектуре отрисовали с командой UserFlow с картой экранов
Также отрисовали вайрфреймы основных страниц и компонентов и протестили их на пользвоателях и согласовали со стейкхолдером
Тестирование и дизайн-система
Все отрисованные экраны мы сначала затестили на пользователях, а уже потом я и мои дизайнеры защищали их на общем демо.
После того, как презентовали макеты, я собрал дизайн-систему, в которой спроектировал все основные состояния большинства компонентов
Сразу же проектировал систему, чтобы:
Чтобы систему было легко масштабировать
Чтобы система сама про себя рассказывала, чтобы максимально сократить количество вопросов, как у дизов, так и у фронтов, чтобы меньше времени тратить на синхронизацию команд
Также написал инструкции для разработчиков, чтобы они быстрее привыкли к новой ДС, и для дизайнеров, чтобы они создавали строго типизированные компоненты
Дизайн-система. Да, ниче не видно, но на созвоне смогу показать больше :)
Процесс работы
Процесс работы
Установочный созвон
Погружение в бизнес, исследование ниши, синхронизация знаний команды, создание общих артефактов
Внедрение дизайн-процесса, описание всех этапов, синхронизация команды
Анализ UX-проблем
Анализ конкурентов
Выявил и протестировал гипотезы и реализовал в дизайне гипотезы, которые реально решили проблемы бизнеса
Анализ текущей информационной архитектуры и проектирование новой
Отрисовка UserFlow и вайрфремов
Отрисовка самих экранов
Тестирование, правки, презентация экранов
Составление дизайн-системы
Передача в разработку, синхронизация знаний команды дизайна и команды разработки
Установочный созвон
Погружение в бизнес, исследование ниши, синхронизация знаний команды, создание общих артефактов
Внедрение дизайн-процесса, описание всех этапов, синхронизация команды
Анализ UX-проблем
Анализ конкурентов
Выявил и протестировал гипотезы и реализовал в дизайне гипотезы, которые реально решили проблемы бизнеса
Анализ текущей информационной архитектуры и проектирование новой
Отрисовка UserFlow и вайрфремов
Отрисовка самих экранов
Тестирование, правки, презентация экранов
Составление дизайн-системы
Передача в разработку, синхронизация знаний команды дизайна и команды разработки
Внедрение дизайн процесса
Внедрение дизайн процесса
Так как я управлял командой дизайнеров и был целиком ответственен за дизайн, я решил сразу внедрить дизайн-процесс, задокументировать его, и донести до всей команды: дизайнеров научить по нему работать, а разработчикам рассказать для чего это и как им влиять на дизайн
Так как я управлял командой дизайнеров и был целиком ответственен за дизайн, я решил сразу внедрить дизайн-процесс, задокументировать его, и донести до всей команды: дизайнеров научить по нему работать, а разработчикам рассказать для чего это и как им влиять на дизайн
Карта нашего дизайн процесса. Когда делал вдохновлялся best practicies из книги Юры Ветрова
Карта нашего дизайн процесса. Когда делал вдохновлялся best practicies из книги Юры Ветрова
Анализ UX-проблем
Анализ UX-проблем
Вместе со стейкхолдером собрал пользователей платформы в отдельный чат, созвонился с каждым из них, провёл глубинки
Вместе со стейкхолдером собрал пользователей платформы в отдельный чат, созвонился с каждым из них, провёл глубинки
Список вопросов для глубинного интервью. Составлял по книге «Спроси маму»
Список вопросов для глубинного интервью. Составлял по книге «Спроси маму»
Анализ и проектирование новой информационной архитектуры
Анализ и проектирование новой информационной архитектуры
Проанализировал информационную архитектуру, выписал основные проблемы, которые увидел сам и которые отметили пользователи
Спроектировал новую вместе с командой и провёл лекцию о том, что такое информационная архитектура и зачем она нужна
Проанализировал информационную архитектуру, выписал основные проблемы, которые увидел сам и которые отметили пользователи
Спроектировал новую вместе с командой и провёл лекцию о том, что такое информационная архитектура и зачем она нужна
YetiCrab — студия разработки и дизйна
OverGrower - интерфейс
для теплиц Skolkovo
B2B веб-приложение на телефон и на планшет для управления теплицами стартапа OverGrower, члена Сколково. OverGrower будет продавать теплицы + это ПО. Пользователи — работники теплиц
Agrotech
B2B
Middle +
Гипотезы и отрисовка
Процесс работы строил итеративный — придумываем идеию, тестируем, реализуем, тестируем, правим — и так с каждой гипотезой
Гипотеза – Пользователю необходимо следить за всеми зонами выращивания
Да, пользователю необходимо следить за уведомлениями и данными датчиков.
Ранее надо было делать много свайпов в поиске нужных данных, мы же с командой сделали главный экран, на котором сразу будут видны основные показатели профилей
Гипотеза – Пользователю необходимо следить за всеми зонами выращивания
Так как я поменял информационную архитектуру, то теперь необходимо на главном экране выбрать профиль → разделы будут внутри профиля
Теперь есть глобальные функции, которые отображены справа, а есть функции для конкретного профиля
Старая версия приложения
Новая версия приложения
Гипотеза – Данные о выращивании, это часто используемая функция, которая должна быть в быстром доступе
Теперь, информацию можно узнать сразу с главного экрана, или просто зайдя в раздел
Гипотеза – Если устройства тоже будут внутри профиля, то это будет понятнее и быстрее для управления/редактирования
Гипотеза – Управление устройством с экрана профиля, упросит и ускорит взаимодействие с менеджером устройств
Гипотеза – Пользователи не понимают как добавлять удобрения во время пауз
Я спроектировал функцию добавления («+»), благодаря ей можно добавлять удобрения в паузы сразу на экране, ранее приходилось лезть в настройки удобрений
Гипотеза – Пользователи не понимают как добавлять удобрения во время пауз
Я сделал отображение характера уведомления, также спроектировал функции внутри самого уведомления, чтобы быстро решить проблему, а не лезть в настройки
Тестирование и дизайн-система
Все отрисованные экраны мы сначала затестили на пользователях, а уже потом я и мои дизайнеры защищали их на общем демо.
После того, как презентовали макеты, я собрал дизайн-систему, в которой спроектировал все основные состояния большинства компонентов
Сразу же проектировал систему, чтобы:
Чтобы систему было легко масштабировать
Чтобы система сама про себя рассказывала, чтобы максимально сократить количество вопросов, как у дизов, так и у фронтов, чтобы меньше времени тратить на синхронизацию команд
Также написал инструкции для разработчиков, чтобы они быстрее привыкли к новой ДС, и для дизайнеров, чтобы они создавали строго типизированные компоненты
Дизайн-система. Да, ниче не видно, но на созвоне смогу показать больше :)
Результаты
Качественные
Команда начала работать по дизайн-процессу, вся компания начала двигаться к дизайн-центричности
Теперь у OverGrower’a современный конкурентноспособный дизайн
Джуны выросли: каждый выполнил свои личные планы развития и прокачался в продуктовой аналитике (про подход к управлению детальнее расписал в соответствующем разделе)
Количественные
Обращения в поддержку сократились на 41% (количество обращений в месяц до внедрения дизайна и после). Практически на половину!
Провели опрос среди сотрудников (опрос до внедрения дизайна и через месяц после внедрения):
✓ Выросла лояльность к сервису — более половины ответили, что теперь им нравится работать с интерфейсом
✓ Выросла юзабилити — люди стали работать продуктивнее и быстрее
✓ Сократилось время онбординга — с 1 месяца до 2,5 недель!
✓ Система стала проще и прозрачнее, и теперь один сотрудник поддержки может параллельно помогать 2-ум людям, а не одному, как раньше
Тестирование и дизайн-система
Все отрисованные экраны мы сначала затестили на пользователях, а уже потом я и мои дизайнеры защищали их на общем демо.
После того, как презентовали макеты, я собрал дизайн-систему, в которой спроектировал все основные состояния большинства компонентов
Сразу же проектировал систему, чтобы:
Чтобы систему было легко масштабировать
Чтобы система сама про себя рассказывала, чтобы максимально сократить количество вопросов, как у дизов, так и у фронтов, чтобы меньше времени тратить на синхронизацию команд
Также написал инструкции для разработчиков, чтобы они быстрее привыкли к новой ДС, и для дизайнеров, чтобы они создавали строго типизированные компоненты
Дизайн-система. Да, ниче не видно, но на созвоне смогу показать больше :)
Результаты
Качественные
Команда начала работать по дизайн-процессу, вся компания начала двигаться к дизайн-центричности
Теперь у OverGrower’a современный конкурентноспособный дизайн
Джуны выросли: каждый выполнил свои личные планы развития и прокачался в продуктовой аналитике (про подход к управлению детальнее расписал в соответствующем разделе)
Количественные
Обращения в поддержку сократились на 41% (количество обращений в месяц до внедрения дизайна и после). Практически на половину!
Провели опрос среди сотрудников (опрос до внедрения дизайна и через месяц после внедрения):
✓ Выросла лояльность к сервису — более половины ответили, что теперь им нравится работать с интерфейсом
✓ Выросла юзабилити — люди стали работать продуктивнее и быстрее
✓ Сократилось время онбординга — с 1 месяца до 2,5 недель!
✓ Система стала проще и прозрачнее, и теперь один сотрудник поддержки может параллельно помогать 2-ум людям, а не одному, как раньше