-
обновили визуальный стильразработали новую дизайн-концепцию и сделали оформление эстетичным
-
упростили интерфейс сайтасделали поиск и оформления заказа проще, чтобы повысить конверсию в покупку
Итоговый результат нас устраивает на 100%. Это наш сервис мечты, и он стал возможен благодаря вашей работе.
За прототип взяли функционирующий сайт продукта и работали небольшими итерациями. Изменяли визуал, пользовательский опыт и параллельно внедряли новые идеи в продукт
![](https://antro.cx/wp-content/uploads/2023/06/204cb11c-c7d3-494d-83e8-1822169296d3-1.jpg)
о проекте
Synthesis — магазин по продаже технологичной одежды, практичной и минималистичной.
Магазин позиционирует себя как мужской концепт-стор нового поколения, сделанный для людей. Все ресурсы команда Synthesis направляет на качество ассортимента, клиентский сервис и реализацию технологической платформы.
запрос
Основатель чувствовал, что с сайтом что-то не так, но не понимал, что именно. Он обратился за редизайном после того, как прочитал наш цикл статей о проектировании интернет-магазинов.
цели
- обновить визуальный вид интернет-магазина
- улучшить пользовательский опыт с помощью лучших практик и исследований рынка
- внедрить новые идеи в интерфейс
![](https://antro.cx/wp-content/uploads/2023/06/e28910e2-b546-4768-ba31-7c719a62fa61-1.jpg)
- собрали текстовый прототип для каждой страницы
- обсудили референсы и стиль для новой концепции
- обсудили наброски для новых страниц сайта
процесс
интервью
У фаундера уже было представление о том, как визуально должен выглядеть сайт и из чего должны состоять страницы.
Во время интервью мы составили текстовые прототипы страниц. Обсуждали и фиксировали:
- что хочется изменить в текущих версиях страниц
- какие новые блоки мы добавим, и как примерно их представляем себе
- и какие есть особенности у блоков.
![](https://antro.cx/wp-content/uploads/2023/06/09027f6c-a6d8-43a6-8ede-784d0c3bef76-1.jpg)
Обсудили референсы и визуальный стиль для новой дизайн-концепции. Также обсудили наброски для новых страниц сайта
![](https://antro.cx/wp-content/uploads/2023/06/abefcf3f-47fc-493c-a0c9-9e9be80418e5-1.jpg)
дизайн-концепция
При разработке дизайн-концепции мы вдохновлялись сайтами технологичных продуктов, дизайнеров одежды и минималистичными концептами интерфейсов.
![](https://antro.cx/wp-content/uploads/2023/06/20a90aac-3fbc-4f8a-925f-083d7876a722-1.jpg)
Дизайн-концепция получила блочную структуру и схожесть с интерфейсом операционной системы
![](https://antro.cx/wp-content/uploads/2023/06/cb9c34b2-15ba-4037-9012-1890943f6679-1.jpg)
Помимо визуальных изменений проработали структуру главной страницы:
- отобразили категории товаров магазина с крупными фотографиями, по которым можно определить качество изделий
- показали пример товара из каждой категории, чтобы сформировать ожидание для пользователей по стоимости изделий
![](https://antro.cx/wp-content/uploads/2023/06/477e4af5-7b27-4eb4-aca0-64e462c7b5e0-1.jpg)
- спроектировали интерактивный блок личного кабинета прямо на главной странице
![](https://antro.cx/wp-content/uploads/2023/06/296c2c53-bc7a-4bac-b0eb-9e302b14ed15-1.jpg)
- рассказали об условиях доставки и оплаты
![](https://antro.cx/wp-content/uploads/2023/06/0fe0ba5d-5d04-4615-980b-56cc8657e8ec-1.jpg)
- и показали программу лояльности
![](https://antro.cx/wp-content/uploads/2023/06/d57528b1-93c2-45d5-aca5-ce391884ddfe-1.jpg)
страница товара
- внедрили наглядный выбор цвета изделия
- показали количество наличия каждого размера
- спроектировали 3D-просмотр одежды на модели
![](https://antro.cx/wp-content/uploads/2023/06/75dec99e-b39b-467d-b6ce-f3ed6d02b5ed-1.jpg)
Отдельно о подборе
После интервью с клиентом нам было известно, что частый запрос от пользователей — непонятно, какой размер мне подойдет? А будет хорошо сидеть? Или как мешок?
![](https://antro.cx/wp-content/uploads/2023/06/515c616f-14b6-46a0-b1bf-6564e290f2a9-1.jpg)
Стандартные маркировки размера S, M и L на эти вопросы не давали ответов. Поэтому совместно с клиентом мы решили разработать систему подбора размера по индивидуальным параметрам — росту и весу человека.
также проработали:
- возможность добавить оба размера в заказ, если рекомендация по подбору не однозначная. При этом после бесплатной примерки можно отказаться от неподходящего размера
- рекомендация размера. После покупки первого изделия — сайт запомнит ваши параметры и будет рекомендовать вам подходящий размер одежды
![](https://antro.cx/wp-content/uploads/2023/06/2d81f213-42c7-4452-bb27-9c9203e6ae60-1.jpg)
визуальный дизайн
![](https://antro.cx/wp-content/uploads/2023/06/c91f6bd2-633d-4c63-a501-95c451ced859-1.jpg)
- привели типографику в порядок — снабдили блоки заголовками, добавили выделения для ключевых моментов в тексте, а перечислениям добавили буллеты
- показали качественные и крупные фотографии изделий
- сформировали ожидание по срокам и стоимости доставки в город пользователя
- рассказали о бесплатной примерке
корзина и оформление заказа
- спроектировали корзину в формате «шторки»
![](https://antro.cx/wp-content/uploads/2023/06/3e4e529b-cfaf-4bf8-967c-8f0b4e581cdf-1.jpg)
![](https://antro.cx/wp-content/uploads/2023/06/23f8df5d-f30b-48b8-9afc-1fb99b496c63-1.jpg)
внедрили возможность добавления размера для примерки прямо в корзине и объяснили человеческим языком пользователю — «Закажите два размера и не оплачивайте товар, если он не подошел вам»
- на странице оформления заказа упростили весь интерфейс и оставили самое важное для этого этапа
![](https://antro.cx/wp-content/uploads/2023/06/833b143f-6a45-4596-be4a-1c2ca7c02284-1.jpg)
- оформление разбили на 3 блока. Каждый блок появляется последовательно, чтобы не повышать когнитивную нагрузку пользователя
![](https://antro.cx/wp-content/uploads/2023/06/9b8c5f89-5246-492d-b7fc-69da155f2b66-1.jpg)
итоги
Мы разработали новую дизайн-концепцию и обновили визуальный стиль. Улучшили пользовательский опыт:
- пересобрали главную страницу и отразили на ней все ключевые блоки для интернет магазина
- упростили оформление заказа товаров
- спроектировали страницу товара по лучшим практикам ecommerce
- внедрили большую функциональность с подбором и рекомендацией размера одежды
отзыв клиента
Нам оставили очень теплый отзыв и пообещали советовать наше агентство!
Итоговый результат нас устраивает на 100%. Это наш сервис мечты, и он стал возможен благодаря вашей работе. Если сравнивать с нашими ожиданиями, то вы их превзошли по всем пунктам, мы думали, это такой сервис с привлечением внешней студии задизайнить невозможно!
Мы вас точно будем советовать при любой удобной ситуации и надеемся с вами еще работать в будущем над развитием как Синтеза, так и над другими нашими проектами, когда такие появятся!
кажется, вам будет интересно
![telegram](https://antro.cx/wp-content/themes/antro/tmp/telegram/desktop.png)
![telegram](https://antro.cx/wp-content/themes/antro/tmp/telegram/mobile.png)
![Email](https://antro.cx/wp-content/themes/antro/tmp/consultation/email.png)
![Phone](https://antro.cx/wp-content/themes/antro/tmp/3d/cases/backpack.png)