X5Tech

Не только UI, но и UX. Как мы делали приложение для закупки впрок красивым и удобным

Раньше мы делили одно приложение «Мой Перекрёсток» вместе с офлайн-сетью «Перекрёсток», но в конце концов нам стало тесно вместе. В начале прошлого года наша команда начала разрабатывать новое приложение для онлайн-гипермаркета. Но внезапно разразившаяся пандемия заставила нас пересмотреть планы и ускориться, чтобы всем клиентам — и постоянным, и новым, которые только начинали осваивать онлайн-покупки, — было просто и удобно делать заказы. Мы разработали новое приложение за 4 месяца, его технический релиз состоялся в мае.

ВПРОК в цифрах:

- ежедневно мы доставляем более 10 000 заказов в 13 регионах;

- к февралю наше приложение скачали более 2 000 000 раз;

- около 55% скачиваний пришлось на версию для Android, остальные — для iOS;

- после запуска доля продаж из приложения выросла до более чем 60%;

- больше трети пользователей используют тёмную тему.

Ниже рассказываем, что мы учли при разработке приложения и чем оно отличается от приложения офлайн-сети.

Особенности приложения онлайн-гипермаркета

Когда в онлайн-гипермаркете представлено более 50 000 разнообразных товарных позиций, пользователю сложно сосредоточиться. Чтобы внимание не размывалось, а концентрировалось на товаре, мы выбрали чистый и лёгкий дизайн и взяли за основу приложения белый цвет.

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

Семён Мацепура

Руководитель мобильной разработки

Так как клиенты онлайн-гипермаркета привыкли закупаться «впрок» (в буквальном смысле), мы добавили возможность купить товары квантами (большими упаковками). Сейчас эта функция есть в самом каталоге для быстрого доступа — можно сразу выбрать упаковку товара (например, 4, 6 или 12 штук).

Мы уделили много внимания фильтрам, чтобы нашим покупателям было удобнее искать определённые товары. На каждый товар может быть по 10-15 разных свойств, поэтому мы предоставили возможность открывать их на отдельном экране.

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

Удобство покупателя

Раньше, когда клиент клал товар в корзину, крутились «лоадеры». Одной из задач было уменьшить их количество. Теперь товары добавляются бесшовно — это позволяет пользователю не ждать лишних пару секунд.

Мы отдельно проработали дизайны приложений: для iOs — согласно Human interface guidelines, для android — на основе Material Design. На прорисовку деталей под каждую платформу ушло больше времени, однако пользователям проще разбираться в приложении, когда они видят в нём отголоски дизайна системы самого телефона.

Мы интегрировали lottie-анимации. Теперь просьба оценить приложение, пустая корзина или сообщение об успешной оплате выглядят более живыми.

В приложении также можно наблюдать за положением курьеров в режиме реального времени. Технологии, которые мы используем, позволяют прогнозировать время их прибытия к клиенту.

И, конечно, мы добавили поддержку тёмной темы. Это не только красиво, но улучшает функциональность приложения. А ещё при использовании тёмной темы глаза устают меньше.

За последнее время мы добавили возможность читать и оставлять отзывы о товарах, сохранять и добавлять часто используемые адреса доставки, возможность самовывоза заказа, а также отслеживание статуса заказа. Мы не прекращаем работу над приложением — в планах тестирование новых функций и улучшение старых. А если у вас есть предложения или комментарии, пишите нам сюда — обязательно ответим.

Семён Мацепура

Руководитель мобильной разработки

{ "author_name": "X5Tech", "author_type": "editor", "tags": ["\u0440\u0438\u0442\u0435\u0439\u043b","\u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0435_\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f","vprok","ux","ui","e_commerce"], "comments": 1, "likes": 2, "favorites": 7, "is_advertisement": false, "subsite_label": "x5tech", "id": 225333, "is_wide": true, "is_ugc": false, "date": "Thu, 25 Mar 2021 18:34:52 +0300", "is_special": false }
0
1 комментарий
Популярные
По порядку
1

Умоляю, сделайте, чтобы можно было из страницы товара перейти в категорию товара, а в категории перейти в категорию выше. В общем как на десктопном сайте у вас это сделано.

Ответить
Читать все 1 комментарий
19 этикеток вина, которые намного больше, чем просто этикетка
«Оптимальный портфель» – новая стратегия автоследования от «БКС Мир инвестиций»

«БКС Мир инвестиций» запустил новую стратегию «Оптимальный портфель» на площадке Fintarget – маркетплейсе инвестиционных стратегий.

Сервис для друзей: как зарабатывает Fixed.one — центр ремонта техники Apple, который растёт без рекламы Статьи редакции

Компания с оборотом 50 млн рублей и прибылью 4 млн рублей в год ремонтирует устройства от Apple и продаёт подержанную технику «Яндексу», «Арзамасу», Level Travel и другим.

Финт ушами от Тинькофф банка

Короче начали мне названивать операторы, типо возьмите кредитку, бла бла бла, вам предодобрена кредитная карта до 700к. Ну я их шлю, нах мне ваша кредитка, религия не позволяет. И тут один из операторов, с 10го звонка пробивает меня, а повелся я на то что можно с их кредитки без % оплатить другую кредитку. Ну я так подумал в целом 120 дней без %…

Осталось всего 3 дня, чтобы подать заявку в Finlanding
«Модульбанк» запустил сервис для анализа продаж на маркетплейсах (даже у конкурентов)

Он доступен бесплатно всем клиентам банка.

Brooke Cagle
Электромобиль Lucid бывшего сотрудника Tesla опередил Model S по дальности пробега на одном заряде в 1,3 раза Статьи редакции

Американский регулятор зарегистрировал рекордный результат в 836 км.

Lucid Air Dream Edition Range Lucid
Disney построил дом Винни-Пуха в английском лесу — его можно арендовать на ночь через Airbnb Статьи редакции

Ночь стоит от 7633 рублей.

Спальная зона Airbnb
В Москве стартовал прием заявок на соискание премий в области охраны окружающей среды

Победителям конкурса вручат  статуэтки с символом конкурса, нагрудные знаки и удостоверения, подписанные мэром Москвы.

фото: Департамент природопользования и охраны окружающей среды города Москвы

Премия разделена на два блока и предусматривает финансовое вознаграждение. Один блок – конкурс в области охраны окружающей среды – включает 8 премий. Сумма награды составляет по 200 тысяч рублей и по 100 тысяч рублей в 4-х номинациях.

Как успешно продавать кондиционеры с минимальными затратами на рекламу

Владелица магазина кондиционеров Светлана Исюк рассказала, как полезный контент и внимание к клиентам помогают выделиться на фоне конкурентов и как виртуальный маркетолог Макс помог продать 150 акционных моделей.

null