Реализация редизайна интернет-магазина компьютерной техники
2022
Frontend & QA
Регард
ЭКСПЕРТИЗА
E-COMMERCE
E-commerce
Корпоративные сайты
Frontend & QA
Корпоративные сайты
Frontend & QA
Главное о проекте
Regard — это интернет-магазин компьютерной техники и комплектующих. Команда проекта обратилась к нам для усиления существующего IT- департамента по направлениям Frontend и QA.
Наши разработчики занимались реализацией редизайна существующего сайта, разработкой новых фич и развитием существующих.
Тестировщики проделали огромную работу по каждой задаче, поставленной перед разработчиками. Проводили регресс тестирование на разных этапах. Совместно с аналитиками заказчика участвовали в проработке сценариев.
Наши разработчики занимались реализацией редизайна существующего сайта, разработкой новых фич и развитием существующих.
Тестировщики проделали огромную работу по каждой задаче, поставленной перед разработчиками. Проводили регресс тестирование на разных этапах. Совместно с аналитиками заказчика участвовали в проработке сценариев.
Старый сайт многим нравился, но давно перестал отвечать требованиям современных продуктов. Команда подошла к реализации с учетом лучших практик создания веб-приложений.
Новый дизайн, актуальный и интуитивно понятный, понравился многим старым пользователям и привлек новых.
Новый дизайн, актуальный и интуитивно понятный, понравился многим старым пользователям и привлек новых.
Реализация редизайна
и оптимизация для комфортного использования
У старого сайта не было мобильной версии, и это стало одной из главных причин для редизайна. Заказчиком был разработан удобный и понятный интерфейс для мобильных устройств. Воплощая в жизнь макеты мы помогли выстроить и вывести функционал на достойный уровень — сообща с группой аналитиков заказчика проработав поведенческие сценарии. Интерфейс мобильных устройств сохранил в себе возможности компьютерной версии.
Создание мобильной версии и адаптация web- и tab-версий нового сайта
Быстрая загрузка на мобильных устройствах
Конфигуратор — сложный для разработчиков и очень важный для клиента модуль. Он отличается огромным количеством логики и сложным визуальным представлением.
Мы начали работы с визуала. Верстка слотов не доставила особых трудностей, однако над схемой системного блока пришлось подумать. В итоге мы провернули пару трюков с HTML и CSS, которые позволили по-хитрому контролировать поведение слоев и подсветки элементов блока.
Отдельного внимания заслуживает окно выбора товара в слот. Самой тяжелой здесь оказалась реализация фильтра «Совместимо», поскольку для этого требовалось четко определить, какие изменения фильтров покажут несовместимые товары, а какие — только уточнят поиск.
Мы потратили много времени на обсуждение с заказчиком, но смогли определить схему, при которой пользователь имеет минимальный шанс ошибиться при работе с фильтрами — интуитивность их состояния и отображения.
Также для этого окна мы добавили сохранение состояния при возврате, например, со страницы товара, чтобы пользователи быстро возвращались уже к настроенному списку товаров.
Мы начали работы с визуала. Верстка слотов не доставила особых трудностей, однако над схемой системного блока пришлось подумать. В итоге мы провернули пару трюков с HTML и CSS, которые позволили по-хитрому контролировать поведение слоев и подсветки элементов блока.
Отдельного внимания заслуживает окно выбора товара в слот. Самой тяжелой здесь оказалась реализация фильтра «Совместимо», поскольку для этого требовалось четко определить, какие изменения фильтров покажут несовместимые товары, а какие — только уточнят поиск.
Мы потратили много времени на обсуждение с заказчиком, но смогли определить схему, при которой пользователь имеет минимальный шанс ошибиться при работе с фильтрами — интуитивность их состояния и отображения.
Также для этого окна мы добавили сохранение состояния при возврате, например, со страницы товара, чтобы пользователи быстро возвращались уже к настроенному списку товаров.
Каталог конфигураций: обновление интерфейса и оптимизация
В новой версии пользователи получили возможность взаимодействовать друг с другом. Сохраненная конфигурация, если она не приватная, попадает в публичный список и доступна для просмотра всем. На вкладке Обсуждение пользователи могут оставить свои замечания для автора или обсудить возможные улучшения друг с другом.
Для новичков в железе появилась возможность создать заявку на сборку с требованиями. Остальные пользователи могут предложить свои варианты конфигурации в комментариях.
Для новичков в железе появилась возможность создать заявку на сборку с требованиями. Остальные пользователи могут предложить свои варианты конфигурации в комментариях.
Взаимодействие пользователей
Для работы над проектом была собрана большая продуктовая команда, которую мы дополнили и усилили экспертизой по frontend-разработке и QA.
Команда и технологии
Frontend
- React
- Next.js
- Redux
- Express
- Socket.io
- Stylus
QA
- Selenide
- Allure
- Ручное тестирование
Мы провели комплекс работ по реализации редизайна и оптимизации работы сайта интернет-магазина Regard:
- на основе дизайна от AIC реализовали вёрстку и провели тестирование
- реализовали систему взаимодействия пользователей
- реализовали удобный и функциональный ЛК
- совместно с клиентом реализовали мобильную версию сайта, оптимизировали web- и tab-версии
Результат
Юлия
менеджер проекта
Команда Regard с первых встреч показала большую увлечённость проектом, а также любовь и заботу о своих пользователях. Это клиент, который прислушивается к мнению каждого участника команды. Работать с таким партнером комфортно и интересно, ведь когда ты чувствуешь его «заряженность» на результат, это даёт огромные возможности для реализации своих идей и применения лучших практик отрасли!
Хотите такой же проект?