Дизайн ТСД система для компании Л’Этуаль
Редизайн профиля водителя компании ITECO.Водитель
Редизайн профиля водителя компании ITECO.Водитель
Редизайн профиля водителя компании ITECO.Водитель
Задача
Необходимо переработать профиль пользователя в одном из продуктов ITECO.Водитель. Комментарий менеджера: профиль слишком длинный, Хотелось бы изменить композицию и освежить дизайн
Задача
Необходимо переработать профиль пользователя в одном из продуктов ITECO.Водитель. Комментарий менеджера: профиль слишком длинный, Хотелось бы изменить композицию и освежить дизайн
Задача
О компании
Необходимо переработать профиль пользователя в одном из продуктов ITECO.Водитель. Комментарий менеджера: профиль слишком длинный, Хотелось бы изменить композицию и освежить дизайн
ITECO.Водитель — цифровой продукт компании ITECO, предназначенный для водителей грузового транспорта. Предназначен для: отслеживания рейсов, получения информаций от диспетчеров, взаимодействовать с логистической службой и т.д
Задачи
1. Перенести ТСД-систему с терминала на мобильное устройство
2. Выявить и устранить проблемы с пользовательским сценарием
Цели
1. Повысить эффективность работы сотрудников за счёт использования мобильных устройств вместо терминалов
2. Упростить и ускорить процесс сканирования и обработки товаров
Цель
Цель — оптимизировать структуру профиля, сократить количество прокруток и улучшив навигацию, чтобы повысить скорость взаимодействия водителей с интерфейсом
Цель
Проблема
Цель — оптимизировать структуру профиля, сократить количество прокруток и улучшив навигацию, чтобы повысить скорость взаимодействия водителей с интерфейсом
Текущая структура профиля плохо масштабируется: приходят запросы на добавление новых блоков, из-за чего экран неизбежно удлиняется и усложняет восприятие и навигацию
О компании
ITECO.Водитель — цифровой продукт компании ITECO, предназначенный для водителей грузового транспорта. Предназначен для: отслеживания рейсов, получения информаций от диспетчеров, взаимодействовать с логистической службой и т.д
Задача
Необходимо переработать профиль пользователя в одном из продуктов ITECO.Водитель. Комментарий менеджера: профиль слишком длинный, Хотелось бы изменить композицию и освежить дизайн
Цель
Цель — оптимизировать структуру профиля, сократить количество прокруток и улучшив навигацию, чтобы повысить скорость взаимодействия водителей с интерфейсом
Проблема
Текущая структура профиля плохо масштабируется: приходят запросы на добавление новых блоков, из-за чего экран неизбежно удлиняется и усложняет восприятие и навигацию
Задача
Необходимо переработать профиль пользователя в одном из продуктов ITECO.Водитель. Комментарий менеджера: профиль слишком длинный, Хотелось бы изменить композицию и освежить дизайн
Проблема
Текущая структура профиля плохо масштабируется: приходят запросы на добавление новых блоков, из-за чего экран неизбежно удлиняется и усложняет восприятие и навигацию
О компании
ITECO.Водитель — цифровой продукт компании ITECO, предназначенный для водителей грузового транспорта. Предназначен для: отслеживания рейсов, получения информаций от диспетчеров, взаимодействовать с логистической службой и т.д
Цель
Цель — оптимизировать структуру профиля, сократить количество прокруток и улучшив навигацию, чтобы повысить скорость взаимодействия водителей с интерфейсом
Глава 2 - WireFrame
Глава 1 - Исследование
Глава 1 - Исследование
Глава 1 - Исследование
Главный экран
Сканирование заявки
Список актов
Выбор акта
Состояние товара
Выбор состояния
Сканирование
Да
Нет
Надо редактировать кол-во?
Редактирование
Список товаров
Список товаров
Выбор товара
Отсканированные товары
Сканирование заявки
Список актов
Выбор акта
Выбор состояния
Сканирование
Надо редактировать кол-во?
Да
Нет
Редактирование
Отсканированные товары
Пользовательский сценарий
Общение с менеджером
Общение с менеджером
Пользователь нажимает на экран терминала, выберает пол, проходит инструкцию и фотографируется. Затем фотография грузится, Пользователь сканирует qr код и скачиваниет фотографию.
Прежде чем перейти к проектированию, я уточнил у менеджеров, почему возникла необходимость менять структуру профиля: какие есть проблемы у пользователей, какие метрики проседают и какие цели стоят перед редизайном. В ответ получил следующее: «Основная проблема - дальнейшее масштабирование раздела. В будущем будут добавляться новые блоки, и профиль станет всё длиннее. Кроме того, мы планируем полный редизайн приложения с обновлением цветов и шрифтов.»
Прежде чем перейти к проектированию, я уточнил у менеджеров, почему возникла необходимость менять структуру профиля: какие есть проблемы у пользователей, какие метрики проседают и какие цели стоят перед редизайном. В ответ получил следующее: «Основная проблема - дальнейшее масштабирование раздела. В будущем будут добавляться новые блоки, и профиль станет всё длиннее. Кроме того, мы планируем полный редизайн приложения с обновлением цветов и шрифтов.»
Общение с менеджером
Комментарий
Комментарий
Прежде чем перейти к проектированию, я уточнил у менеджеров, почему возникла необходимость менять структуру профиля: какие есть проблемы у пользователей, какие метрики проседают и какие цели стоят перед редизайном. В ответ получил следующее:
«Основная проблема — дальнейшее масштабирование раздела. В будущем будут добавляться новые блоки, и профиль станет всё длиннее. Кроме того, мы планируем полный редизайн приложения с обновлением цветов и шрифтов. Что касается пользователей — вроде всё в порядке, надо у них уточнить»
После обсуждения с менеджером, я решил проанализировать решения конкурентов как в нашей, так и в смежных сферах (пример сравнения - ниже)
После обсуждения с менеджером, я решил проанализировать решения конкурентов как в нашей, так и в смежных сферах (пример сравнения - ниже)
Комментарий
Далее проанализировал решения конкурентов из нашей и других сфер
После обсуждения с менеджером джоб стори отпали. Выяснилось, что пользователи могут изменять информацию о себе только через диспетчера - об этом нигде не указано в интерфейсе. Также водители не могут добавлять собственные карты, так как компания сотрудничает с партнёрами и выдаёт их карты. Однако несколько вопросов связанные с пропусками и личными данными остались открытыми и я предложил пообщаться с водителями
Анализ профиля ITECO
Комментарий
Итоги бесед с водителями
После обсуждения с менеджером джоб стори отпали. Выяснилось, что пользователи могут изменять информацию о себе только через диспетчера - об этом нигде не указано в интерфейсе. Также водители не могут добавлять собственные карты, так как компания сотрудничает с партнёрами и выдаёт их карты. Однако несколько вопросов связанные с пропусками и личными данными остались открытыми и я предложил пообщаться с водителями
Водители редко использует пропуска и вообще не пользуются своими данными в приложении. Поэтому блок с пропусками можно оставить на текущем месте или переместить в горизонтальный скролл, а блок с профилем можно убрать во второй контур, оставив на первом контура либо почту либо телефон. Самые важные блоки, как: Отметки диспетчеров, данные датчиков и мероприятия по ОТ и БДД оставляю в первом контуре
Итоги анализа профилей
Комментарий
Во всех приложениях информация о пользователя скрыта во втором контуре. Это позволяет сократить скролл и приоритизировать более важные пользовательские сценарии. Например, в wildberries - переход в избранное, а в hh — просмотр откликов
Сформулировал джоб стори и гипотезы
Комментарий
Сформулировал джоб стори и гипотезы
Анализ профиля ITECO
После обсуждения с менеджером джоб стори отпали. Выяснилось, что пользователи могут изменять информацию о себе только через диспетчера - об этом нигде не указано в интерфейсе. Также водители не могут добавлять собственные карты, так как компания сотрудничает с партнёрами и выдаёт их карты. Однако несколько вопросов связанные с пропусками и личными данными остались открытыми и я предложил пообщаться с водителями
Комментарий
Сформулировал джоб стори и гипотезы
Итоги бесед с водителями
Водители редко использует пропуска и вообще не пользуются своими данными в приложении. Поэтому блок с пропусками можно оставить на текущем месте или переместить в горизонтальный скролл, а блок с профилем можно убрать во второй контур, оставив на первом контура либо почту либо телефон. Самые важные блоки, как: Отметки диспетчеров, данные датчиков и мероприятия по ОТ и БДД оставляю в первом контуре
Комментарий
Разговор с водителями
Разговор с водителями
После обсуждения с менеджером джоб стори отпали. Выяснилось, что пользователи могут изменять информацию о себе только через диспетчера - об этом нигде не указано в интерфейсе. Также водители не могут добавлять собственные карты, так как компания сотрудничает с партнёрами и выдаёт их карты. Однако несколько вопросов связанные с пропусками и личными данными остались открытыми и я предложил пообщаться с водителями
Я пообщался с 3 водителями, задавал им одинаковые вопросы и ответы были плюс минус одинаковые. Короткий пример разговора с водителем Я: Пропуска находятся в самом конце профиля, они получается не так важны? Надо ли на погран контроле их предоставлять? В: Нет, пропуска не надо показывать на погран контроле. Я редко смотрю на пропуска, потому что обычно они мне не нужны в повседневной работе. Пропуска чаще всего используются для доступа в специфические зоны или для выполнения административных процедур Я: Как часто тебе приходится пользоваться своими данными? Их надо кому-то показывать? В: Честно даже не помню, чтоб я ими пользовался хоть как-то. Когда устраивался на работу, в офисе взяли мои данные и они автоматически оказались в приложении. На счет того, надо ли их показывать - иногда при получении груза требуют заполнить бланк, туда обычно надо номер телефона, имя фамилия, редко паспортные данные. Номер телефона я и так наизусть знаю, а паспорт всегда со мной Я: Чем конкретно ты пользуешься из раздела профиль? В: Я пользуюсь отметками диспетчеров, чтобы понимать, какие рейсы уже подтверждены и какие задания нужно выполнить дальше. Пользуюсь данными датчиков и мероприятиями по охране труда
Я пообщался с 3 водителями, задавал им одинаковые вопросы и ответы были плюс минус одинаковые. Короткий пример разговора с водителем Я: Пропуска находятся в самом конце профиля, они получается не так важны? Надо ли на погран контроле их предоставлять? В: Нет, пропуска не надо показывать на погран контроле. Я редко смотрю на пропуска, потому что обычно они мне не нужны в повседневной работе. Пропуска чаще всего используются для доступа в специфические зоны или для выполнения административных процедур Я: Как часто тебе приходится пользоваться своими данными? Их надо кому-то показывать? В: Честно даже не помню, чтоб я ими пользовался хоть как-то. Когда устраивался на работу, в офисе взяли мои данные и они автоматически оказались в приложении. На счет того, надо ли их показывать - иногда при получении груза требуют заполнить бланк, туда обычно надо номер телефона, имя фамилия, редко паспортные данные. Номер телефона я и так наизусть знаю, а паспорт всегда со мной Я: Чем конкретно ты пользуешься из раздела профиль? В: Я пользуюсь отметками диспетчеров, чтобы понимать, какие рейсы уже подтверждены и какие задания нужно выполнить дальше. Пользуюсь данными датчиков и мероприятиями по охране труда
Общение с менеджером
Прежде чем перейти к проектированию, я уточнил у менеджеров, почему возникла необходимость менять структуру профиля: какие есть проблемы у пользователей, какие метрики проседают и какие цели стоят перед редизайном. В ответ получил следующее: «Основная проблема - дальнейшее масштабирование раздела. В будущем будут добавляться новые блоки, и профиль станет всё длиннее. Кроме того, мы планируем полный редизайн приложения с обновлением цветов и шрифтов.»
Комментарий
После обсуждения с менеджером, я решил проанализировать решения конкурентов как в нашей, так и в смежных сферах (пример сравнения - ниже)
Итоги анализа профилей
Во всех приложениях информация о пользователя скрыта во втором контуре. Это позволяет сократить скролл и приоритизировать более важные пользовательские сценарии. Например, в wildberries - переход в избранное, а в hh — просмотр откликов
Комментарий
Анализ профиля ITECO
Комментарий
Сформулировал джоб стори и гипотезы
Комментарий
После обсуждения с менеджером джоб стори отпали. Выяснилось, что пользователи могут изменять информацию о себе только через диспетчера - об этом нигде не указано в интерфейсе. Также водители не могут добавлять собственные карты, так как компания сотрудничает с партнёрами и выдаёт их карты. Однако несколько вопросов связанные с пропусками и личными данными остались открытыми и я предложил пообщаться с водителями
Итоги бесед с водителями
Водители редко использует пропуска и вообще не пользуются своими данными в приложении. Поэтому блок с пропусками можно оставить на текущем месте или переместить в горизонтальный скролл, а блок с профилем можно убрать во второй контур, оставив на первом контура либо почту либо телефон. Самые важные блоки, как: Отметки диспетчеров, данные датчиков и мероприятия по ОТ и БДД оставляю в первом контуре
Разговор с водителями
Я пообщался с 3 водителями, задавал им одинаковые вопросы и ответы были плюс минус одинаковые. Короткий пример разговора с водителем Я: Пропуска находятся в самом конце профиля, они получается не так важны? Надо ли на погран контроле их предоставлять? В: Нет, пропуска не надо показывать на погран контроле. Я редко смотрю на пропуска, потому что обычно они мне не нужны в повседневной работе. Пропуска чаще всего используются для доступа в специфические зоны или для выполнения административных процедур Я: Как часто тебе приходится пользоваться своими данными? Их надо кому-то показывать? В: Честно даже не помню, чтоб я ими пользовался хоть как-то. Когда устраивался на работу, в офисе взяли мои данные и они автоматически оказались в приложении. На счет того, надо ли их показывать - иногда при получении груза требуют заполнить бланк, туда обычно надо номер телефона, имя фамилия, редко паспортные данные. Номер телефона я и так наизусть знаю, а паспорт всегда со мной Я: Чем конкретно ты пользуешься из раздела профиль? В: Я пользуюсь отметками диспетчеров, чтобы понимать, какие рейсы уже подтверждены и какие задания нужно выполнить дальше. Пользуюсь данными датчиков и мероприятиями по охране труда
Глава 3 - Техническая часть
Комментарий
Был собран мини-UI-кит и настроены авто-лейауты. Благодаря авто-лейаутам удалось реализовать «резиновую» вёрстку и оценить, как интерфейс ведёт себя на разных размерах экранов
Комментарий
Были настроены токены и переменные. Если компания решит не обновлять свои цвета и шрифты, то их можно заменить буквально в пару кликов. Также добавлены переменные для светлой и тёмной темы
Комментарий
Менеджер заранее предупредил, что пользователи могут изменять размер шрифта, поэтому сетку нужно проектировать так, чтобы интерфейс выглядел корректно при разных масштабах. Используя переменные и токены, я собрал три адаптивных состояния размеров
Итого
Комментарий
За счёт новой композиции, экран удалось сократить на 44%, сделав интерфейс компактнее и удобнее. Также были обновлены остальные разделы профиля.
Кроме того, после добавления блока с информацией о диспетчере водители сразу видят, кто отвечает за их данные, и при необходимости могут моментально позвонить. Это ускорило получение важной информации и сделало коммуникацию проще
Итого
Комментарий
За счёт новой композиции, экран удалось сократить на 44%, сделав интерфейс компактнее и удобнее. Также были обновлены остальные разделы профиля.
Кроме того, после добавления блока с информацией о диспетчере водители сразу видят, кто отвечает за их данные, и при необходимости могут моментально позвонить. Это ускорило получение важной информации и сделало коммуникацию проще
Глава 2 - Старый дизайн vs новый
Комментарий
Старый профиль с такими разделами, как: отметок диспетчеров, данными счетчиков и ОТ и БДД
Комментарий
Сравнение между главными экранами профилей
Комментарий
Сравнение остальных экранов
Комментарий
Добавлен экран с контактными данными
Комментарий
Все экраны
WirFrames для терминала
Глава 2 - Старый дизайн vs новый
Глава 2 - Старый дизайн vs новый
Глава 3 - Техническая часть
Итоги бесед с водителями
Комментарий
Комментарий
Водители редко использует пропуска и вообще не пользуются своими данными в приложении. Поэтому блок с пропусками можно оставить на текущем месте или переместить в горизонтальный скролл, а блок с профилем можно убрать во второй контур, оставив на первом контура либо почту либо телефон. Самые важные блоки, как: Отметки диспетчеров, данные датчиков и мероприятия по ОТ и БДД оставляю в первом контуре
Старый профиль с такими разделами, как: отметок диспетчеров, данными счетчиков и ОТ и БДД
Старый профиль с такими разделами, как: отметок диспетчеров, данными счетчиков и ОТ и БДД
Комментарий
Старый профиль с такими разделами, как: отметок диспетчеров, данными счетчиков и ОТ и БДД
Сравнение между главными экранами профилей
Сравнение между главными экранами профилей
Комментарий
Сравнение между главными экранами профилей
Сравнение остальных экранов
Сравнение остальных экранов
Комментарий
Сравнение остальных экранов
Добавлен экран с контактными данными
Добавлен экран с контактными данными
Комментарий
Добавлен экран с контактными данными
Все экраны
Все экраны
Комментарий
Все экраны
Был собран мини-UI-кит и настроены авто-лейауты. Благодаря авто-лейаутам удалось реализовать «резиновую» вёрстку и оценить, как интерфейс ведёт себя на разных размерах экранов
Комментарий
Был собран мини-UI-кит и настроены авто-лейауты. Благодаря авто-лейаутам удалось реализовать «резиновую» вёрстку и оценить, как интерфейс ведёт себя на разных размерах экранов
Были настроены токены и переменные. Если компания решит не обновлять свои цвета и шрифты, то их можно заменить буквально в пару кликов. Также добавлены переменные для светлой и тёмной темы
Комментарий
Были настроены токены и переменные. Если компания решит не обновлять свои цвета и шрифты, то их можно заменить буквально в пару кликов. Также добавлены переменные для светлой и тёмной темы
Менеджер заранее предупредил, что пользователи могут изменять размер шрифта, поэтому сетку нужно проектировать так, чтобы интерфейс выглядел корректно при разных масштабах. Используя переменные и токены, я собрал три адаптивных состояния размеров
Другие проекты
Глава 3 - Техническая часть
Комментарий
Был собран мини-UI-кит и настроены авто-лейауты. Благодаря авто-лейаутам удалось реализовать «резиновую» вёрстку и оценить, как интерфейс ведёт себя на разных размерах экранов
Комментарий
Были настроены токены и переменные. Если компания решит не обновлять свои цвета и шрифты, то их можно заменить буквально в пару кликов. Также добавлены переменные для светлой и тёмной темы
Комментарий
Менеджер заранее предупредил, что пользователи могут изменять размер шрифта, поэтому сетку нужно проектировать так, чтобы интерфейс выглядел корректно при разных масштабах. Используя переменные и токены, я собрал три адаптивных состояния размеров
Другие проекты
Другие проекты
Глава 3 - Админ панель
Итого
Комментарий
Комментарий
За счёт новой композиции, экран удалось сократить на 44%, сделав интерфейс компактнее и удобнее. Также были обновлены остальные разделы профиля.
Кроме того, после добавления блока с информацией о диспетчере водители сразу видят, кто отвечает за их данные, и при необходимости могут моментально позвонить. Это ускорило получение важной информации и сделало коммуникацию проще
Редизайн профиля водителя компании ITECO.Водитель
О компании
ITECO.Водитель — цифровой продукт компании ITECO, предназначенный для водителей грузового транспорта. Предназначен для: отслеживания рейсов, получения информаций от диспетчеров, взаимодействовать с логистической службой и т.д
Задача
Необходимо переработать профиль пользователя в одном из продуктов ITECO.Водитель. Комментарий менеджера: профиль слишком длинный, Хотелось бы изменить композицию
Проблема
Текущая структура профиля плохо масштабируется: приходят запросы на добавление новых блоков, из-за чего экран неизбежно удлиняется и усложняет восприятие и навигацию
Цель
Цель — оптимизировать структуру профиля, сократить количество прокруток и улучшив навигацию, чтобы повысить скорость взаимодействия водителей с интерфейсом
Глава 1 - Исследование
Общение с менеджером
Прежде чем перейти к проектированию, я уточнил у менеджеров, почему возникла необходимость менять структуру профиля: какие есть проблемы у пользователей, какие метрики проседают и какие цели стоят перед редизайном. В ответ получил следующее:
«Основная проблема - дальнейшее масштабирование раздела. В будущем будут добавляться новые блоки, и профиль станет всё длиннее. Кроме того, мы планируем полный редизайн приложения с обновлением цветов и шрифтов.»
Комментарий
После обсуждения с менеджером, я решил проанализировать решения конкурентов как в нашей, так и в смежных сферах (пример сравнения - ниже)
Итоги анализа профилей
Во всех приложениях информация о пользователя скрыта во втором контуре. Это позволяет сократить скролл и приоритизировать более важные пользовательские сценарии. Например, в wildberries - переход в избранное, а в hh — просмотр откликов
Комментарий
Анализ профиля ITECO
Комментарий
Сформулировал джоб стори и гипотезы
Комментарий
После обсуждения с менеджером джоб стори отпали. Выяснилось, что пользователи могут изменять информацию о себе только через диспетчера - об этом нигде не указано в интерфейсе. Также водители не могут добавлять собственные карты, так как компания сотрудничает с партнёрами и выдаёт их карты. Однако несколько вопросов связанные с пропусками и личными данными остались открытыми и я предложил пообщаться с водителями
Разговор с водителями
Я пообщался с 3 водителями, задавал им одинаковые вопросы и ответы были плюс минус одинаковые. Короткий пример разговора с водителем
Я: Пропуска находятся в самом конце профиля, они получается не так важны? Надо ли на погран контроле их предоставлять?
В: Нет, пропуска не надо показывать на погран контроле. Я редко смотрю на пропуска, потому что обычно они мне не нужны в повседневной работе. Пропуска чаще всего используются для доступа в специфические зоны или для выполнения административных процедур
Я: Как часто тебе приходится пользоваться своими данными? Их надо кому-то показывать?
В: Честно даже не помню, чтоб я ими пользовался хоть как-то. Когда устраивался на работу, в офисе взяли мои данные и они автоматически оказались в приложении. На счет того, надо ли их показывать - иногда при получении груза требуют заполнить бланк, туда обычно надо номер телефона, имя фамилия, редко паспортные данные. Номер телефона я и так наизусть знаю, а паспорт всегда со мной
Я: Чем конкретно ты пользуешься из раздела профиль?
В: Я пользуюсь отметками диспетчеров, чтобы понимать, какие рейсы уже подтверждены и какие задания нужно выполнить дальше. Пользуюсь данными датчиков и мероприятиями по охране труда
Итоги бесед с водителями
Водители редко использует пропуска и вообще не пользуются своими данными в приложении. Поэтому блок с пропусками можно оставить на текущем месте или переместить в горизонтальный скролл, а блок с профилем можно убрать во второй контур, оставив на первом контура либо почту либо телефон. Самые важные блоки, как: Отметки диспетчеров, данные датчиков и мероприятия по ОТ и БДД оставляю в первом контуре
Глава 2 - Старый дизайн vs новый
Комментарий
Старый профиль с такими разделами, как: отметок диспетчеров, данными счетчиков и ОТ и БДД
Комментарий
Сравнение между главными экранами профилей
Комментарий
Сравнение остальных экранов
Комментарий
Добавлен экран с контактными данными
Комментарий
Все экраны
Глава 3 - Техническая часть
Комментарий
Был собран мини-UI-кит и настроены авто-лейауты. Благодаря авто-лейаутам удалось реализовать «резиновую» вёрстку и оценить, как интерфейс ведёт себя на разных размерах экранов
Комментарий
Были настроены токены и переменные. Если компания решит не обновлять свои цвета и шрифты, то их можно заменить буквально в пару кликов. Также добавлены переменные для светлой и тёмной темы
Комментарий
Менеджер заранее предупредил, что пользователи могут изменять размер шрифта, поэтому сетку нужно проектировать так, чтобы интерфейс выглядел корректно при разных масштабах. Используя переменные и токены, я собрал три адаптивных состояния размеров
Итого
Комментарий
За счёт новой композиции, экран удалось сократить на 44%, сделав интерфейс компактнее и удобнее. Также были обновлены остальные разделы профиля.
Кроме того, после добавления блока с информацией о диспетчере водители сразу видят, кто отвечает за их данные, и при необходимости могут моментально позвонить. Это ускорило получение важной информации и сделало коммуникацию проще
Другие проекты