Создание конкурсного портала проектов строительства «Татнефти»

Процесс

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

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

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

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

Арт-директора подход в целом устраивает, но поступает пожелание уменьшить шум и доработать график до более функционального состояния.

Арт-директор просит еще поразвлечься с графиком и по возможности подумать об общем визуальном языке.

Опять мимо. Становится понятно, что стоит делать все проще в разы и выкидывать лишнее. Прорабатываем еще один подход.

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

Клиент принимает дизайн. Приступаем к остальным макетам. Проходимся по этапу создания закупки.

Уточняем детали у клиента.

Накидываем служебные страницы.

Параллельно с другими процессами периодически дорабатываем функциональность мониторинга.

В ходе всего проекта цвета позиций неоднократно меняются. В итоге останавливаемся на двух фирменных цветах, соответствующих матрице эмоций. Зеленый — цена товара не изменилась или выросла. Красный — цена упала.

Приступаем к личному кабинету. Разбираемся с ролями в системе.

Быстро собираем прототип.

Параллельно рисуем страницу стилей для сайта.

Прикидываем состав меню для разных ролей.

Рисуем формы регистрации и аккредитации.

В базе клиента все торги разбиты на категории. Думаем над рубрикатором категорий, который будет использоваться при создании закупок, на примере настройки интересующих торгов. Получаем уточнение от клиента: рубрикатор имеет три-четыре уровня вложенности. Правим.

Древовидная структура выглядит слишком сложно. Финальный рубрикатор дублируем в попапе для формы создания заявки.

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

Понимаем, что все уведомления, связанные с заявками, нужно показывать в соответствующих разделах, а в самих уведомлениях оставлять только системные сообщения.

Переходим к разделу торгов. Продумываем фильтры.

Отрисовываем страницы заявок.

Если компания занесена в черный список, фон красится в соответствующий цвет.

Загрузка данных в таблицы занимает некоторое время — нужен прелоудер. Решаем сделать его из логотипа.

К этому времени доделывается верстка первой части макетов, и начинаются бесконечные доработки.

Ловим баги по живому.

Чего нельзя сделать сразу, то записывается в таск.

В тасках кипит совсем другая жизнь.

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

Следим за эволюцией главной страницы в течение проекта.

Заказать дизайн...