Интернет-магазин «Stylish»

Главное о кейсе

Редизайн интернет-магазина решил проблемы низкой конверсии и устаревшего дизайна. Конверсия оформления заказа увеличилась с 0.3% до 2.5% за счет короткого пути к оплате, малым количеством форм для заполнения, быстрого просмотра, простого интерфейса. Дизайн с большими фото, видео и блок историй значительно повысил вовлеченность пользователей и пребывание на сайте. Кейс также выделяется эффективной скоростью разработки за счет параллельной разработки бека и фронта.

----------------

The redesign of the online store addressed issues of low conversion rates and outdated design. The checkout conversion increased from 0.3% to 2.5% due to a shorter payment process, minimal form fields, quick view options, and a user-friendly interface. The design featuring large photos, videos, and a story block significantly enhanced user engagement and time spent on the site. The case is also distinguished by the efficient development speed achieved through parallel backend and frontend development.

Как проект изменил жизнь пользователей

Пользователи стали больше проводить времени на сайте. Теперь клиенту поступает меньше вопросов и заказов в директ Инстаграма. Сайт закрывает 80% вопросов пользователей об изделиях. Оформление и оплата заказа не вызывает вопросов, что не может не радовать. Большие фотографии изделия так же положительно влияют на конверсию, как мы видим из статистики.

----------------

Users are spending more time on the website. Now, the client receives fewer inquiries and direct orders on Instagram. The website addresses 80% of user questions about the products. The order placement and payment process are seamless, generating no inquiries, which is a positive outcome. The large product photos also contribute positively to the conversion, as indicated by the statistics.

Бизнес-задача и ее решение

Клиент пришел к нам с задачей сделать дизайн более современным, увеличить время проведения пользователя на сайте, увеличить конверсии. Со всеми поставленными задачами, как мы думаем - справились. Дизайн стал значительно более современным, в стиле модных журналов. По метрикам и статистике мы видим, что пользователи стали больше проводить времени на сайте и конверсии увеличились с 0.3% до 2.5%. Увеличили вовлеченность пользователь, глубина просмотра страниц выросла с 3.55 до 8.76

----------------

The client approached us with the task of making the design more modern, increasing user time spent on the site, and improving conversions. We believe we've successfully addressed all the set tasks. The design has become significantly more modern, resembling that of fashion magazines. Based on metrics and statistics, we observe that users now spend more time on the site, and conversions have increased from 0.3% to 2.5%. We increased user engagement, and the depth of page views rose from 3.55 to 8.76.

Крафт (мастерство), реализация, технические детали

Мы разработали интернет магазин, применив подход Jam stack, Frontend был разработан на современном стеке: React, Next, Typescript. В качестве основы для бекенда был взят Bitrix со значительными доработками, для которого было разработано API для общения с фронтом. За счет использования CMS системы Bitrix, мы сэкономили время на разработке админ-панели, редактирование контента и специфических вещей интернет-магазина: работа с заказами и каталогом, интеграция 1С.
Были ограниченные сроки на разработку 5 месяцев, включая разработку UI/UX дизайна. Мы успели с конца июля до черной пятницы (25 ноября) запустить новый интернет-магазин. Поскольку сроки были ограничены мы начали параллельно разрабатывать фронтенд и бекенд и API спецификацию. Чтобы это осуществить мы применили подход contract-first.


В результате:
Сделали дизайн всего интернет магазина с нуля;
Сделали акцент на больших фото, видео в карточках и каталоге, что соответствует моде и нише заказчика;
Разработали бек и фронт параллельно;
Разработали удобное оформление заказа со стандартизацией и запоминанием адресов, интегрировав несколько систем оплат и доставок ;
Интегрировали с 1С: выгрузка товаров, заказов, складов, любой магазин можно выбрать для самовывоза, увидеть на карте, узнать где в наличии и предзаказать товар;
Создали хайлайты и истории на сайте в стиле соц. сетей с поддержкой фото и видео;
Связали с админ панелью редактирование всего контента на сайте, вплоть до ссылок в бургере;
Разработали личный кабинет пользователя со входом по смс, где можно посмотреть историю заказов, маршрут и статус текущего заказа и оставить отзыв на каждый заказанный товар.
Добавили рекомендации, избранное, подключили email маркетинг;
Перенесли данные со старого магазина на новый.



We developed an online store using the Jamstack approach, with the frontend built on a modern stack: React, Next.js, and Typescript. For the backend, we utilized Bitrix as a base with significant customizations, including the development of an API for communication with the frontend. By leveraging the Bitrix CMS system, we saved time on developing the admin panel, content editing, and specific e-commerce functionalities such as order management, catalog handling, and 1C integration.

The development timeline was constrained to 5 months, encompassing UI/UX design. We managed to launch the new online store from late July to Black Friday (25th of November). Given the tight schedule, we concurrently worked on frontend and backend development along with API specification, following a contract-first approach.

As a result, we achieved the following:
Redesigned the entire online store from scratch;
Emphasized large photos and videos in product cards and the catalog, aligning with fashion trends and the client's niche;
Simultaneously developed the backend and frontend;
Implemented a user-friendly checkout process with address standardization and memorization;
Integrated multiple payment and delivery systems.
Integrated with 1C for products, orders, and warehouses synchronization.
Enabled customers to choose any store for self-pickup, view locations on a map, check availability, and pre-order products;
Created highlights and stories on the site with support for photos and videos;
Linked the admin panel for full content editing, even including burger menu links;
Developed a user account system with SMS-based login;
Provided features like order history, route tracking, current order status, and the ability to leave reviews for each ordered item;
Added features such as recommendations, favorites, and integrated email marketing;
Successfully migrated data from the old store to the new one.

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

С клиентом коммуникация шла очень комфортно. Можно сказать, что работали в одной команде. Благодаря довольно подробным процессам согласование каждого из этапов проходило практически моментально.
Процесс работы был выстроен следующим образом:
1) Углубленное брифование клиента, постановка целей, задач
2) Написание технического задания
3) Аналитическая часть проекта. На данном этапе мы проанализировали поведение пользователей на старом сайте, выдвинули гипотезы по их улучшению. Провели анализ конкурентов. Определили, какая структура будет у сайта
4) Проектирование. Мы составили карту сайта, прототипы каждой из страниц
5) Согласовали с клиентом референсы и стилистику сайта
6) Отрисовали 2 визуальных концепции дизайна
7) Создали дизайн-макеты всех страниц, адаптивы к ним. Подготовили макет на передачу в разработку
8) Разработка фронтенда и бэкенда шла параллельно
9) Подключение систем оплат, доставки
10) Тестирование сайта и передача клиенту

----------------

Communication with the client was very comfortable. It can be said that we worked as one team. Thanks to fairly detailed processes, the approval of each stage was almost instantaneous.
The workflow was structured as follows:
1) In-depth client briefing, setting goals and tasks
2) Writing a technical specification
3) Analytical part of the project. At this stage, we analyzed user behavior on the old website, formulated hypotheses for improvement, conducted a competitor analysis, and determined the website's structure
4) Design. We created a site map and prototypes for each page
5) We agreed on references and the site's stylistic approach with the client
6) Developed 2 visual design concepts
7) Created design layouts for all pages, including adaptability. Prepared the layout for handover to development
8) Frontend and backend development proceeded simultaneously
9) Integration of payment and delivery systems
10) Website testing and handover to the client

Скриншоты