Проектирование, дизайн и фронтенд для магазина mr. Sleep

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

Теперь купить матрас через интернет стало проще и удобнее. Шансов ошибиться у пользователя почти не осталось. Он будет доволен процессом покупки продукции на сайте «Мистер Слип», а затем насладиться процессом сна на ней.

Now it is easy and convenient to buy a mattress by the Internet. The user has almost no chance of making a mistake. He will be happy with the process of buying products on the Mr. Sleep website, and then enjoy the process of sleeping on it.

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

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

Аналитика

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

Дизайн

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

Скорость работы сайта

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

Михаил Брычкин,технический директор iBRUSH:

«Где можно обошлись без плагинов. Код JS в src разбили по смысловым блокам так, чтобы потом его можно было при желании собрать в отдельные файлы для страниц/разделов. В местах, где ajax-запросы, оставили заглушки. Учли требования pagespeed и lighthouse».


The site needed to be completely changed. But it was necessary to retain all its functionality. The online store has been operating for a long time and during this time collected many useful features for users. It was important to reorganize all processes and functionality and make them more systematic within the framework of the new site.

Analytics
Additionally to the standard mechanics that are used for analytics, we talked a lot with the call center to understand what customers find inconvenient, what information is insufficient to place an order, and so on.
As a result, we developed CJM and made prototypes of a new site.
We paid attention to the mobile version of the site.

Design

In design we started from the corporate identity and brand book of the company.
The product’s card has become as informative as possible. For example, to visualize the composition of a mattress, we used a picture of its cut and a layered description of materials.

Site speed

Conversion directly depends on site’s speed. We optimized every element of the site, got rid of outdated solutions.

Mikhail Brychkin, CTO iBRUSH:

“We didn’t use plugins where we could. The JS code in src was split into semantic blocks so that later it could, if desired, be collected into separate files for pages / sections. Places where ajax requests were left with stubs. We took into account the requirements of pagespeed and lighthouse. "

Прочая информация о кейсе

Аналитика, проектирование, дизайн и front-end разработка.
Back-end интеграция реализуется силами клиента.

Мистер Слип – большой интернет-магазин постельных принадлежностей: всё от кроватей до постельного белья. Компания работает на рынке более 13 лет и является официальным дилером многих известных брендов.

Mr. Sleep is a large online store that sells everything from beds to bed linen. The company has been on the market for over 13 years and now it’s an official dealer of many well-known brands.

Текущая доступность работы

https://www.figma.com/file/TSQhZRZqIajZKAwHwQ3fdv/Tagline-Awards-Mr.-Sleep?node-id=2%3A0

Скриншоты