1 1160x620 - Как я проектировал карточки для совершенно нового приложения Swiggy Daily

История проектирования списка товаров приложения Swiggy Daily

Недавно исполнился год, как я работаю в Swiggy. За этот год я занимался самой разнообразной работой, от съемки фотографий для Instagram до создания совершенно нового приложения с нуля (да, вы не ослышались). На третий день работы в компании мне сказали, что мой первый проект будет чем-то совершенно новым. ?

Так что я начал волнующее путешествие по проектированию Swiggy Dailyсовершенно нового приложения от знаменитого дома Swiggy. Daily отличается от Swiggy тем, что в нем нет ресторанов. Это платформа, предлагающая блюда, приготовленные по-домашнему, небольшими кухнями и домашними поварами.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как я проектировал карточки для совершенно нового приложения Swiggy Daily
Старый добрый Swiggy и новое приложение Daily

Итак,

  • Приложение Swiggy – для ресторанной еды (и еще нескольких вещей)
  • Приложение Daily – для домашней еды

Создание Daily было самой настоящей эпопеей. Каждый день был настолько насыщенным, что его можно превратить в супер-захватывающий фильм! (Ладно …  по крайней мере, сериал Netflix ?). Из всех моментов, которые я пережил, есть один, который я до сих пор вспоминаю с любовью. Это проектирование небольшого, но очень важного элемента Daily App – списка блюд.

Список – ядро ​​любого продукта электронной коммерции

Вы не поверите, что, казалось бы, такая простая вещь, как «список», иногда может быть довольно сложной. Давайте рассмотрим анатомию типичного списка. У него есть название, изображение, цена и возможно кнопка для действия. Что-то вроде этого:

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как я проектировал карточки для совершенно нового приложения Swiggy Daily

Глядя на этот пример, вы, должно быть, удивитесь,

Это буквально 3 строчки текста, 2 прямоугольника и изображение … Что в этом такого сложного?!

Но для дизайнеров не все так просто. Если бы это было так, не было бы необходимости проектировать что-то новое. Мы могли использовать один общий шаблон.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как я проектировал карточки для совершенно нового приложения Swiggy Daily
Универсальный вариант?

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

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

Проектирование списка

В приложении Daily мы убедились, что вы найдете еду сразу, без необходимости просмотра ресторанов. Мы называем это подходом «в первую очередь еда». Поскольку на платформе нет ресторанов, этот подход стал еще проще ?

? Шаг1 — Осторожное начало

Мне нравится начинать с чего-то опробованного и протестированного, а затем развивать это по мере необходимости. Я начал с того же списка, что используется в POP (раздел с едой основного приложения Swiggy).

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как я проектировал карточки для совершенно нового приложения Swiggy Daily
Проверенный список Swiggy POP. Это еда в конце концов

Выглядит элегантно. В нем есть все, что нам нужно – название товара, изображение, название поставщика, цена … Это работает, не так ли?

Еще нет. Давайте рассмотрим его внимательнее, прежде чем принять решение.

? Шаг 2 — Релевантный контент

Бургер Chicken Whopper от Burger King – это НЕ то, что мы планируем продавать в Daily. Итак, давайте заменим это чем-то более реалистичным и посмотрим, работает ли оно по-прежнему. Как насчет «Deluxe North Indian Egg Meal от Ms. Nidhi Parulkar»? Это похоже на настоящую индийскую еду от домашнего шеф-повара! ? Другое дело:

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как я проектировал карточки для совершенно нового приложения Swiggy Daily
Список Swiggy POP с релевантным контентом

Но подождите минутку… Что еще входит в это блюдо? Это продукты, которые вы видите на картинке? Что это за миска на тарелке? Это шпинат или бамия? Не понятно…

? Шаг 3 — Дорабатываем детали

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как я проектировал карточки для совершенно нового приложения Swiggy Daily
Список со строкой текста, упоминающей продукты

Хорошо … функционально это работает, но то, что казалось отличным с бургером Chicken Whopper, не кажется достаточно хорошим с реальным контентом. С 4 различными группами текста элегантность сошла на нет! ? Давайте посмотрим, что мы можем с этим сделать.

Совет: Всегда проектируйте с реальным контентом. Как вы уже увидели, решения могут существенно измениться в зависимости от него.

? Шаг 4 — Делаем его элегантным

Когда мы говорим «еда по-домашнему», именно внешний вид создает первое впечатление домашнего уюта, а НЕ причудливая приставка «Deluxe». Итак, как насчет того, чтобы удалить напыщенное название и использовать вместо него описание? Кроме того, давайте попробуем на этот раз увеличить изображения!

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как я проектировал карточки для совершенно нового приложения Swiggy Daily
Улучшенный список с большими изображениями + объединенное имя и описание

Я согласен, что наличие больших изображений также означает, что мы показываем меньше списка в области просмотра. Но в контексте Daily, где количество предложений относительно невелико, мы думали, что этот подход должен работать.

Совет: использование больших изображений – это палка о двух концах. Они могут творить чудеса, если хорошо сняты. Но если нет, они могут все полностью испортить!

Ладно… Вроде все выглядит хорошо ?

НО,

«Кто такая Nidhi Parulkar??»

Никогда не слышали о ней, верно? Она не Гордон Рамзи или Burger Kings, о которых многие знают. Она просто новый шеф-повар, который еще не прославился. Она внушает вам доверие?

Это именно то, что происходит всякий раз, когда новый и неизвестный ресторан попадает в список Swiggy. Нам, как пользователям, трудно доверять чему-то неизвестному.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как я проектировал карточки для совершенно нового приложения Swiggy Daily
Новый игрок в деле

Однако, у Swiggy есть небольшое преимущество. Восприятие незнакомой вещи имеет тенденцию улучшаться при наличии вокруг нее знакомых вещей. Это интересная комбинация гало-эффекта и эффекта чирлидерш. (Я только что прочитал исследование по одному из них, и да, у меня есть право похвастаться полученными знаниями ?)

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как я проектировал карточки для совершенно нового приложения Swiggy Daily
Гало-эффект творит чудеса!

Но в случае с Daily даже гало-эффект не мог помочь, потому что его не было! Все поставщики на платформе новички, которым еще предстоит заработать репутацию.

В таком сценарии нет никакого критерия для выбора между раджма от Ms. Nupur Gupta и раджма от Deeptis Kitchen. Так что же мы можем сделать?

Как мы можем внушить доверие и облегчить выбор для наших пользователей?

? Последний шаг — Упрощение

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как я проектировал карточки для совершенно нового приложения Swiggy Daily
Список с фотографией шеф-повара

Как насчет того, чтобы добавить еще одну строку текста, подчеркивающую уникальность шеф-повара? Индивидуальная особенность.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как я проектировал карточки для совершенно нового приложения Swiggy Daily
Список с фотографией шеф-повара и персонализированным описанием

Кулинарный инструктор на YouTube? Должно быть, знаменитый шеф-повар!

Ох… Бывший IT-специалист, который последовал за своей страстью к кулинарии… Кто-то, как я! Надо попробовать это.

Она использует свои семейные рецепты с 30-летней историей … Вау! Должно быть очень самобытно!!

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

? Самый последний шаг

Шучу ?

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как я проектировал карточки для совершенно нового приложения Swiggy Daily

Кстати, а я говорил вам, что первая спроектированная версия Swiggy Daily была с темной темой? Задолго до того, как добавлять темную тему в приложения стало круто. Позже мы прибегли к простым белым визуальным эффектам. Почему? Ну, это уже другая история ?

Свежие вакансии
                        RJ Games RJ Games Senior UI Designer Удаленно Москва
                        Presium Presium Арт-директор в студию Presium Удаленно Москва
                        Emlid Emlid UX/UI Designer Офис Санкт-Петербург
                        e-Legion e-Legion UX/UI Дизайнер Офис Санкт-Петербург
                        Регистратор доменных имен РЕГ.РУ Регистратор доменных имен РЕГ.РУ UX/UI дизайнер Удаленно Москва
Все вакансии

Оригинал: Saptarshi Prakash

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Добавить комментарий
Похожие записи

Концепт новой операционной системы Mercury OS

Концепт человеко-ориентированной операционной системы Mercury OS основанной на принципах гуманитарного дизайна

Furnify: проект по продаже мебели и декора

Это статья о создании e-commerce сайта Furnify для продажи мебели и декора.…

Как мы хотели поменять один цвет и сделали редизайн

Хотели поменять один цвет — сделали редизайн Мы команда Carrot quest, сервиса…