Наш телефон: +7 (812) 363 - 30 - 23

Закрыть

Портфолио

Портфолио

Намерение

Новый сайт компании Проспект должен по всем пунктам опережать аналогичные ресурсы в сети интернет.

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

Первая встреча

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

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

Кроме того, предстояло подготовить массу инфографики со статистикой в самом разном виде.

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

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

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

Прототип главной страницы

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

Для начала мы решили представить Посетителям сайта возможность подбирать нужные рекламоносители двумя разными путями:

  • - быстрым, как в классическом каталоге
  • - визуально выбирать каждый носитель на схеме станции

С каталогом всё получалось достаточно просто, но останавливаться на простом списке доступных вариантов нам не хотелось. Мы решили добавить динамики. Сгруппировать рекламоносители по категориям «На станциях» и «В вагонах» и добавить фильтр. Пользователь фильтра должен был видеть сразу только те виды рекламоносителей, которые доступны на выбранных станциях. К тому же ему сразу мог демонстрироваться расчетный пассажиропоток в месяц по этим станциям.

Прототип страницы списка рекламоносителей

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

Прототип страница рекламоносителя

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

Все прототипы
Дизайн

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

Главная страница

Отдельная работа была проделана над инфографикой раздела «Аналитика». На прежнем сайте это были сухие таблицы. Мы же добавили цвета, и каждый график представили в более наглядной и удобной для восприятия форме.

Страницы аналитики 4шт.

Более чем объёмная работа была проведена по подготовки схем станций метро. План каждой станции был детально изучен и актуализирован. Не хотелось рисовать плоские скучные картинки, к тому же так они заняли бы значительно больше места. Поэтому каждую станцию мы прорисовали отдельно, в едином стиле. Всего 67 шт. станций и 72 наземных вестибюлей.

Пример плана 1 из 67 шт.
Программирование

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

Основными компонентами стали:

  • - редактор расположения рекламоносителей на схемах станций
  • - редактор балюстрад (эскалаторных зон)
  • - редактор контента
  • - система заявок

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

Страница схемы станции

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

С контентной частью сайта сложностей не возникло. Мы ввели понятие нескольких типовых блоков: картинка, текст в две колонки, текст на всю ширину и слайдер. Любую контентную страницу можно «набрать» из таких блоков любого количества и порядка.

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

Оформление поп-апов
Тестирование

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

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

Все страницы
Итоги:
40 рабочих дней 20 страниц дизайна интерактивные планы 67 станций метрополитена более 100 индивидуальных иллюстраций, иконок и значков инфографика SEO-ready сайт под ключ! система управления Django Python

Всё портфолио

Наши услуги: