Не только 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-анимации. Теперь просьба оценить приложение, пустая корзина или сообщение об успешной оплате выглядят более живыми.
В приложении также можно наблюдать за положением курьеров в режиме реального времени. Технологии, которые мы используем, позволяют прогнозировать время их прибытия к клиенту.
И, конечно, мы добавили поддержку тёмной темы. Это не только красиво, но улучшает функциональность приложения. А ещё при использовании тёмной темы глаза устают меньше.
За последнее время мы добавили возможность читать и оставлять отзывы о товарах, сохранять и добавлять часто используемые адреса доставки, возможность самовывоза заказа, а также отслеживание статуса заказа. Мы не прекращаем работу над приложением — в планах тестирование новых функций и улучшение старых. А если у вас есть предложения или комментарии, пишите нам сюда — обязательно ответим.
Комментарий недоступен