Дизайн сайта и личного кабинета для «Экотранса»: договор и оплата онлайн

О клиенте

«Экотранс» – лицензированный региональный оператор по обращению с твёрдыми коммунальными отходами (ТКО). Компания занимается транспортировкой ТКО и прочих отходов, сбором вторсырья и паспортизацией отходов.

Сайт в первую очередь нужен тем, кто заключает договор на обращение с ТКО: организациям, индивидуальным предпринимателям и частным лицам. У каждой из этих групп свои реквизиты, и от этого зависели почти все решения в проекте.

Задача

Сайт у компании уже был, но устарел и по дизайну, и по возможностям. Заказчик поставил три задачи:

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

Новая структура

Мы полностью переработали структуру сайта. В публичной части пять разделов: «О компании», «Услуги», «Документы», «Ответы на вопросы» и вход в личный кабинет. Ответы на вопросы разделены по аудиториям: для юридических лиц, для ИП, для физических лиц и отдельно о заключении договора. В «Документах» лежат законодательство, материалы о заключении договора и страница «Запрещается».

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

Главная: договор с первого экрана

Первый экран главной отдан основному сценарию. Заголовок «Оформление обязательных договоров по обращению с ТКО», под ним пометка «Для организаций и ИП» и кнопка «Заключение договора». Мы вынесли её в верхнюю часть страницы, и путь до оформления заявки стал короче.

Рядом вторая кнопка, «Популярные вопросы». Ниже по странице:

• карточки услуг: транспортировка ТКО и прочих отходов, сбор вторсырья, паспортизация и переход ко всем услугам;
• баннер «Увидели несанкционированную свалку?» с кнопкой «Сообщить о свалке»;
• новости компании.

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

Личный кабинет для трёх типов плательщиков

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

Личные данные

На этой странице пользователь выбирает тип плательщика: «Юр. лицо», «ИП» или «Физ. лицо». От выбора зависит набор реквизитов. Рядом стоит предупреждение, что после оформления договора тип изменить нельзя, так что ошибку видно заранее.

Контактные данные (ФИО контактного лица, название организации, почта и телефон) заполняются здесь и потом используются при заключении договора.

Заключение договора

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

• Способ расчёта. По нормативу или по контейнеру. Для расчёта по контейнеру форма просит товарную накладную на контейнер, объём в литрах и фото установленного контейнера с подъездом для машины, если чека нет.
• Копии документов. Свидетельство о постановке на учёт в налоговом органе, свидетельство о госрегистрации юридического лица, приказ о вступлении руководителя в должность, решение собрания участников или протокол совета директоров о его назначении. У каждого документа своё поле загрузки.

Счета и сверка

Все платёжные документы хранятся в кабинете. Их можно отфильтровать по договору и периоду. В карточке счёта номер, дата, сумма и статус. Если счёт не оплачен, кнопка «Оплатить» стоит прямо в карточке, а оплатить можно и с компьютера, и с телефона.

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

Обращения

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

Шрифт, цвета и иконки

Интерфейс набран шрифтом Inter в трёх начертаниях: Regular, Medium и SemiBold. Шкала размеров идёт от 58 до 12 px. В палитре два зелёных, #556A3B и #7B893D, и светлый серо-голубой #BECCD2. Тёмно-зелёным выделены кнопки действий: «Заключение договора», «Применить», «Оплатить».

Мы нарисовали больше 50 иконок двумя наборами: для сайта и для личного кабинета. Там есть транспорт, контейнеры, вторсырьё, документы, здания и отдельная серия запрещающих знаков.

Что получилось

У сайта «Экотранса» новая структура и современный дизайн, а главная ведёт к договору с первого экрана. Личный кабинет покрывает весь путь клиента: выбор типа плательщика, договор с загрузкой документов, оплата счетов, сверка взаиморасчётов и обращения в поддержку. Главную, платёжные документы, сверку и обращения мы отрисовали и для телефона.

Если вашим клиентам нужен кабинет, где можно оформить договор и оплатить счёт онлайн, посмотрите разработку личного кабинета и разработку веб-дизайна сайта: спроектируем структуру и сценарии под ваши типы клиентов и нарисуем интерфейс.