+7 (499) 703-44-43 Заказать проект

Разработка интернет-магазина cogito-shop

Разработка интернет-магазина cogito-shop

Задача:

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

Проект:
«Когито-Центр» – издательство психологической литературы с более чем двадцатилетним опытом.
Цель:
Интернет-магазин, с личным кабинетом, корзиной и блогом, для издательства, реализующего физические и виртуальные книги.

Процесс

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


Этот проект не стал исключением. Дизайн проекта мы получили от клиента. Со стороны нашей команды был выполнен комплекс работ по Front- и Back-end программированию, а также тестирование и ведение проекта.


главная страница

Стоит также отметить, что предоставленный дизайн был разработан сотрудником заказчика, для которого веб-дизайн не является профильной специализацией. Это послужило причиной того, что нужно было провести аудит дизайна и донести правки по макету исполнителю клиента на частых созвонах. Многие моменты, важные для разработки, не были продуманы со стороны UI/UX.


Дизайн

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


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


каталог мобильная версия

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


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


дизайн система

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


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


раздел магазина клиническая психология

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


Также была обнаружена неточность, которая связана с тем, что у электронных книг нет физической доставки, а поле в корзине есть. Члены команды обсудили этот вопрос с клиентом и пришли к выводу, что нужно убрать этот пункт для электронных книг, и добавить вместо него кнопку “скачать”.


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


карточка товара

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


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


Функционал

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


К примеру, стоит отметить разделение шаблона карточки товара на «старый» и «новый». Визуально их нельзя отличить, потому что различие заключалось в способе выводы медиа файлов. Мы объединили все способы запросов в одном шаблоне и исправили обработку свойств товара, оптимизацию картинок и в соответствии с требованиями платформы Битрикс.


карточка мобильная

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


главная каталог

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


разделы интернет-магазина

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


Стоит также уделить внимание функциональных элементов пользовательского интерфейса. Первым экраном сайта безусловно является главная страница сайта. В рамках этого кейса страница является многофункциональным элементом общей системы. В хедере расположено меню, которое позволяет пользователям перейти к таким разделам сайта как: «Доставка», «Оплата», «О компании», «Контакты». Это позволяет пользователям быстро найти необходимую информацию о магазине и условиях покупки.


благодарственные письма и карта

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


навигация по сайту

Одним из главных разделов любого интернет-магазина можно выделить «Личный кабинет». Именно здесь располагаются личные данные пользователя, которые бизнес может использовать для аналитики, сервисов доставки или персонализации предложений. Раздел также помогает сделать взаимодействие с магазином более удобным благодаря приёмам лояльности и маркетинга: «Моя скидка на следующий заказ», «Мои отложенные товары», «История просмотров». Это позволяет пользователям сохранять интересные им книги и быстро перейти к ним при следующем посещении сайта.


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

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


Ассортимент в каталоге представлен карточками товара, которые содержать подробное описание книги, ее характеристики, фото и цену. Пользователю в удобной форме показана информация о позиции: автор, издательство, формат книги, вес, тип обложки, количество страниц и др. Если товар попадает под одну из нескольких категорий, к примеру «Последние три экземпляра», на изображении появляется специальная метка в виде ярлычка.


личные данные пользователя

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


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

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


блог сайта

Кому подойдет подобная услуга?

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


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


Клиент:
Издательство «Когито-Центр»
Тип проекта:
Сайт
Тип работы:
Интернет-магазин
Индустрия:
Торговля

Стек технологий:

  • html5
  • css3
  • bitrix

Команда:

  • Front-end разработчик 2
  • Back-end разработчик 1
  • Проектный менеджер 1
  • Тестировщик 1
Заказать проект или проконсультироваться можно по адресу info@imedia24.ru или заполните онлайн заявку и мы позвоним Вам в течение 1 часа!
Оставить заявку
Поделиться: