{"id":6746,"date":"2017-02-22T10:24:16","date_gmt":"2017-02-22T10:24:16","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=6746"},"modified":"2020-11-05T12:00:25","modified_gmt":"2020-11-05T12:00:25","slug":"lipstick-on-a-ui","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/lipstick-on-a-ui\/","title":{"rendered":"Lipstick on a UI"},"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;\">Can we design invisible interfaces to be useful smart products?<\/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\">Last year saw an explosion of a special kind of smart products: home assistants, driving devices, lighting &amp; security systems, etc \u2014 all devices activated by voice, gesture or <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/ifttt.com\">automated through a chain of conditions<\/a>. Major topics in media technology and Google searches were \u201cIoT\u201d and \u201cBots\u201d \u2014 and this Christmas <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/phx.corporate-ir.net\/phoenix.zhtml?c=176060&amp;p=irol-newsArticle&amp;ID=2232897\">Amazon Echo sold 9x more units than last year<\/a>.<\/p>\n<div id='gallery-1' class='gallery galleryid-6746 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\/2017\/02\/18tyrvQyw8H32oW_4bJmQFA.jpeg'><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"209\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/18tyrvQyw8H32oW_4bJmQFA.jpeg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/18tyrvQyw8H32oW_4bJmQFA.jpeg 1000w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/18tyrvQyw8H32oW_4bJmQFA-600x125.jpeg 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/18tyrvQyw8H32oW_4bJmQFA-768x161.jpeg 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/a>\n\t\t\t<\/dt><\/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\">What do these devices have in common? They have invisible interfaces, with some or no graphical user interface (GUI), <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/www.nointerface.com\/book\">but never without interface<\/a>. Invisible interfaces promise frictionless and efficient smart products; ultimately intended to make our lives easier.<\/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 the rub, <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/www.ibmbigdatahub.com\/blog\/why-over-two-thirds-internet-things-projects-will-fail\">two-thirds of these devices fail<\/a> to deliver on their promise.<\/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\"><span class=\"long-quote\">\"While invisible interfaces aim to serve people beyond a functional purpose, they produce faulty user experiences that are overcomplicated with needless features and oversimplified with ambiguous interactions.\"<\/span><\/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\">\"Designers put lipstick on a UI and call it invisible interface.\"<\/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\"><center><\/p>\n<div id=\"attachment_6751\" style=\"width: 510px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6751\" class=\"size-full wp-image-6751\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/02\/1GMpl1dkO3mWQeh-nPWATGg.gif\" alt=\"Do you think people want to move their fingers like a maniac at Starbucks to review their running stats? This isn\u2019t\u00a0useful.\" width=\"500\" height=\"281\" \/><p id=\"caption-attachment-6751\" class=\"wp-caption-text\">Do you think people want to move their fingers like a maniac at Starbucks to review their running stats? <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/techxplore.com\/news\/2015-05-finger-gestures-smartwatch.html\">This isn\u2019t\u00a0useful<\/a>.<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/center><\/p>\n<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;\">Beyond Graphical User Interfaces<\/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\">A first step towards a solution is to understand that invisible interfaces are pushing <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/en.wikipedia.org\/wiki\/Ubiquitous_computing\">ubiquitous computing<\/a> forward, thus <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/en.wikipedia.org\/wiki\/Natural_user_interface#\/media\/File:CLI-GUI-NUI.png\">user interfaces need to mature<\/a>.<\/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 need to move beyond traditional practices to develop GUIs, where functionality is excessive and usability overemphasises guidelines over users. This design shift demands more than pixel perfect mockups and impressive prototypes; it demands that we design systems focused on people\u2019s activities, goals &amp; motivations.<\/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\"><span class=\"long-quote\">\"<a class=\"link link--blue fontWeight-4\"href=\"https:\/\/en.wikipedia.org\/wiki\/Natural_user_interface\">Natural User Interfaces<\/a> advocate for interactions that come naturally to people through the understanding of context of use. NUIs are more than just functional and desirable \u2014 they are designed for usefulness.\"<\/span><\/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\">\u201cTechnology is re-architecting itself around people.\u201d <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/twitter.com\/padday\">Paul Adams<\/a>. VP of product at <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.intercom.com\">Intercom<\/a>.<\/p><\/span><\/blockquote>\n<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;\">Invisible Interfaces as Useful Smart\u00a0Products<\/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\">Today I\u2019ll explain how to design smart products as NUIs, in other words, how to design <em>useful smart products<\/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\">I\u2019ve taken the \u201c<a class=\"link link--blue fontWeight-4\"href=\"https:\/\/en.wikipedia.org\/wiki\/Flexibility-usability_tradeoff\">Usability-Flexibility Trade-Off\u201d<\/a> to show how affordances and context are fundamental elements to strike the right balance to create useful smart products. To wrap up, I\u2019ll talk about <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>Jobs-To-Be-Done<\/em><\/strong>, a research method which helped me unearth usefulness for better products.<\/p>\n<div id='gallery-2' class='gallery galleryid-6746 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\/2017\/02\/1vkdIaJanQp4AsU9aqeB3cg.png'><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"592\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/1vkdIaJanQp4AsU9aqeB3cg.png\" class=\"attachment-full size-full\" alt=\"\" aria-describedby=\"gallery-2-6752\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/1vkdIaJanQp4AsU9aqeB3cg.png 800w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/1vkdIaJanQp4AsU9aqeB3cg-600x444.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/1vkdIaJanQp4AsU9aqeB3cg-768x568.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-2-6752'>\n\t\t\t\tUseful smart products start with a minimalist approach; making a better use of affordances and context to keep a balance between usability and flexibility.\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\">Useful smart products start with a minimalist approach; making a better use of affordances and context to keep a balance between usability and flexibility.<\/p>\n<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;\">Usability \u2192 Affordances<\/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\">Usability problems happen when smart products are aesthetically simplified with reduced <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/en.wikipedia.org\/wiki\/Affordance\">affordances<\/a> BUT relying on a \u201ccool\u201d invisible interface. However, all too often, its hidden affordances offer little insight for interaction?\u2014?all invisible usability remains useless. In short, lipstick on a UI.<\/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 end up triggering actions they never intended and are left to learn by trial-and-error. Sounds familiar, doesn\u2019t it?<\/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\">\u201cThe best products are as visible as they need to be to make the activity better.\u201d <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/@odannyboy\/the-myth-of-invisible-design-c67d590babe9#.esba1ydvf\">Dan Saffer<\/a>.<\/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\"><span class=\"long-quote\">\"The solution isn\u2019t to add or remove affordances to improve usability flaws. Useful smart products offer alternative interactions modes, and each mode has a set of affordances that become useful as they adapt to people\u2019s activities.\"<\/span><\/p>\n<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;\">Multimodal Interaction<\/h2>\n<div id='gallery-3' class='gallery galleryid-6746 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\/2017\/02\/1xtJTwSDsvuU8MiUQ3EiOWw.jpeg'><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"448\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/1xtJTwSDsvuU8MiUQ3EiOWw.jpeg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/1xtJTwSDsvuU8MiUQ3EiOWw.jpeg 1000w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/1xtJTwSDsvuU8MiUQ3EiOWw-600x269.jpeg 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/1xtJTwSDsvuU8MiUQ3EiOWw-768x344.jpeg 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/a>\n\t\t\t<\/dt><\/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\">Amazon Echo is a useful smart product for one reason, its multimodal input modes. People can accomplish tasks by choosing the interaction mode that best suits a particular moment in their lives. For example, let\u2019s take Echo\u2019s shopping list feature.<br \/>\n<strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">A user can add an item to a shopping list via:<\/strong><\/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>Voice Commands<\/li>\n<li>Voice Remote<\/li>\n<li>Alexa App<\/li>\n<li>Amazon's Website<\/li>\n<li>Automated Tasks (IFTTT)<\/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\">Using Amazon Echo shopping list feature via its multimodal input modes.<\/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\"><span class=\"long-quote\">\u201cDesign is a participatory activity, not simply dictating but allowing the user to evolve and shape the encounter so it is a co-creative opportunity\u201d.\u2014<a class=\"link link--blue fontWeight-4\"href=\"https:\/\/mitpress.mit.edu\/books\/where-action\">Paul Dourish<\/a>.<\/span><\/p>\n<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;\">Flexibility \u2192\u00a0Context<\/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\">Flexibility problems occur when smart products are designed with little understanding about people\u2019s goals &amp; motivations. The results are generic interfaces suited to everyone and no one, users don\u2019t understand how such complex experiences could ever fit into their lives. Again, lipstick on a UI.<\/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\">These products become useless due to their broad functionality.<\/strong><\/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\">\u201cAll of the functionality in the world is useless if the useful functions aren\u2019t present.\u201d\u2014<a class=\"link link--blue fontWeight-4\"href=\"http:\/\/www.thoughtsoninteraction.com\">John Kolko<\/a><\/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\"><span class=\"long-quote\">\"As smart products are incrementally infused into every part of people\u2019s lives, design folks need a deeper contextual understanding of users and how these devices play a part in their lives. Useful smart products do serve a functional purpose, but most importantly, an emotional and social purpose.\"<\/span><\/p>\n<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;\">People\u2019s Purpose<\/h2>\n<div id='gallery-4' class='gallery galleryid-6746 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\/2017\/02\/1x10FeoUOU1v9AQdf_YiwCA.jpeg'><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"333\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/1x10FeoUOU1v9AQdf_YiwCA.jpeg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/1x10FeoUOU1v9AQdf_YiwCA.jpeg 1000w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/1x10FeoUOU1v9AQdf_YiwCA-600x200.jpeg 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/1x10FeoUOU1v9AQdf_YiwCA-768x256.jpeg 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/a>\n\t\t\t<\/dt><\/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\">Many factors influenced the failure and success between Google Glass and Snapchat Spectacles: price, marketing and advertising, product strategy, etc. However, we can\u2019t argue the fact that Snapchat released a product with a minimalist approach and the right amount of functionality. <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">This smart product fits into people\u2019s leisure time by fulfilling three purposes:<\/strong><\/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><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Functional:<\/strong>Create and share snaps effortlessly, anytime.<\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Emotional:<\/strong> Capture POV videos that feel like shared memories.<\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Social:<\/strong> Promote a sense of community, visually identifiable.<\/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\"><img decoding=\"async\" class=\"size-full aligncenter\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/02\/1X6BT3v-VGof0rK60VTW7ow.gif\" title=\"\" alt=\"\" \/><\/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\">On top of it, Snapchat solved the portrait vs landscape video argument forever. Circular video extends the usefulness of this smart product to the mobile\u00a0device.<\/p>\n<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;\">Usefulness \u2192 Jobs-To-Be-Done<\/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\">Despite <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/www.zdnet.com\/article\/user-experience-now-top-of-mind-even-before-software-is-conceived\">72% of companies conduct research before beginning any design or software development<\/a>, the results of such research aren\u2019t conclusive because it tends to focus on WHAT and HOW users experience a product.<br \/>\n<span class=\"long-quote\">\"An understanding of WHY people use smart devices and the underlying motivations when deciding to use a product will lead towards usefulness.\"<\/span><br \/>\nPersonas are helpful to understanding motivation. But to be honest, the amount of insight gained often falls short and assumptions multiply. <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The solution isn\u2019t better Personas, but better <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/blog\/common-ux-design-methods-techniques\/\">research methods<\/a>. That\u2019s how I discovered Jobs-To-Be-Done.<\/strong><\/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\">\u201cPeople don\u2019t want to buy a quarter-inch drill. They want a quarter-inch hole.\u201d Theodore Levitt<\/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 concept is simple: We \u201chire\u201d products and services to do things for us. This research method is based on detailed contextual inquiry, where the researcher \u201cbecomes a detective\u201d during a JTBD Interview. The goal is to understand the job for which people would hire a product, uncovering their underlying struggles and motivations from first thought to final purchase.<\/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\">In my experience, Jobs-To-Be-Done reinforced the research analysis &amp; synthesis phase with solid motivational insights, while it helped to better inform design artefacts about the usefulness of products.<\/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\"><img decoding=\"async\" class=\"size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/02\/1MaLkokcX8K-CoE6jk_ls7g.png\" title=\"\" alt=\"\" \/><\/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\">Relation between JTBD interviews and its direct outputs along the design process. Thanks to <a class=\"link link--blue fontWeight-4\"title=\"Go to the profile of Tor L. Bollingmo\" href=\"https:\/\/jtbd.info\/@lovskogen\">Tor L. Bollingmo<\/a>-\u201c<a class=\"link link--blue fontWeight-4\"href=\"https:\/\/jtbd.info\/interviews-timelines-forces-job-stories-whats-the-difference-a90949d6cb0a#.x7nle6ige\">Interviews, Timeline, Forces, Job Stories?\u2014?what\u2019s the difference?<\/a>\u201d<\/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\">For further reading, do check out:<\/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><a class=\"link link--blue fontWeight-4\"href=\"http:\/\/www.competingagainstluck.com\">Competing Against Luck<\/a>\u2014by <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/twitter.com\/claychristensen\">Clayton Christensen<\/a><\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"http:\/\/www.anthonyulwick.com\/publications\">Jobs-To-Be-Done<\/a>\u2014by <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/twitter.com\/ulwick\">Tony Ulwick<\/a><\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"http:\/\/www.whencoffeeandkalecompete.com\">When Coffee and Kale Compete<\/a>\u2014by <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/twitter.com\/alanklement\">Alan Klement<\/a><\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.intercom.com\/books\/jobs-to-be-done\">Intercom on Jobs-To-Be-Done<\/a>\u2014by <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.intercom.com\/\">Intercom<\/a><\/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\">\u201cUnderstanding the Job\u201d. A brief explanation about JTBD by Clayton Christensen, Harvard Business School Professor.<\/p>\n<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;\">Final Thoughts<\/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\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Design is a tool for understanding people.<\/strong> That\u2019s why the usefulness of any product we design is dictated by people\u2019s experiences and not by the robustness of technology.<\/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\">\"The deeper challenge for invisible interfaces is to humanise technology.\"<\/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\">Interfaces that go beyond the glass demand that we observe with care, curiosity and feeling how people interact and communicate with the world. Most importantly, designers need to understand that this natural dialogue between people and the world is always reactionary and anticipatory at the same time. Just by creating experiences that accommodate such natural interactions we will make useful smart products finally see the day of light.<\/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>Many thanks for proofreading to my friends: <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/@kaaathrynh\">Kathryn Hing<\/a>, <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/@yegorzakharov\">Yegor Zakharov<\/a>, <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/@jedjak\">Andy Jakubowski<\/a>, <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/@MatteoCavucci\">Matteo Cavucci<\/a> I truly appreciate your help.<\/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\"><em>This article was originally published on <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/uxdesign.cc\/lipstick-on-a-ui-eb71d85c4a2f#.ci51m8yub\">Oriol's Medium page<\/a>.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Can we design invisible interfaces to be useful smart products? Last year saw an explosion of a special kind of smart products: home assistants, driving devices, lighting &amp; security systems, etc \u2014 all devices activated by voice, gesture or automated through a chain of conditions. Major topics in media technology and Google searches were \u201cIoT\u201d and \u201cBots\u201d \u2014 and this&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/marvelapp.com\/blog\/lipstick-on-a-ui\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":99,"featured_media":6812,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[498],"tags":[],"class_list":["post-6746","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ui"],"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\/lipstick-on-a-ui\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Lipstick on a UI | Marvel Blog\" \/>\n<meta property=\"og:description\" content=\"Can we design invisible interfaces to be useful smart products? Last year saw an explosion of a special kind of smart products: home assistants, driving devices, lighting &amp; security systems, etc \u2014 all devices activated by voice, gesture or automated through a chain of conditions. Major topics in media technology and Google searches were \u201cIoT\u201d and \u201cBots\u201d \u2014 and this... Read More &#65515;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marvelapp.com\/blog\/lipstick-on-a-ui\/\" \/>\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=\"2017-02-22T10:24:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-11-05T12:00:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/lipstick-on-a-ui_image-teaser.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"3588\" \/>\n\t<meta property=\"og:image:height\" content=\"1442\" \/>\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=\"5 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\/lipstick-on-a-ui\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/lipstick-on-a-ui_image-teaser.jpg\",\"width\":3588,\"height\":1442},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/marvelapp.com\/blog\/lipstick-on-a-ui\/#webpage\",\"url\":\"https:\/\/marvelapp.com\/blog\/lipstick-on-a-ui\/\",\"name\":\"Lipstick on a UI | Marvel Blog\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/lipstick-on-a-ui\/#primaryimage\"},\"datePublished\":\"2017-02-22T10:24:16+00:00\",\"dateModified\":\"2020-11-05T12:00:25+00:00\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/marvelapp.com\/blog\/lipstick-on-a-ui\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/marvelapp.com\/blog\/lipstick-on-a-ui\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/lipstick-on-a-ui\/#webpage\"},\"author\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/8343ba69bc9565ff564f812c09ae7c4e\"},\"headline\":\"Lipstick on a UI\",\"datePublished\":\"2017-02-22T10:24:16+00:00\",\"dateModified\":\"2020-11-05T12:00:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/lipstick-on-a-ui\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/lipstick-on-a-ui\/#primaryimage\"},\"articleSection\":\"Visual Design\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/marvelapp.com\/blog\/lipstick-on-a-ui\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/8343ba69bc9565ff564f812c09ae7c4e\",\"name\":\"Oriol Bedia\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f02cf1a693c256aa2861bfc8138878d053e421b694bf88c674b377568f7d9b4b?s=96&d=mm&r=g\",\"caption\":\"Oriol Bedia\"},\"description\":\"Hi, I'm Oriol. I'm a product designer, specialised in User Experience &amp; Interaction Design with 6+ years experience designing products end-to-end. I worked with: Google, RedBull, Airbnb, Volkswagen, BCG DV, Zalando, etc. Get to know more about myself and my work.\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/6746","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\/99"}],"replies":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/comments?post=6746"}],"version-history":[{"count":0,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/6746\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media\/6812"}],"wp:attachment":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media?parent=6746"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/categories?post=6746"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/tags?post=6746"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}