Интернет магазин для Канцелярской компании

Интернет магазин для Канцелярской компании
Клиент:

Канцелярская компания занимается продажей товаров для дома, школы и офиса оптом,а также в розницу.

Задачи:
Разработать розничный интернет-магазина с личным кабинетом пользователя, каталогом товаров, интеграцией с 1С и продукцией партнеров.
Хочу такой же
Решение

Цель проекта:

Разработка интернет-магазина канцелярских принадлежностей с помощью которого пользователи смогут легко находить и выбирать необходимые товары из широкого ассортимента.

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

Важным условием проекта была интеграция сайта с системой учета 1С, обеспечивающая минимальную задержку в обновлении информации.

С каким запросом пришел заказчик?

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

Заказчик поставил задачу придерживаться минималистичного дизайна: минимальное количество цветов и больше свободного пространства, чтобы ничто не отвлекало пользователя от процесса покупок.

Интерфейс должен был быть максимально простым и интуитивно понятным. В оформлении использовались три ключевых цвета: красный, как в логотипе компании, а также белый и серый для создания чистого и легкого восприятия.

К основным требованиям функционала сайта были выдвинуты следующие требования:

  • Гибкий поиск с функцией фильтрации для удобного нахождения товаров.
  • Интеграция с 1С для автоматизированного обмена данными о товарах и заказах.
  • Добавление каталогов товаров партнеров «Рельеф» и «Самсон».
  • Регулярное обновление каталога за счет автоматического импорта данных о наличии товаров.
  • Возможность самостоятельного редактирования сайта.
  • Подключение онлайн-оплаты через эквайринг и кассовое обслуживание.

Перед началом разработки были проведены следующие работы:

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

Команда проекта:

  • Руководитель проекта: Координация работы команды и взаимодействие с заказчиком.
  • Дизайнер: разработка UI/UX дизайна сайта, создание макетов и визуальных элементов.
  • Бэкенд разработчики (2): Разработка серверной части портала, обеспечениие функциональности и производительности.
  • Верстальщик: Реализация дизайна в виде HTML/ CSS, адаптивная верстка.
  • Фронтенд разработчик: разработка клиентской части портала, реализация интерактивных элементов.
  • Команда системного администрирования: Обеспечение серверной инфраструктуры, развертывание и поддержка системы.
  • Тестировщик: Проведение тестирования, выявление и исправление ошибок.

Коммуникация с заказчиком

Для успешной реализации проекта мы провели несколько очных встреч с заказчиком, организовали общий чат в Telegram для быстрого общения и регулярно проводили созвоны и демонстрации.

Обсуждение и согласование технического задания заняло почти 4 недели. Благодаря грамотно составленному техническому заданию, на этапе разработки сайта количество «подводных камней» было сведено к минимуму. А обнаруженные - оперативно обрабатывались и решались.

Реализация проекта

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

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

Реализация функции поиска осуществлялась путем кастомной настройки и установки программной поисковой системы Elastic search.

Поисковая строка

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

Фильтр, карточка товара, блок рекомендуемых товаров

Интеграция с сайтами партнеров:

Еще одна важная задача - произвести интеграцию с товарами с сайтов партнеров (“Рельеф-Центр” и “Самсон”), чтобы они отображались на главной странице сайта. Фишка в том, что теперь можно заказывать продукцию напрямую от поставщиков.

Проблема заключалась в том, что оптовики и розничные покупатели не знали о возможности покупки товаров от партнеров напрямую на текущем сайте. Из-за большого количества наименований эта информация часто упускалась из виду.

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

Редирект на страницы сайтов партнеров компании

Для этого были созданы 2 полных визуальных дубля основного сайта, на которых весь каталог отображается в разделах шапки сайта. также были добавлены все категории и подкатегории товаров (Порядка 60к наименований товаров на оба сайта).

Функциональные особенности этого раздела:

  • Полные сайты-каталоги товаров партнеров, где покупатели могут оформлять заказы.
  • Разделение заказов между основным сайтом и сайтами партнеров, чтобы информация была понятной и не возникало путаницы.

Новости:

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

Для удобства пользователей мы внедрили функцию сортировки новостей, чтобы было проще найти нужную информацию в большом количестве материалов.

Новости компании

Создание блога или новостной ленты на сайте – это важный элемент для улучшения его индексации в поисковых системах. Во-первых, это помогает подтвердить уникальность контента, а во-вторых, делает сайт более полезным для пользователей, что повышает его рейтинг в поисковой выдаче.

Личный кабинет пользователя и корзина

Классический интернет магазин предполагает наличие корзины и личного кабинета пользователя.

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

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

В личном кабинете пользователя есть два раздела:

  1. Профиль, где отображаются личные данные пользователя.
  2. История заказов, где собрана информация о всех ранее сделанных заказах.

В личном кабинете пользователя реализованы несколько ключевых функций: возможность отмены заказа, создание профилей получателей для упрощения оформления заказов, повторение ранее сделанных заказов, изменение личных данных и функционал для просмотра всех заказов.

Личный кабинет

Добавили функцию повторения заказа.

На сайте пользователи могут добавить товар в корзину, выбрав нужную позицию из каталога и нажав на кнопку «В корзину» .

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

Оформление заказа

После этого можно перейти к оформлению заказа. На этапе оформления пользователь выбирает способ доставки и оплаты, а также указывает контактные данные для завершения покупки.

Результат:

Новый сайт для канцелярской компании - удобный и функциональный интернет-магазин.

Теперь клиенты легко находят нужные товары, пользуются быстрым поиском и фильтрами, а также могут оформить заказ за пару кликов. Сайт синхронизирован с 1С, поэтому информация о наличии товаров обновляется автоматически.

Создание дублей сайтов партнерских брендов упростит поиск необходимых товаров и не даст потеряться в большом количестве наименований.

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

Есть идея - давайте обсудим!
Ваше имя*
Ваш телефон*
Ваш e-mail*