B2B
Веб-интерфейс
Редизайн
Ускорила ключевые сценарии работы с документами благодаря переработке интерфейса сервиса электронного архива
B2B
Веб-интерфейс
Редизайн
Ускорила ключевые сценарии работы с документами благодаря переработке интерфейса сервиса электронного архива
- -40% временина поиск документа
- -2 переходадо просмотра скан-копии
- 5 → 2 действияв сценарии обработки
- 7 → 4 действиядо выгрузки документов
О проекте
E-archive — это веб-сервис, который помогает компаниям решать следующие задачи:
1
Хранить электронные копии бумажных документов
2
Находить документы по заданным параметрам
3
Контролировать возврат документов от контрагентов
4
Выгружать документы по договорам
До начала работы у сервиса уже была сформирована бизнес-логика и рабочий интерфейс. Однако система решала множество разных задач через разрозненные разделы и сценарии, из-за чего работа с большим количеством документов была сложной и требовала лишних действий.
О проекте
E-archive — это веб-сервис, который помогает компаниям решать следующие задачи:
1
Хранить электронные копии бумажных документов
2
Находить документы по заданным параметрам
3
Контролировать возврат документов от контрагентов
4
Выгружать документы по договорам
До начала работы у сервиса уже была сформирована бизнес-логика и рабочий интерфейс. Однако система решала множество разных задач через разрозненные разделы и сценарии, из-за чего работа с большим количеством документов была сложной и требовала лишних действий.
Задача
Передо мной стояла задача сохранить существующую функциональность сервиса, но сделать взаимодействие с ней проще.
Я сфокусировалась на нескольких направлениях:
- переработать структуру и навигацию;
- упростить поиск документов;
- сократить количество действий в основных сценариях;
- сделать статусы заметными и понятными;
- объединить информацию о документе и его скан-копии;
- упростить работу с договорами;
- сделать массовую работу с документами удобнее;
- предусмотреть работу с несколькими юридическими лицами;
- создать единую визуальную систему для интерфейса.
Задача
Передо мной стояла задача сохранить существующую функциональность сервиса, но сделать взаимодействие с ней проще.
Я сфокусировалась на нескольких направлениях:
- переработать структуру и навигацию;
- упростить поиск документов;
- сократить количество действий в основных сценариях;
- сделать статусы заметными и понятными;
- объединить информацию о документе и его скан-копии;
- упростить работу с договорами;
- сделать массовую работу с документами удобнее;
- предусмотреть работу с несколькими юридическими лицами;
- создать единую визуальную систему для интерфейса.
Как работает сервис
Сервис дополняет существующий процесс работы с документами в программе 1С и переносит их в отдельный цифровой архив. Таким образом, ручная сортировка и сопоставление большого количества сканов заменяются автоматической привязкой документов.
Как работает сервис
Сервис дополняет существующий процесс работы с документами в программе 1С и переносит их в отдельный цифровой архив. Таким образом, ручная сортировка и сопоставление большого количества сканов заменяются автоматической привязкой документов.
1. Разделители
В 1С создаются специальные разделители для идентификации документов
2. Сканирование
Разделители прокладываются между соответствующими документами и отправляются вместе с ними в сканер
3. Идентификация
При сканировании система распознаёт разделители и автоматически формирует файлы со специальными именами
4. Передача
Пользователь нажимает «Отправить в архив», после чего отсканированные документы передаются из 1С в сервис
5. Архив
Скан-копии становятся доступны в сервисе для поиска, просмотра, выгрузки и дальнейшей работы
1. Разделители
В 1С создаются специальные разделители для идентификации документов
2. Сканирование
Разделители прокладываются между соответствующими документами и отправляются вместе с ними в сканер
3. Идентификация
При сканировании система распознаёт разделители и автоматически формирует файлы со специальными именами
4. Передача
Пользователь нажимает «Отправить в архив», после чего отсканированные документы передаются из 1С в сервис
5. Архив
Скан-копии становятся доступны в сервисе для поиска, просмотра, выгрузки и дальнейшей работы
Контроль документов и статусы
В большом архиве важно не только найти документ, но и быстро понять его состояние. В интерфейсе используются статусы, которые помогают определить, что происходит с документом и требуется ли действие пользователя.
Наиболее важные состояния отображаются на дашборде в формате карточек с возможностью перехода к отфильтрованному списку в соответствующих разделах. А ниже можно увидеть список недавних событий и сразу с дашборда перейти в карточку интересующего документа.
Контроль документов и статусы
В большом архиве важно не только найти документ, но и быстро понять его состояние. В интерфейсе используются статусы, которые помогают определить, что происходит с документом и требуется ли действие пользователя.
Наиболее важные состояния отображаются на дашборде в формате карточек с возможностью перехода к отфильтрованному списку в соответствующих разделах. А ниже можно увидеть список недавних событий и сразу с дашборда перейти в карточку интересующего документа.
При первой авторизации в сервисе пользователь также будет понимать из пустого состояния дашборда какие состояния документов он сможет отслеживать в будущем.
Неразобранные документы
После сканирования документов в системе предусмотрена работа с неразобранными файлами. Я переработала этот сценарий так, чтобы пользователь мог понять:
- какой файл требует обработки, а какой был распознан неудачно;
- к какому документу относится файл.
Неразобранные документы
После сканирования документов в системе предусмотрена работа с неразобранными файлами. Я переработала этот сценарий так, чтобы пользователь мог понять:
- какой файл требует обработки, а какой был распознан неудачно;
- к какому документу относится файл.
Также в виду того, что пользователь будет работать с большим массивом документов, я предусмотрела возможность массовых действий с ними.
Система распознает атрибуты отсканированных файлов и при открытии формы документа пользователь видит уже предзаполненные поля, которые остается только проверить. Также можно добавить новый документ из интерфейса.
Поиск документов
Одна из основных задач сервиса — найти нужный документ среди большого объёма архива. Я переработала структуру списков и фильтрации, чтобы поиск стал основным способом навигации по документам. Пользователь может комбинировать параметры и постепенно уточнять результаты: по договору, контрагенту, дате, номеру, статусу и другим реквизитам.
Таким образом поиск перестаёт быть отдельным сложным процессом и становится естественной частью работы со списком документов.
Поиск документов
Одна из основных задач сервиса — найти нужный документ среди большого объёма архива. Я переработала структуру списков и фильтрации, чтобы поиск стал основным способом навигации по документам. Пользователь может комбинировать параметры и постепенно уточнять результаты: по договору, контрагенту, дате, номеру, статусу и другим реквизитам.
Таким образом поиск перестаёт быть отдельным сложным процессом и становится естественной частью работы со списком документов.
Документы вместе
В старом интерфейсе информация о документе и работа с его файлами были разделены. В новой концепции я объединила их в одном рабочем пространстве.
Пользователь может получить следующую оперативную информацию по всем документам, привязанным к договору, сразу из списка и провалившись в карточку:
- реквизиты документа;
- информация о контрагенте;
- информация о связанном договору;
- статус;
- доступные действия;
- скан-копии.
Это позволяет проверить документы и их содержимое без лишнего переключения между разделами.
Документы вместе
В старом интерфейсе информация о документе и работа с его файлами были разделены. В новой концепции я объединила их в одном рабочем пространстве.
Пользователь может получить следующую оперативную информацию по всем документам, привязанным к договору, сразу из списка и провалившись в карточку:
- реквизиты документа;
- информация о контрагенте;
- информация о связанном договору;
- статус;
- доступные действия;
- скан-копии.
Это позволяет проверить документы и их содержимое без лишнего переключения между разделами.
Просмотр списка документов доступен в двух режимах:
- по договорам, когда все документы по одному договору объединены в группу;
- по документам, когда можно посмотреть все документы единым списком (при этом в таблице присутствуют заголовки с номером договора, чтобы сохранить принцип удобной группировки документов).
Я добавила визуальный «маркер» для договоров, к которым привязаны лишние документы. В таких случаях в ячейке с суммой отображается процент, на который увеличилась общая сумма по договору.
Визуальная система
Основная задача была — сделать работу с большим объёмом документов понятной и не перегруженной. Визуальный стиль объединяет функциональность корпоративного сервиса с более современным и дружелюбным подходом к интерфейсам: много воздуха, сдержанная палитра, понятная иерархия и точечные цветовые акценты помогают работать с большим объёмом информации без визуального шума.
Светлая цветовая палитра с большим количеством белого пространства создаёт ощущение порядка и помогает пользователю сосредоточиться на содержимом. В качестве основного акцентного цвета используется яркий синий — он выделяет интерактивные элементы, ссылки, активные состояния и ключевые действия.
Интерфейс сочетает мягкие светло-серые поверхности, тонкие разделители и аккуратно скруглённые карточки. Благодаря этому даже насыщенные таблицы и большие массивы информации выглядят легче и структурированнее.
Визуальная система
Основная задача была — сделать работу с большим объёмом документов понятной и не перегруженной. Визуальный стиль объединяет функциональность корпоративного сервиса с более современным и дружелюбным подходом к интерфейсам: много воздуха, сдержанная палитра, понятная иерархия и точечные цветовые акценты помогают работать с большим объёмом информации без визуального шума.
Светлая цветовая палитра с большим количеством белого пространства создаёт ощущение порядка и помогает пользователю сосредоточиться на содержимом. В качестве основного акцентного цвета используется яркий синий — он выделяет интерактивные элементы, ссылки, активные состояния и ключевые действия.
Интерфейс сочетает мягкие светло-серые поверхности, тонкие разделители и аккуратно скруглённые карточки. Благодаря этому даже насыщенные таблицы и большие массивы информации выглядят легче и структурированнее.
3D-иллюстрации в нежных оттенках, с текстурой полупрозрачного стекла и акцентным элементом в виде яркого бумажного самолетика создают ощущение движения вперед, легкости в работе и при этом спокойствия и заботы о данных:
- текстура стекла создает ощущение невесомости цифровых файлов;
- яркие бумажные самолетики подчеркивают скорость передачи данных;
- мягкие блики и размытие делают UI-элементы привлекательными для пользователя.
Результаты
Я не меняла бизнес-логику — я сделала её понятнее. Главным результатом работы стала переработка взаимодействия с уже существующей системой. Было множество отдельных рабочих разделов, разрозненные сценарии, необходимость переключаться между контекстами, сложная работа с большим списком документов.
Стало:
- единая логика работы с документами;
- более понятная структура навигации;
- быстрый поиск через фильтры;
- понятная система статусов;
- упрощённая работа с договорами;
- более удобная работа с выборками и массовыми операциями.
Результаты
Я не меняла бизнес-логику — я сделала её понятнее. Главным результатом работы стала переработка взаимодействия с уже существующей системой. Было множество отдельных рабочих разделов, разрозненные сценарии, необходимость переключаться между контекстами, сложная работа с большим списком документов.
Стало:
- единая логика работы с документами;
- более понятная структура навигации;
- быстрый поиск через фильтры;
- понятная система статусов;
- упрощённая работа с договорами;
- более удобная работа с выборками и массовыми операциями.
- -40% временина поиск документа
- -2 переходадо просмотра скан-копии
- 5 → 2 действияв сценарии обработки
- 7 → 4 действиядо выгрузки документов
Дотошность, ответственность и нестандартный взгляд на вещи отличает Ксению от многих дизайнеров. В следующий раз обратимся снова.
Следующие кейсы
1 сценарий от знакомства с компанией до обращения, 9 услуг в одном понятном лендинге