РесурсТранс и РЖД

Разработка интерфейса

РесурсТранс — мультисервисная компания по управлению непрофильными видами деятельности промышленных предприятий. Является главным подрядчиком РЖД по автоперевозкам.

О проекте

Наши

задачи

Сделать приложение для управления автоперевозками мобильным и при этом удобным. Сотрудники РЖД должны иметь возможность заказать любой автотранспорт, а сотрудники РесурсТранс обработать заказ и передать его в исполнение. Все эти функции должны работать на планшете, чтобы сотрудники обеих компаний имели доступ к приложению не только в офисе, а в любой точке России, где работает мобильный интернет.

Наша

стратегия

На первом этапе мы изучили архитектуру будущего приложения, его основной и дополнительный функционал. На этом этапе мы выделили основные элементы, над которыми стоило поработать больше всего.

На втором этапе мы спроектировали основные элементы приложения и составили UI KIT. Мы спроектировали все дополнительные экраны, состояния элементов и создали несколько цветовых палитр. Наша комнада использовала подход mobile first, поэтому проблем с размещением элементов на этапе дизайна не возникало.

На третьем этапе мы занялись дизайном. Подобрали нейтральные и в то же время запоминающиеся цвета, разработали иконку приложения, отрисовали все элементы ui kit в цвете.

На последнем этапе мы занялись версткой. Наши android разработчики отлично справились с задачей, приложение отлично работает как на планшете, так и на десктопе. Теперь любой пользователь может удаленно работать при наличии планшета и мобильного интернета.

Платформы

приложения

Данное приложение мы разрабатывали только под 10-дюймовые планшеты на android и десктопные браузеры.

Техническое задание и прототип

На основе ТЗ заказчика наша команда пришла к тому, что в начале необходимо разработать элементы пользовательского интерфейса, не привязываясь к цветовой палитре.

Архитектура всего приложения очень четко прописана заказчиком в ТЗ (за что мы безмерно благодарны), поэтому наша команда смогла сразу приступить к прототипированию.

В начале дизайнеры разработали стандартные элементы интерфейса - шапку, бургер, иконки подсистем, навигационные кнопки, вкладки и многие другие элементы.

После разработки элементов навигации мы занялись разработкой иконок и внутренних окон. В первую очередь мы разрабатывали прототип под 10-дюймовый планшет. Встала задача - как перенести огромную таблицу на планшет.

Мы решили сделать карточки вместо таблицы - каждая карточка это заявка на автоперевозку. На карточке указан номер заявки, дата создания, заказчик, подразделение и участок. Таким образом мы предложили пользователю 5 основных сущностей, чтобы внутри них, он взаимодействовал с другими сущностями.

Пользователь сначала решает задачу первого распределения, а затем уже перестроится на задачу второго уровня. Это будет самая логичная перекомпановка с точки зрения информационной архитектуры.

Работа над проектом

Три

концепции

Мы разработали три концепции на выбор. Каждая из них отражала определенную эмоцию ассоциирующуюся с компанией. Эта эмоция должна возникать у пользователя при работе с приложением.

1) Простота и безмятежность
2) Экологичность
3) Комфорт и спокойствие

 

 

 

Что самое главное при работе с основным инструментом? Комфорт и удобство обращения, решение задачи и спокойствие. Именно от этих принципов мы отталкивались, разрабатывая интерфейс. Мы выбрали нейтральные и спокойные цвета, чтобы продуктом было комфортно пользоваться. У работников РЖД полно задач и они не должны чувствовать дискомфорт пользуясь нашим инструментом.

На этом этапе мы оформляем ui kit в цвете. При прототипировании и разработке дизайна мы используем принцип mobile first - метод разработки , который сейчас наиболее актуальнен для web-сайтов. Дизайн разрабатывается сначала для мобильных устройств, а затем отталкиваясь от него разрабатываются макеты для больших экранов.

Разработка

Иконки приложения

Мы не стали отходить от концепции material design и разработали иконку в том же стиле. Так как у нас приложение по контролю за автоперевозками, то первые ассоциации, которые приходят на ум - это автомобиль, транспорт, дорога, движение, символы контроля и управления.

 

Дизайн

для android планшетов

 

 

 

 

 

В итоге мы получили удобный и мобильный инструмент по контролю за автоперевозками. Любой пользователь может работать с приложением как на рабочем месте, так и удаленно на планшете. Сейчас мы продолжаем работать над усовершенстованием раздела "Статистика и отчетность" для топ-менеджеров РЖД и тестируем, насколько удобен наш интерфейс для пользователя.

 

Назад