Кейс интернет-магазин «Юдашкин»

Почему этот кейс будет полезен каждому?

Ответ — этот проект особенный по многим параметрам:

  • Фронт-энд — S.P.A приложение.
  • Серверный пререндеринг для SEO
  • Самописная CMS на Ruby on Rails.
  • Это единственный нам известный ecommerce проект с фронт-эндом S.P.A + серверным пререндерингом в Рунетем
  • Этот проект использует полноценную и исправно функционирующую связку: Сайт+CRM+Сервисы+Складской софт.

Наша студия уже более трёх лет работает с Петром Максаковым и Галиной Юдашкиной в направлении развития различных сервисов и стартапов в интернет среде. Предыдущие и успешные проекты — это старая и новая версия проекта Lcycle.

Пётр вынашивал идею создания этого проекта уже давно, но вот однажды он позвонил нам и сказал: “Я собрался с мыслями, идеями и готов к старту”.

Задачи которые перед нами поставил заказчик:

  • Cоздать современный ресурс, который должен идеально работать как на десктопе так и на мобильных устройствах
  • Объединить воедино, склад (1С. 7.7), готовящийся к открытию оффлайн магазин, интернет-магазин и систему управления клиентами
  • Создать административную панель, имеющую возможность масштабироваться в систему управления не только интернет магазином, но и другими ресурсами (блог компании, основной корпоративный сайт)
  • Создание корпоративного UI кита который будет масштабироваться и на другие ресурсы компании

Мы работаем на различных коробочных системах, от пресловутого WP и до популярного и всеми «любимого” Битрикса.

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

Битрикс

Поэтому решили поднять свое приложение на Ruby on Rails, используя опыт таких гигантов индустрии, как Shopify.

Задачи, поставленные перед нами:

  • Создать современное веб-приложение, которое идеально работает как на десктопе так и на мобильных устройствах
  • приложение, само-собой, должен быть SEO-friendly.
  • создать административную панель с возможностью масштабироваться в системе управления не только интернет-магазином, но и другими ресурсами (блог компании, основной корпоративный сайт).
  • объединить воедино, склад ведущийся еще на то время в 1С. 7.7, готовящийся к открытию магазин, интернет-магазин и систему управления клиентами (тут и Битрикс бы подошёл, но по всем остальным аспектам большой пролёт) выбрали RetailCRM, ниже тезис почему.
  • создание корпоративного UI кита, применимый и к другим ресурсам компании — поддержка и развития UI кита с коробочными системами также проблематична и больше усложняет её,нежели оптимизирует.

А теперь по порядку. Этап проектирования и дизайна. Тут тоже были особенности, мы всегда клиенту предлагаем два подхода — классический (привычный) и мобайл фёрст — проектирование.

Привычный — это когда мы проектируем и утверждаем дизайн-концепт, например, главной страницы.

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

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

Мы рады, что клиент, согласился с нашими доводами и пошли по этому пути, так как большинство клиентов бояться данного метода и предпочитают “поиграться с главной”.

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

Фирменными цветами выбраны, новые фирменные цвета “бело-золотые”. Существовали и существуют несколько вариантов как главной так и страницы каталога в десктопе. Остановились на вторых так как их легче обновлять при смене коллекций.

Все решение по UX больше связаны с front-end программированием и в данном случае была непосредственная работа UX/UI специалиста и front end программиста в связке.

Реакция активных элементов при наведении:

Процесс выбора размера:

<pпроцесс подбора=»» товара=»»  в=»» каталоге:<=»» p=»»>

Процесс оформления заказа:

Для реализации веб-приложения нами был выбран такой технологический стек:

  • Фронт-энд SPA на AngularJS (1.6)
  • Бэк-энд приложение на Ruby on Rails + скрипты на ruby для серверного пререндеринга страниц SPA приложения (для обеспечения концепции seo friendly)
  • База данных PostgreSQL
  • In-memory хранилище для кэширования Redis.

В бек-энд приложении были использованы несколько гемов от Shopify. Они реально рубят фишку в ecommerce разработке.

Интеграции, омниакальность, CRM и прочий “адок”.

Решили использовать в качестве основы RetailCRM, можно долго рассуждать какая из популярных CRM для магазина лучше, но могу с 80% гарантией сказать что для небольших магазинов круче RetailCRM просто нет. Можете в комментах писать растолкую почему, назову единственный факт. Это CRM создана специально для e-commerce исходя из сложностей и особенностей этих продаж.

Складская система 1С. версия, 7.7 это трешь, но «сказано — сделано».

Общая схема выглядит таким образом:

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

По 1с всё понятно тут всё без изменений, такие требования заказчика. Из системы на наше веб приложение мы получаем товарные остатки и стоимость. В систему из CRM приходит информация по заказам.

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

Административная часть приложения — отдельное SPA приложение, но уже без серверного пререндеринга, так как сео для админки не нужно.

RetailCRM — я уже много дифирамбов им пел, это по моему мнению единственная быстроразвивающиеся система для e-commerce проектов на территории Рунета. Все основные сервисы с легкостью интегрируются, много полезного функционала по управлению клиентами, от моих любимых триггеров до расходов. P.S Напишу как нибудь обзор.  Но камень в их огород всё равно кину, API для Ruby on Rails написан три года назад и не обновлялся, тоже касается и складских систем.

Что сделали:

  • полная интеграция с Яндекс.Кассой и Атолом
  • около 30 триггеров (рассылки, оповещения, работа с списками, работа с менеджерами)
  • передача заказов в 1с
  • многоскладовость, резервация товара
  • подключение сервисов ( GA, службы доставки)

Интеграция с GA даёт много возможностей, если вы хотите получить сквозную аналитику за дешево  — то это то, что вам нужно!