FastWay - онлайн-аукцион

Посмотреть сайт:
fast-way.ru
Задача: Разработать сайт для онлайн-платформы аукциона транспортных средств.
Платформа: PHP-фреймворк Laravel.
Этапы разработки:
- 1разработка технического задания;
- 2прототипирование будущих страниц;
- 3создание дизайн-макетов;
- 4вёрстка и программирование;
- 5тестирование и доработка.
Разработка технического задания
Для разработки сайта любой сложности необходимо наличие технического задания. В случае его отсутствия специалисты нашей студии совместно с заказчиком разрабатывают подробное ТЗ.
В случае с данным проектом ТЗ было написано сразу для двух версий сайта: российской и европейской. Европейская версия сайта должна была быть разработана на основе готовой российской версии с некоторыми отличиями и доработками.
В техническом задании была подробно расписана структура будущего сайта, а также отдельно расписаны элементы ключевых страниц аукциона и личных кабинетов пользователей. Также были подробно расписаны группы пользователей и их права, все этапы торгов на аукционе, начиная с создания нового лота продавцом, заканчивая подписанием договора между площадкой, продавцом и покупателем и передачей лота покупателю.
Каждый лот с момента создания до его продажи проходит длинный путь, который сопровождается сменой состояний. Всего было выделено 19 разных состояний лотов, для каждого из которых были подробно расписаны права разных групп пользователей на данный лот, где и когда он отображается, какие действия с ним можно производить.
Прототипирование
Посмотреть прототип:
tch8je.axshare.com
В техническом задании были подробно расписаны элементы ключевых страниц, их расположение и функционал. Прототип будущего сайта - это схематическая иллюстрация расположения описанных в ТЗ элементов на страницах. Прототип разрабатывался параллельно написанию текста технического задания для нагладности.
Дизайн
Дизайн сайта разрабатывается на основе готового прототипа и логотипа компании.
Основные цвета: жёлтый (из логотипа) и синий (подобран для сочетания с жёлтым).

Семейство шрифтов: Gilroy.

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

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

На странице "Почему FastWay" пользователи могут узнать, что они получат от продажи или покупки авто на платформе FastWay. Для этой страницы дизайнер также отрисовал индивидуальные иконки в стиле всего сайта.

На странице "Контакты" размещена контактная информация и интерактивная крата с отмеченным адресом офиса компании.

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

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

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

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

Вёрстка и программирование
Сайт разработан на PHP-фреймворке Laravel, вёрстка выполнена при помощи HTML5, CSS3 и JavaScript.
Все страницы состоят из трёх частей: шапка, основная часть и подвал. Шапка и подвал одинаковы для всех страниц публичной части сайта.
Шапка содержит логотип, меню и ссылку на страницу авторизации. Для авторизованного пользователя ссылка на авторизацию заменяется на ссылку в личный кабинет, а также отображается баланс покупателя и кнопка "Продать", позволяющая продавцу быстро приступить к созданию лота с любой страницы.

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

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

Группы пользователей
- ● Администраторы - полный доступ к управлению сайтом, пользователями, смене состояний лотов, управлению контентом;
- ● Модераторы - доступ к управлению контентом и состояниями лотов;
- ● Продавцы - доступ к личному кабинету свозможностью создавать лоты;
- ● Покупатели - доступ к личному кабинету и аукциону с возможностью участвовать в торгах;
- ● Подрядчики - доступ к управлению пользователями из группы "Диагносты", возможность отправки лотов на диагностику и оценка продиагностированных авто;
- ● Диагносты - доступ к проведению диагностики авто и отправка лотов на оценку.
Пользователи могут самостоятельно регистрироваться в группу "Продавцы" при помощи формы регистрации в публичной части сайта. Чтобы покупать авто дилер отправляет запрос менеджеру через форму на главной странице, после чего администратор или менеджер регистрирует пользователя в группу "Покупатели", указывая при этом тип юридического лица. От типа юрлица зависит формирование документов и договоров в системе. При этом дилеры могут не только участвовать в торгах и покупать авто, но и создавать свои лоты и продавать авто другим дилерам на корпоративном аукционе.
Подрядчиков и диагностов также регистрирует администратор. Подрядчики в административной части сайта могут регистрировать диагностов, отправлять лоты на диагностику, назначив предварительно диагноста, оценивать продиагностированные лоты и отправлять их модератору для дальнейшего выставления на торги. Диагносты заполняют форму диагностики во время проверки авто и отправляют продиагностированные лоты на оценку подрядчику. Каждый диагност видит только назначенные ему на диагностику лоты.
Интеграции
- ● Tinkoff API - для всех денежных операций на сайте;
- ● API Битрикс24 - для автоматизации бизнес-процессов;
- ● SMS.RU API - для подтверждения регистрации нового пользователя по коду в СМС;
- ● API autostat.ru - для проверки истории транспортного средства и предварительной оценки стоимости;
- ● синхронизация с 1С для ведения бухгалтерии.

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

