{"id":3310,"date":"2026-09-23T02:18:54","date_gmt":"2026-09-23T02:18:54","guid":{"rendered":"https:\/\/charmdomacena.com\/portfolio\/?post_type=project&#038;p=3310"},"modified":"2026-09-26T01:26:59","modified_gmt":"2026-09-26T01:26:59","slug":"dreamforce-2026","status":"publish","type":"project","link":"https:\/\/charmdomacena.com\/portfolio\/project\/dreamforce-2026\/","title":{"rendered":"Salesforce Dreamforce"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; _builder_version=&#8221;4.27.5&#8243; _module_preset=&#8221;default&#8221; background_color=&#8221;#222222&#8243; custom_padding=&#8221;4px||4px||false|false&#8221; border_width_bottom=&#8221;2px&#8221; border_color_bottom=&#8221;#FFFFFF&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_row _builder_version=&#8221;4.25.1&#8243; _module_preset=&#8221;default&#8221; width=&#8221;95%&#8221; max_width=&#8221;100%&#8221; custom_margin=&#8221;0px||0px||false|false&#8221; custom_padding=&#8221;0px||0px||false|false&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.25.1&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_code _builder_version=&#8221;4.27.9&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<a class=\"previousPg\" href=\"https:\/\/charmdomacena.com\/portfolio\/#selectWork\">Projects<\/a> \/ <span class=\"currentPg\">Salesforce Dreamforce<\/span>  [\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; admin_label=&#8221;overview&#8221; module_id=&#8221;post_body&#8221; _builder_version=&#8221;4.27.5&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;0px||16px||false|false&#8221; border_width_top=&#8221;16px&#8221; border_color_top=&#8221;#1f1f1f&#8221; collapsed=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_row admin_label=&#8221;projectinfo-labels&#8221; module_class=&#8221;projectBrief&#8221; _builder_version=&#8221;4.19.5&#8243; _module_preset=&#8221;default&#8221; width=&#8221;96%&#8221; max_width=&#8221;100%&#8221; custom_padding=&#8221;14px||9px|||&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.19.5&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_code admin_label=&#8221;title-area&#8221; _builder_version=&#8221;4.27.9&#8243; _module_preset=&#8221;default&#8221; custom_margin=&#8221;||16px|||&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<hr>\n<p><!-- [et_pb_line_break_holder] -->\t    <\/p>\n<h1>Security Challenge + Dreampitch<\/h1>\n<p><!-- [et_pb_line_break_holder] -->\t    <span class=\"subtext\">TWO COMPETITION EXPERIENCES DESIGNED FOR PARTICIPATION, VOTING + LIVE EVENT ENGAGEMENT<\/span><!-- [et_pb_line_break_holder] -->\t    <\/p>\n<hr>\n<p>  [\/et_pb_code][et_pb_code admin_label=&#8221;tabs&#8221; module_class=&#8221;categoryTabs&#8221; _builder_version=&#8221;4.27.9&#8243; _module_preset=&#8221;default&#8221; custom_margin=&#8221;||16px|||&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<div class=\"flex-this topInfo\"><!-- [et_pb_line_break_holder] --> <\/p>\n<div class=\"catLabel\"><!-- [et_pb_line_break_holder] -->\t\t<span class=\"pCatLabel\">Client<\/span><span class=\"pCatText\"> Salesforce<\/span><!-- [et_pb_line_break_holder] -->\t<\/div>\n<p><!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->\t<\/p>\n<div class=\"catLabel\"><!-- [et_pb_line_break_holder] -->\t\t<span class=\"pCatLabel\"> Agency<\/span> <span class=\"pCatText\">George P Johnson<\/span><!-- [et_pb_line_break_holder] -->\t<\/div>\n<p><!-- [et_pb_line_break_holder] -->  <\/p>\n<div class=\"catLabel\"><!-- [et_pb_line_break_holder] -->\t\t<span class=\"pCatLabel\"> Event<\/span> <span class=\"pCatText\"> Dreamforce<\/span><!-- [et_pb_line_break_holder] -->\t<\/div>\n<p><!-- [et_pb_line_break_holder] --><\/p>\n<div class=\"catLabel\"><!-- [et_pb_line_break_holder] -->\t\t<span class=\"pCatLabel\">Role<\/span> <span class=\"pCatText\">Digital Experience Design<\/span><!-- [et_pb_line_break_holder] -->\t<\/div>\n<p><!-- [et_pb_line_break_holder] -->  <\/p>\n<div class=\"catLabel\"><!-- [et_pb_line_break_holder] -->\t\t<span class=\"pCatLabel\">Focus<\/span> <span class=\"pCatText\">UI Design, Design System + Components<\/span><!-- [et_pb_line_break_holder] -->\t<\/div>\n<p><!-- [et_pb_line_break_holder] -->\t<!-- [et_pb_line_break_holder] --><\/div>\n<p> [\/et_pb_code][et_pb_code admin_label=&#8221;description&#8221; _builder_version=&#8221;4.27.9&#8243; _module_preset=&#8221;default&#8221; custom_css_free_form=&#8221;.darkLink {||  color:#000;||}||||.darkLink:hover {||text-decoration:underline;||  font-weight:400;||}&#8221; global_colors_info=&#8221;{}&#8221;]<pee><!-- [et_pb_line_break_holder] -->Dreamforce 2026 featured two competition-based experiences with very different audiences and interactions. Security Challenge supported competitors participating from laptops at the event alongside a live leaderboard, while Dreampitch gave attendees a touchscreen experience for viewing startup pitches, voting for their favorite, and adding a suggested session to their agenda.<!-- [et_pb_line_break_holder] --><!\u2013- [et_pb_br_holder] -\u2013><!\u2013- [et_pb_br_holder] -\u2013>My role focused on the UI and visual design for both experiences, including their design systems and components. For Security Challenge, I worked from an established screen flow, refining the experience and designing additional states as needed. For DreamPitch, I worked from a user flow and requirements to develop the interface and final visual direction.<!-- [et_pb_line_break_holder] --><\/pee>[\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; admin_label=&#8221;phase-3&#8243; module_class=&#8221;problemSection&#8221; _builder_version=&#8221;4.27.5&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;12px|||||&#8221; border_width_top=&#8221;25px&#8221; border_color_top=&#8221;#000000&#8243; locked=&#8221;off&#8221; collapsed=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_row custom_padding_last_edited=&#8221;on|phone&#8221; _builder_version=&#8221;4.27.5&#8243; _module_preset=&#8221;default&#8221; background_color=&#8221;#FFFFFF&#8221; width=&#8221;95%&#8221; max_width=&#8221;100%&#8221; module_alignment=&#8221;center&#8221; custom_padding=&#8221;8px|35px|0px|35px|false|false&#8221; custom_padding_tablet=&#8221;|35px|0px|35px|false|false&#8221; custom_padding_phone=&#8221;8px|35px|0px|35px|false|false&#8221; border_color_bottom=&#8221;#bfbfbf&#8221; collapsed=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.19.5&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_code admin_label=&#8221;content area&#8221; _builder_version=&#8221;4.27.9&#8243; _module_preset=&#8221;default&#8221; background_enable_color=&#8221;off&#8221; custom_margin=&#8221;0px||0px||false|false&#8221; custom_padding=&#8221;0px|0px||0px|false|false&#8221; custom_padding_tablet=&#8221;5px|0px||0px|false|false&#8221; custom_padding_phone=&#8221;0px|0px||0px|false|false&#8221; custom_padding_last_edited=&#8221;on|phone&#8221; custom_css_free_form=&#8221;.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:&#8217;Bebas Neue&#8217;;||    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%;||}&#8221; border_color_top=&#8221;#000000&#8243; border_color_right=&#8221;#000000&#8243; border_color_left=&#8221;#000000&#8243; global_colors_info=&#8221;{}&#8221;]<\/p>\n<div class=\"info2\"> <!-- [et_pb_line_break_holder] -->  <\/p>\n<h4><!-- [et_pb_line_break_holder] -->01 \/ Security Challenge<\/h4>\n<p><!-- [et_pb_line_break_holder] --><\/div>\n<p>[\/et_pb_code][et_pb_code admin_label=&#8221;content area&#8221; _builder_version=&#8221;4.27.9&#8243; _module_preset=&#8221;default&#8221; background_enable_color=&#8221;off&#8221; custom_margin=&#8221;0px||0px||false|false&#8221; custom_padding=&#8221;8px|24px|0px|24px|false|false&#8221; custom_padding_tablet=&#8221;8px|24px|0px|24px|false|false&#8221; custom_padding_phone=&#8221;24px|24px|0px|24px|false|false&#8221; custom_padding_last_edited=&#8221;on|phone&#8221; hover_enabled=&#8221;0&#8243; custom_css_free_form=&#8221;.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:&#8217;Bebas Neue&#8217;;||    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%;||}&#8221; border_width_top=&#8221;4px&#8221; border_color_top=&#8221;#000000&#8243; border_width_right=&#8221;4px&#8221; border_color_right=&#8221;#000000&#8243; border_width_left=&#8221;4px&#8221; border_color_left=&#8221;#000000&#8243; global_colors_info=&#8221;{}&#8221; sticky_enabled=&#8221;0&#8243;]<\/p>\n<div class=\"info2\"> <!-- [et_pb_line_break_holder] --><pee><strong>Live Competition Experience<\/strong><!\u2013- [et_pb_br_holder] -\u2013><!-- [et_pb_line_break_holder] -->Competitors used laptops at the event to work through the Security Challenge, while a live leaderboard displayed results for the room. Working from an established screen flow, I refined the interface, identified additional states, and developed the final UI system and components.<!-- [et_pb_line_break_holder] -->  <\/pee><!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->\t<\/div>\n<p>  [\/et_pb_code][et_pb_image src=&#8221;https:\/\/charmdomacena.com\/portfolio\/wp-content\/uploads\/2026\/09\/security-challenge-1.png&#8221; title_text=&#8221;security-challenge-1&#8243; align=&#8221;center&#8221; force_fullwidth=&#8221;on&#8221; _builder_version=&#8221;4.27.9&#8243; _module_preset=&#8221;default&#8221; custom_margin=&#8221;||0px|||&#8221; custom_padding=&#8221;0px|0px|0px|0px|false|false&#8221; hover_enabled=&#8221;0&#8243; border_width_right=&#8221;4px&#8221; border_width_left=&#8221;4px&#8221; global_colors_info=&#8221;{}&#8221; sticky_enabled=&#8221;0&#8243;][\/et_pb_image][et_pb_code admin_label=&#8221;content area&#8221; _builder_version=&#8221;4.27.9&#8243; _module_preset=&#8221;default&#8221; background_enable_color=&#8221;off&#8221; custom_margin=&#8221;-24px||0px||false|false&#8221; custom_padding=&#8221;48px|24px|24px|24px|false|false&#8221; hover_enabled=&#8221;0&#8243; custom_css_free_form=&#8221;.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:&#8217;Bebas Neue&#8217;;||    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%;||}&#8221; border_color_top=&#8221;#000000&#8243; border_width_right=&#8221;4px&#8221; border_color_right=&#8221;#000000&#8243; border_color_bottom=&#8221;#000000&#8243; border_width_left=&#8221;4px&#8221; border_color_left=&#8221;#000000&#8243; global_colors_info=&#8221;{}&#8221; sticky_enabled=&#8221;0&#8243;]<pee><!-- [et_pb_line_break_holder] -->The interface supported competitors across the different stages and states of the live challenge.<!-- [et_pb_line_break_holder] --><\/pee><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->[\/et_pb_code][et_pb_image src=&#8221;https:\/\/charmdomacena.com\/portfolio\/wp-content\/uploads\/2026\/09\/security-challenge-3.png&#8221; title_text=&#8221;security-challenge-3&#8243; align=&#8221;center&#8221; force_fullwidth=&#8221;on&#8221; _builder_version=&#8221;4.27.9&#8243; _module_preset=&#8221;default&#8221; custom_margin=&#8221;||0px|||&#8221; custom_padding=&#8221;0px|0px|0px|0px|false|false&#8221; hover_enabled=&#8221;0&#8243; border_width_right=&#8221;4px&#8221; border_width_left=&#8221;4px&#8221; global_colors_info=&#8221;{}&#8221; sticky_enabled=&#8221;0&#8243;][\/et_pb_image][et_pb_code admin_label=&#8221;content area&#8221; _builder_version=&#8221;4.27.9&#8243; _module_preset=&#8221;default&#8221; background_enable_color=&#8221;off&#8221; custom_margin=&#8221;-24px||0px||false|false&#8221; custom_padding=&#8221;48px|24px|0px|24px|false|false&#8221; hover_enabled=&#8221;0&#8243; custom_css_free_form=&#8221;.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:&#8217;Bebas Neue&#8217;;||    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%;||}&#8221; border_color_top=&#8221;#000000&#8243; border_width_right=&#8221;4px&#8221; border_color_right=&#8221;#000000&#8243; border_color_bottom=&#8221;#000000&#8243; border_width_left=&#8221;4px&#8221; border_color_left=&#8221;#000000&#8243; global_colors_info=&#8221;{}&#8221; sticky_enabled=&#8221;0&#8243;]<pee><!-- [et_pb_line_break_holder] --><strong>Live Leaderboard<\/strong> <!\u2013- [et_pb_br_holder] -\u2013>A live leaderboard extended the experience beyond individual laptops, displaying competition results for the room.<!-- [et_pb_line_break_holder] --><\/pee><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->[\/et_pb_code][et_pb_code admin_label=&#8221;content area&#8221; _builder_version=&#8221;4.27.9&#8243; _module_preset=&#8221;default&#8221; background_enable_color=&#8221;off&#8221; custom_margin=&#8221;0px||0px||false|false&#8221; custom_padding=&#8221;0px|24px|8px|24px|false|false&#8221; custom_padding_tablet=&#8221;8px|24px|8px|24px|false|false&#8221; custom_padding_phone=&#8221;24px|24px|8px|24px|false|false&#8221; custom_padding_last_edited=&#8221;on|phone&#8221; hover_enabled=&#8221;0&#8243; custom_css_free_form=&#8221;.img-65 {||width: 65%;||}  ||.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:&#8217;Bebas Neue&#8217;;||    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%;||}&#8221; border_color_top=&#8221;#000000&#8243; border_width_right=&#8221;4px&#8221; border_color_right=&#8221;#000000&#8243; border_width_left=&#8221;4px&#8221; border_color_left=&#8221;#000000&#8243; global_colors_info=&#8221;{}&#8221; module_class=&#8221;leaderboard&#8221; sticky_enabled=&#8221;0&#8243; text_orientation=&#8221;center&#8221;]<img data-recalc-dims=\"1\" decoding=\"async\" class=\"img-65\" src=\"https:\/\/i0.wp.com\/charmdomacena.com\/portfolio\/wp-content\/uploads\/2026\/09\/09-security-challenge-scoreboard-wall-display.png?w=1080&#038;ssl=1\"><!-- [et_pb_line_break_holder] -->[\/et_pb_code][et_pb_code admin_label=&#8221;content area&#8221; _builder_version=&#8221;4.27.9&#8243; _module_preset=&#8221;default&#8221; background_enable_color=&#8221;off&#8221; custom_margin=&#8221;-24px||0px||false|false&#8221; custom_padding=&#8221;48px|24px|24px|24px|false|false&#8221; hover_enabled=&#8221;0&#8243; custom_css_free_form=&#8221;.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:&#8217;Bebas Neue&#8217;;||    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%;||}&#8221; border_color_top=&#8221;#000000&#8243; border_width_right=&#8221;4px&#8221; border_color_right=&#8221;#000000&#8243; border_color_bottom=&#8221;#000000&#8243; border_width_left=&#8221;4px&#8221; border_color_left=&#8221;#000000&#8243; global_colors_info=&#8221;{}&#8221; sticky_enabled=&#8221;0&#8243;]<pee><!-- [et_pb_line_break_holder] --><strong>Visual Explorations<\/strong> <!\u2013- [et_pb_br_holder] -\u2013>Early directions explored different approaches to the competition interface before arriving at the final visual system.<!-- [et_pb_line_break_holder] --><\/pee><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->[\/et_pb_code][et_pb_image src=&#8221;https:\/\/charmdomacena.com\/portfolio\/wp-content\/uploads\/2026\/09\/sec-layout-exploration.png&#8221; title_text=&#8221;sec-layout-exploration&#8221; align=&#8221;center&#8221; force_fullwidth=&#8221;on&#8221; _builder_version=&#8221;4.27.9&#8243; _module_preset=&#8221;default&#8221; custom_margin=&#8221;||0px|||&#8221; custom_padding=&#8221;0px|0px|0px|0px|false|false&#8221; hover_enabled=&#8221;0&#8243; border_width_right=&#8221;4px&#8221; border_width_left=&#8221;4px&#8221; global_colors_info=&#8221;{}&#8221; sticky_enabled=&#8221;0&#8243;][\/et_pb_image][et_pb_code admin_label=&#8221;content area&#8221; _builder_version=&#8221;4.27.5&#8243; _module_preset=&#8221;default&#8221; background_enable_color=&#8221;off&#8221; custom_margin=&#8221;-24px||8px||false|false&#8221; custom_margin_tablet=&#8221;-24px||8px||false|false&#8221; custom_margin_phone=&#8221;-24px||8px||false|false&#8221; custom_margin_last_edited=&#8221;on|desktop&#8221; custom_padding=&#8221;16px|24px|48px|24px|false|false&#8221; custom_css_free_form=&#8221;.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:&#8217;Bebas Neue&#8217;;||    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%;||}&#8221; border_color_top=&#8221;#000000&#8243; border_width_right=&#8221;4px&#8221; border_color_right=&#8221;#000000&#8243; border_width_bottom=&#8221;4px&#8221; border_color_bottom=&#8221;#000000&#8243; border_width_left=&#8221;4px&#8221; border_color_left=&#8221;#000000&#8243; global_colors_info=&#8221;{}&#8221;][\/et_pb_code][et_pb_code admin_label=&#8221;content area&#8221; _builder_version=&#8221;4.27.9&#8243; _module_preset=&#8221;default&#8221; background_enable_color=&#8221;off&#8221; custom_margin=&#8221;0px||0px||false|false&#8221; custom_padding=&#8221;5px|0px||0px|false|false&#8221; custom_css_free_form=&#8221;.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:&#8217;Bebas Neue&#8217;;||    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%;||}&#8221; border_color_top=&#8221;#000000&#8243; border_color_right=&#8221;#000000&#8243; border_color_left=&#8221;#000000&#8243; global_colors_info=&#8221;{}&#8221;]<\/p>\n<div class=\"info2\"> <!-- [et_pb_line_break_holder] -->  <\/p>\n<h4>02 \/ Dreampitch <\/h4>\n<p><!-- [et_pb_line_break_holder] --><\/div>\n<p>[\/et_pb_code][et_pb_code admin_label=&#8221;content area&#8221; _builder_version=&#8221;4.27.9&#8243; _module_preset=&#8221;default&#8221; background_enable_color=&#8221;off&#8221; custom_margin=&#8221;0px||0px||false|false&#8221; custom_padding=&#8221;8px|24px|0px|24px|false|false&#8221; custom_padding_tablet=&#8221;8px|24px|8px|24px|false|false&#8221; custom_padding_phone=&#8221;24px|24px|8px|24px|false|false&#8221; custom_padding_last_edited=&#8221;off|desktop&#8221; hover_enabled=&#8221;0&#8243; custom_css_free_form=&#8221;.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:&#8217;Bebas Neue&#8217;;||    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%;||}&#8221; border_width_top=&#8221;4px&#8221; border_color_top=&#8221;#000000&#8243; border_width_right=&#8221;4px&#8221; border_color_right=&#8221;#000000&#8243; border_width_left=&#8221;4px&#8221; border_color_left=&#8221;#000000&#8243; global_colors_info=&#8221;{}&#8221; sticky_enabled=&#8221;0&#8243;]<\/p>\n<div class=\"info2\"> <!-- [et_pb_line_break_holder] --><pee><!-- [et_pb_line_break_holder] --> DreamPitch was an interactive voting experience designed for a large-format touchscreen display  where attendees could help choose the winning startup pitch. They could explore pitches from three AI startup founders, watch their videos, cast a vote, and add a suggested session to their agenda. Starting from a provided user flow and requirements, I created wireframes to visualize the experience and align stakeholders, then developed the UI direction, interface patterns, and component system. The final visual execution was refined in collaboration with a Design Director, who provided art direction and layout feedback across select screens.<!-- [et_pb_line_break_holder] -->  <\/pee><!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->\t<\/div>\n<p>  [\/et_pb_code][et_pb_code admin_label=&#8221;content area&#8221; _builder_version=&#8221;4.27.9&#8243; _module_preset=&#8221;default&#8221; background_enable_color=&#8221;off&#8221; custom_margin=&#8221;0px||0px||false|false&#8221; custom_padding=&#8221;0px|24px|0px|24px|false|false&#8221; custom_padding_tablet=&#8221;8px|24px|8px|24px|false|false&#8221; custom_padding_phone=&#8221;24px|24px|8px|24px|false|false&#8221; custom_padding_last_edited=&#8221;on|phone&#8221; hover_enabled=&#8221;0&#8243; custom_css_free_form=&#8221;.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:&#8217;Bebas Neue&#8217;;||    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%;||}&#8221; border_color_top=&#8221;#000000&#8243; border_width_right=&#8221;4px&#8221; border_color_right=&#8221;#000000&#8243; border_width_left=&#8221;4px&#8221; border_color_left=&#8221;#000000&#8243; global_colors_info=&#8221;{}&#8221; sticky_enabled=&#8221;0&#8243;]<video autoplay muted loop playsinline preload=\"auto\" style=\"width:100%; height:auto;\"><!-- [et_pb_line_break_holder] --><source src=\"https:\/\/charmdomacena.com\/portfolio\/wp-content\/uploads\/2026\/09\/dreampitch-prototype-demo-v3.mp4\" type=\"video\/mp4\"><!-- [et_pb_line_break_holder] --><\/video><!-- [et_pb_line_break_holder] -->[\/et_pb_code][et_pb_code admin_label=&#8221;content area&#8221; _builder_version=&#8221;4.27.9&#8243; _module_preset=&#8221;default&#8221; background_enable_color=&#8221;off&#8221; custom_margin=&#8221;-24px||0px||false|false&#8221; custom_padding=&#8221;48px|24px|24px|24px|false|false&#8221; hover_enabled=&#8221;0&#8243; custom_css_free_form=&#8221;.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:&#8217;Bebas Neue&#8217;;||    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%;||}&#8221; border_color_top=&#8221;#000000&#8243; border_width_right=&#8221;4px&#8221; border_color_right=&#8221;#000000&#8243; border_color_bottom=&#8221;#000000&#8243; border_width_left=&#8221;4px&#8221; border_color_left=&#8221;#000000&#8243; global_colors_info=&#8221;{}&#8221; sticky_enabled=&#8221;0&#8243;]<pee><!-- [et_pb_line_break_holder] --><strong>Designing the full experience<\/strong><!\u2013- [et_pb_br_holder] -\u2013><!-- [et_pb_line_break_holder] -->The final experience extended the core voting flow into a flexible set of screen states and templates. I developed the UI system and primary layouts, with select screens refined collaboratively based on art direction and feedback from client stakeholders and product owners.<\/pee><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->[\/et_pb_code][et_pb_image src=&#8221;https:\/\/charmdomacena.com\/portfolio\/wp-content\/uploads\/2026\/09\/dp-flow-3.png&#8221; title_text=&#8221;dp-flow-3&#8243; align=&#8221;center&#8221; force_fullwidth=&#8221;on&#8221; _builder_version=&#8221;4.27.9&#8243; _module_preset=&#8221;default&#8221; custom_margin=&#8221;||0px|||&#8221; custom_padding=&#8221;0px|0px|0px|0px|false|false&#8221; hover_enabled=&#8221;0&#8243; border_width_right=&#8221;4px&#8221; border_width_left=&#8221;4px&#8221; global_colors_info=&#8221;{}&#8221; sticky_enabled=&#8221;0&#8243;][\/et_pb_image][et_pb_code admin_label=&#8221;content area&#8221; _builder_version=&#8221;4.27.9&#8243; _module_preset=&#8221;default&#8221; background_enable_color=&#8221;off&#8221; custom_margin=&#8221;-24px||0px||false|false&#8221; custom_padding=&#8221;48px|24px|24px|24px|false|false&#8221; hover_enabled=&#8221;0&#8243; custom_css_free_form=&#8221;.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:&#8217;Bebas Neue&#8217;;||    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%;||}&#8221; border_color_top=&#8221;#000000&#8243; border_width_right=&#8221;4px&#8221; border_color_right=&#8221;#000000&#8243; border_color_bottom=&#8221;#000000&#8243; border_width_left=&#8221;4px&#8221; border_color_left=&#8221;#000000&#8243; global_colors_info=&#8221;{}&#8221; sticky_enabled=&#8221;0&#8243;]<pee><strong>From flow to interface<\/strong><!\u2013- [et_pb_br_holder] -\u2013><!-- [et_pb_line_break_holder] -->Using the provided user flow as a starting point, I translated the concept into wireframes to define the structure, interaction sequence, and key states before moving into visual design and collaborative refinement.<\/pee><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->[\/et_pb_code][et_pb_image src=&#8221;https:\/\/charmdomacena.com\/portfolio\/wp-content\/uploads\/2026\/09\/dp-wireframes-scaled.png&#8221; title_text=&#8221;dp-wireframes&#8221; align=&#8221;center&#8221; force_fullwidth=&#8221;on&#8221; _builder_version=&#8221;4.27.9&#8243; _module_preset=&#8221;default&#8221; custom_margin=&#8221;||0px|||&#8221; custom_padding=&#8221;0px|0px|0px|0px|false|false&#8221; hover_enabled=&#8221;0&#8243; border_width_right=&#8221;4px&#8221; border_width_left=&#8221;4px&#8221; global_colors_info=&#8221;{}&#8221; sticky_enabled=&#8221;0&#8243;][\/et_pb_image][et_pb_code admin_label=&#8221;content area&#8221; _builder_version=&#8221;4.27.5&#8243; _module_preset=&#8221;default&#8221; background_enable_color=&#8221;off&#8221; custom_margin=&#8221;-24px||24px||false|false&#8221; custom_padding=&#8221;16px|24px|24px|24px|false|false&#8221; custom_css_free_form=&#8221;.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:&#8217;Bebas Neue&#8217;;||    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%;||}&#8221; border_color_top=&#8221;#000000&#8243; border_width_right=&#8221;4px&#8221; border_color_right=&#8221;#000000&#8243; border_width_bottom=&#8221;4px&#8221; border_color_bottom=&#8221;#000000&#8243; border_width_left=&#8221;4px&#8221; border_color_left=&#8221;#000000&#8243; global_colors_info=&#8221;{}&#8221;][\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"nf_dc_page":"","_et_pb_use_builder":"on","_et_pb_old_content":"<!-- wp:divi\/placeholder \/-->","_et_gb_content_width":"","_monsterinsights_skip_tracking":false,"footnotes":""},"project_category":[14,6,8,12,4],"project_tag":[],"class_list":["post-3310","project","type-project","status-publish","hentry","project_category-digital-design","project_category-user-experience","project_category-product-design","project_category-user-interface","project_category-visual-design"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Salesforce Dreamforce - Charm Domacena - Product &amp; Visual Designer<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/charmdomacena.com\/portfolio\/project\/dreamforce-2026\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Salesforce Dreamforce - Charm Domacena - Product &amp; Visual Designer\" \/>\n<meta property=\"og:url\" content=\"https:\/\/charmdomacena.com\/portfolio\/project\/dreamforce-2026\/\" \/>\n<meta property=\"og:site_name\" content=\"Charm Domacena - Product &amp; Visual Designer\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-26T01:26:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/charmdomacena.com\/portfolio\/wp-content\/uploads\/2026\/09\/09-security-challenge-scoreboard-wall-display.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/charmdomacena.com\\\/portfolio\\\/project\\\/dreamforce-2026\\\/\",\"url\":\"https:\\\/\\\/charmdomacena.com\\\/portfolio\\\/project\\\/dreamforce-2026\\\/\",\"name\":\"Salesforce Dreamforce - Charm Domacena - Product &amp; Visual Designer\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/charmdomacena.com\\\/portfolio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/charmdomacena.com\\\/portfolio\\\/project\\\/dreamforce-2026\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/charmdomacena.com\\\/portfolio\\\/project\\\/dreamforce-2026\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/charmdomacena.com\\\/portfolio\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/09-security-challenge-scoreboard-wall-display.png\",\"datePublished\":\"2026-09-23T02:18:54+00:00\",\"dateModified\":\"2026-09-26T01:26:59+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/charmdomacena.com\\\/portfolio\\\/project\\\/dreamforce-2026\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/charmdomacena.com\\\/portfolio\\\/project\\\/dreamforce-2026\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/charmdomacena.com\\\/portfolio\\\/project\\\/dreamforce-2026\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/charmdomacena.com\\\/portfolio\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/09-security-challenge-scoreboard-wall-display.png?fit=2360%2C1497&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/charmdomacena.com\\\/portfolio\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/09-security-challenge-scoreboard-wall-display.png?fit=2360%2C1497&ssl=1\",\"width\":2360,\"height\":1497},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/charmdomacena.com\\\/portfolio\\\/project\\\/dreamforce-2026\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/charmdomacena.com\\\/portfolio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Projects\",\"item\":\"https:\\\/\\\/charmdomacena.com\\\/portfolio\\\/project\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Salesforce Dreamforce\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/charmdomacena.com\\\/portfolio\\\/#website\",\"url\":\"https:\\\/\\\/charmdomacena.com\\\/portfolio\\\/\",\"name\":\"Charm Domacena - Product &amp; Visual Designer\",\"description\":\"Product &amp; Visual Designer based in California\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/charmdomacena.com\\\/portfolio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Salesforce Dreamforce - Charm Domacena - Product &amp; Visual Designer","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/charmdomacena.com\/portfolio\/project\/dreamforce-2026\/","og_locale":"en_US","og_type":"article","og_title":"Salesforce Dreamforce - Charm Domacena - Product &amp; Visual Designer","og_url":"https:\/\/charmdomacena.com\/portfolio\/project\/dreamforce-2026\/","og_site_name":"Charm Domacena - Product &amp; Visual Designer","article_modified_time":"2026-09-26T01:26:59+00:00","og_image":[{"url":"https:\/\/charmdomacena.com\/portfolio\/wp-content\/uploads\/2026\/09\/09-security-challenge-scoreboard-wall-display.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/charmdomacena.com\/portfolio\/project\/dreamforce-2026\/","url":"https:\/\/charmdomacena.com\/portfolio\/project\/dreamforce-2026\/","name":"Salesforce Dreamforce - Charm Domacena - Product &amp; Visual Designer","isPartOf":{"@id":"https:\/\/charmdomacena.com\/portfolio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/charmdomacena.com\/portfolio\/project\/dreamforce-2026\/#primaryimage"},"image":{"@id":"https:\/\/charmdomacena.com\/portfolio\/project\/dreamforce-2026\/#primaryimage"},"thumbnailUrl":"https:\/\/charmdomacena.com\/portfolio\/wp-content\/uploads\/2026\/09\/09-security-challenge-scoreboard-wall-display.png","datePublished":"2026-09-23T02:18:54+00:00","dateModified":"2026-09-26T01:26:59+00:00","breadcrumb":{"@id":"https:\/\/charmdomacena.com\/portfolio\/project\/dreamforce-2026\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/charmdomacena.com\/portfolio\/project\/dreamforce-2026\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/charmdomacena.com\/portfolio\/project\/dreamforce-2026\/#primaryimage","url":"https:\/\/i0.wp.com\/charmdomacena.com\/portfolio\/wp-content\/uploads\/2026\/09\/09-security-challenge-scoreboard-wall-display.png?fit=2360%2C1497&ssl=1","contentUrl":"https:\/\/i0.wp.com\/charmdomacena.com\/portfolio\/wp-content\/uploads\/2026\/09\/09-security-challenge-scoreboard-wall-display.png?fit=2360%2C1497&ssl=1","width":2360,"height":1497},{"@type":"BreadcrumbList","@id":"https:\/\/charmdomacena.com\/portfolio\/project\/dreamforce-2026\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/charmdomacena.com\/portfolio\/"},{"@type":"ListItem","position":2,"name":"Projects","item":"https:\/\/charmdomacena.com\/portfolio\/project\/"},{"@type":"ListItem","position":3,"name":"Salesforce Dreamforce"}]},{"@type":"WebSite","@id":"https:\/\/charmdomacena.com\/portfolio\/#website","url":"https:\/\/charmdomacena.com\/portfolio\/","name":"Charm Domacena - Product &amp; Visual Designer","description":"Product &amp; Visual Designer based in California","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/charmdomacena.com\/portfolio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/charmdomacena.com\/portfolio\/wp-json\/wp\/v2\/project\/3310","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/charmdomacena.com\/portfolio\/wp-json\/wp\/v2\/project"}],"about":[{"href":"https:\/\/charmdomacena.com\/portfolio\/wp-json\/wp\/v2\/types\/project"}],"author":[{"embeddable":true,"href":"https:\/\/charmdomacena.com\/portfolio\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/charmdomacena.com\/portfolio\/wp-json\/wp\/v2\/comments?post=3310"}],"version-history":[{"count":19,"href":"https:\/\/charmdomacena.com\/portfolio\/wp-json\/wp\/v2\/project\/3310\/revisions"}],"predecessor-version":[{"id":3506,"href":"https:\/\/charmdomacena.com\/portfolio\/wp-json\/wp\/v2\/project\/3310\/revisions\/3506"}],"wp:attachment":[{"href":"https:\/\/charmdomacena.com\/portfolio\/wp-json\/wp\/v2\/media?parent=3310"}],"wp:term":[{"taxonomy":"project_category","embeddable":true,"href":"https:\/\/charmdomacena.com\/portfolio\/wp-json\/wp\/v2\/project_category?post=3310"},{"taxonomy":"project_tag","embeddable":true,"href":"https:\/\/charmdomacena.com\/portfolio\/wp-json\/wp\/v2\/project_tag?post=3310"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}