Трекер задач
B2C SaaS для планирования:
задачи, заметки и календарь в одном месте
задачи, заметки и календарь в одном месте
Содержание кейса
• Stages of approval
• Анализ конкурентов
• Структура приожения
• Раздел - задачи
• Раздел - заметки
• Раздел - календарь
• Раздел - сегодня
• Передача в разработку
Задача
Спроектировать десктопную веб-версию трекера - задачи, заметки, события и календарь - в рамках MVP, не расходясь с логикой мобильной версии, которая разрабатывалась параллельно
Этапы согласования
Работал в связке с тим лидом, аналитиком и заказчиком: решения показывал итерациями и защищал на встречах
Прошёл весь цикл - разбор конкурентов, структура, вайрфреймы, макеты всех разделов, user flow по сценариям, UI-kit и передача в разработку. Работа шла по спринтам: от исследований до передачи в разработку. Каждый спринт закрывал свой модуль и сдавался в срок. Решения защищал на созвонах. Правки вносил в рамках спринта, спорные места дорабатывал и выносил на повторное согласование.
Анализ конкурентов
Разбирал продукты по функциональным блокам: создание, выполнение, папки, напоминания, сроки, календарь. По каждому блоку фиксировал полезное действие, логику интерфейса у конкурентов и идеи для развития
Главный вывод: ни в одном продукте задачи, заметки и события не живут равноправно - например заметка либо поле внутри задачи, либо вынесена в отдельное приложение.
Из рабочего забрал панель для задач без даты рядом с календарём, где время назначается перетаскиванием: эта фича очень удобная и повторяется у двух лидеров.
Из слабых мест - частые настройки почти везде уходят на второй-третий экран, а переключение вида календаря у одного из продуктов занимает три клика.
Из рабочего забрал панель для задач без даты рядом с календарём, где время назначается перетаскиванием: эта фича очень удобная и повторяется у двух лидеров.
Из слабых мест - частые настройки почти везде уходят на второй-третий экран, а переключение вида календаря у одного из продуктов занимает три клика.
Структура приложения
По итогам анализа собрали карту экранов: три сущности и связи между ними, работа с папками и архивом, календарь и раздел сегодня как общая точка, куда попадает всё со сроком
На карте виден каждый переход - что происходит при любом действии и куда попадает пользователь. Сначала структуру отработали и согласовали на мобильной версии. На большом экране те же правила ложатся иначе. То, что на телефоне занимает отдельный экран, здесь помещается в строку списка, боковую панель или модальное окно, а разделы видны одновременно. Переходы под десктоп разводил заново и фиксировал в user flow по каждому сценарию.
User Flow - создание задачи + дедлайн + напоминание
Полная структура приложения
Задачи
Основной раздел: весь список задач, работа с папками и создание задачи без перехода на отдельный экран
- Фильтры по срокам вынесены в строку над списком. Объём по каждому сроку виден сразу, а фильтр работает внутри любой папки
- Создание задачи прямо в строке списка. Название, подзадачи, дедлайн и напоминание заполняются на месте задача заводится за один подход, без отдельного экрана.
- Метки в строке показывают папку, дедлайн и включённое напоминание. Главное о задаче считывается прямо из списка, открывать её не нужно
- Цвет и прогресс чекбокса отвечает за состояние: серый - обычная задача, оранжевый - просроченная, зелёный - выполненная. Статус читается на скорости, без сверки с датами, прогресс позволяет быстро ориентироваться
- Действия над задачей появляются при наведении. Список в спокойном состоянии остаётся чистым, а нужное оказывается под курсором
- Папки создаются в левом меню, задачи распределяются по ним. У каждой папки счётчик, поэтому объём по сферам виден, не заходя внутрь
- Меню сворачивается до иконок: на длинных списках освободившаяся ширина уходит под названия задач
Заметки
Раздел для записей без сроков: быстро сохранить заметку и найти что-то нужное
- Добавил два режима отображения: список и карточки. Список удобен, когда ищешь по заголовкам, а карточки - когда заметку узнаёшь по содержимому
- Закреплённые собраны в отдельную группу наверху: то, к чему возвращаешься постоянно, не тонет в общем списке
- Заметка открывается окном поверх списка. Прочитать и поправить можно, не теряя список из виду, а для длинного текста есть полноэкранный режим. Редактирование и форматирование живут в том же окне - отдельный режим правки не нужен
- Метка папки видна и в строке, и на карточке: к какой сфере относится запись, понятно без захода в папку
- Фильтров по срокам здесь нет: у заметок нет дедлайнов, поэтому навигация построена на папках и закреплении. Оформление и логика при этом те же, что в задачах
Календарь
Раздел планирования: разложить дела по времени и увидеть загрузку в нужном масштабе
- Добавил три масштаба: день, неделя, месяц и два вида отображения: календарная сетка и список. Сетка показывает плотность времени, список быстрее читается, когда нужно просто просмотреть, что запланировано
- В календаре собраны и события, и задачи с дедлайном, но выглядят они по-разному: событие занимает интервал и имеет цвет ярлыка, задача показана плашкой с чекбоксом. Расписание одно, и при этом видно, где встреча, а где дело
- Настройка цвета событий, и метка видна во всех представлениях: в сетке, в списке и в сводке дня. У задач цвет занят статусом, поэтому там его нет — две кодировки не спорят друг с другом
- Фича панель «Задачи без дедлайна» рядом с сеткой: задачу перетаскиваешь мышью в нужный слот по времени. Записанное на бегу не остаётся висеть без срока.
- События на весь день вынесены в отдельную полосу над сеткой, они не ломают почасовую шкалу и не занимают её целиком
- Мини-календарь слева с отметками занятости: видно, какие дни плотные, а переход к нужной дате занимает один клик
- В списочном режиме многодневные события помечены началом и концом, чтобы одно событие не читалось как два разных
- Обе боковые панели сворачиваются: когда разбираешь неделю, календарь занимает всю ширину.
Сегодня
Сводка дня: все планы на сегодня. Cобытия и задачи со сроком видны на одном экране
- Сделал два режима отображения. Первый - общий список по времени: события и задачи идут вперемешку, в порядке наступления, и день читается сверху вниз. Второй - разбивка по секциям: отдельно события, отдельно задачи, у каждой счётчик; секции сворачиваются, а из заголовка можно перейти в сам раздел
- Просроченное вынесено отдельной группой над сегодняшним: то, что уже горит, попадается на глаза первым
- Создание - одной строкой наверху: задача, событие заводятся прямо из сводки, не уходя в разделы
Передача в разработку
Интерфейс передавал собранной библиотекой, а не набором экранов
Цвета и типографика вынесены в стили, сами компоненты собраны по атомарному принципу - от иконок до сайдбаров, поп-апов и карточек сущностей, у каждого прописаны состояния и варианты. В неочевидных местах оставлял примечания прямо в макете: как ведёт себя контейнер, что происходит при переполнении, какие у элемента ограничения.
Вместе с макетами отдал пошаговые user flow по каждому сценарию. По каждому виден весь путь пользователя от точки, А до точки Б — состояние по умолчанию, заполнение, сохранение, результат. Вёл дизайн-ревью и отвечал на вопросы по ходу сборки. Продукт в стадии разработки.
Вместе с макетами отдал пошаговые user flow по каждому сценарию. По каждому виден весь путь пользователя от точки, А до точки Б — состояние по умолчанию, заполнение, сохранение, результат. Вёл дизайн-ревью и отвечал на вопросы по ходу сборки. Продукт в стадии разработки.
User flow
UI kit
