AШАН
Редизайн интернет-магазина продуктов питания
Редизайн интернет-магазина продуктов питания
Редизайн интернет-магазина продуктов питания
Редизайн интернет-магазина продуктов питания
О проекте
Клиент — известная сеть продуктовых гипермаркетов. Мы убрали хаос из дизайн-проекта и полностью пересобрали цветовую палитру и компоненты. Никто не запутается: какой отступ или цвет использовать — все правила уже внутри дизайн системы, а использование переменных позволит исключить значимую часть ручных настроек.
С чего начали
Проанализировали основных конкурентов в доставке продуктов (Яндекс.Еда, Лавка, Лента, Магнит, 5ка, Самокат). Зафиксировали недостатки существующей веб и мобильной версии.
Составили гипотезы
По списку проблем и решений, которые вызывают вопросы составили список гипотез, которые с большой вероятностью упростят заказ и, как следствие, увеличат лояльность и конверсию в покупку.
Дизайн-концепт
Основная идея дизайн-концепции: ничего лишнего, всё нужное — рядом. Корзина должна быть под рукой, будто вы идёте по офлайн-магазину. Навигация по ассортименту должна быть логичной и интуитивной.
Профиль и Мои заказы
Добавили напоминания в разделы «Мои заказы» и на страницу успешной оплаты. Упростили навигацию, добавили быстрый переход к заказу со страницы успешной оплаты.
Корзина товаров
Покупатель может выбрать какие товары купить сейчас, а какие оставить в корзине для следующей покупки.
Адаптивность интерфейса
Сделали макеты для 3-х разрешений экранов. Мобильная версия имеет тот же функционал, включая дозаказ товаров.
Дозаказ продуктов
Если что-то забыли — просто добавляем недостающие товары в корзину и нажимаем «Дополнить этот заказ». Придумали как внедрить дозаказ без больших доработок, при этом не ломая привычный путь пользователя.
Бизнес-логика
Сообщаем, что нельзя добавить товары, которые уже есть в заказе. Если в корзине есть товары 18+, то сообщим, что их добавить нельзя.
Дизайн-проект
Одинаковые точки контраста к белому / чёрному для каждого набора цветов позволяют применять цвета для определения контекста (деструктивный, информационный и пр.) без нарушения минимального контраста.
Новая типографика
Оставили брендовые заголовки, но дополнили их более подходящим семейством для контента и UI элементов. В пару выбрали Nunito Sans. От брендового шрифта отличается мало, но более широкий набор начертаний позволяет настроить мелкие тексты для удобного чтения / сканирования взглядом.
Системный подход в дизайне
Макеты собраны на autolayout. Добавлены переменные размерностей и цветов.
Главная страница
На главной не осталось ничего лишнего. Нет необходимости в дополнительных режимах и фильтрации каталога. Блок дозаказа отображается только если у покупателя есть текущие заказы в статусе «Ожидает сборки».
О проекте
Клиент — известная сеть продуктовых гипермаркетов. Мы убрали хаос из дизайн-проекта и полностью пересобрали цветовую палитру и компоненты. Никто не запутается: какой отступ или цвет использовать — все правила уже внутри дизайн системы, а использование переменных позволит исключить значимую часть ручных настроек.
С чего начали
Проанализировали основных конкурентов в доставке продуктов (Яндекс.Еда, Лавка, Лента, Магнит, 5ка, Самокат). Зафиксировали недостатки существующей веб и мобильной версии.
Составили гипотезы
По списку проблем и решений, которые вызывают вопросы составили список гипотез, которые с большой вероятностью упростят заказ и, как следствие, увеличат лояльность и конверсию в покупку.
Дизайн-концепт
Основная идея дизайн-концепции: ничего лишнего, всё нужное — рядом. Корзина должна быть под рукой, будто вы идёте по офлайн-магазину. Навигация по ассортименту должна быть логичной и интуитивной.
Профиль и Мои заказы
Добавили напоминания в разделы «Мои заказы» и на страницу успешной оплаты. Упростили навигацию, добавили быстрый переход к заказу со страницы успешной оплаты.
Корзина товаров
Покупатель может выбрать какие товары купить сейчас, а какие оставить в корзине для следующей покупки.
Адаптивность интерфейса
Сделали макеты для 3-х разрешений экранов. Мобильная версия имеет тот же функционал, включая дозаказ товаров.
Дозаказ продуктов
Если что-то забыли — просто добавляем недостающие товары в корзину и нажимаем «Дополнить этот заказ». Придумали как внедрить дозаказ без больших доработок, при этом не ломая привычный путь пользователя.
Бизнес-логика
Сообщаем, что нельзя добавить товары, которые уже есть в заказе. Если в корзине есть товары 18+, то сообщим, что их добавить нельзя.
Дизайн-проект
Одинаковые точки контраста к белому / чёрному для каждого набора цветов позволяют применять цвета для определения контекста (деструктивный, информационный и пр.) без нарушения минимального контраста.
Новая типографика
Оставили брендовые заголовки, но дополнили их более подходящим семейством для контента и UI элементов. В пару выбрали Nunito Sans. От брендового шрифта отличается мало, но более широкий набор начертаний позволяет настроить мелкие тексты для удобного чтения / сканирования взглядом.
Системный подход в дизайне
Макеты собраны на autolayout. Добавлены переменные размерностей и цветов.
Главная страница
На главной не осталось ничего лишнего. Нет необходимости в дополнительных режимах и фильтрации каталога. Блок дозаказа отображается только если у покупателя есть текущие заказы в статусе «Ожидает сборки».
О проекте
Клиент — известная сеть продуктовых гипермаркетов. Мы убрали хаос из дизайн-проекта и полностью пересобрали цветовую палитру и компоненты. Никто не запутается: какой отступ или цвет использовать — все правила уже внутри дизайн системы, а использование переменных позволит исключить значимую часть ручных настроек.
С чего начали
Проанализировали основных конкурентов в доставке продуктов (Яндекс.Еда, Лавка, Лента, Магнит, 5ка, Самокат). Зафиксировали недостатки существующей веб и мобильной версии.
Составили гипотезы
По списку проблем и решений, которые вызывают вопросы составили список гипотез, которые с большой вероятностью упростят заказ и, как следствие, увеличат лояльность и конверсию в покупку.
Дизайн-концепт
Основная идея дизайн-концепции: ничего лишнего, всё нужное — рядом. Корзина должна быть под рукой, будто вы идёте по офлайн-магазину. Навигация по ассортименту должна быть логичной и интуитивной.
Профиль и Мои заказы
Добавили напоминания в разделы «Мои заказы» и на страницу успешной оплаты. Упростили навигацию, добавили быстрый переход к заказу со страницы успешной оплаты.
Корзина товаров
Покупатель может выбрать какие товары купить сейчас, а какие оставить в корзине для следующей покупки.
Адаптивность интерфейса
Сделали макеты для 3-х разрешений экранов. Мобильная версия имеет тот же функционал, включая дозаказ товаров.
Дозаказ продуктов
Если что-то забыли — просто добавляем недостающие товары в корзину и нажимаем «Дополнить этот заказ». Придумали как внедрить дозаказ без больших доработок, при этом не ломая привычный путь пользователя.
Бизнес-логика
Сообщаем, что нельзя добавить товары, которые уже есть в заказе. Если в корзине есть товары 18+, то сообщим, что их добавить нельзя.
Дизайн-проект
Одинаковые точки контраста к белому / чёрному для каждого набора цветов позволяют применять цвета для определения контекста (деструктивный, информационный и пр.) без нарушения минимального контраста.
Новая типографика
Оставили брендовые заголовки, но дополнили их более подходящим семейством для контента и UI элементов. В пару выбрали Nunito Sans. От брендового шрифта отличается мало, но более широкий набор начертаний позволяет настроить мелкие тексты для удобного чтения / сканирования взглядом.
Системный подход в дизайне
Макеты собраны на autolayout. Добавлены переменные размерностей и цветов.
Главная страница
На главной не осталось ничего лишнего. Нет необходимости в дополнительных режимах и фильтрации каталога. Блок дозаказа отображается только если у покупателя есть текущие заказы в статусе «Ожидает сборки».
О проекте
Клиент — известная сеть продуктовых гипермаркетов. Мы убрали хаос из дизайн-проекта и полностью пересобрали цветовую палитру и компоненты. Никто не запутается: какой отступ или цвет использовать — все правила уже внутри дизайн системы, а использование переменных позволит исключить значимую часть ручных настроек.
С чего начали
Проанализировали основных конкурентов в доставке продуктов (Яндекс.Еда, Лавка, Лента, Магнит, 5ка, Самокат). Зафиксировали недостатки существующей веб и мобильной версии.
Составили гипотезы
По списку проблем и решений, которые вызывают вопросы составили список гипотез, которые с большой вероятностью упростят заказ и, как следствие, увеличат лояльность и конверсию в покупку.
Дизайн-концепт
Основная идея дизайн-концепции: ничего лишнего, всё нужное — рядом. Корзина должна быть под рукой, будто вы идёте по офлайн-магазину. Навигация по ассортименту должна быть логичной и интуитивной.
Профиль и Мои заказы
Добавили напоминания в разделы «Мои заказы» и на страницу успешной оплаты. Упростили навигацию, добавили быстрый переход к заказу со страницы успешной оплаты.
Корзина товаров
Покупатель может выбрать какие товары купить сейчас, а какие оставить в корзине для следующей покупки.
Адаптивность интерфейса
Сделали макеты для 3-х разрешений экранов. Мобильная версия имеет тот же функционал, включая дозаказ товаров.
Дозаказ продуктов
Если что-то забыли — просто добавляем недостающие товары в корзину и нажимаем «Дополнить этот заказ». Придумали как внедрить дозаказ без больших доработок, при этом не ломая привычный путь пользователя.
Бизнес-логика
Сообщаем, что нельзя добавить товары, которые уже есть в заказе. Если в корзине есть товары 18+, то сообщим, что их добавить нельзя.
Дизайн-проект
Одинаковые точки контраста к белому / чёрному для каждого набора цветов позволяют применять цвета для определения контекста (деструктивный, информационный и пр.) без нарушения минимального контраста.
Новая типографика
Оставили брендовые заголовки, но дополнили их более подходящим семейством для контента и UI элементов. В пару выбрали Nunito Sans. От брендового шрифта отличается мало, но более широкий набор начертаний позволяет настроить мелкие тексты для удобного чтения / сканирования взглядом.
Системный подход в дизайне
Макеты собраны на autolayout. Добавлены переменные размерностей и цветов.
Главная страница
На главной не осталось ничего лишнего. Нет необходимости в дополнительных режимах и фильтрации каталога. Блок дозаказа отображается только если у покупателя есть текущие заказы в статусе «Ожидает сборки».
