{"id":11819,"date":"2016-01-29T13:46:07","date_gmt":"2016-01-29T21:46:07","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=11819"},"modified":"2026-03-09T19:57:47","modified_gmt":"2026-03-10T02:57:47","slug":"ux-case-study-designing-whitespace-to-improve-conversions","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/ux-case-study-designing-whitespace-to-improve-conversions\/","title":{"rendered":"UX Case Study: Designing Whitespace to Improve Conversions"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Whitespace is the blank canvas from which every design begins. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">The design elements contained on any website stand out or blend in based largely on the space around them. It\u2019s natural for content managers to want to fill all the \u201cempty space\u201d on their site, but that impulse negatively impact everything from brand reputation to conversion rate.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To ensure your site is converting at its highest potential, it\u2019s critical to design each section to preserve the limited attention span of your visitors. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">When used well, whitespace extends site visits and turn more browsers into buyers.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">What Is Whitespace?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">The more elements competing for attention, the less attention a user pays to the site.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Despite what the name might imply, whitespace is blank space of any color that is free of elements like images, videos, or text. As explained in the free ebook <\/span><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/visual-web-ui-design-colors-space-contrast\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">Web UI Design for the Human Eye<\/span><\/a><span style=\"font-weight: 400;\"> (Vol.1), you can use it \u00a0anywhere including in, around, and between: <\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Headers<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Menus<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Images<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Videos<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Text<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">List items<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Margins<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Gutters<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The footer.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Think of whitespace like a volume knob for site distractions. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">More whitespace equals less noise, making it easier to focus. When a site strikes the right balance of whitespace, it\u2019s easier to process and comprehend text, easier to decipher icons and images, and provides a better overall user experience.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Two famous examples of whitespace in action are <\/span><a href=\"https:\/\/google.com\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">Google\u2019s homepage<\/span><\/a><span style=\"font-weight: 400;\">, and the <\/span><a href=\"https:\/\/www.apple.com\/iphone\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">Apple iPhone page<\/span><\/a><span style=\"font-weight: 400;\">. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Both use plenty of whitespace to guide your attention to the most important elements. Google knows you\u2019re there to search, so they use whitespace to help you do what you came to do. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">The Apple iPhone page is a vertical flow of simple design elements, each with their own message and call to action. It\u2019s easy to process, and feels in line with the Apple\u2019s minimalist brand as a whole.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-11820\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/01\/image0211-1024x650.png\" alt=\"image02\" width=\"718\" height=\"456\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/01\/image0211-1024x650.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/01\/image0211-473x300.png 473w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/01\/image0211.png 1999w\" sizes=\"auto, (max-width: 718px) 100vw, 718px\" \/><\/p>\n<p><em>Photo credit: <a href=\"https:\/\/apple.com\" target=\"_blank\" rel=\"noopener noreferrer\">Apple<\/a><\/em><\/p>\n<p><span style=\"font-weight: 400;\">Typically when a site has little whitespace, it\u2019s because the people in charge aren\u2019t trained UI designers. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Non-designers tend to want to fill in the \u201cgaps\u201d and \u201cwasted space\u201d they see between content. They want to cram as much content as possible in \u201c<\/span><a href=\"https:\/\/uxmyths.com\/post\/654047943\/myth-people-dont-scroll\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">above the fold<\/span><\/a><span style=\"font-weight: 400;\">\u201d to make sure everything important is seen by every site visitor.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">But just like you wouldn\u2019t want to litter a nature preserve, there\u2019s no need to treat white space like wasted opportunity. <\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Too Much of a Good Thing<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">It\u2019s easy to imagine a site with too little spacing that feels cluttered and overwhelming. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">However, it\u2019s also possible to add too much white space. In that case, you\u2019ve created <\/span><a href=\"https:\/\/www.nngroup.com\/articles\/illusion-of-completeness\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">the illusion of completeness<\/span><\/a><span style=\"font-weight: 400;\">, making it appear that a user has reached the bottom of a page, when in fact there\u2019s a lot more to see.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This is especially important to keep in mind when designing your site\u2019s mobile experience. A lot of whitespace between elements may create a huge blank space on mobile, tricking your visitors into thinking there\u2019s nothing more to see. <\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Finding the Right Balance: 3 UX Case Studies <\/span><\/h2>\n<p><span style=\"font-weight: 400;\">When it\u2019s used well, whitespace makes a site easier to navigate. <\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">It improves the user experience by organizing content for easy comprehension.<\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">It creates a clear content hierarchy, separating elements from each other.<\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Finally, a site design with built in whitespace forces site managers to keep their message clear, reducing site clutter, and adding content that supports users on their journey.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">At <\/span><a href=\"https:\/\/thegood.com\"><span style=\"font-weight: 400;\">The Good<\/span><\/a><span style=\"font-weight: 400;\">, we try to improve conversion rates by continually testing small changes to a site\u2019s user experience over time. Whitespace is a key part of that testing arsenal. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here are a few examples from our client work to highlight the potential of small spacing changes to make a big difference on your site.<\/span><\/p>\n<h3>gDiapers<\/h3>\n<p><span style=\"font-weight: 400;\">While working with <\/span><a href=\"http:\/\/www.gdiapers.com\/\"><span style=\"font-weight: 400;\">gDiapers<\/span><\/a><span style=\"font-weight: 400;\"> to improve their site conversions, we noticed that the homepage banner area performed exceptionally well on mobile, but not so well on desktop. Mobile visitors had no problem clicking through to the Shop or Getting Started sections of the site. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Desktop visitors rarely used the banner area to navigate. Whitespace\u00a0helped change that user behavior.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-11821\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/01\/image0013-1024x418.png\" alt=\"image00\" width=\"721\" height=\"294\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/01\/image0013-1024x418.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/01\/image0013-700x286.png 700w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/01\/image0013.png 1358w\" sizes=\"auto, (max-width: 721px) 100vw, 721px\" \/><\/p>\n<p><i><span style=\"font-weight: 400;\">Original design on the left, revised design on the right. <\/span><\/i><\/p>\n<p><span style=\"font-weight: 400;\">Once we added some spacing between the main banner image and the two callouts below, Desktop visitors used them 150% more often, and the site\u2019s overall conversion rate lifted by nearly 20%.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The first version (above left) was the approved design that launched with the site. Everyone thought it looked great. Maybe it did, but the lack of spacing between the primary banner elements made them appear as if they were one piece of content without a clear call to action. Testing was the key to discovering higher performance and adjusting the site to align with visitor expectations.<\/span><\/p>\n<h3>Cummins Allison<\/h3>\n<p><span style=\"font-weight: 400;\">Another example of this is with Cummins Allison, a manufacturer of coin and currency counting machines. Their homepage was jam-packed with content. There was a persistent sidebar on every page, regardless of the content\u2019s relevance to that page. By adjusting the page layout to clear the clutter and create a more balanced visual hierarchy, their conversion rate improved and their bounce rate dropped dramatically.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-11823\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/01\/image0311-1024x306.png\" alt=\"image03\" width=\"720\" height=\"215\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/01\/image0311-1024x306.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/01\/image0311-700x209.png 700w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/01\/image0311.png 1264w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<p><i><span style=\"font-weight: 400;\">Original design on the left, revised design on the right.<\/span><\/i><\/p>\n<p><span style=\"font-weight: 400;\">Subtle design changes have a huge impact on performance. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">New design elements aren\u2019t always necessary though, as we saw on their product detail page below. We tested arranging the elements of the page in new variations, and removed the busy right-hand sidebar.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-11822\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/01\/image0112-1024x306.png\" alt=\"image01\" width=\"720\" height=\"215\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/01\/image0112-1024x306.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/01\/image0112-700x209.png 700w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/01\/image0112.png 1252w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<p><i><span style=\"font-weight: 400;\">Original design on the left, revised design on the right. <\/span><\/i><\/p>\n<p><span style=\"font-weight: 400;\">With prominent call to action buttons above the content, and small shifts to the display of information, the conversion rate of this page went from 6% to over 15% instantly. Over time, these small changes improved their web lead revenue by over 70%. That\u2019s a pretty big vote for less clutter.<\/span><\/p>\n<h3>Xerox<\/h3>\n<p><span style=\"font-weight: 400;\">On the <a href=\"https:\/\/shop.xerox.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Shop Xerox<\/a> product detail page, we can see another simple example of less clutter making a positive impact. A typical page will include multiple versions of a printer to select from (bottom left), and visitors are easily be overwhelmed.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-11824\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/01\/image0410-1024x250.png\" alt=\"image04\" width=\"721\" height=\"176\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/01\/image0410-1024x250.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/01\/image0410-700x171.png 700w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/01\/image0410.png 1526w\" sizes=\"auto, (max-width: 721px) 100vw, 721px\" \/><\/p>\n<p><i><span style=\"font-weight: 400;\">Original design on the left, revised design on the right. <\/span><\/i><\/p>\n<p><span style=\"font-weight: 400;\">By replacing the extra links around the Add to Cart buttons with whitespace, Xerox saw a 20% improvement in engagement, 5 % boost in products added to cart, and a 33% improvement in customers continuing through purchase. We tested removing other pieces of content throughout their site to increase whitespace around key elements, and saw positive results in every case.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">We\u2019ve seen this work across the board with every client. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Whenever the amount of content surrounding a call to action button is reduced, the conversion rate of that button improves. Try it on your site and see what happens. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you have logos and social media icons around your important buttons, test moving them somewhere else or removing them completely. Aligning the page content with the most important actions for that page will result in more of those actions being taken by your visitors.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Testing Your Way to Success<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">The only way to be sure you have the balance of white space is with <\/span><a href=\"https:\/\/www.quicksprout.com\/2014\/11\/05\/ab-testing-for-beginners-70-resources-to-get-you-started\/\"><span style=\"font-weight: 400;\">A\/B testing<\/span><\/a><span style=\"font-weight: 400;\">. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Browser space is an infinite resource. You don\u2019t have to fill every last pixel with information. People will scroll.<br \/>\n<\/span><br \/>\n<span style=\"font-weight: 400;\">Don\u2019t be afraid to embrace the power of nothing. Your users will thank you. <\/span><\/p>\n<p>For more advice on designing for visual psychology, check out the free 100-page e-book <a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/visual-web-ui-design-colors-space-contrast\/\" target=\"_blank\" rel=\"noopener noreferrer\">Web UI Design for the Human Eye<\/a> (Vol.1).<\/p>\n","protected":false},"excerpt":{"rendered":"<p>3 real-life UX case studies teach where to place white space to improve UX and conversions.  <\/p>\n","protected":false},"author":67,"featured_media":11826,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,6],"tags":[],"class_list":["post-11819","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-ux-design"],"yoast_title":"","yoast_metadesc":"3 real-life UX case studies teach where to place white space to improve UX and conversions.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>UX Case Study: Designing Whitespace to Improve Conversions | UXPin<\/title>\n<meta name=\"description\" content=\"3 real-life UX case studies teach where to place white space to improve UX and conversions.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/ux-case-study-designing-whitespace-to-improve-conversions\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"UX Case Study: Designing Whitespace to Improve Conversions\" \/>\n<meta property=\"og:description\" content=\"3 real-life UX case studies teach where to place white space to improve UX and conversions.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/ux-case-study-designing-whitespace-to-improve-conversions\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2016-01-29T21:46:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-10T02:57:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/01\/5648d3081818c.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"700\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jon MacDonald\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jon MacDonald\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ux-case-study-designing-whitespace-to-improve-conversions\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ux-case-study-designing-whitespace-to-improve-conversions\\\/\"},\"author\":{\"name\":\"Jon MacDonald\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/1a1d8b840e732a5d84ebe0a38ecf5b0a\"},\"headline\":\"UX Case Study: Designing Whitespace to Improve Conversions\",\"datePublished\":\"2016-01-29T21:46:07+00:00\",\"dateModified\":\"2026-03-10T02:57:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ux-case-study-designing-whitespace-to-improve-conversions\\\/\"},\"wordCount\":1255,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ux-case-study-designing-whitespace-to-improve-conversions\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2016\\\/01\\\/5648d3081818c.jpeg\",\"articleSection\":[\"Blog\",\"UX Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ux-case-study-designing-whitespace-to-improve-conversions\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ux-case-study-designing-whitespace-to-improve-conversions\\\/\",\"name\":\"UX Case Study: Designing Whitespace to Improve Conversions | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ux-case-study-designing-whitespace-to-improve-conversions\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ux-case-study-designing-whitespace-to-improve-conversions\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2016\\\/01\\\/5648d3081818c.jpeg\",\"datePublished\":\"2016-01-29T21:46:07+00:00\",\"dateModified\":\"2026-03-10T02:57:47+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/1a1d8b840e732a5d84ebe0a38ecf5b0a\"},\"description\":\"3 real-life UX case studies teach where to place white space to improve UX and conversions.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ux-case-study-designing-whitespace-to-improve-conversions\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ux-case-study-designing-whitespace-to-improve-conversions\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ux-case-study-designing-whitespace-to-improve-conversions\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2016\\\/01\\\/5648d3081818c.jpeg\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2016\\\/01\\\/5648d3081818c.jpeg\",\"width\":700,\"height\":500,\"caption\":\"5648d3081818c\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ux-case-study-designing-whitespace-to-improve-conversions\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"UX Case Study: Designing Whitespace to Improve Conversions\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/1a1d8b840e732a5d84ebe0a38ecf5b0a\",\"name\":\"Jon MacDonald\",\"description\":\"Jon MacDonald is founder and President of The Good, an agency of conversion rate experts. The agency has helped brands double e-commerce sales within 12-24 months with their Conversion Growth Program.\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/jonmacdonald\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"UX Case Study: Designing Whitespace to Improve Conversions | UXPin","description":"3 real-life UX case studies teach where to place white space to improve UX and conversions.","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:\/\/www.uxpin.com\/studio\/blog\/ux-case-study-designing-whitespace-to-improve-conversions\/","og_locale":"en_US","og_type":"article","og_title":"UX Case Study: Designing Whitespace to Improve Conversions","og_description":"3 real-life UX case studies teach where to place white space to improve UX and conversions.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/ux-case-study-designing-whitespace-to-improve-conversions\/","og_site_name":"Studio by UXPin","article_published_time":"2016-01-29T21:46:07+00:00","article_modified_time":"2026-03-10T02:57:47+00:00","og_image":[{"width":700,"height":500,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/01\/5648d3081818c.jpeg","type":"image\/jpeg"}],"author":"Jon MacDonald","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Jon MacDonald","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/ux-case-study-designing-whitespace-to-improve-conversions\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/ux-case-study-designing-whitespace-to-improve-conversions\/"},"author":{"name":"Jon MacDonald","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/1a1d8b840e732a5d84ebe0a38ecf5b0a"},"headline":"UX Case Study: Designing Whitespace to Improve Conversions","datePublished":"2016-01-29T21:46:07+00:00","dateModified":"2026-03-10T02:57:47+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/ux-case-study-designing-whitespace-to-improve-conversions\/"},"wordCount":1255,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/ux-case-study-designing-whitespace-to-improve-conversions\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/01\/5648d3081818c.jpeg","articleSection":["Blog","UX Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/ux-case-study-designing-whitespace-to-improve-conversions\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/ux-case-study-designing-whitespace-to-improve-conversions\/","name":"UX Case Study: Designing Whitespace to Improve Conversions | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/ux-case-study-designing-whitespace-to-improve-conversions\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/ux-case-study-designing-whitespace-to-improve-conversions\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/01\/5648d3081818c.jpeg","datePublished":"2016-01-29T21:46:07+00:00","dateModified":"2026-03-10T02:57:47+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/1a1d8b840e732a5d84ebe0a38ecf5b0a"},"description":"3 real-life UX case studies teach where to place white space to improve UX and conversions.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/ux-case-study-designing-whitespace-to-improve-conversions\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/ux-case-study-designing-whitespace-to-improve-conversions\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/ux-case-study-designing-whitespace-to-improve-conversions\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/01\/5648d3081818c.jpeg","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/01\/5648d3081818c.jpeg","width":700,"height":500,"caption":"5648d3081818c"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/ux-case-study-designing-whitespace-to-improve-conversions\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"UX Case Study: Designing Whitespace to Improve Conversions"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/1a1d8b840e732a5d84ebe0a38ecf5b0a","name":"Jon MacDonald","description":"Jon MacDonald is founder and President of The Good, an agency of conversion rate experts. The agency has helped brands double e-commerce sales within 12-24 months with their Conversion Growth Program.","url":"https:\/\/www.uxpin.com\/studio\/author\/jonmacdonald\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/11819","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/67"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=11819"}],"version-history":[{"count":2,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/11819\/revisions"}],"predecessor-version":[{"id":58460,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/11819\/revisions\/58460"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/11826"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=11819"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=11819"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=11819"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}