Дизайн
iOS-приложения 12storeez
Разработали дизайн мобильного приложения и дизайн-систему для остальных цифровых продуктов бренда
![](https://cdn.prod.website-files.com/606edf3d58b0d336d03f743d/60b7194508267b1137124b58_image%20952%402x.jpg)
![](https://cdn.prod.website-files.com/606edf3d58b0d336d03f743d/62a9b793ae1933486d7a5178_image%20952%20(1).jpg)
12storeez — узнаваемая российская марка мужской и женской одежды. У бренда 29 магазинов в 11 городах. Основная идея — быстро реагировать на спрос, поэтому новые коллекции выходят каждый месяц
ПРОБЛЕМа
Сайт устарел, а лояльным покупателям нужна удобная площадка для онлайн-покупок
Покупатель
Покупаю у вас несколько раз
в неделю только с айфона.
Очень жду мобильное приложение!
в неделю только с айфона.
Очень жду мобильное приложение!
![](https://cdn.prod.website-files.com/606edf3d58b0d336d03f743d/60a772ba952c836fca45ab87_image%20844-2.png)
Основной канал продаж — сайт, спроектированный под десятки заказов в день. Сегодня их может быть несколько сотен и даже тысяч. У марки много лояльных клиентов, которые заходят на сайт ежедневно или несколько раз в неделю.
CEO компании Иван Хохлов обратился в студию с просьбой разработать дизайн мобильного приложения. У нас уже был успешный опыт совместной работы — мы делали экспертный UX-аудит сайта компании.
CEO компании Иван Хохлов обратился в студию с просьбой разработать дизайн мобильного приложения. У нас уже был успешный опыт совместной работы — мы делали экспертный UX-аудит сайта компании.
Задачи
- Сделать интерфейс интуитивно понятным
- Ускорить дизайн новых функций
- Ускорить дизайн новых функций
Разумно сначала найти оптимальное решение для мобайла, а потом адаптировать его к большому экрану
ПРОЕКТИРОВАНИЕ И ДИЗАЙН
Прототипы
По функционалу для приложения ориентировались на текущий сайт. При проектировании было важно учесть привычные покупателям особенности навигации и взаимодействия на платформе iOS
![](https://cdn.prod.website-files.com/606edf3d58b0d336d03f743d/60b62e3e3ca4e13f2feaad37_Main%402x.png)
![](https://cdn.prod.website-files.com/606edf3d58b0d336d03f743d/60b62e3dbb120d2b8b3e791d_Katalog%402x.png)
![](https://cdn.prod.website-files.com/606edf3d58b0d336d03f743d/60b62e3d78e8771a1131e2e5_Product%20card%402x.png)
![](https://cdn.prod.website-files.com/606edf3d58b0d336d03f743d/60b62e3dd3a4662033ed8384_Main%402x%20(1).png)
![](https://cdn.prod.website-files.com/606edf3d58b0d336d03f743d/60b62e3de8e705b2b215441b_Bag%402x.png)
![](https://cdn.prod.website-files.com/606edf3d58b0d336d03f743d/60b62e3d270971f0d04e0e09_Check%20out%402x.png)
Главная страница
Спроектировали главную страницу с рекламой новых коллекций, блоком сториз, редакторской подборкой товаров и переходом в соцсети бренда
![](https://cdn.prod.website-files.com/606edf3d58b0d336d03f743d/60b63325660ecf3d94785d20_12-ci%402x-2.png)
Каталог
Чтобы акцентировать фотографии в каталоге, сделали их без отступов. Сортировка и фильтры видны, но не бросаются в глаза
![](https://cdn.prod.website-files.com/606edf3d58b0d336d03f743d/60b635f5a2e1329be7c95009_12-sc%402x.png)
![](https://cdn.prod.website-files.com/606edf3d58b0d336d03f743d/60b635f4ca0c7b3c41c158b9_12-sf%402x.png)
Фильтры
Разработали фильтры, которые легко масштабировать под разное количество параметров
Карточка товара
![](https://cdn.prod.website-files.com/606edf3d58b0d336d03f743d/60b71ceed91f2f7262a3512c_ProductCard%402x.png)
Название, цвета, цену вещи и теги вынесли на первый экран
![](https://cdn.prod.website-files.com/606edf3d58b0d336d03f743d/60b732a22ca92041957e4eff_line-left%402x.png)
Добавили историю просмотров
![](https://cdn.prod.website-files.com/606edf3d58b0d336d03f743d/60b732a22ca92041957e4eff_line-left%402x.png)
Добавили блоки, которые увеличивают глубину просмотра
![](https://cdn.prod.website-files.com/606edf3d58b0d336d03f743d/60b732a22ca92041957e4eff_line-left%402x.png)
Информацию
в карточке вещи разделили на смысловые блоки
в карточке вещи разделили на смысловые блоки
![](https://cdn.prod.website-files.com/606edf3d58b0d336d03f743d/60b732a22ca92041957e4eff_line-left%402x.png)
У 12storeez очень классные фото, поэтому мы сделали их большими
![](https://cdn.prod.website-files.com/606edf3d58b0d336d03f743d/60b732a2ab288f3b5de25619_line-right%402x.png)
Зафиксировали поле «Размер» и кнопку «Добавить в корзину», чтобы они не уползали
при скролле
при скролле
![](https://cdn.prod.website-files.com/606edf3d58b0d336d03f743d/60b732a2ab288f3b5de25619_line-right%402x.png)
Спрятали разделы с большим количеством информации на внутренние экраны
![](https://cdn.prod.website-files.com/606edf3d58b0d336d03f743d/60b732a2ab288f3b5de25619_line-right%402x.png)
Добавили раздел с вещами, которые дополняют образ модели на фото
![](https://cdn.prod.website-files.com/606edf3d58b0d336d03f743d/60b732a2ab288f3b5de25619_line-right%402x.png)
Оформление заказа и корзина
На этапе чекаута требовалось упорядочить массу информации: ФИО получателя, адрес доставки, платежные данные. Сделали пошаговое оформление заказа — простое и функциональное
![](https://cdn.prod.website-files.com/606edf3d58b0d336d03f743d/60b721e0428fbb0a0bbea5b0_6-1.png)
![](https://cdn.prod.website-files.com/606edf3d58b0d336d03f743d/60b721df14c6d04e2adfa6f6_6-2.png)
![](https://cdn.prod.website-files.com/606edf3d58b0d336d03f743d/60b721e064e9e7cb0d03f1d3_6-3.png)
![](https://cdn.prod.website-files.com/606edf3d58b0d336d03f743d/60b721df0ffd183b8cd50a08_6-4.png)
![](https://cdn.prod.website-files.com/606edf3d58b0d336d03f743d/60b721e0e88eff859b66c39f_6-5.png)
![](https://cdn.prod.website-files.com/606edf3d58b0d336d03f743d/60b721df7f9a8dc873b59d86_6-6.png)
![](https://cdn.prod.website-files.com/606edf3d58b0d336d03f743d/60b722796768ef9310310d31_image%20951%402x.jpg)
Результаты
45%
онлайн-заказов делается через мобильное приложение
2x
выше конверсия
в покупку по сравнению с веб-сайтом
в покупку по сравнению с веб-сайтом
ОТзыв клиента
Ребята круты тем, что докапываются до каждой палитры, до каждого пикселя. Важно, что они с нами спорят, а не просто слушают. Умеют хорошо аргументировать, потому что они — профессионалы
Команда
Арт-директор
Евгений Лучинин
Дизайнеры
Лия Дюльдина
Ведущий дизайнер
Александр Карпов
UX-дизайнер
Антон Черногоров