{"id":1243,"date":"2026-06-15T16:49:36","date_gmt":"2026-06-15T16:49:36","guid":{"rendered":"https:\/\/peterbsimon.local\/?page_id=1243"},"modified":"2026-06-17T09:40:43","modified_gmt":"2026-06-17T09:40:43","slug":"alitu","status":"publish","type":"page","link":"https:\/\/peterbsimon.com\/work\/alitu\/","title":{"rendered":"Website for a SaaS Product"},"content":{"rendered":"\n<section class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group pbs-container is-layout-flow wp-block-group-is-layout-flow\" style=\"padding-top:var(--wp--preset--spacing--80);padding-bottom:var(--wp--preset--spacing--80)\">\n<article id=\"article\" class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n<section id=\"hero\" class=\"wp-block-group article-hero is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group article-hero__text is-vertical is-layout-flex wp-container-core-group-is-layout-98bb686d wp-block-group-is-layout-flex\">\n<p class=\"has-shade-40-color has-text-color has-link-color has-secondary-font-family has-h-4-font-size wp-elements-0ece2a06cf2eaea17a1d2d424da5ddc9\"><em>Alitu.com<\/em><\/p>\n\n\n<h2 class=\"wp-block-post-title has-text-color has-shade-70-color has-h-2-font-size has-secondary-font-family\">Website for a SaaS Product<\/h2>\n\n\n<p class=\"has-p-1-font-size\">Alitu is an <strong>all-in-one podcast creation platform<\/strong> that helps creators record, edit, publish and host podcasts without needing professional audio engineering skills.<\/p>\n\n\n\n<p class=\"has-p-1-font-size\"><a href=\"https:\/\/preview.everlydesigns.co.uk\/homestead\/\" target=\"_blank\" rel=\"noreferrer noopener\"><\/a><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-background is-layout-flow wp-block-group-is-layout-flow\" style=\"border-top-left-radius:var(--wp--preset--border-radius--md);border-top-right-radius:var(--wp--preset--border-radius--md);border-bottom-left-radius:var(--wp--preset--border-radius--md);border-bottom-right-radius:var(--wp--preset--border-radius--md);background-color:#7b2bee;padding-top:var(--wp--preset--spacing--60);padding-right:var(--wp--preset--spacing--60);padding-left:var(--wp--preset--spacing--60)\"><figure class=\"wp-block-post-featured-image\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"588\" src=\"https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-22981-1.jpg\" class=\"attachment-post-thumbnail size-post-thumbnail wp-post-image\" alt=\"Frame\" style=\"object-fit:cover;\" srcset=\"https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-22981-1.jpg 880w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-22981-1-300x200.jpg 300w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-22981-1-768x513.jpg 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/figure><\/div>\n<\/section>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<div class=\"wp-block-group article-main is-layout-flow wp-block-group-is-layout-flow\">\n<aside id=\"side\" class=\"wp-block-group article-sidebar pbs-article-styling is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"wp-block-heading\">Overview<\/h2>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<div style=\"height:16px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>I was <strong>responsible for modernising the website<\/strong> experience, translating product capabilities into <strong>engaging visual stories<\/strong> and creating a <strong>scalable marketing website<\/strong> in <strong>Webflow<\/strong>.<\/p>\n\n\n\n<p>My work focused on:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>front-end<\/strong> implementation<\/li>\n\n\n\n<li>visual design, <strong>illustration<\/strong>, <strong>motion<\/strong> graphics, expressive <strong>icons<\/strong><\/li>\n<\/ul>\n\n\n\n<p>&#8230;to help <strong>communicate complex<\/strong> product <strong>features<\/strong> <strong>in a way<\/strong> <strong>that felt approachable<\/strong> and <strong>easy to understand<\/strong>.<\/p>\n<\/aside>\n\n\n\n<div id=\"content\" class=\"wp-block-group article-body pbs-article-styling is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">The Challenge<\/h2>\n\n\n\n<p>The existing <strong>website was beginning to feel visually dated<\/strong> and lacked clear ways to demonstrate how the software worked. The challenge was not simply redesigning the website, but <strong>creating a more engaging way to communicate the product&#8217;s value.<\/strong><\/p>\n\n\n\n<p>The new website needed to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Feel <strong>modern and professional<\/strong><\/li>\n\n\n\n<li>Better reflect the <strong>quality<\/strong> of the product and <strong>explain features visually<\/strong><\/li>\n\n\n\n<li><strong>Improve consistency<\/strong> across the marketing<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Visual Design<\/h2>\n\n\n\n<p>A major focus of the project was <strong>refreshing the visual language<\/strong> of the website. I redesigned key sections of the user experience to create a <strong>cleaner<\/strong>, more <strong>contemporary look<\/strong> while maintaining the <strong>approachable personality<\/strong> <strong>of the Alitu brand<\/strong>.<\/p>\n\n\n\n<p>This included:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Refined typography<\/strong> and spacing<\/li>\n\n\n\n<li>Improved <strong>visual hierarchy<\/strong><\/li>\n\n\n\n<li>More <strong>consistent layouts<\/strong><\/li>\n\n\n\n<li>Better <strong>mobile<\/strong> experiences<\/li>\n<\/ul>\n\n\n\n<p>The result was a website that felt <strong>more polished<\/strong>, <strong>trustworthy<\/strong> and aligned with the maturity of the product.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Before:<\/h3>\n\n\n\n<figure class=\"wp-block-image alignwide size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"588\" src=\"https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-23351-1024x588.jpg\" alt=\"Frame\" class=\"wp-image-1246\" srcset=\"https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-23351-1024x588.jpg 1024w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-23351-300x172.jpg 300w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-23351-768x441.jpg 768w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-23351-1536x882.jpg 1536w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-23351-2048x1176.jpg 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">After:<\/h3>\n\n\n\n<figure class=\"wp-block-image alignwide size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1713\" src=\"https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-23356-scaled.jpg\" alt=\"Frame\" class=\"wp-image-1247\" srcset=\"https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-23356-scaled.jpg 2560w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-23356-300x201.jpg 300w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-23356-1024x685.jpg 1024w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-23356-768x514.jpg 768w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-23356-1536x1028.jpg 1536w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-23356-2048x1370.jpg 2048w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Information Architecture and UX<\/h2>\n\n\n\n<p>Before moving into visual design, I created <strong>wireframes<\/strong> to explore page layouts, <strong>content hierarchy<\/strong> and help me arrive at a set of <strong>reusable components<\/strong> I would create. Wireframes were used to <strong>align with the marketing team<\/strong> throughout and ensure the right features of the product were communicated.<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1157\" src=\"https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-23358-scaled.jpg\" alt=\"Frame\" class=\"wp-image-1248\" srcset=\"https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-23358-scaled.jpg 2560w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-23358-300x136.jpg 300w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-23358-1024x463.jpg 1024w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-23358-768x347.jpg 768w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-23358-1536x694.jpg 1536w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-23358-2048x925.jpg 2048w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><\/figure>\n\n\n\n<p>I later conducted lightweight <strong>user testing<\/strong> via UserBrain.com to evaluate how easily visitors could understand key product benefits and find relevant information. The findings informed several refinements to the website in order to help create a <strong>clearer and more intuitive experience.<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Custom Illustrations<\/h2>\n\n\n\n<p>To help <strong>differentiate Alitu<\/strong> from competitors, I created a <strong>library of custom graphics<\/strong> and <strong>icons<\/strong> used throughout the website \u2014 they helped <strong>communicate product concepts<\/strong> while reinforcing a <strong>consistent visual identity<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-full is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"1095\" height=\"2560\" src=\"https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-23370-scaled.png\" alt=\"Frame\" class=\"wp-image-1265\" srcset=\"https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-23370.png 1095w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-23370-128x300.png 128w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-23370-438x1024.png 438w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-23370-768x1795.png 768w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-23370-657x1536.png 657w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-23370-876x2048.png 876w\" sizes=\"auto, (max-width: 1095px) 100vw, 1095px\"><\/figure>\n\n\n\n<p>The <strong>illustration system<\/strong> was designed to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Simplify<\/strong> complex concepts and support product <strong>storytelling<\/strong><\/li>\n\n\n\n<li>Improve <strong>visual consistency<\/strong><\/li>\n\n\n\n<li>Reduce reliance on generic <strong>stock imagery<\/strong><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Motion Design<\/h2>\n\n\n\n<p>Many of Alitu&#8217;s key benefits, such as automated editing and streamlined podcast production, are difficult to <strong>communicate effectively<\/strong> through written content alone.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1204\" style=\"aspect-ratio: 1662 \/ 1204;\" width=\"1662\" autoplay loop muted preload=\"auto\" src=\"https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/CleanShot-2026-06-15-at-5-.28.33.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p>To address this, I <strong>created a series of animated product demos<\/strong>. I used Jitter, a new online animation tool, to deliver animations within a few days. Animations were added to Webflow website using Lottie files.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"850\" style=\"aspect-ratio: 1662 \/ 850;\" width=\"1662\" autoplay loop muted preload=\"auto\" src=\"https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/CleanShot-2026-06-15-at-5-.29.58.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p>The <strong>animations were incredibly performant and quick to load<\/strong>, thanks to using modern web animation techniques instead of heavy videos.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"790\" style=\"aspect-ratio: 1662 \/ 790;\" width=\"1662\" autoplay loop muted preload=\"auto\" src=\"https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/CleanShot-2026-06-15-at-5-.31.14.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p>These animations allowed visitors to quickly understand:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>How the platform works<\/li>\n\n\n\n<li>How quickly podcasts can be produced<\/li>\n\n\n\n<li>Powerful simplicity of the workflow<\/li>\n<\/ul>\n\n\n\n<p><strong>Rather than telling<\/strong> users what the product could do, the <strong>animations showed the process<\/strong> visually, <strong>reducing friction<\/strong> and <strong>helping visitors understand<\/strong> the product <strong>in seconds<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Building in Webflow<\/h2>\n\n\n\n<p>I was responsible for <strong>implementing the designs within Webflow<\/strong> and <strong>establishing reusable structures<\/strong> that supported <strong>future growth<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"767\" src=\"https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-23375-1-1024x767.jpg\" alt=\"Frame 23375 (1)\" class=\"wp-image-1256\" srcset=\"https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-23375-1-1024x767.jpg 1024w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-23375-1-300x225.jpg 300w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-23375-1-768x575.jpg 768w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-23375-1-1536x1151.jpg 1536w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-23375-1-2048x1534.jpg 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>This included:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Building <strong>responsive page layouts<\/strong><\/li>\n\n\n\n<li>Implementing <strong>custom interactions<\/strong> and animations<\/li>\n\n\n\n<li>Creating reusable <strong>components<\/strong> and maintaining <strong>visual consistency<\/strong><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Feature in Apple&#8217;s WWDC 2025<\/h2>\n\n\n\n<p>The website played an important role in communicating the value of Alitu\u2014the platform continued to gain recognition within the podcasting industry and was featured during <strong>Apple&#8217;s Worldwide Developers Conference<\/strong> (WWDC):<\/p>\n\n\n\n<script src=\"https:\/\/fast.wistia.com\/player.js\" async><\/script><script src=\"https:\/\/fast.wistia.com\/embed\/3b8gkcjv2v.js\" async type=\"module\"><\/script><style>wistia-player[media-id='3b8gkcjv2v']:not(:defined) { background: center \/ contain no-repeat url('https:\/\/fast.wistia.com\/embed\/medias\/3b8gkcjv2v\/swatch'); display: block; filter: blur(5px); padding-top:56.25%; }<\/style> <wistia-player media-id=\"3b8gkcjv2v\" aspect=\"1.7777777777777777\"><\/wistia-player>\n\n\n\n<h2 class=\"wp-block-heading\">Results<\/h2>\n\n\n\n<p>The project delivered a more <strong>modern and engaging<\/strong> marketing experience that better communicated the value of the Alitu platform.<\/p>\n\n\n\n<p><strong>Key outcomes<\/strong> included:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Complete <strong>visual refresh<\/strong> of the marketing website<\/li>\n\n\n\n<li>Creation of a <strong>custom illustration<\/strong> and <strong>icon library<\/strong>, supporting stronger communication of product benefits<\/li>\n\n\n\n<li>Development of <strong>motion graphics<\/strong> that explained key features<\/li>\n\n\n\n<li><strong>Scalable Webflow implementation<\/strong><\/li>\n\n\n\n<li>Improved mobile and <strong>responsive<\/strong> experiences<\/li>\n<\/ul>\n\n\n\n<p>Most importantly, the website became a more <strong>effective storytelling<\/strong> tool, helping visitors understand the product quickly through a combination of <strong>design, illustration and motion<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Get in touch<\/h2>\n\n\n\n<p>I hope you enjoyed this case study and revisiting this chapter with me. If you like what you see here and want to get in touch, I&#8217;d love to hear from you.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-container-core-buttons-is-layout-5459b461 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/peterbsimon.com\/work\/contact\/\">Get in touch<\/a><\/div>\n\n\n\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/peterbsimon.com\/work\/#portfolio\">See all projects<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/article>\n<\/div>\n<\/section>\n","protected":false},"excerpt":{"rendered":"<p>Alitu.com Alitu is an all-in-one podcast creation platform that helps creators record, edit, publish and host podcasts without needing professional audio engineering skills. Overview I was responsible for modernising the website experience, translating product capabilities into engaging visual stories and creating a scalable marketing website in Webflow. My work focused on: &#8230;to help communicate complex [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1210,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"slim_seo":{"title":"Website for a SaaS Product","description":"I was responsible for modernising the website experience, translating product capabilities into engaging visual stories and creating a scalable marketing website in Webflow."},"footnotes":""},"class_list":["post-1243","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/peterbsimon.com\/work\/wp-json\/wp\/v2\/pages\/1243","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/peterbsimon.com\/work\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/peterbsimon.com\/work\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/peterbsimon.com\/work\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/peterbsimon.com\/work\/wp-json\/wp\/v2\/comments?post=1243"}],"version-history":[{"count":12,"href":"https:\/\/peterbsimon.com\/work\/wp-json\/wp\/v2\/pages\/1243\/revisions"}],"predecessor-version":[{"id":1271,"href":"https:\/\/peterbsimon.com\/work\/wp-json\/wp\/v2\/pages\/1243\/revisions\/1271"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/peterbsimon.com\/work\/wp-json\/wp\/v2\/media\/1210"}],"wp:attachment":[{"href":"https:\/\/peterbsimon.com\/work\/wp-json\/wp\/v2\/media?parent=1243"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}