Toyexpress - інтернет-магазин іграшок

Онлайн-магазин дитячих іграшок з великим асортиментом

Клієнт

Toyexpress, a children's toy online shop

Toyexpress.com.ua

Індустрія - E-commerce

Локація - Україна

Послуги

Фірмовий стиль

Інтернет-магазини

UX/UI дизайн

Дизайн каталогу продуктів і послуг

CI/CD - комплекс заходів для швидшого та дешевшого впровадження нових функцій у продакшн

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

GraphQL - stack technology Malevich company

Next.js - stack technology Malevich company

Bitbucket - stack technology Malevich company

Docker Swarm - stack technology Malevich company

Cloudflare - stack technology Malevich company

Sentry - stack technology Malevich company

Grafana - stack technology Malevich company

Jenkins - stack technology Malevich company

Material UI - stack technology Malevich company

Traefik - stack technology Malevich company

React - stack technology Malevich company

Виклик

01.

Розробити фірмовий стиль для компанії з продажу дитячих іграшок.

02.

Повністю оновити сайт відповідно до сучасних трендів UX/UI дизайну.

03.

Розробити максимально зручну мобільну версію сайту.

04.

Створити гнучкий та зручний каталог товарів з великою кількістю позицій.

РішенняРішення

Ми проаналізували цільову аудиторію інтернет-магазину та попередній досвід взаємодії клієнтів із сайтом - це стало основою для рішення повністю переробити дизайн інтерфейсу. Головна особливість нового дизайну інтерфейсу - принцип Mobile First. Більшість клієнтів відвідували сайт з мобільних пристроїв, тому ми зосередилися на розробці мобільної версії.

Технології:

Material UI

Набір готових елементів для швидкого створення інтерфейсу для вебу

Next.js

Фреймворк на основі React, що дозволяє створювати вебзастосунки з покращеною продуктивністю та користувацьким досвідом завдяки просунутим можливостям попереднього рендерингу, таким як повний серверний рендеринг (SSR) та статична генерація сторінок (SSG).

Docker Swarm/Traefik

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

GraphQL

Мова запитів та маніпуляції даними з відкритим кодом для API та середовище виконання для відповіді на запити на основі наявних даних.

Cloudflare

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

Sentry

Встановлено трекер помилок, що трапляються у користувачів.

Grafana

Підключено систему моніторингу робочих показників з критичними сповіщеннями через SMS та Email.

Bitbucket

Сервер та інтерфейс для роботи з системою контролю версій GIT, що дозволяє проводити Code Review, контролювати версії коду та організовувати спільну роботу над кодом, є частиною CI/CD Jenkins - інструмент для автоматизації окремих етапів процесу розробки ПЗ, ключовий інструмент CI/CD.

Результат

Зручний інтерфейс. Ми розробили сайт, який є ефективним інструментом продажів. Сторінка товару містить опис та всю необхідну інформацію про продукт, тому бажання оформити замовлення не залежить від консультанта.

02.

Ми надали клієнту функціонал управління покупками. Створили індивідуальні фільтри за статтю, віком тощо. Також реалізували функції списку бажань та особистого кабінету.

03.

Ми розробили блоки для продажу акційних товарів, тобто рекомендованих товарів.

04.

Контактну інформацію легко знайти, так само як і способи оплати та доставки.

05.

Ми розробили фірмовий стиль для компанії, що включає: логотип, шрифти та корпоративні кольори.