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

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

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

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

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

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

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

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

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

Битрикс

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

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

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

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

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

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

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

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

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

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

Valentin Yudashkin from N E T L A B on Vimeo.

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

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

Valentin Yudashkin from N E T L A B on Vimeo

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

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

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

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

1. Фронт-энд SPA на AngularJS (1.6)
2. Бэк-энд приложение на Ruby on Rails + скрипты на ruby для серверного пререндеринга страниц SPA приложения (для обеспечения концепции seo friendly)
3. База данных PostgreSQL
4. 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 даёт много возможностей, если вы хотите получить сквозную аналитику за дешево  - то это то, что вам нужно!

Valentin Yudashkin from N E T L A B on Vimeo.

Перейти на сайт