AШАН

AШАН: Интернет-магазин продуктов питания

AШАН: Интернет-магазин продуктов питания

AШАН: Интернет-магазин продуктов питания

AШАН: Интернет-магазин продуктов питания

  • Дизайн-концепция

  • UI-kit + состояния

  • Новая типографика

  • Палитры цветов

  • Макеты в 3 разрешениях

  • Дизайн-концепция

  • UI-kit + состояния

  • Новая типографика

  • Палитры цветов

  • Макеты в 3 разрешениях

  • Дизайн-концепция

  • UI-kit + состояния

  • Новая типографика

  • Палитры цветов

  • Макеты в 3 разрешениях

  • Дизайн-концепция

  • UI-kit + состояния

  • Новая типографика

  • Палитры цветов

  • Макеты в 3 разрешениях

Аудит Usability

Проанализировали основных конкурентов в доставке продуктов (Яндекс.Еда, Лавка, Лента, Магнит, 5ка, Самокат). Зафиксировали недостатки существующей веб и мобильной версии.


Презентация гипотез

Составили список проблем и решений, которые вызывают вопросы. Далее составили список гипотез, которые с большой вероятностью упростят заказ и, как следствие, увеличат лояльность и конверсию в покупку.


Дизайн-концепт

Основная идея дизайн-концепции: ничего лишнего, всё нужное — рядом. Корзина должна быть под рукой, будто вы идёте по офлайн-магазину. Навигация по ассортименту должна быть логичной и интуитивной.

Дизайн-концепт: Дизайн-концепт: Проектирование интерфейса интернет-магазина продуктов питания


Профиль и Мои заказы

Добавили напоминания в разделы «Мои заказы» и на страницу успешной оплаты. Упростили навигацию, добавили быстрый переход к заказу со страницы успешной оплаты.

Профиль и Мои заказы: Проектирование интерфейса интернет-магазина продуктов питания


Корзина товаров

Покупатель может выбрать какие товары купить сейчас, а какие оставить в корзине для следующей покупки.

Корзина товаров: Проектирование интерфейса интернет-магазина продуктов питания


Адаптивность интерфейса

Сделали макеты для 3-х разрешений экранов. Мобильная версия имеет тот же функционал, включая дозаказ товаров.

Адаптивность: Проектирование интерфейса интернет-магазина продуктов питания


Дозаказ продуктов

Если что-то забыли — просто добавляем недостающие товары в корзину и нажимаем «Дополнить этот заказ». Придумали как внедрить дозаказ без больших доработок, при этом не ломая привычный путь пользователя.

Дозаказ продуктов: Проектирование интерфейса интернет-магазина продуктов питания


Бизнес-логика

Сообщаем, что нельзя добавить товары, которые уже есть в заказе. Если в корзине есть товары 18+, то сообщим, что их добавить нельзя.

Бизнес-логика: Проектирование интерфейса интернет-магазина продуктов питания


Дизайн-проект

Одинаковые точки контраста к белому / чёрному для каждого набора цветов позволяют применять цвета для определения контекста (деструктивный, информационный и пр.) без нарушения минимального контраста.

Дизайн-проект: Проектирование интерфейса интернет-магазина продуктов питания


Новая типографика

Оставили брендовые заголовки, но дополнили их более подходящим семейством для контента и UI элементов. В пару выбрали Nunito Sans. От брендового шрифта отличается мало, но более широкий набор начертаний позволяет настроить мелкие тексты для удобного чтения / сканирования взглядом.

Новая типографика: Проектирование интерфейса интернет-магазина продуктов питания


Системный подход в дизайне

Макеты собраны на autolayout. Добавлены переменные размерностей и цветов.

Системный подход в дизайне: Проектирование интерфейса интернет-магазина продуктов питания


Главная страница

На главной не осталось ничего лишнего. Нет необходимости в дополнительных режимах и фильтрации каталога. Блок дозаказа отображается только если у покупателя есть текущие заказы в статусе «Ожидает сборки».

Главная страница: Проектирование интерфейса интернет-магазина продуктов питания

Аудит Usability

Проанализировали основных конкурентов в доставке продуктов (Яндекс.Еда, Лавка, Лента, Магнит, 5ка, Самокат). Зафиксировали недостатки существующей веб и мобильной версии.


Презентация гипотез

Составили список проблем и решений, которые вызывают вопросы. Далее составили список гипотез, которые с большой вероятностью упростят заказ и, как следствие, увеличат лояльность и конверсию в покупку.


Дизайн-концепт

Основная идея дизайн-концепции: ничего лишнего, всё нужное — рядом. Корзина должна быть под рукой, будто вы идёте по офлайн-магазину. Навигация по ассортименту должна быть логичной и интуитивной.

Дизайн-концепт: Дизайн-концепт: Проектирование интерфейса интернет-магазина продуктов питания


Профиль и Мои заказы

Добавили напоминания в разделы «Мои заказы» и на страницу успешной оплаты. Упростили навигацию, добавили быстрый переход к заказу со страницы успешной оплаты.

Профиль и Мои заказы: Проектирование интерфейса интернет-магазина продуктов питания


Корзина товаров

Покупатель может выбрать какие товары купить сейчас, а какие оставить в корзине для следующей покупки.

Корзина товаров: Проектирование интерфейса интернет-магазина продуктов питания


Адаптивность интерфейса

Сделали макеты для 3-х разрешений экранов. Мобильная версия имеет тот же функционал, включая дозаказ товаров.

Адаптивность: Проектирование интерфейса интернет-магазина продуктов питания


Дозаказ продуктов

Если что-то забыли — просто добавляем недостающие товары в корзину и нажимаем «Дополнить этот заказ». Придумали как внедрить дозаказ без больших доработок, при этом не ломая привычный путь пользователя.

Дозаказ продуктов: Проектирование интерфейса интернет-магазина продуктов питания


Бизнес-логика

Сообщаем, что нельзя добавить товары, которые уже есть в заказе. Если в корзине есть товары 18+, то сообщим, что их добавить нельзя.

Бизнес-логика: Проектирование интерфейса интернет-магазина продуктов питания


Дизайн-проект

Одинаковые точки контраста к белому / чёрному для каждого набора цветов позволяют применять цвета для определения контекста (деструктивный, информационный и пр.) без нарушения минимального контраста.

Дизайн-проект: Проектирование интерфейса интернет-магазина продуктов питания


Новая типографика

Оставили брендовые заголовки, но дополнили их более подходящим семейством для контента и UI элементов. В пару выбрали Nunito Sans. От брендового шрифта отличается мало, но более широкий набор начертаний позволяет настроить мелкие тексты для удобного чтения / сканирования взглядом.

Новая типографика: Проектирование интерфейса интернет-магазина продуктов питания


Системный подход в дизайне

Макеты собраны на autolayout. Добавлены переменные размерностей и цветов.

Системный подход в дизайне: Проектирование интерфейса интернет-магазина продуктов питания


Главная страница

На главной не осталось ничего лишнего. Нет необходимости в дополнительных режимах и фильтрации каталога. Блок дозаказа отображается только если у покупателя есть текущие заказы в статусе «Ожидает сборки».

Главная страница: Проектирование интерфейса интернет-магазина продуктов питания

Аудит Usability

Проанализировали основных конкурентов в доставке продуктов (Яндекс.Еда, Лавка, Лента, Магнит, 5ка, Самокат). Зафиксировали недостатки существующей веб и мобильной версии.


Презентация гипотез

Составили список проблем и решений, которые вызывают вопросы. Далее составили список гипотез, которые с большой вероятностью упростят заказ и, как следствие, увеличат лояльность и конверсию в покупку.


Дизайн-концепт

Основная идея дизайн-концепции: ничего лишнего, всё нужное — рядом. Корзина должна быть под рукой, будто вы идёте по офлайн-магазину. Навигация по ассортименту должна быть логичной и интуитивной.

Дизайн-концепт: Дизайн-концепт: Проектирование интерфейса интернет-магазина продуктов питания


Профиль и Мои заказы

Добавили напоминания в разделы «Мои заказы» и на страницу успешной оплаты. Упростили навигацию, добавили быстрый переход к заказу со страницы успешной оплаты.

Профиль и Мои заказы: Проектирование интерфейса интернет-магазина продуктов питания


Корзина товаров

Покупатель может выбрать какие товары купить сейчас, а какие оставить в корзине для следующей покупки.

Корзина товаров: Проектирование интерфейса интернет-магазина продуктов питания


Адаптивность интерфейса

Сделали макеты для 3-х разрешений экранов. Мобильная версия имеет тот же функционал, включая дозаказ товаров.

Адаптивность: Проектирование интерфейса интернет-магазина продуктов питания


Дозаказ продуктов

Если что-то забыли — просто добавляем недостающие товары в корзину и нажимаем «Дополнить этот заказ». Придумали как внедрить дозаказ без больших доработок, при этом не ломая привычный путь пользователя.

Дозаказ продуктов: Проектирование интерфейса интернет-магазина продуктов питания


Бизнес-логика

Сообщаем, что нельзя добавить товары, которые уже есть в заказе. Если в корзине есть товары 18+, то сообщим, что их добавить нельзя.

Бизнес-логика: Проектирование интерфейса интернет-магазина продуктов питания


Дизайн-проект

Одинаковые точки контраста к белому / чёрному для каждого набора цветов позволяют применять цвета для определения контекста (деструктивный, информационный и пр.) без нарушения минимального контраста.

Дизайн-проект: Проектирование интерфейса интернет-магазина продуктов питания


Новая типографика

Оставили брендовые заголовки, но дополнили их более подходящим семейством для контента и UI элементов. В пару выбрали Nunito Sans. От брендового шрифта отличается мало, но более широкий набор начертаний позволяет настроить мелкие тексты для удобного чтения / сканирования взглядом.

Новая типографика: Проектирование интерфейса интернет-магазина продуктов питания


Системный подход в дизайне

Макеты собраны на autolayout. Добавлены переменные размерностей и цветов.

Системный подход в дизайне: Проектирование интерфейса интернет-магазина продуктов питания


Главная страница

На главной не осталось ничего лишнего. Нет необходимости в дополнительных режимах и фильтрации каталога. Блок дозаказа отображается только если у покупателя есть текущие заказы в статусе «Ожидает сборки».

Главная страница: Проектирование интерфейса интернет-магазина продуктов питания

Аудит Usability

Проанализировали основных конкурентов в доставке продуктов (Яндекс.Еда, Лавка, Лента, Магнит, 5ка, Самокат). Зафиксировали недостатки существующей веб и мобильной версии.


Презентация гипотез

Составили список проблем и решений, которые вызывают вопросы. Далее составили список гипотез, которые с большой вероятностью упростят заказ и, как следствие, увеличат лояльность и конверсию в покупку.


Дизайн-концепт

Основная идея дизайн-концепции: ничего лишнего, всё нужное — рядом. Корзина должна быть под рукой, будто вы идёте по офлайн-магазину. Навигация по ассортименту должна быть логичной и интуитивной.

Дизайн-концепт: Дизайн-концепт: Проектирование интерфейса интернет-магазина продуктов питания


Профиль и Мои заказы

Добавили напоминания в разделы «Мои заказы» и на страницу успешной оплаты. Упростили навигацию, добавили быстрый переход к заказу со страницы успешной оплаты.

Профиль и Мои заказы: Проектирование интерфейса интернет-магазина продуктов питания


Корзина товаров

Покупатель может выбрать какие товары купить сейчас, а какие оставить в корзине для следующей покупки.

Корзина товаров: Проектирование интерфейса интернет-магазина продуктов питания


Адаптивность интерфейса

Сделали макеты для 3-х разрешений экранов. Мобильная версия имеет тот же функционал, включая дозаказ товаров.

Адаптивность: Проектирование интерфейса интернет-магазина продуктов питания


Дозаказ продуктов

Если что-то забыли — просто добавляем недостающие товары в корзину и нажимаем «Дополнить этот заказ». Придумали как внедрить дозаказ без больших доработок, при этом не ломая привычный путь пользователя.

Дозаказ продуктов: Проектирование интерфейса интернет-магазина продуктов питания


Бизнес-логика

Сообщаем, что нельзя добавить товары, которые уже есть в заказе. Если в корзине есть товары 18+, то сообщим, что их добавить нельзя.

Бизнес-логика: Проектирование интерфейса интернет-магазина продуктов питания


Дизайн-проект

Одинаковые точки контраста к белому / чёрному для каждого набора цветов позволяют применять цвета для определения контекста (деструктивный, информационный и пр.) без нарушения минимального контраста.

Дизайн-проект: Проектирование интерфейса интернет-магазина продуктов питания


Новая типографика

Оставили брендовые заголовки, но дополнили их более подходящим семейством для контента и UI элементов. В пару выбрали Nunito Sans. От брендового шрифта отличается мало, но более широкий набор начертаний позволяет настроить мелкие тексты для удобного чтения / сканирования взглядом.

Новая типографика: Проектирование интерфейса интернет-магазина продуктов питания


Системный подход в дизайне

Макеты собраны на autolayout. Добавлены переменные размерностей и цветов.

Системный подход в дизайне: Проектирование интерфейса интернет-магазина продуктов питания


Главная страница

На главной не осталось ничего лишнего. Нет необходимости в дополнительных режимах и фильтрации каталога. Блок дозаказа отображается только если у покупателя есть текущие заказы в статусе «Ожидает сборки».

Главная страница: Проектирование интерфейса интернет-магазина продуктов питания

В результате:

Убрали хаос из проекта и полностью пересобрали цветовую палитру и компоненты. Никто не запутается: какой отступ или цвет использовать — все правила уже внутри дизайн системы, а использование переменных позволит исключить значимую часть ручных настроек.

Ещё кейсы:

Частые вопросы

Нужен дизайн. Что от меня требуется?

Отправьте имеющиеся требования на почту или в телеграм. Мы изучим информацию и сообщим, сможем ли помочь.

Нужен дизайн. Что от меня требуется?

Отправьте имеющиеся требования на почту или в телеграм. Мы изучим информацию и сообщим, сможем ли помочь.

Нужен дизайн. Что от меня требуется?

Отправьте имеющиеся требования на почту или в телеграм. Мы изучим информацию и сообщим, сможем ли помочь.

Сколько это стоит?

Ставка студии 2500 руб / час. Стоимость команды 600 тыс. руб. в месяц. Срок зависит от объёма проекта. В стоимость входит прототип, UI-kit, цветовые палитры, типографика, макеты в Figma для 3-5 разрешений.

Сколько это стоит?

Ставка студии 2500 руб / час. Стоимость команды 600 тыс. руб. в месяц. Срок зависит от объёма проекта. В стоимость входит прототип, UI-kit, цветовые палитры, типографика, макеты в Figma для 3-5 разрешений.

Сколько это стоит?

Ставка студии 2500 руб / час. Стоимость команды 600 тыс. руб. в месяц. Срок зависит от объёма проекта. В стоимость входит прототип, UI-kit, цветовые палитры, типографика, макеты в Figma для 3-5 разрешений.

Сколько времени нужно на дизайн?

Для больших проектов обычно требуется 2 месяца. По небольшим задачам — оценка от нескольких дней.

Сколько времени нужно на дизайн?

Для больших проектов обычно требуется 2 месяца. По небольшим задачам — оценка от нескольких дней.

Сколько времени нужно на дизайн?

Для больших проектов обычно требуется 2 месяца. По небольшим задачам — оценка от нескольких дней.

С чего начать?

Составьте список ролей пользователей, список нужного функционала и список разделов сайта и личного кабинета. Этого достаточно для оценки.

С чего начать?

Составьте список ролей пользователей, список нужного функционала и список разделов сайта и личного кабинета. Этого достаточно для оценки.

С чего начать?

Составьте список ролей пользователей, список нужного функционала и список разделов сайта и личного кабинета. Этого достаточно для оценки.

Логотип Wadline

В топ-10 дизайн-студий по мнению Wadline

Логотип Ratingruneta

В топ-10 разработчиков корп. решений по мнению Ratingruneta

Логотип Ratingruneta

№2 среди агенств по поддержке и развитию по мнению Ratingruneta

Аккредитованная IT-компания АО-20220418-4218209153-3

Открыты интересным проектам

Опишите задачу в свободной форме, чтобы оценить трудозатраты. Пишите, будем рады оказаться полезными.

Открыты интересным проектам

Опишите задачу в свободной форме, чтобы оценить трудозатраты. Пишите, будем рады оказаться полезными.

Открыты интересным проектам

Опишите задачу в свободной форме, чтобы оценить трудозатраты. Пишите, будем рады оказаться полезными.

SPAR
Biocad
Senior Group
Moscow Digital School
TRNR

и ещё 25+ компаний заказывали у нас дизайн интерфейсов

и ещё 25+ компаний заказывали у нас дизайн интерфейсов