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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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