{"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-10-16T22:30:20","modified_gmt":"2026-10-16T22:30:20","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; hover_enabled=&#8221;0&#8243; global_colors_info=&#8221;{}&#8221; sticky_enabled=&#8221;0&#8243;]<\/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, Interaction Design, Visual Systems<\/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; hover_enabled=&#8221;0&#8243; custom_css_free_form=&#8221;.darkLink {||  color:#000;||}||||.darkLink:hover {||text-decoration:underline;||  font-weight:400;||}&#8221; global_colors_info=&#8221;{}&#8221; sticky_enabled=&#8221;0&#8243;]<pee><!-- [et_pb_line_break_holder] -->For Dreamforce, I worked on two interactive competition experiences with different audiences and ways to participate. Security Challenge gave competitors a laptop-based challenge with a live leaderboard displaying results throughout the event. Dreampitch invited attendees to explore startup pitches, watch videos, and vote for their favorite through a large touchscreen installation.<!-- [et_pb_line_break_holder] --><!\u2013- [et_pb_br_holder] -\u2013><!\u2013- [et_pb_br_holder] -\u2013>I was responsible for the UI and visual design across both experiences, developing interface layouts, interaction patterns, and reusable components. For Security Challenge, I built on an established screen flow, refining layouts and identifying additional states. For Dreampitch, I worked from provided user flows and requirements to develop wireframes and final UI designs, collaborating with the Design Director and project team throughout development.<!-- [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] -->Security Challenge brought together individual laptop-based challenges and a live leaderboard for the room. Starting with an established screen flow, I refined the layouts, developed the UI system, and identified additional screen states to support different stages of the competition.<!-- [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; border_width_right=&#8221;4px&#8221; border_width_left=&#8221;4px&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_image][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; border_width_right=&#8221;4px&#8221; border_width_left=&#8221;4px&#8221; global_colors_info=&#8221;{}&#8221;][\/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>Alongside the individual challenge screens, I designed the live leaderboard for the larger event display, adapting the visual system to make competition results easy to follow from across 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; module_class=&#8221;leaderboard&#8221; _builder_version=&#8221;4.27.9&#8243; _module_preset=&#8221;default&#8221; background_enable_color=&#8221;off&#8221; text_orientation=&#8221;center&#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; 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;]<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>I explored different layout and visual directions for the competition screens, working through hierarchy, typography, and interface details before developing the final UI 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; border_width_right=&#8221;4px&#8221; border_width_left=&#8221;4px&#8221; global_colors_info=&#8221;{}&#8221;][\/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 a touchscreen voting experience where attendees could explore pitches from three AI startup founders, watch their videos, and vote for their favorite. Attendees could also add a suggested session to their agenda.<!-- [et_pb_line_break_holder] --><!\u2013- [et_pb_br_holder] -\u2013><!\u2013- [et_pb_br_holder] -\u2013><!-- [et_pb_line_break_holder] -->Starting from a provided user flow and requirements, I developed wireframes to establish the screen structure and interaction sequence before moving into UI and visual design. I also created the interface patterns and reusable components needed to support the different screens and voting states.<!-- [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; 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;]<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] -->Beyond the main voting flow, I designed the additional screens and interaction states needed to support the full experience. I developed consistent layouts and reusable components across the different pitch profiles, video content, voting screens, and supporting interactions, refining select screens with feedback from the Design Director, 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; border_width_right=&#8221;4px&#8221; border_width_left=&#8221;4px&#8221; global_colors_info=&#8221;{}&#8221;][\/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] -->I used the provided user flow to develop early wireframes, working through screen hierarchy, navigation, and key interaction states before moving into visual design. These also helped align the team on the experience before the final UI was developed.<\/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; border_width_right=&#8221;4px&#8221; border_width_left=&#8221;4px&#8221; global_colors_info=&#8221;{}&#8221;][\/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":[],"project_tag":[],"class_list":["post-3310","project","type-project","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Salesforce Dreamforce - Charm Domacena - Senior Experience Designer - Visual &amp; UI Design, Digital Experiences<\/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 - Senior Experience Designer - Visual &amp; UI Design, Digital Experiences\" \/>\n<meta property=\"og:url\" content=\"https:\/\/charmdomacena.com\/portfolio\/project\/dreamforce-2026\/\" \/>\n<meta property=\"og:site_name\" content=\"Charm Domacena - Senior Experience Designer - Visual &amp; UI Design, Digital Experiences\" \/>\n<meta property=\"article:modified_time\" content=\"2026-10-16T22:30:20+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 - Senior Experience Designer - Visual &amp; UI Design, Digital Experiences\",\"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-10-16T22:30:20+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 - Senior Experience Designer - Visual &amp; UI Design, Digital Experiences\",\"description\":\"Senior Experience Designer based in Seattle, WA\",\"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 - Senior Experience Designer - Visual &amp; UI Design, Digital Experiences","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 - Senior Experience Designer - Visual &amp; UI Design, Digital Experiences","og_url":"https:\/\/charmdomacena.com\/portfolio\/project\/dreamforce-2026\/","og_site_name":"Charm Domacena - Senior Experience Designer - Visual &amp; UI Design, Digital Experiences","article_modified_time":"2026-10-16T22:30:20+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 - Senior Experience Designer - Visual &amp; UI Design, Digital Experiences","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-10-16T22:30:20+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 - Senior Experience Designer - Visual &amp; UI Design, Digital Experiences","description":"Senior Experience Designer based in Seattle, WA","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":20,"href":"https:\/\/charmdomacena.com\/portfolio\/wp-json\/wp\/v2\/project\/3310\/revisions"}],"predecessor-version":[{"id":3548,"href":"https:\/\/charmdomacena.com\/portfolio\/wp-json\/wp\/v2\/project\/3310\/revisions\/3548"}],"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}]}}