{"id":2912,"date":"2026-01-14T22:50:35","date_gmt":"2026-01-14T22:50:35","guid":{"rendered":"https:\/\/charmdomacena.com\/portfolio\/?post_type=project&p=2912"},"modified":"2026-02-12T17:40:48","modified_gmt":"2026-02-12T17:40:48","slug":"ai-latte-art","status":"publish","type":"project","link":"https:\/\/charmdomacena.com\/portfolio\/project\/ai-latte-art\/","title":{"rendered":"Google Next AI Latte Art Assistant"},"content":{"rendered":"

[et_pb_section fb_built=”1″ _builder_version=”4.27.5″ _module_preset=”default” background_color=”#222222″ custom_padding=”4px||4px||false|false” border_width_bottom=”2px” border_color_bottom=”#FFFFFF” global_colors_info=”{}”][et_pb_row _builder_version=”4.25.1″ _module_preset=”default” width=”95%” max_width=”100%” custom_margin=”0px||0px||false|false” custom_padding=”0px||0px||false|false” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.25.1″ _module_preset=”default” global_colors_info=”{}”][et_pb_code _builder_version=”4.27.5″ _module_preset=”default” global_colors_info=”{}”]Projects<\/a> \/ Google Cloud Next<\/span> [\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ admin_label=”overview” module_id=”post_body” _builder_version=”4.27.5″ _module_preset=”default” custom_padding=”0px||16px||false|false” border_width_top=”16px” border_color_top=”#1f1f1f” collapsed=”off” global_colors_info=”{}”][et_pb_row admin_label=”projectinfo-labels” module_class=”projectBrief” _builder_version=”4.19.5″ _module_preset=”default” width=”96%” max_width=”100%” custom_padding=”14px||9px|||” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.19.5″ _module_preset=”default” global_colors_info=”{}”][et_pb_code admin_label=”title-area” _builder_version=”4.27.5″ _module_preset=”default” custom_margin=”||16px|||” global_colors_info=”{}”]<\/p>\n

\n

\t <\/p>\n

Gemini Generated AI Latte Art Assistant<\/h1>\n

\t A fast, brand-aligned interface designed for quick attendee use at Google Cloud Next<\/span>\t <\/p>\n

\n

[\/et_pb_code][et_pb_code admin_label=”tabs” module_class=”categoryTabs” _builder_version=”4.27.5″ _module_preset=”default” custom_margin=”||16px|||” global_colors_info=”{}”]<\/p>\n

<\/p>\n
\t\tClient<\/span> Google<\/span>\t<\/div>\n

\t<\/p>\n

\t\t Agency<\/span> George P Johnson<\/span>\t<\/div>\n

<\/p>\n

\t\t Timeline<\/span> ~3 weeks<\/span>\t<\/div>\n

<\/p>\n

\t\tRole<\/span> Senior Visual Designer<\/span>\t<\/div>\n

<\/p>\n

\t\tFocus<\/span> UI components, styling, motion graphics<\/span>\t<\/div>\n

\t<\/div>\n

[\/et_pb_code][et_pb_code admin_label=”description” _builder_version=”4.27.5″ _module_preset=”default” custom_css_free_form=”.darkLink {|| color:#000;||}||||.darkLink:hover {||text-decoration:underline;|| font-weight:400;||}” global_colors_info=”{}”]Google Cloud Next is a large annual conference where thousands of attendees explore new AI and cloud innovations across hands-on demos and interactive activations. One of these was an AI latte art station where attendees ordered a drink from a tablet and generated custom latte art in real time.My role focused on the visual and motion design of the interface. Using early wireframes as a starting point, I designed the UI components, styling, and background motion graphics that aligned the activation with the event brand and created a simple, polished attendee experience. I delivered the high-fidelity prototype and visual direction for the activation, which the vendor team used as the basis for the final build.<\/pee>[\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ admin_label=”phase-3″ module_class=”problemSection” _builder_version=”4.27.5″ _module_preset=”default” custom_padding=”12px|||||” border_width_top=”25px” border_color_top=”#000000″ locked=”off” collapsed=”off” global_colors_info=”{}”][et_pb_row custom_padding_last_edited=”on|phone” _builder_version=”4.27.5″ _module_preset=”default” background_color=”#FFFFFF” width=”95%” max_width=”100%” module_alignment=”center” custom_padding=”8px|35px|0px|35px|false|false” custom_padding_tablet=”|35px|0px|35px|false|false” custom_padding_phone=”8px|35px|0px|35px|false|false” border_color_bottom=”#bfbfbf” collapsed=”off” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.19.5″ _module_preset=”default” global_colors_info=”{}”][et_pb_code admin_label=”content area” _builder_version=”4.27.5″ _module_preset=”default” background_enable_color=”off” custom_margin=”0px||0px||false|false” custom_padding=”0px|0px||0px|false|false” custom_padding_tablet=”5px|0px||0px|false|false” custom_padding_phone=”0px|0px||0px|false|false” custom_padding_last_edited=”on|phone” custom_css_free_form=”.ui-video {|| width: 100%;|| height: auto;|| border-radius: 12px;|| display: block;||}||||.image h5 {|| border: 2px dashed #000;|| width: fit-content;|| padding: 10px 10px 8px;|| margin-left: -32px;|| font-size: 18px;|| letter-spacing: 0.75px;|| line-height: 18px;|| font-family:’Bebas Neue’;|| margin-bottom:25px;||}|| || .connectBottom {|| margin-bottom: -25px!important;||} || || .it-1-slides {|| padding: 50px;||}|| ||.twocolimg {|| overflow: hidden;|| width: 100%;|| justify-content: space-between;||}||||.twocolimg img {|| width: 48%;||}” border_color_top=”#000000″ border_color_right=”#000000″ border_color_left=”#000000″ global_colors_info=”{}”]<\/p>\n

<\/p>\n

Final Direction<\/h4>\n

<\/div>\n

[\/et_pb_code][et_pb_code admin_label=”content area” _builder_version=”4.27.5″ _module_preset=”default” background_enable_color=”off” custom_margin=”0px||0px||false|false” custom_padding=”8px|24px|0px|24px|false|false” custom_padding_tablet=”8px|24px|0px|24px|false|false” custom_padding_phone=”24px|24px|0px|24px|false|false” custom_padding_last_edited=”on|phone” custom_css_free_form=”.ui-video {|| width: 100%;|| height: auto;|| border-radius: 12px;|| display: block;||}||||.image h5 {|| border: 2px dashed #000;|| width: fit-content;|| padding: 10px 10px 8px;|| margin-left: -32px;|| font-size: 18px;|| letter-spacing: 0.75px;|| line-height: 18px;|| font-family:’Bebas Neue’;|| margin-bottom:25px;||}|| || .connectBottom {|| margin-bottom: -25px!important;||} || || .it-1-slides {|| padding: 50px;||}|| ||.twocolimg {|| overflow: hidden;|| width: 100%;|| justify-content: space-between;||}||||.twocolimg img {|| width: 48%;||}” border_width_top=”4px” border_color_top=”#000000″ border_width_right=”4px” border_color_right=”#000000″ border_width_left=”4px” border_color_left=”#000000″ global_colors_info=”{}”]<\/p>\n

The prototype below reflects the final visual direction and informed the developer team\u2019s implementation. <\/pee> \t<\/div>\n

[\/et_pb_code][et_pb_code admin_label=”content area” _builder_version=”4.27.5″ _module_preset=”default” background_enable_color=”off” custom_margin=”0px||0px||false|false” custom_padding=”8px|24px|8px|24px|false|false” custom_padding_tablet=”8px|24px|8px|24px|false|false” custom_padding_phone=”24px|24px|8px|24px|false|false” custom_padding_last_edited=”on|phone” custom_css_free_form=”.ui-video {|| width: 100%;|| height: auto;|| border-radius: 12px;|| display: block;||}||||.image h5 {|| border: 2px dashed #000;|| width: fit-content;|| padding: 10px 10px 8px;|| margin-left: -32px;|| font-size: 18px;|| letter-spacing: 0.75px;|| line-height: 18px;|| font-family:’Bebas Neue’;|| margin-bottom:25px;||}|| || .connectBottom {|| margin-bottom: -25px!important;||} || || .it-1-slides {|| padding: 50px;||}|| ||.twocolimg {|| overflow: hidden;|| width: 100%;|| justify-content: space-between;||}||||.twocolimg img {|| width: 48%;||}” border_color_top=”#000000″ border_width_right=”4px” border_color_right=”#000000″ border_width_left=”4px” border_color_left=”#000000″ global_colors_info=”{}”]

<\/p>\n

Visual Explorations <\/h4>\n

<\/div>\n

[\/et_pb_code][et_pb_code admin_label=”content area” _builder_version=”4.27.5″ _module_preset=”default” background_enable_color=”off” custom_margin=”0px||0px||false|false” custom_padding=”8px|24px|0px|24px|false|false” custom_padding_tablet=”8px|24px|8px|24px|false|false” custom_padding_phone=”24px|24px|8px|24px|false|false” custom_padding_last_edited=”off|desktop” custom_css_free_form=”.ui-video {|| width: 100%;|| height: auto;|| border-radius: 12px;|| display: block;||}||||.image h5 {|| border: 2px dashed #000;|| width: fit-content;|| padding: 10px 10px 8px;|| margin-left: -32px;|| font-size: 18px;|| letter-spacing: 0.75px;|| line-height: 18px;|| font-family:’Bebas Neue’;|| margin-bottom:25px;||}|| || .connectBottom {|| margin-bottom: -25px!important;||} || || .it-1-slides {|| padding: 50px;||}|| ||.twocolimg {|| overflow: hidden;|| width: 100%;|| justify-content: space-between;||}||||.twocolimg img {|| width: 48%;||}” border_width_top=”4px” border_color_top=”#000000″ border_width_right=”4px” border_color_right=”#000000″ border_width_left=”4px” border_color_left=”#000000″ global_colors_info=”{}”]<\/p>\n

Hi-fi screens exploring brand application, components, and motion direction.<\/pee> \t<\/div>\n

[\/et_pb_code][et_pb_code admin_label=”content area” _builder_version=”4.27.5″ _module_preset=”default” background_enable_color=”off” custom_margin=”0px||0px||false|false” custom_padding=”0px|24px|0px|24px|false|false” custom_padding_tablet=”8px|24px|8px|24px|false|false” custom_padding_phone=”24px|24px|8px|24px|false|false” custom_padding_last_edited=”on|phone” custom_css_free_form=”.ui-video {|| width: 100%;|| height: auto;|| border-radius: 12px;|| display: block;||}||||.image h5 {|| border: 2px dashed #000;|| width: fit-content;|| padding: 10px 10px 8px;|| margin-left: -32px;|| font-size: 18px;|| letter-spacing: 0.75px;|| line-height: 18px;|| font-family:’Bebas Neue’;|| margin-bottom:25px;||}|| || .connectBottom {|| margin-bottom: -25px!important;||} || || .it-1-slides {|| padding: 50px;||}|| ||.twocolimg {|| overflow: hidden;|| width: 100%;|| justify-content: space-between;||}||||.twocolimg img {|| width: 48%;||}” border_color_top=”#000000″ border_width_right=”4px” border_color_right=”#000000″ border_width_left=”4px” border_color_left=”#000000″ global_colors_info=”{}”]