Создание ювелирного каталога EFREMOV

Клиент пришёл к нам со старым каталогом, написанным лет 10 назад, клиенты жалуются, что пользоваться им неудобно. Потребность - сделать новый современный каталог и по технологиям, и по дизайну. “Как у лидеров рынка!”. Также важна быстрая скорость работы и добавить ещё дюжину фич!

Проблемы старого каталога

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

Аналитика проекта

Аналитиком проведено несколько встреч, в ходе которых собраны требования и формализованы по методологии User Story Map.

Каждая ключевая бизнес-потребность записывалась как отдельная история, истории сложились в матрицу и составили дорожную карту проекта.

Вызовы для нового каталога

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

Дизайн проекта

Работа по дизайну заняла примерно 3 месяца. Такой срок был связан с небольшим объёмом входных данных по дизайну и довольно широким набором интерфейсов и компонентов, которые выросли из требований к проекту. Также потребовалось растиражировать на адаптивные версии для планшета и телефона.

Из финальных макетов составлена схема движения пользователя по проекту - User Flow.

Что получилось

Подробнее дизайн проекта описан в кейсе Behance: https://www.behance.net/gallery/151467861/EFREMOV

Каталог находится на стадии разработки. Все сложные моменты реализованы, осталось около 40% сопутствующего функционала. И будем запускать!

Технологический стек

  • Бэкенд - Laravel, PosgreSQL, JSON API, RabbitMQ
  • Фронтенд - Vue.js, Tailwind, Vuetify
  • Инфраструктура - Yandex.Cloud, GitLab, Docker
  • Мониторинг сервера - Prometheus + Grafana
  • Логирование - Sentry
  • Тест-кейсы - Qase + Cypress
  • Дизайн - Figma
  • Документация - Notion