Дизайн кофейной станции

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

В закладки
Аудио

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

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

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

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

Давайте обсудим

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

  • Очень вероятно, что нужно задизайнить не только сам автомат, но и «зону безопасности» вокруг него. Довольно неприятно, когда дышат в спину. Как мы можем этого избегать?
  • Судя по картинке, процесс покупки-приготовления суетливый. Стаканы мешают подойти к аппарату, приём купюр и оплата картой в разных местах, крышечки так вот сразу и не найдёшь. Вроде и можно разобраться, но столько углов и нелинейных движений, что расхотелось.
  • Проблема банкомата имеет место. Обязательно перед тобой окажется кто-то, кто безумно тупит.
  • Может быть, что-то вроде «Алиса, хочу кофе». И пусть она с тобой в сторонке поговорит о том, чего именно ты хочешь. А потом подходишь, сканируешь телефон, получаешь напиток. Вообще нет ничего, кроме сканера. Весь интерфейс вынесен в смартфон. Оплата тоже.
  • Понял, что мне напоминают эти торчащие стаканчики. Коровье вымя.

И так далее. Если не лень, можете почитать все 59 пунктов. Документ открыт для комментирования, не стесняйтесь дополнять или придираться.

А как у других?

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

​Первым делом находятся хипстерские интерьеры Источник
​Концепт роботизированной кофейни без баристы Источник и подробности
Старбаксовские кофепойнты в ассортименте Источник
​Зуб не дадим, что это на 100% рабочие машинки, но явно не рендер и не фотошоп Источник
​Концепт оформления вендинговых аппаратов Источник
​А этот ряд кофемашин чем-то похож на старые добрые таксофоны Источник

Давайте конкретизировать

С ворохом слабоструктурированных данных работать сложно, нужно задать себе хоть какие-то рамки.

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

И следом за этим — два десятка ситуаций, когда люди покупают кофе.

Формализовали реальный сценарий использования реальной кофейной станции нашего клиента.

1. Пользователь подходит к автомату. 2. Пользователь разглядывает ассортимент. 3. Пользователь ориентируется в ценах и проверяет, сможет ли заплатить. 5. Пользователь сам подставляет стаканчик. 6. Пользователь выбирает тип кофе (нажимает дважды — второй раз подтверждает). 7. Пользователь платит. 8. Пользователь ждет, пока Система наливает кофе. 9. Система сообщает, что всё готово. 10. Пользователь забирает свой кофе. 11. Пользователь подходит к сиропам-сахару-крышкам и делает, что там ему надо. 12. Пользователь уходит со своим кофе.

Давайте понаблюдаем реальность

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

Обмани обманщика

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

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

Следы белого человека

Ситуация. Люди покупают кофе, если видят, как другие тоже это делают. Могут спросить, вкусно ли тут и что надо делать, чтобы купить.

Решение. Пример: полароидные или из фотоавтомата снимки довольных покупателей около автомата. Голосовое сопровождение («Алиса»). Приклеить следы ног на пол перед автоматом. Создать кофейный аромат вокруг.

Мелочь для тележки

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

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

Все одиннадцать наблюдений и предложений читайте в отчёте, его тоже можно комментировать.

Давайте делать дизайн!

Хоть обысследуйся, но результат работы дизайнера — это картинки, иллюстрация всего придуманного. На концептуальном этапе можно многим пренебречь: эстетикой, выверенными размерами, второстепенными деталями. Единственное, чего нельзя делать, — оставлять все идеи в текстовом виде. Короче, хватит обсуждать, погнали.

Видеопрезентация

Если неохота смотреть, то под видео — всё то же самое в картинках с подписями

1. Большой тачскрин

  • Заказ и оплата отделены от приготовления, повышается пропускная способность.
  • Большой тачскрин работает на привлечение, и его можно кастомизировать.
  • Машина и мебель могут быть любые, брендированность — картинками на экране.

2. Трёхсторонняя колонна

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

3. Мини-кафе с дополнительным вендингом

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

4. Дейтинг

  • Видеосвязь между разными кофейнями (можно отключить).
  • Чат в мобильном приложении, который работает только во время видеосеанса. Либо успели обменяться контактами, либо нет.

5. Адаптивные модули

Разная мебель под одну и ту же кофемашину.

  • Компактный мобильный вариант для кейтеринга и выставок.
  • Со стеллажом для доптоваров — в магазины, оплате кофе на кассе.
  • Универсальный автономный вариант для бизнес-центров и торговых центров с местом под рекламу.

6. Конвейер

  • Машина спрятана, чтобы не было ассоциаций с дешёвым кофе из аппарата.
  • Только один объём стаканчиков, чтобы не мучиться выбором.
  • Линейный процесс приготовления и оплаты кофе — слева направо.
  • Антивандальное добавление сахара и сиропа кнопками.
  • Мини-кофейня сконструирована так, чтобы было неудобно проводить там дольше 10–15 минут.

7. Чёрный ящик

  • Подойдёт для ночного клуба. Никаких кнопок и вообще ничего лишнего.
  • Заказ и оплата — только с мобильного телефона. По аналогии с оплатой на автозаправках.

8. Оазис

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

9. Домашний уют

  • Мини-кафе сзади, скрытое. Сидения убираются и регулируются по высоте.
  • Сбоку — зеркало для селфи.
  • На полках — книжки, растения и прочий уют. Возможно, буккроссинг.
  • Расположение стаканов связано с интерфейсом.

Что дальше?

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

Что ж, финал несколько предсказуем, поэтому мы не слишком расстроились. Хорошо провели время и в очередной раз убедились в двух вещах.

  1. Дизайн — дело коллективное. Над этим мини-проектом работало восемь человек. И если внимательно проследить историю событий, можно заметить, как идеи, высказанные одним членом команды, трансформировались в решения, предложенные другим.
  2. Практики и методы, которые мы (и не только мы) используем для проектирования цифровых интерфейсов, более чем подходят для дизайна офлайновых штук.

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Собака Павлова", "author_type": "self", "tags": [], "comments": 20, "likes": 43, "favorites": 115, "is_advertisement": false, "subsite_label": "design", "id": 91681, "is_wide": false, "is_ugc": true, "date": "Fri, 08 Nov 2019 13:33:13 +0300", "is_special": false }
0
{ "id": 91681, "author_id": 230065, "diff_limit": 1000, "urls": {"diff":"\/comments\/91681\/get","add":"\/comments\/91681\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/91681"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }
20 комментариев
Популярные
По порядку
Написать комментарий...
12

А потом приходят инженеры и тыкают пальцем в такие проекты, весело гогоча

Ответить
1

Ждём с нетерпением. Тут, правда, инженерия довольно простая, было б во что тыкать — машинка, прием платежей (если не интегрирован в машину) и тумбочка с местом под воду. 

Ответить
5

Ну начать можно с определения габаритных и присоединительных размеров всего оборудования.
Очень часто хочется оторвать руки тем, кто делал какой-нибудь вендинг или терминал. Ровно до того момента, пока не начинаешь делать его сам. Какой-нибудь принтер чеков с узенькой щелью на выходе может иметь размеры 20*30*40 см и мешать например бутылки с водой для кофе.
В вашем проекте не хватает проработки компоновки. Учитывая, что вы вряд ли будете новые компоненты разрабатывать, весь проект упрется в то, какие компоненты есть на рынке.
Промдизайн отличается от web-дизайна именно тем, что ещё на этапе концепции дизайнер прорабатывает очень много вопросов: изготовления, обслуживания, хранения, транспортировки, утилизации.

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
1

а где финальный рендер/фото?

Ответить
3

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

Ответить
3

«Совпадение? Не думаю»))

Ответить
0

Людям нельзя показывать почеркушки. 

Ответить
2

"Домашний уют" вполне себе потянет в качестве разделителя в квартире студии. Мини-кухня и посадочные места. Огонь)

Ответить
1

Есть слегка близкая идея - мини кухня для небольшого офиса: небольшой холодильник, СВЧ, вода, шкафчик доя посуды, простенькая кофемашина. Площадь 0,6-0,8м2

Ответить
2

Говорят, в МСК начали хаты по 10 м2 продавать. Тоже можно покуражиться - там, видимо, все очень нестандартное

Ответить
0

Станцию Алиса можно прикрепить к потолку.

Ответить
2

Сначала двуспальную кровать, думаю, а потом уже искать оставшееся место для Алисы

Ответить
–3

Кому-то еще нужны кофейные станции? )) Эта тема была на пике популярности лет 5 назад.

Ответить
1

О, интересно. Откуда инфа?

Ответить
1

Кому то нужны химчистки? Эта тема была популярна 25 лет назад!

Ответить
1

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

Ответить
0

Главное, что зеркало для селфи нигде не забыто!

Ответить
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } }, { "id": 20, "label": "Кнопка в сайдбаре", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cgxmr", "p2": "gnwc" } } } ] { "page_type": "default" }