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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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