{"id":795,"date":"2025-08-15T21:03:46","date_gmt":"2025-08-15T21:03:46","guid":{"rendered":"http:\/\/localhost:8888\/?p=795"},"modified":"2026-04-11T15:57:06","modified_gmt":"2026-04-11T15:57:06","slug":"html-bill","status":"publish","type":"portfolio","link":"https:\/\/www.rossomando.net\/index.php\/portfolio\/html-bill\/","title":{"rendered":"HTML Bill"},"content":{"rendered":"\n<div class=\"wp-block-media-text has-media-on-the-right is-stacked-on-mobile\" id=\"Image1\"><div class=\"wp-block-media-text__content\"><h2 class=\"wp-block-post-title\">HTML Bill<\/h2>\n\n\n<p style=\"padding-bottom:20px\"><strong>Role:<\/strong> Senior UI Designer<br><strong>Company:<\/strong> Altice \/ Optimum<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Context<\/h4>\n\n\n\n<p class=\"is-excerpt\">Previously, Optimum customers could only view a static PDF of their monthly bill online, offering little clarity on charges and savings. The goal of this project was to design a fully digital, interactive bill that clearly explained charges, highlighted savings, and encouraged customers to take advantage of features such as AutoPay. The experience also needed to handle multiple billing scenarios while remaining responsive across desktop and mobile.<\/p>\n<\/div><figure  class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"1536\" height=\"1024\" alt=\"\" src=\"https:\/\/www.rossomando.net\/wp-content\/uploads\/2025\/08\/HTML-Bill-Feature-Image.png\" class=\"wp-image-796 size-full\" srcset=\"https:\/\/www.rossomando.net\/wp-content\/uploads\/2025\/08\/HTML-Bill-Feature-Image.png 1536w, https:\/\/www.rossomando.net\/wp-content\/uploads\/2025\/08\/HTML-Bill-Feature-Image-300x200.png 300w, https:\/\/www.rossomando.net\/wp-content\/uploads\/2025\/08\/HTML-Bill-Feature-Image-1024x683.png 1024w, https:\/\/www.rossomando.net\/wp-content\/uploads\/2025\/08\/HTML-Bill-Feature-Image-768x512.png 768w\" sizes=\"auto, (max-width: 1536px) 100vw, 1536px\" \/><\/figure><\/div>\n\n\n\n<div class=\"wp-block-media-text is-stacked-on-mobile has-tertiary-background-color has-background\" style=\"padding-top:1px\" id=\"Image2\"><figure class=\"wp-block-media-text__media\"><a href=\"\/wp-content\/uploads\/2025\/08\/promo-past-amnt-due_1200-\u2013-2.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"811\" src=\"http:\/\/192.168.86.62\/wp-content\/uploads\/2025\/08\/HTML-Bill-Past-Due-1024x811.png\" alt=\"\" class=\"wp-image-802 size-full\" srcset=\"https:\/\/www.rossomando.net\/wp-content\/uploads\/2025\/08\/HTML-Bill-Past-Due-1024x811.png 1024w, https:\/\/www.rossomando.net\/wp-content\/uploads\/2025\/08\/HTML-Bill-Past-Due-300x238.png 300w, https:\/\/www.rossomando.net\/wp-content\/uploads\/2025\/08\/HTML-Bill-Past-Due-768x608.png 768w, https:\/\/www.rossomando.net\/wp-content\/uploads\/2025\/08\/HTML-Bill-Past-Due.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><div class=\"wp-block-media-text__content\">\n<h4 class=\"wp-block-heading\">My Contribution<\/h4>\n\n\n\n<p>As the Senior UI Designer, I designed an experience that improved clarity, engagement, and adaptability:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Clear Charge Breakdown:<\/strong> Transformed the bill from a static PDF into a dynamic, itemized view, making it easy for customers to understand exactly why they were being charged.<\/li>\n\n\n\n<li><strong>Promotional Messaging for AutoPay:<\/strong> Created a promotional area encouraging AutoPay enrollment. Once enrolled, this section dynamically switched to a message showing that the user was <em>not<\/em> enrolled, including a personalized savings amount to drive conversion.<\/li>\n<\/ul>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-media-text has-media-on-the-right is-stacked-on-mobile\" id=\"Image3\"><div class=\"wp-block-media-text__content\">\n<ul class=\"wp-block-list\">\n<li><strong>Savings Highlight:<\/strong> Designed a dedicated section that displayed customer savings, reinforcing value and transparency.<\/li>\n<\/ul>\n<\/div><figure class=\"wp-block-media-text__media\"><a href=\"\/wp-content\/uploads\/2025\/08\/promo-past-amnt-due_1200-\u2013-2.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"811\" src=\"http:\/\/192.168.86.62\/wp-content\/uploads\/2025\/08\/HTML-Bill-With-Savings-1024x811.png\" alt=\"\" class=\"wp-image-804 size-full\" srcset=\"https:\/\/www.rossomando.net\/wp-content\/uploads\/2025\/08\/HTML-Bill-With-Savings-1024x811.png 1024w, https:\/\/www.rossomando.net\/wp-content\/uploads\/2025\/08\/HTML-Bill-With-Savings-300x238.png 300w, https:\/\/www.rossomando.net\/wp-content\/uploads\/2025\/08\/HTML-Bill-With-Savings-768x608.png 768w, https:\/\/www.rossomando.net\/wp-content\/uploads\/2025\/08\/HTML-Bill-With-Savings.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div>\n\n\n\n<div class=\"wp-block-media-text is-stacked-on-mobile has-tertiary-background-color has-background\" style=\"padding-top:1px\" id=\"Image4\"><figure class=\"wp-block-media-text__media\"><a href=\"\/wp-content\/uploads\/2025\/08\/Promo-Past-amnt-due_1200-\u2013-1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"811\" src=\"http:\/\/192.168.86.62\/wp-content\/uploads\/2025\/08\/HTML-Bill-Past-Due-With-Alert-1-1024x811.png\" alt=\"\" class=\"wp-image-916 size-full\" srcset=\"https:\/\/www.rossomando.net\/wp-content\/uploads\/2025\/08\/HTML-Bill-Past-Due-With-Alert-1-1024x811.png 1024w, https:\/\/www.rossomando.net\/wp-content\/uploads\/2025\/08\/HTML-Bill-Past-Due-With-Alert-1-300x238.png 300w, https:\/\/www.rossomando.net\/wp-content\/uploads\/2025\/08\/HTML-Bill-Past-Due-With-Alert-1-768x608.png 768w, https:\/\/www.rossomando.net\/wp-content\/uploads\/2025\/08\/HTML-Bill-Past-Due-With-Alert-1.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><div class=\"wp-block-media-text__content\">\n<ul class=\"wp-block-list\">\n<li><strong>Scenario-Based Designs:<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>Past Due Scenario:<\/strong> Added a prominent alert at the top of the page to notify customers and prompt immediate action.<\/li>\n\n\n\n<li><strong>Bill Change Scenario:<\/strong> Introduced a \u201cWhat\u2019s Changed\u201d section to summarize all updated line items, allowing customers to see differences at a glance.<br><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-media-text has-media-on-the-right is-stacked-on-mobile\" id=\"Image5\"><div class=\"wp-block-media-text__content\">\n<ul class=\"wp-block-list\">\n<li><strong>Responsive Design:<\/strong> Delivered a mobile version that matched the functionality and clarity of the desktop version, ensuring a seamless experience across devices.<\/li>\n<\/ul>\n<\/div><figure class=\"wp-block-media-text__media\"><a href=\"\/wp-content\/uploads\/2025\/08\/Non-Promo-with-new-Autopay-opt-4-320.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"683\" src=\"http:\/\/192.168.86.62\/wp-content\/uploads\/2025\/08\/Mobile-HTML-BIll-Sample-1024x683.png\" alt=\"\" class=\"wp-image-920 size-full\" srcset=\"https:\/\/www.rossomando.net\/wp-content\/uploads\/2025\/08\/Mobile-HTML-BIll-Sample-1024x683.png 1024w, https:\/\/www.rossomando.net\/wp-content\/uploads\/2025\/08\/Mobile-HTML-BIll-Sample-300x200.png 300w, https:\/\/www.rossomando.net\/wp-content\/uploads\/2025\/08\/Mobile-HTML-BIll-Sample-768x512.png 768w, https:\/\/www.rossomando.net\/wp-content\/uploads\/2025\/08\/Mobile-HTML-BIll-Sample.png 1536w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div>\n\n\n\n<div class=\"wp-block-group has-tertiary-background-color has-background has-global-padding is-layout-constrained wp-container-core-group-is-layout-fa5608b5 wp-block-group-is-layout-constrained\" style=\"padding-top:5%;padding-right:25%;padding-bottom:5%;padding-left:5%\">\n<h4 class=\"wp-block-heading\">Outcome<\/h4>\n\n\n\n<p>The new digital bill experience provided customers with clarity and control over their billing information, reduced confusion around charges, and increased engagement with features like AutoPay. The responsive design ensured consistent usability and accessibility, resulting in a more transparent and user-friendly billing process.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Previously, Optimum customers could only view a static PDF of their monthly bill online, offering little clarity on charges and savings. The goal of this project was to design a fully digital, interactive bill that clearly explained charges, highlighted savings, and encouraged customers to take advantage of features such as AutoPay. The experience also needed to handle multiple billing scenarios while remaining responsive across desktop and mobile.<\/p>","protected":false},"featured_media":796,"template":"portfolio-template","meta":{"_acf_changed":false,"footnotes":""},"company":[11],"class_list":["post-795","portfolio","type-portfolio","status-publish","has-post-thumbnail","hentry","company-altice"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.rossomando.net\/index.php\/wp-json\/wp\/v2\/portfolio\/795","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rossomando.net\/index.php\/wp-json\/wp\/v2\/portfolio"}],"about":[{"href":"https:\/\/www.rossomando.net\/index.php\/wp-json\/wp\/v2\/types\/portfolio"}],"version-history":[{"count":26,"href":"https:\/\/www.rossomando.net\/index.php\/wp-json\/wp\/v2\/portfolio\/795\/revisions"}],"predecessor-version":[{"id":1754,"href":"https:\/\/www.rossomando.net\/index.php\/wp-json\/wp\/v2\/portfolio\/795\/revisions\/1754"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rossomando.net\/index.php\/wp-json\/wp\/v2\/media\/796"}],"wp:attachment":[{"href":"https:\/\/www.rossomando.net\/index.php\/wp-json\/wp\/v2\/media?parent=795"}],"wp:term":[{"taxonomy":"company","embeddable":true,"href":"https:\/\/www.rossomando.net\/index.php\/wp-json\/wp\/v2\/company?post=795"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}