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

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

FastWay

Посмотреть сайт:  fast-way.ru

Задача: Разработать сайт для онлайн-платформы аукциона транспортных средств.

Платформа: PHP-фреймворк Laravel.

Этапы разработки:

  • 1разработка технического задания;
  • 2прототипирование будущих страниц;
  • 3создание дизайн-макетов;
  • 4вёрстка и программирование;
  • 5тестирование и доработка.



Разработка технического задания

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

В случае с данным проектом ТЗ было написано сразу для двух версий сайта: российской и европейской. Европейская версия сайта должна была быть разработана на основе готовой российской версии с некоторыми отличиями и доработками.

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

Каждый лот с момента создания до его продажи проходит длинный путь, который сопровождается сменой состояний. Всего было выделено 19 разных состояний лотов, для каждого из которых были подробно расписаны права разных групп пользователей на данный лот, где и когда он отображается, какие действия с ним можно производить.



Прототипирование

Посмотреть прототип:  tch8je.axshare.com

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



Дизайн

Дизайн сайта разрабатывается на основе готового прототипа и логотипа компании.

Основные цвета: жёлтый (из логотипа) и синий (подобран для сочетания с жёлтым).

FastWay - Основные цвета

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

FastWay - Семейство шрифтов

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

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

FastWay - Главная

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

FastWay - О нас
FastWay - О нас - иллюстрация

Страница "Как это работает" описывает основные этапы продажи авто. Для этой страницы были отрисованы иконки под каждый этап продажи авто.

FastWay - Как это работает

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

FastWay - Почему FastWay

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

FastWay - Контакты

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

FastWay - Личный кабинет

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

FastWay - Лоты

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

FastWay - Форма диагностики

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

FastWay - Мобильная версия


Вёрстка и программирование

Сайт разработан на PHP-фреймворке Laravel, вёрстка выполнена при помощи HTML5, CSS3 и JavaScript.

Все страницы состоят из трёх частей: шапка, основная часть и подвал. Шапка и подвал одинаковы для всех страниц публичной части сайта.

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

FastWay - Шапка

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

FastWay - Подвал

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

FastWay - Хлебные крошки


Группы пользователей

  • Администраторы - полный доступ к управлению сайтом, пользователями, смене состояний лотов, управлению контентом;
  • Модераторы - доступ к управлению контентом и состояниями лотов;
  • Продавцы - доступ к личному кабинету свозможностью создавать лоты;
  • Покупатели - доступ к личному кабинету и аукциону с возможностью участвовать в торгах;
  • Подрядчики - доступ к управлению пользователями из группы "Диагносты", возможность отправки лотов на диагностику и оценка продиагностированных авто;
  • Диагносты - доступ к проведению диагностики авто и отправка лотов на оценку.

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

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



Интеграции

  • Tinkoff API - для всех денежных операций на сайте;
  • API Битрикс24 - для автоматизации бизнес-процессов;
  • SMS.RU API - для подтверждения регистрации нового пользователя по коду в СМС;
  • API autostat.ru - для проверки истории транспортного средства и предварительной оценки стоимости;
  • синхронизация с для ведения бухгалтерии.

FastWay - Интеграции

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

FastWay - Телеграм-канал



Получить консультацию
Ваше имя *
Пожалуйста, введите имя
Email *
Укажите свой адрес электронной почты
Телефон для связи *
Неправильно указан номер
Вопрос / комментарий:
Пожалуйста, введите имя
Запрещено загружать файл данного типа
Выбран файл:
Необходимо ваше согласие на обработку персональных данных
* - поля обязательные для заполнения
Ваш менеджер
Ростислав
Отправив запрос вы получаете:
Письмо или звонок от нашего менеджера
Оценку своего проекта
Личную встречу, при необходимости
Прототип главной страницы бесплатно
Конфиденциальность гарантирована!
Оставить заявку
Ваше имя *
Пожалуйста, введите имя
Email *
Укажите свой адрес электронной почты
Телефон для связи *
Неправильно указан номер
Текст сообщения
Пожалуйста, введите имя
Запрещено загружать файл данного типа
Выбран файл:
Необходимо ваше согласие на обработку персональных данных
* - поля обязательные для заполнения
Контакты
пр-т Фрунзе, д. 81, к. 33А, офис 511 210033, г. Витебск