Интернет-магазин немецкой бытовой техники Miele

E-commerceИнтернет-магазинДизайнFrontendBackend

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

Клиент

Miele

Отрасль

E-commerce, Ритейл

Дата

Май – Сент. 2021

Стоимость

> 900 тыс. руб.

Услуги

Backend-разработка, Frontend-разработка, UI/UX дизайн, Верстка, Тестирование

Команда

4 разработчика, 1 UX/UI-дизайнер

Технологии

PHP 7.4, Yii2, PostgreSQL, HTML, CSS, JavaScript, Vue.js, Nuxt.js, Git, Docker, Docker-compose, Figma

Интернет-магазин немецкой бытовой техники Miele

Задача

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

Клиент поставил задачу разработать адаптивный сайт интернет-магазина с нестандартным, маркетплейс-подобным интерфейсом, который должен обеспечивать:

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

Решение

Для реализации проекта команда:

провела UX-исследование моделей поведения пользователей и маркетплейсов, чтобы спроектировать удобные маршруты взаимодействия;
разработала прототип с удобной навигацией и ключевыми сценариями: просмотр каталога, добавление в корзину, оформление заказа;
создала оригинальный дизайн с минималистичной эстетикой и адаптировала его под мобильные и десктоп-устройства;
реализовала платформу на Yii2 для backend и Nuxt.js/Vue.js для frontend;
настроила интеграцию с API дистрибьютора для автоматического обновления товаров и цен;
провела тестирование и запуск в продакшн.

Анализ и прототип

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

Сделали прототип с максимально проработанным и дружественным интерфейсом:

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

Дизайн и верстка

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

Мы еще раз проверили логику и простоту маршрутов нашего прототипа и сверстали кроссбраузерную версию для desktop и mobile устройств. Настроили интуитивно понятные админ-панель и выгрузку товаров от дистрибьютора.

Программирование и тестирование

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

Мы приняли стратегическое решение о полном отказе от устаревшей (legacy) кодовой базы заказчика. Это позволило построить новую, высокопроизводительную архитектуру на базе Yii2 и Nuxt.js, полностью соответствующую современным стандартам PSR.

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

Провели закрытое beta-тестирование, исправили все баги и 6 сентября 2021 выпустили сайт в продакшн.

Трудности, с которыми столкнулись

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

Чему научились

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

Результаты

Запущен интернет-магазин с современным UX/UI и адаптивным дизайном.
Обеспечен быстрый и удобный поиск и навигация между категориями.
Интерфейс одинаково удобен как на мобильных, так и на desktop-устройствах.
Сайт интегрирован с внешним API поставщика для актуализации каталога и цен.
Решение повысило лояльность к бренду и увеличило показатели продаж.