{"id":1272,"date":"2026-06-15T18:04:43","date_gmt":"2026-06-15T18:04:43","guid":{"rendered":"https:\/\/peterbsimon.local\/?page_id=1272"},"modified":"2026-06-15T18:09:39","modified_gmt":"2026-06-15T18:09:39","slug":"indypod","status":"publish","type":"page","link":"https:\/\/peterbsimon.com\/work\/indypod\/","title":{"rendered":"Landing Page Design"},"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-72408e13032514fce020f7738acb3434\"><em>IndyPod<\/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\">Landing Page Design<\/h2>\n\n\n<p class=\"has-p-1-font-size\">IndyPod is an online community and learning platform that helps podcasters develop their skills through expert-led courses and support from other creators.<\/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:#232963;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-22986-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-22986-1.jpg 880w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-22986-1-300x200.jpg 300w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-22986-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\">About<\/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>For this project, I was tasked with <strong>designing and building<\/strong> a new <strong>landing page<\/strong> to support a <strong>marketing campaign<\/strong>.<\/p>\n\n\n\n<p><strong>Working from a content brief<\/strong> provided by the Growth team, I transformed a Notion document into a <strong>fully responsive landing page<\/strong> in <strong>Webflow<\/strong>.<\/p>\n\n\n\n<p>My <strong>responsibilities<\/strong> included:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>wireframing,<\/li>\n\n\n\n<li>visual design,<\/li>\n\n\n\n<li>illustration<\/li>\n\n\n\n<li>front-end implementation<\/li>\n<\/ul>\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\">From Brief to Wireframe<\/h2>\n\n\n\n<p>The project <strong>began with a content brief<\/strong> outlining the messaging, goals and structure of the landing page. I translated these <strong>requirements<\/strong> into mid-fidelity wireframes, exploring content hierarchy and page structure before moving into visual design. This process ensured the final design supported <strong>marketing objectives<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"917\" src=\"https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/CleanShot-2026-06-15-at-6-.34.25-1024x917.png\" alt=\"CleanShot 2026 06 15 at 6\u202f.34.25\" class=\"wp-image-1274\" srcset=\"https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/CleanShot-2026-06-15-at-6-.34.25-1024x917.png 1024w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/CleanShot-2026-06-15-at-6-.34.25-300x269.png 300w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/CleanShot-2026-06-15-at-6-.34.25-768x688.png 768w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/CleanShot-2026-06-15-at-6-.34.25.png 1336w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Copy and marketing requirements were transformed into a mid-fidelity wireframe and used to drive further iterations<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Distinct Visual Style<\/h2>\n\n\n\n<p>I developed a visual design that balanced educational <strong>credibility<\/strong> with a <strong>friendly and accessible<\/strong> personality. <strong>Careful attention<\/strong> was given to <strong>typography<\/strong>, <strong>spacing<\/strong>, <strong>colour<\/strong> and <strong>hierarchy<\/strong> to ensure content remained <strong>easy to scan<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-full\" style=\"margin-top:var(--wp--preset--spacing--60);margin-bottom:var(--wp--preset--spacing--60)\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"891\" src=\"https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-3182-scaled.jpg\" alt=\"Frame\" class=\"wp-image-1275\" srcset=\"https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-3182-scaled.jpg 2560w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-3182-300x104.jpg 300w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-3182-1024x356.jpg 1024w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-3182-768x267.jpg 768w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-3182-1536x535.jpg 1536w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-3182-2048x713.jpg 2048w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><\/figure>\n\n\n\n<p>The final design helped <strong>communicate the value<\/strong> of the courses and community while creating a polished experience that felt <strong>consistent with the wider brand.<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Custom Illustrations<\/h2>\n\n\n\n<p>To support the content and create a more memorable experience, I designed a set of custom illustrations specifically for the landing page.<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1063\" height=\"2560\" src=\"https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-3187-1-scaled.jpg\" alt=\"Frame 3187 (1)\" class=\"wp-image-1280\" srcset=\"https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-3187-1.jpg 1190w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-3187-1-scaled.jpg 1063w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-3187-1-125x300.jpg 125w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-3187-1-425x1024.jpg 425w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-3187-1-768x1850.jpg 768w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-3187-1-638x1536.jpg 638w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-3187-1-850x2048.jpg 850w\" sizes=\"auto, (max-width: 1190px) 100vw, 1190px\"><\/figure>\n\n\n\n<p>These illustrations helped break up long sections of content, communicate key ideas and add personality to the page without relying on generic stock imagery.<\/p>\n\n\n\n<p>By creating bespoke visual assets, the page achieved a more distinctive look while supporting the overall messaging and user experience.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Responsive Implementation<\/h2>\n\n\n\n<p>Once the designs were approved, I built the landing page in Webflow from scratch.<\/p>\n\n\n\n<p>The layout was designed responsively from the outset, ensuring the experience worked seamlessly across desktop, tablet and mobile devices. Components and spacing were carefully adapted to different screen sizes while maintaining visual consistency and usability.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\" style=\"margin-top:var(--wp--preset--spacing--60);margin-bottom:var(--wp--preset--spacing--60)\"><img loading=\"lazy\" decoding=\"async\" width=\"745\" height=\"1024\" src=\"https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-3183-745x1024.jpg\" alt=\"Frame\" class=\"wp-image-1276\" srcset=\"https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-3183-745x1024.jpg 745w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-3183-218x300.jpg 218w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-3183-768x1056.jpg 768w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-3183-1117x1536.jpg 1117w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-3183-1489x2048.jpg 1489w, https:\/\/peterbsimon.com\/work\/wp-content\/uploads\/2026\/06\/Frame-3183-scaled.jpg 1861w\" sizes=\"auto, (max-width: 745px) 100vw, 745px\" \/><\/figure>\n\n\n\n<p>The result was a fully responsive landing page that remained clear, engaging and easy to navigate regardless of device.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Results<\/h2>\n\n\n\n<p>The project successfully transformed a simple content brief into a polished marketing experience.<\/p>\n\n\n\n<p><strong>Key outcomes<\/strong> included:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Wireframes developed from <strong>stakeholder requirements<\/strong><\/li>\n\n\n\n<li><strong>Custom illustrations<\/strong> created specifically for the campaign<\/li>\n\n\n\n<li>Fully <strong>responsive design<\/strong> across desktop, tablet and mobile<\/li>\n\n\n\n<li><strong>End-to-end<\/strong> implementation in <strong>Webflow<\/strong><\/li>\n\n\n\n<li>A <strong>visually distinctive landing page<\/strong> aligned with the IndiePod brand<\/li>\n<\/ul>\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>IndyPod IndyPod is an online community and learning platform that helps podcasters develop their skills through expert-led courses and support from other creators. About For this project, I was tasked with designing and building a new landing page to support a marketing campaign. Working from a content brief provided by the Growth team, I transformed [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1128,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"slim_seo":{"title":"Landing Page Design - Peter Simon","description":"IndyPod IndyPod is an online community and learning platform that helps podcasters develop their skills through expert-led courses and support from other creato"},"footnotes":""},"class_list":["post-1272","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/peterbsimon.com\/work\/wp-json\/wp\/v2\/pages\/1272","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=1272"}],"version-history":[{"count":6,"href":"https:\/\/peterbsimon.com\/work\/wp-json\/wp\/v2\/pages\/1272\/revisions"}],"predecessor-version":[{"id":1283,"href":"https:\/\/peterbsimon.com\/work\/wp-json\/wp\/v2\/pages\/1272\/revisions\/1283"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/peterbsimon.com\/work\/wp-json\/wp\/v2\/media\/1128"}],"wp:attachment":[{"href":"https:\/\/peterbsimon.com\/work\/wp-json\/wp\/v2\/media?parent=1272"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}