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

Всем привет, это наш первый кейс на COSSA (все остальные у нас на сайте).

Почему мы захотели начать с него? 

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

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

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