Быстрее, удобнее, понятнее: как изменилось приложение СБЕР ЕАПТЕКА

В условиях жесткой конкуренции e-commerce компаниям необходимо «держать руку на пульсе» и постоянно улучшать приложения с учетом пожеланий клиентов. О том, как СБЕР ЕАПТЕКА провела редизайн мобильного приложения, чтобы отвечать новым запросам аудитории, рассказали руководитель продукта Кирилл Кирюшин и руководитель отдела дизайна Анна Бакирова.

Пора меняться

В 2020 году СБЕР ЕАПТЕКА продемонстрировала существенный рост: выручка увеличилась на 96%, средний чек вырос на 13%, а приложение компании вошло в сторах в ТОП-3 в категории «Медицина». Изменилось и потребительское поведение клиентов: если в 2019 году более половины из них оформляли заказы через сайт, то в 2020 году уже предпочитали совершать покупки с помощью мобильных приложений.

Приложение ЕАПТЕКА появилось в 2016 году. Его функционал не сильно отличался от сайта – удобная платформа для совершения онлайн-заказа. Пользователю, по сути, был доступен лишь каталог. Это типично для приложений, созданных «на заре» российского мобайла. В то время их использовали только для совершения покупки в интернете, о дополнительных опциях вроде программы лояльности или отслеживаемости заказа не задумывались ни пользователи, ни разработчики.

Приложение ЕАПТЕКА в 2016 году

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

Так, в 2020 году мы пришли к необходимости редизайна, чтобы соответствовать всем потребностям пользователей. В их числе – возможность быстрой доставки, желание экономии и упрощение процесса выбора товаров в приложении. Например, в обычной аптеке клиенты, при возникновении вопросов о препаратах, могут обратиться к фармацевту. В приложении такого сотрудника нет.

Чтобы максимально облегчить клиентам выбор товаров, нам необходимо было максимально понятно и наглядно предлагать пользователям аналоги лекарств или дополнительные товары.

Кирилл Кирюшин, руководитель группы продуктов электронной коммерции СБЕР ЕАПТЕКА

Редизайну приложения способствовало и то, что в конце 2020 года ЕАПТЕКА стала частью экосистемы «Сбера» и группы компаний «Р-Фарм». Требовалось усовершенствовать дизайн в соответствии с новым брендбуком и фирменными цветами.

Как менялось приложение

Редизайн – это довольно объёмная работа, в которую вовлечены дизайнеры, разработчики, UX-специалисты, маркетологи и даже социологи. Сам процесс поделен на этапы и занимает довольно много времени. Вот как происходила трансформация приложения СБЕР ЕАПТЕКА.

Как менялось приложение: в 2016 году, в 2018 году и в 2022 году

1 этап. Определение целей

У компании было две недели на редизайн нового приложения.

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

Анна Бакирова, руководитель отдела дизайна в СБЕР ЕАПТЕКА

Изменению дизайна предшествовала работа по пересмотру структуры приложения. В это время разработчики вместе с продуктовой командой анализировали, от чего стоит отказаться, какие улучшения необходимы, а что можно оставить в прежнем виде. Редизайном занималась команда из пяти дизайнеров компании. Каждый из них работал с двумя-тремя разделами приложения.

Ключевые компоненты должны были соответствовать гайдлайнам экосистемы СБЕРа: типографика, цветовая палитра, вёрстка. Чтобы пользователи видели преемственность бренда, мы сохранили два фирменных цвета ЕАПТЕКА – фиолетовый и оттенок зеленого. В обновленном дизайне руководствовались основными правилами доступности: контрастность текстовых и других элементов для упрощения чтения текста, а также избавились от всего лишнего, что отвлекало пользователя от его цели: поиск лекарств и информации о них.

Анна Бакирова, руководитель отдела дизайна в СБЕР ЕАПТЕКА

2 этап. Начало разработки новой версии приложения

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

3 этап. Исследование клиентского пути

Для определения потребностей пользователей, маркетологи ЕАПТЕКА совместно с внешним агентством провели исследование и выяснили, что важно пользователям интернет-аптек. Вот какими оказались результаты:

  1. Аккуратность дизайна и интерфейса. Упорядоченный внешний вид приложения подчеркивает экспертность. Перегруженный дизайн в стиле азиатских интернет-магазинов работает во вред онлайн-аптекам.

  2. Наличие товара и скорость доставки. Зачастую клиент начинает искать лекарство непосредственно тогда, когда возникает потребность в его приеме. Поэтому важно, чтобы препарат был в наличии и быстро доставлен в удобную локацию при оформлении заказа – на дом или в ближайшую аптеку, если мы говорим про рецептурные препараты.

  3. Простота оформления заказа. Пользователь хочет совершить покупку в несколько кликов, не тратя на процесс оформления много времени. Ему важно сразу понимать, надо ли самостоятельно идти за лекарством в аптеку или заказ может привезти курьер.

4 этап. Пересмотр механизма оформления заказа

В ходе исследования стало понятно, что у пользователей приложения СБЕР ЕАПТЕКА возникают сложности с оформлением заказа.

Ранее в приложении пользователь мог узнать способ доставки своего заказа только на финальном этапе оформления, что, конечно, вызывало недовольство клиентов, и мы наблюдали большое количество «брошенных корзин». Для уточнения сроков доставки нам необходимо знать адрес, а чтобы понять способ получения (доставка или самовывоз из аптеки), нужно понимать, содержит ли заказ рецептурные или спиртосодержащие товары. Для этого мы переработали пользовательский путь

Анна Бакирова, руководитель отдела дизайна в СБЕР ЕАПТЕКА

Сейчас при входе в приложение пользователь вводит свой адрес. Благодаря этому он сразу видит доступный способ доставки в своем районе. В каждой карточке товара появляется информация о сроках доставки: «доставим сегодня», «доставим завтра». Эти изменения сделали процесс оформления заказа быстрым и интуитивно понятным.

5 этап. Планирование разработки нового приложения

Все сайты и приложения, которые фигурировали в исследовании клиентского пути, взяли в работу наши дизайнеры. Они прорабатывали дизайн с учетом предпочтений пользователей. Параллельно велась разработка двух версий приложения — для системы iOS и Android.

Кирилл Кирюшин, руководитель продукта в СБЕР ЕАПТЕКА

6 этап. Адаптация промо-страниц

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

Мы должны были, по сути, сделать «резиновую» верстку промо-страниц (предназначены для публикации промо и маркетинговых акций). В этом случае макет и его отдельные части имеют не фиксированные размеры, а «гибкие» — в процентах от размеров «основного» макета. Это позволяет не создавать отдельные макеты для сайта и приложения. Один макет автоматически адаптируется под нужное устройство.

Кирилл Кирюшин, руководитель продукта в СБЕР ЕАПТЕКА

7 этап. Тестирование новой версии

На начальной стадии приложение стало доступно только для Android, и лишь для 20% пользователей. Это позволило отслеживать обратную связь и оперативно реагировать на нее.

Первое, что обнаружилось в результате масштабного тестирования – новый дизайн кнопки добавления товара в корзину с листинга (лента товаров, которую видит пользователь, например, по результатам поиска) оказался не очень эффективным. Конверсия с листингов уменьшилась, причем чуть ли не на 30%, что является значительным показателем.

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

Анна Бакирова, руководитель отдела дизайна в СБЕР ЕАПТЕКА

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

8 этап. Запуск новой версии

Редизайн и разработка заняли в сумме примерно 9 месяцев — от идеи до перехода 100% пользователей на новое приложение. За это время у него изменились дизайн и вёрстка, было сделано тестирование во всех средах (в том числе, среди пользователей). Только после этого финальный вариант обновленного приложения представили пользователям. Android-версия стала доступна для скачивания в июне этого года, а приложение для iOS — в августе.

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

В контакте с пользователями

Работа по улучшению приложения СБЕР ЕАПТЕКА не останавливается. Самое важное для нас — регулярно собирать обратную связь от пользователей. Мы узнаем у пользователей соцсетей, что можно улучшить в приложении, а затем на основе получившихся результатов, проводим с клиентами глубинные интервью. Последнее такое исследование завершилось в августе. В нем поучаствовало 500 человек.

Судя по отзывам наших пользователей, приложение СБЕР ЕАПТЕКА стало более простым и понятным. Мы и дальше продолжим улучшать приложение, чтобы пользоваться им стало еще комфортнее.

Анна Бакирова, руководитель отдела дизайна в СБЕР ЕАПТЕКА
0
8 комментариев
Написать комментарий...
Максим Отмахов из Antro.cx

Спасибо! Всегда интересно читать, как большие продукты работают внутри :)

Ответить
Развернуть ветку
Dmitry Abutkov

Обхожу стороной все коллабрации сбер.

Ответить
Развернуть ветку
Ekaterina Petrova

Почему?

Ответить
Развернуть ветку
Dark Soul

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

Ответить
Развернуть ветку
Софья Долгополова

Это интернет-аптека ))
И да, согласно законодательству, которое сейчас претерпевает изменения, рецептурку правда можно заказать (только в ближайшую аптеку, не доставку).

Ответить
Развернуть ветку
Dark Soul

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

Ответить
Развернуть ветку
Софья Долгополова

у вас — это где? )
В Росси пока что это не оч законно ))

Ответить
Развернуть ветку
Alexei Minaev

А в новой версии приложения в характеристиках лекарства действующее вещество также будет переносится по одной букве на новую строчку?

Ответить
Развернуть ветку
5 комментариев
Раскрывать всегда
null