Project Screenshot

GaiaHerbs

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

  • The story behind Gaia.

    Компания GaiaHerbs - была основана в 1987 году и за это время компания оставалась верна совим главным целям и принципам - укреплять здоровье благодаря здоровому и сбалансированному питанию! Представитель компании Дарроу Вест связался с нами и попросила помочь в создании онлайн магазина для увеличения объемов продаж компании

  • Analysis

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

  • Our solutions

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

Results

Duration:
April 2017 - September 2017
Team:
Backend - 1 Frontend - 2 PM - 1
Designed the UI/UX

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

Developed the backend

Мы выбрали REST API для бэкэнда, потому что эта архитектура гибкая, простая и расширяемая, позволяет в дальнейшем легко интегрировать структуру в мобильное приожение. Мы предоставили понятный интерфейс администратора, чтобы наш модератор мог управлять содержимым сайта всего за несколько кликов. Сразу после внесения изменений в админской панеле они становятся доступны пользователям автоматически. Администратор может легко за пару кликов изменять заголовки, тексты, изображения, значки и цветовые схемы. Мы использовали Redis RAM кеширование, чтобы ускорить время отклика API и процесс завершения заказа. Также был разработан гибкий модуль для автоматического вычисление цены доставки в зависимости от страны, адреса пользователя и выбранной службы доставки

Developed the frontend

Одной из пожеланий клиента была быстрота работы сайта и хорошая индексируемость поисковыми системами! Чтобы разработать интерфейс для страниц GaiaHerbs, мы выбрали надежную комбинацию технологий. Мы использовали HTML5 для разметки страницы, CSS3 для дизайна (чтобы разметка страницы была максимально гибкой, мы использовали CSS flexbox) и JavaScript, соответствующий стандарту ES6 для интерактивности. Чтобы упростить разработку, мы использовали Stylus, многофункциональное CSS-расширение, Gulp.js, средство выполнения задач JavaScript, и Babel, инструмент для преобразования кода ES6 в обратно совместимый JavaScript для старых браузеров и сред.

Implemented features

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

Трекеры Gaia отслеживают ряд событий: создание/оплата заказа, изменение статуса заказа. Пользователи мгновенно уведомляются посредством SMS, push-уведомлений или электронной почты. Система уведомлений гибкая и пользователи могут ннастраивать предпочитаемые каналы и какие именно уведомления они хотят получать

Мы разработали интерфейс администратора, позволяющий в удобном и понятном формате добавлять блоговые статьи, редактировать существующие Администратор может форматировать существующий контент (добавлять заголовки, списки, осттупы и т.д.), а также добавлять медиа-контент (изображения и видео)

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

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

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

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

Technology Stack

HTML5 icon
HTML5
CSS3
Javascript icon
Javascript
Node icon
NodeJS
PostreSQL icon
MongoDB
Nginx icon
Nginx
Paypal icon
Paypal
Rest API
Rest API