{"id":4730,"date":"2016-11-27T15:41:13","date_gmt":"2016-11-27T15:41:13","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=4730"},"modified":"2016-11-27T15:41:13","modified_gmt":"2016-11-27T15:41:13","slug":"art-designing-heart","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/art-designing-heart\/","title":{"rendered":"The Art of Designing With Heart"},"content":{"rendered":"<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">How to make useful, friendly software for real people.<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">One of the things I love about making software is that it\u2019s a deeply mental exercise, chock full of heady processes, abstractions, and interconnected pathways.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">You can fill your brain with the practical nuts and bolts side of it\u2014research, strategy, prototyping, programming, UI, operations, and more. Lots more.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">And if that\u2019s not enough? Indulge yourself in metrics and performance. Every last detail can be tested, quantified and optimized to the fullest. Get high on KPIs and keep your eyes on your ROI!<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"Every last detail can be tested, quantified and optimized to the fullest.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The problem is\u2026with so much to think about, and so many logistics to obsess over, it\u2019s easy to forget the reason you\u2019re doing any of this in the first place:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">????\ufe0f YOUR SOFTWARE EXISTS TO HELP PEOPLE! ????<\/strong><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Designers usually call this notion <em>User Experience<\/em> or <em>Empathy<\/em>. I think those names stink. They\u2019re buzzwordy and vague enough to mean different things in different contexts.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">I think we should call it what it really is: <em><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Designing With Heart.<\/strong><\/em><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">This isn\u2019t something that\u2019s the responsibility of one specific team in your company, or one step in a process that you can check off. It\u2019s a core value that informs every decision you make.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Here\u2019s what that means in practice.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">At the other end of all your strategy and metrics and tech, there are <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">real people<\/strong>. Living, breathing people\u200a\u2014\u200awho are busy dealing with their weird life, arguing with their kids, trying to figure out what\u2019s for dinner.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"At the other end of all your strategy and metrics and tech, there are real people.\" <\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">When you build software, you\u2019re painstakingly inventing a machine that stands in your place, feigns sentience, and interacts with these people on your behalf so they can accomplish something meaningful.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Your software is not just a bunch of code and UI you smushed together. It\u2019s also a compilation of your best ideas, your best intentions, your desire to help others, your compassion, your feelings, your soul.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Your software is YOU.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">(That is, if you believe in the art of it. And you should, if you give a damn about doing it right.)<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">When you see things in this light, you\u2019ll notice that a lot of software is dull and lifeless.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Consider your bank\u2019s website, or your insurance company\u2019s billing system. They\u2019re probably cold and impersonal. That\u2019s because the designers treated their job as a mechanical sequence: they took a set of requirements, invented imaginary personas, wrote user stories, and sprinted their way through the work until the requirements were met. All head, no heart.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">Your software exists to help people!<\/p><\/span><\/blockquote>\n<div id='gallery-1' class='gallery galleryid-4730 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Capital-Ones-sign-in-page.png'><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"1391\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Capital-Ones-sign-in-page.png\" class=\"attachment-full size-full\" alt=\"capital-ones-sign-in-page\" aria-describedby=\"gallery-1-4731\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Capital-Ones-sign-in-page.png 1600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Capital-Ones-sign-in-page-600x522.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Capital-Ones-sign-in-page-768x668.png 768w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Capital-Ones-sign-in-page-1500x1304.png 1500w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-1-4731'>\n\t\t\t\tCapital One\u2019s \u201csign in\u201d page.\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Now, you might think it\u2019s fine for a bank site to be plain and transactional. After all, banking is <em>literally a set of transactions<\/em>.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">But compare that to the experience you\u2019d have with a nice bank teller (if you can still remember what that was like.) The teller smiles at you, asks how your day is going, double-checks that your math is right, offers to help with something you might have forgotten, and gives you a lollipop! ????<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">That\u2019s a transaction with a bit of heart.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">OK, so let\u2019s say we want our software to take the place of the bank teller. That means it should ideally provide the same humane, helpful service that they did. But how?<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">One option is to anthropomorphize the interface and stick some <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/alistapart.com\/article\/personality-in-design\" target=\"_blank\">personality<\/a> into it, which results in UI that\u2019s funny, folksy, clever, sarcastic, or cartoonish.<\/p>\n<div id='gallery-2' class='gallery galleryid-4730 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Poncho.png'><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"1351\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Poncho.png\" class=\"attachment-full size-full\" alt=\"poncho screenshot\" aria-describedby=\"gallery-2-4732\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Poncho.png 1600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Poncho-600x507.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Poncho-768x648.png 768w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Poncho-1500x1267.png 1500w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-2-4732'>\n\t\t\t\tPoncho the sassy weathercat sends you messages that say \u201cZzz Zzzzzzz\u201d and \u201cPurrrrrrrrrrrrr.\u201d\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">I think this only works in small doses, because humans have a low tolerance for bullshit. Unless you\u2019re <em>really<\/em> good at it, jokey and cutesy stuff gets irritating quickly. That\u2019s even worse than just being mechanical, because it\u2019s a waste of time. It\u2019s usually better to cut to the chase.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">So if mechanical is bad, and excess personality is also bad\u2026Then what\u2019s good?<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The sweet spot is right in the middle. Good software is friendly, casual, approachable\u200a\u2014\u200abut also serious, gracious, and respectful. Just like a pleasant real-life experience you\u2019d have at a local business.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"Good software is friendly, casual, approachable\u200a\u2014\u200abut also serious, gracious, and respectful.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Achieving this sounds difficult (it is) but there\u2019s an easy trick that helps a lot.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">When you\u2019re designing something, imagine you\u2019re sitting in a room, helping a real person with the task at hand.<\/strong> What would you say to them? How would you explain this screen or feature? What advice would you give? What would you tell them to do next?<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Say the answers out loud, and then write down what you said. Now you\u2019re 80% of the way there!<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"When you\u2019re designing something, imagine you\u2019re sitting in a room, helping a real person with the task at hand.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">If you were helping someone in person, you wouldn\u2019t be austere or formal. You wouldn\u2019t use buzzwords or jargon or business-speak. You also wouldn\u2019t drop HOT SARCASTIC JOKE BOMBS on them and distract them with goofy asides. You\u2019d watch what they do, see where they get stuck, and walk them through it. <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">You\u2019d speak from the heart.<\/strong><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">This common sense technique helps you see the forest for the trees. If you struggle to explain something out loud, it\u2019s probably not clear enough. That insight leads you to ask questions like\u2026<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>Can we make this interface simpler or more direct?<\/li>\n<li>Can we reduce or eliminate the choices someone has to make?<\/li>\n<li>Are we using natural, casual language to explain things fully?<\/li>\n<li>Is this design respectful of a person\u2019s time and attention?<\/li>\n<li>Is this something I would personally enjoy using?<\/li>\n<li>Did we take any shortcuts that benefit US instead of THEM?<\/li>\n<li>Did we make any incorrect assumptions?<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Now your design will inevitably end up clearer and friendlier. That makes your customers happier and more efficient, so they can stop fiddling with software and get back to dinner with their argumentative kids.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">That should be the underlying motivation for your work.<\/strong> Not tech, not styling, not stats, and not money. Helping people comes first. The rest follows.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>Designing With Heart<\/em> doesn\u2019t just apply to making a product, either. It can also guide your marketing, advertising, and sales work.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"Helping people comes first. The rest follows.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">For example, let\u2019s say you want to increase the number of paying customers for your product. (Who doesn\u2019t?) That\u2019s a business-first problem, not a people-first problem.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">If you only think business-first, you might blast out canned promotional emails, or show \u201cBUY NOW\u201d callouts all over the place, or interrupt key workflows with interstitial popup ads.<\/p>\n<div id='gallery-3' class='gallery galleryid-4730 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Wall-Street-Journal.png'><img loading=\"lazy\" decoding=\"async\" width=\"1400\" height=\"1336\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Wall-Street-Journal.png\" class=\"attachment-full size-full\" alt=\"wall-street-journal\" aria-describedby=\"gallery-3-4733\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Wall-Street-Journal.png 1400w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Wall-Street-Journal-600x573.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Wall-Street-Journal-768x733.png 768w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Wall-Street-Journal-32x32.png 32w\" sizes=\"auto, (max-width: 1400px) 100vw, 1400px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-3-4733'>\n\t\t\t\tThe Wall Street Journal asks you to buy before you\u2019ve even arrived.\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">These techniques may well be useful for increasing raw business performance, but they can be annoying and smarmy to customers. That\u2019s the opposite of what we want. So how do we reconcile the difference?<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Easy: think about people again!<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">There\u2019s nothing inherently bad about clearly communicating the value of your product, making it easier to buy it, spreading your message to new audiences, or even asking for referrals or reviews\u200a\u2014\u200aas long as you do so in a way that\u2019s considerate, honest, and at the right moment.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Don\u2019t interrupt people when they\u2019re in the middle of something, nag them incessantly, or hard-sell them into doing what you want. If you ask for a favor, make it worth their time by thoughtfully explaining why you need their help, and perhaps offering an incentive in trade.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Follow this approach and your promotional efforts won\u2019t just benefit you, they\u2019ll benefit people too.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">There\u2019s one more thing you can do to Design With Heart: <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">don\u2019t be afraid to reveal yourself.<\/strong><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">People develop emotional connections to other people\u2014not machines.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">When your customers can see who\u2019s behind the curtain, and when you speak to them with honesty and authenticity, they\u2019ll be more likely to identify with your message and approach.<\/p>\n<div id='gallery-4' class='gallery galleryid-4730 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Highrise-personal-messages.png'><img loading=\"lazy\" decoding=\"async\" width=\"922\" height=\"780\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Highrise-personal-messages.png\" class=\"attachment-full size-full\" alt=\"highrise-personal-messages\" aria-describedby=\"gallery-4-4734\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Highrise-personal-messages.png 922w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Highrise-personal-messages-600x508.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Highrise-personal-messages-768x650.png 768w\" sizes=\"auto, (max-width: 922px) 100vw, 922px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-4-4734'>\n\t\t\t\tNate Kontny\u2019s Highrise updates always have a personal touch.\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">If you built something because you fundamentally care about helping people, and you intend to have their back\u2026 say it! Put your name on it, tell your story, show your face, and stand behind your work. Share your <em>real<\/em> personality rather than trying to graft a fake one onto an inanimate program.<br \/>\nYour customers will respond in kind\u200a\u2014\u200aand that\u2019s the most rewarding thing of all. ????<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>This post was originally published on <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/m.signalvnoise.com\/the-art-of-designing-with-heart-f5dc4df21697#.u4e4wmcyy\" target=\"_blank\">Jonas's Medium profile<\/a>.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>How to make useful, friendly software for real people. One of the things I love about making software is that it\u2019s a deeply mental exercise, chock full of heady processes, abstractions, and interconnected pathways. You can fill your brain with the practical nuts and bolts side of it\u2014research, strategy, prototyping, programming, UI, operations, and more. Lots more. And if that\u2019s&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/marvelapp.com\/blog\/art-designing-heart\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":68,"featured_media":4791,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-4730","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-viewpoint"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/marvelapp.com\/blog\/art-designing-heart\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The Art of Designing With Heart | Marvel Blog\" \/>\n<meta property=\"og:description\" content=\"How to make useful, friendly software for real people. One of the things I love about making software is that it\u2019s a deeply mental exercise, chock full of heady processes, abstractions, and interconnected pathways. You can fill your brain with the practical nuts and bolts side of it\u2014research, strategy, prototyping, programming, UI, operations, and more. Lots more. And if that\u2019s... Read More &#65515;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marvelapp.com\/blog\/art-designing-heart\/\" \/>\n<meta property=\"og:site_name\" content=\"Marvel Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/marvelapp\" \/>\n<meta property=\"article:published_time\" content=\"2016-11-27T15:41:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Designing-with-heart.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"595\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:site\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"6 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/marvelapp\",\"https:\/\/www.instagram.com\/marvelapp\/\",\"https:\/\/www.linkedin.com\/company\/marvel-app\/\",\"https:\/\/twitter.com\/marvelapp\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/marvelapp.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/art-designing-heart\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Designing-with-heart.jpeg\",\"width\":1600,\"height\":595,\"caption\":\"designing-with-heart\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/marvelapp.com\/blog\/art-designing-heart\/#webpage\",\"url\":\"https:\/\/marvelapp.com\/blog\/art-designing-heart\/\",\"name\":\"The Art of Designing With Heart | Marvel Blog\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/art-designing-heart\/#primaryimage\"},\"datePublished\":\"2016-11-27T15:41:13+00:00\",\"dateModified\":\"2016-11-27T15:41:13+00:00\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/marvelapp.com\/blog\/art-designing-heart\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/marvelapp.com\/blog\/art-designing-heart\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/art-designing-heart\/#webpage\"},\"author\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/eff8a0719fd1b1a5e9a5c70ef395192a\"},\"headline\":\"The Art of Designing With Heart\",\"datePublished\":\"2016-11-27T15:41:13+00:00\",\"dateModified\":\"2016-11-27T15:41:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/art-designing-heart\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/art-designing-heart\/#primaryimage\"},\"articleSection\":\"Viewpoint\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/marvelapp.com\/blog\/art-designing-heart\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/eff8a0719fd1b1a5e9a5c70ef395192a\",\"name\":\"Jonas Downey\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c6cf127ce9692b056dd7d04944cebcf32f1836c453bdffac0bfcc2ce91084436?s=96&d=mm&r=g\",\"caption\":\"Jonas Downey\"},\"description\":\"Product Designer at Basecamp. Also made Hello Weather. Follow me on Twitter.\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/4730","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/users\/68"}],"replies":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/comments?post=4730"}],"version-history":[{"count":0,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/4730\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media\/4791"}],"wp:attachment":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media?parent=4730"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/categories?post=4730"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/tags?post=4730"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}