Дизайн мобильного приложения · 2023

Гараж

Маркетплейс автомобильной акустики, усилителей и аксессуаров. Сделали полный редизайн стандартного мобильного приложения CS-Cart: путь покупателя от главной до пункта выдачи СДЭК, вход, кабинет и пять цветовых схем на выбор.

Клиент: Гараж, маркетплейс автозвука
Задача: Новый дизайн мобильного приложения
Платформа: Мобильное приложение CS-Cart
Макеты: 28 экранов, 5 цветовых схем
Год: 2023

Задача

Магазин работал на стандартном мобильном приложении CS-Cart, и его интерфейс клиента не устраивал. Нужен был новый дизайн по мотивам сайта магазина: привлекательный, но без лишних сложностей.

Сначала мы показали клиенту пять цветовых схем, потом нарисовали главную, каталог, карточку товара и остальные экраны. По этим макетам наши разработчики переделали стандартное приложение CS-Cart.

Путь покупателя

Главная, каталог, карточка товара, корзина и подтверждение заказа. Внизу каждого экрана — меню из четырёх кнопок: главная, каталог, корзина и кабинет.

Оформление заказа

Три шага с вкладками сверху: профиль, доставка и оплата. Пройденный шаг подсвечивается зелёным.

390 × 848 · Шаг 1. Профиль

Шаг 1. Профиль

Имя, фамилия, телефон и почта, отметка для заказа от юридического лица.

Шаг 2. Доставка Гараж — 390 × 848 · Шаг 2. Доставка

Пункт выдачи Гараж — 390 × 848 · Пункт выдачи

Шаг 3. Оплата Гараж — 390 × 848 · Шаг 3. Оплата

Вход и кабинет

Войти можно по почте или через Google и VK. В кабинете — избранное, заказы и настройки профиля.

Цветовые схемы

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

Иконка и UI-кит

Для приложения нарисовали иконку с динамиком и заставку в красном и белом вариантах. Кнопки, переключатели и иконки собрали в начало UI-кита: обычное и нажатое состояние.

1339 × 1119 · Иконка и заставка