По релевантности По дате

Интернет-магазин «Toyota Центр»: минималистичный до неприличия дизайн взял и победил

Сайт для Toyota Центр? Автозапчасти? Казалось бы, при чем здесь мы. Агентство «Айтроник» вроде больше по недвижке, нет? Да, но «Toyota Центр Парнас» — наш постоянный клиент и ради него, если потребуется, мы разберемся в дисках, шинах, стеклоочистителях и аккумуляторах. К тому же, переключение на что-то новенькое повышает продуктивность работы, факт.

Сотрудничество с «Toyota Центр» сразу началось с больших, требующий погружения задач. В начале сотрудничества, в 2010-м, это были личные кабинеты для владельцев Toyota avtocabinet.ru и владельцев Lexus cabinet.lexuscenter.ru. Кейс об avtocabinet.ru мы уже писали тут.

Задача

Но перенесемся мысленно в прохладное питерское лето 2016-го. Заказчик обратился к нам, чтобы мы сделали интернет-магазин оригинальных запчастей Toyota от производителя. 

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

Наталья Воропаева, руководитель проекта

По задумке клиента, пользователь должен был иметь возможность:

  1. сделать запрос на автозапчасть по коду или названию, 
  2. получить информацию по стоимости и срокам доставки, 
  3. оформить заказ,
  4. оплатить. 

Легкотня, скажете вы. Нам тоже так казалось.

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

Этапы выполнения

В результате творческих поисков мы пришли к системе из трех элементов:

  1. сайт,
  2. web-сервис, который будет служить прослойкой между базой данных и сайтом,
  3. рабочая БД запчастей и заказ-нарядов.

Сайт и web-сервис делали мы, то есть команда «Айтроника», а настройкой БД занимались сотрудники программы «Турбосервис», на основе которой организован складской учет заказчика.

Дальше – привычный для нас этап: разработка интерактивного прототипа и составление ТЗ.

Вот так выглядели страницы на прототипе:

Интернет-магазин «Toyota Центр»: минималистичный до неприличия дизайн взял и победил - 1

Затем мы продумали все пользовательские сценарии. Откровенно говоря, интернет-магазин «Тойоты» с этой точки зрения несложен, поэтому этот этап мы проскочили быстро. 

После согласования всех сценариев «Турбосервис» приступил к разработке запросов к БД, а мы рисовали дизайн-макеты. Все шло бодренько, и уже проступали очертания конечного продукта.

Вот варианты главной страницы:

Интернет-магазин «Toyota Центр»: минималистичный до неприличия дизайн взял и победил - 2

Интернет-магазин «Toyota Центр»: минималистичный до неприличия дизайн взял и победил - 3

Интернет-магазин «Toyota Центр»: минималистичный до неприличия дизайн взял и победил - 4

И все же минимализм победил:

 

Интернет-магазин «Toyota Центр»: минималистичный до неприличия дизайн взял и победил - 5

В результате были утверждены следующие макеты: 

Интернет-магазин «Toyota Центр»: минималистичный до неприличия дизайн взял и победил - 6

Интернет-магазин «Toyota Центр»: минималистичный до неприличия дизайн взял и победил - 7

Интернет-магазин «Toyota Центр»: минималистичный до неприличия дизайн взял и победил - 8

Интернет-магазин «Toyota Центр»: минималистичный до неприличия дизайн взял и победил - 9

Интернет-магазин «Toyota Центр»: минималистичный до неприличия дизайн взял и победил - 10

«Поскольку интернет-магазин должен был быть удобен для использования на мобильных устройствах, дизайн делали адаптированным под мобильные устройства. Даже как-то неудобно говорить такие банальности. Но именно так мы и сделали, да!»

Максим Мухачев, арт-директор

После согласования дизайна сайта перешли к верстке и программированию.

Подводные камни

Вот тут-то нас и подстерегали главные трудности!

Самым сложным на этапе программирования стала разработка взаимодействия «Турбосервиса» и интернет-магазина. Web-сервис, который обращается к БД Турбосервиса, должен был:

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

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

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

Результат

Все хорошо, что хорошо кончается. Итоги:

  • Период работ – 5 месяцев
  • Задача – done
  • Приносит ли сайт заказы? – Да!

Спустя год

Недавно клиент обратился к нам за доработками, которые стали необходимыми из-за поправок к закону об интернет-магазинах России.

Если кратко, то: закон 54-ФЗ в новой редакции предписывают интернет-магазинам начать использовать специальную кассовую технику для отправки фискальных данных в налоговую в момент оплаты покупки. Официальные формулировки такие официальные...

Главное – мы смогли помочь. Мы доработали передачу в платежный сервис «Яндекс.Касса» параметров платежа, необходимых для формирования чека. Вуаля – клиент платит налоги, а мы спим спокойно, потому что справились, не сорвав сроков.

Понравилась статья? Расскажи об этом друзьям!

Нужен успешный проект или реклама?
Хочу заказать