{"id":2771,"date":"2016-08-30T12:47:05","date_gmt":"2016-08-30T11:47:05","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=2771"},"modified":"2020-12-14T08:27:44","modified_gmt":"2020-12-14T08:27:44","slug":"incremental-ux","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/incremental-ux\/","title":{"rendered":"Incremental UX"},"content":{"rendered":"<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/blog\/design-doesnt-stop-handoff\/\">Agile approach<\/a> has in many organisations become the expected way of working. There have been many <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.smashingmagazine.com\/2011\/03\/lean-ux-getting-out-of-the-deliverables-business\/\" target=\"_blank\" rel=\"noopener noreferrer\">articles<\/a> and <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/www.jeffgothelf.com\/lean-ux-book\/#sthash.YkorfP4C.dpbs\" target=\"_blank\" rel=\"noopener noreferrer\">books<\/a> around the challenges of designing in an agile environment.<\/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 building a <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/leanstack.com\/minimum-viable-product\/\" target=\"_blank\" rel=\"noopener noreferrer\">Minimum Viable Product<\/a> (MVP) there are many competing factors, and with the pressure to release something demoable every sprint, features can get compromised in a way that requires rework later down the line.<\/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 method that we\u2019ve been using at <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/www.caplin.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Caplin<\/a> for the last 18 months is <em>\u2018Incremental UX\u2019<\/em>\u200a\u2014\u200a<strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>bringing the concept of MVP down to the component or feature level.<\/em><\/strong><\/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\">\u201cBringing the concept of MVP down to the component or feature level\u201d<\/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 basic idea is to have a planned progression (leaving room for improvements through testing) of a feature that adds functionality at each stage.<\/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\">A common requirement of all our products (web applications for real time trading; foreign exchange, futures, bonds etc), is to be able to filter and sort very large tables of data. In one of our products we wanted to improve how we did this to make it more intuitive and powerful with the aim of bringing this across to all our products.<\/p>\n<div id=\"attachment_2832\" style=\"width: 601px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2016\/08\/Screenshot-2016-08-30-12.13.411.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-2832\" class=\"size-full wp-image-2832\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2016\/08\/Screenshot-2016-08-30-12.13.411.png\" alt=\"Sorting and filtering\" width=\"591\" height=\"323\" \/><\/a><p id=\"caption-attachment-2832\" class=\"wp-caption-text\">How we used to do our sorting and filtering. This solution gave the user the same input for all data types; strings, numbers, dates etc. More advanced filtering like numerical and date ranges presumed the user knew the required input syntax. Property of Caplin Systems Ltd<\/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\">At the very start of the project, we wanted to have a thin slice (MVP) of the core functionality\u200a\u2014\u200abeing able to trade foreign exchange and have those trades appear in a table (or blotter as it is known in the industry). We knew the filtering was going to be a large piece of work (several sprints\u2019 worth), but wanted to get some basic filtering in quickly.<\/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\">Often in these cases, a shoddily designed solution would be added to cover the absolute bare minimum functionality. This design wouldn\u2019t take into account the additional requirements that would be added later, and would result in throw away code when the time came to build out the feature.<\/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 idea behind Incremental UX is to design iterations of a component, that can be developed one after the other. The key requirements are:<\/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>The first iteration needs to address the most basic and fundamental user need<\/li>\n<li>Each iteration must then address the next most pressing user need<\/li>\n<li>Each iteration must build on the last, and throw away code and design must be nil or close to nil<\/li>\n<\/ul>\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 idea behind Incremental UX is to design and build iterations of a component\"<\/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\">Rightly or wrongly, if we as designers propose a solution at the start of a project for an issue such as filtering that is going to take up more than an entire sprint, it will be thrown out during planning for a more fundamental feature. It will be deprioritised when a bug or infrastructure issue breaks the core functionality (in this case, being able to place a 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\">At best, it will be broken down into chunks that may not make sense, and in a way that getting to the final picture is more painful and expensive than it needs to be.<\/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\">With an incremental plan, the iteration of a feature is controlled and manageable, with small increments and improvements being added over time alongside more fundamental and core features.<\/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 first iteration is enough to get the job done with each iteration after improving usability and increasing functionality.\"<\/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 solution was to have the filter and sort control available when the user clicked the column header. The user would see a dedicated filter control for the data type of the column. A string filter for strings, a date filter for dates, and a numerical filter for numbers. The user would not have to guess at the syntax required for slightly more complex filter criteria.<\/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 image below shows on the left the most basic filter that could be used for all data types. It doesn\u2019t provide any more functionality than the solution shown in the image above, but is the first step of the three steps for the string filter. The following two iterations add more control and better usability, but build on the most basic version with almost no development rework.<\/p>\n<div id=\"attachment_2784\" style=\"width: 895px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2016\/08\/String-Filter-Increment.jpeg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-2784\" class=\"size-full wp-image-2784\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2016\/08\/String-Filter-Increment.jpeg\" alt=\"String Filter Increment\" width=\"885\" height=\"410\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/08\/String-Filter-Increment.jpeg 885w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/08\/String-Filter-Increment-600x278.jpeg 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/08\/String-Filter-Increment-768x356.jpeg 768w\" sizes=\"auto, (max-width: 885px) 100vw, 885px\" \/><\/a><p id=\"caption-attachment-2784\" class=\"wp-caption-text\">String Filter increment. The most basic implementation that can be used for all data types is shown on the far left. Each version to the right of that adds more functionality. Property of Caplin Systems Ltd<\/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\">The user would be able to create \u2018Filter sets\u2019. These are a collection of filters that the user can label to keep for future use. This has proved popular among our users as it gives them the flexibility to customise the product to suit their individual workflows. The product is shipped with some filter sets included to get the user started.<\/p>\n<div id=\"attachment_2785\" style=\"width: 747px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2016\/08\/Advanced-Data-Filter-Increment.jpeg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-2785\" class=\"size-full wp-image-2785\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2016\/08\/Advanced-Data-Filter-Increment.jpeg\" alt=\"Advanced Data Filter Increment\" width=\"737\" height=\"494\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/08\/Advanced-Data-Filter-Increment.jpeg 737w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/08\/Advanced-Data-Filter-Increment-600x402.jpeg 600w\" sizes=\"auto, (max-width: 737px) 100vw, 737px\" \/><\/a><p id=\"caption-attachment-2785\" class=\"wp-caption-text\">The filter sets across the top allow for a subset of the initial data. The user is shown below what filters and sorts are added without having to click on each column header. They can also remove filters and sorts from here. Property of Caplin Systems Ltd<\/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\">The image above includes the most advanced date filter increment. The earlier increment can be seen below.<\/p>\n<div id=\"attachment_2786\" style=\"width: 919px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2016\/08\/Dynamically-Updated-Data-Ranges.jpeg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-2786\" class=\"size-full wp-image-2786\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2016\/08\/Dynamically-Updated-Data-Ranges.jpeg\" alt=\"Dynamically Updated Data Ranges\" width=\"909\" height=\"506\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/08\/Dynamically-Updated-Data-Ranges.jpeg 909w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/08\/Dynamically-Updated-Data-Ranges-600x334.jpeg 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/08\/Dynamically-Updated-Data-Ranges-768x428.jpeg 768w\" sizes=\"auto, (max-width: 909px) 100vw, 909px\" \/><\/a><p id=\"caption-attachment-2786\" class=\"wp-caption-text\">The first iteration of the date filter was moving the existing calendar component into the filter dropdown from the column header. The second iteration added several new features; allowing the user to filter from \u2018July\u2019 to \u2018October\u2019 for example, allowing the user to be able to set a \u2018Dynamic Range\u2019, where a set time period can be selected to enable to the user to set up a \u2018Trades Settling This Week\u2019 filterset. Property of Caplin Systems Ltd<\/p><\/div>\n<div id=\"attachment_2787\" style=\"width: 895px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2016\/08\/Numerical-Features.jpeg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-2787\" class=\"size-full wp-image-2787\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2016\/08\/Numerical-Features.jpeg\" alt=\"Numerical Filter\" width=\"885\" height=\"468\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/08\/Numerical-Features.jpeg 885w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/08\/Numerical-Features-600x317.jpeg 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/08\/Numerical-Features-768x406.jpeg 768w\" sizes=\"auto, (max-width: 885px) 100vw, 885px\" \/><\/a><p id=\"caption-attachment-2787\" class=\"wp-caption-text\">The numerical filter achieves the main use case in the first iteration, allowing the user to filter ranges easily and intuitively. The following iterations don't give the user any additional filtering abilities but concentrate on usability. Property of Caplin Systems Ltd<\/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\">The concept of Incremental UX also has the benefit of being able to test a concept in the real world, in the correct context, with actual users. It allows you to release an increment of a feature to real users, testing the initial concept and the direction of an idea without building the entire thing. This is the exactly the same motivation as designing an MVP of a whole product. Incremental UX is simply taking that concept down to the component level.<\/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\">\"It allows you to test the initial concept and the direction of an idea without building the entire thing.\"<\/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\">This approach worked very well for us in this project and we have been using the concept since. It allows for rich, usable features to be developed alongside the core functionality in an agile environment. The concept of an MVP at a product level is a well established and proven concept. Bringing this concept down to the component level gives the same benefits of incremental delivery, user testing and stakeholder approval and buy-in.<\/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\u2019d be very interested in any feedback, especially from people who are perhaps using the same or a similar concept in their teams.<\/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:\/\/uxdesign.cc\/incremental-ux-62aa1283b105#.4rmel5abu\" target=\"_blank\" rel=\"noopener noreferrer\">Joel's Medium profile.<\/a> <\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Agile approach has in many organisations become the expected way of working. There have been many articles and books around the challenges of designing in an agile environment. When building a Minimum Viable Product (MVP) there are many competing factors, and with the pressure to release something demoable every sprint, features can get compromised in a way that requires&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/marvelapp.com\/blog\/incremental-ux\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":25,"featured_media":2823,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[499],"tags":[],"class_list":["post-2771","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ux"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"description\" content=\"The idea behind Incremental UX is to design iterations of a component, that can be developed one after the other, Joel takes us through the process.\" \/>\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\/incremental-ux\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Incremental UX - Design Iterations - Marvel\" \/>\n<meta property=\"og:description\" content=\"The idea behind Incremental UX is to design iterations of a component, that can be developed one after the other, Joel takes us through the process.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marvelapp.com\/blog\/incremental-ux\/\" \/>\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-08-30T11:47:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-14T08:27:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/08\/building-blocks-456616_1920.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1076\" \/>\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\/incremental-ux\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/08\/building-blocks-456616_1920.jpg\",\"width\":1920,\"height\":1076,\"caption\":\"Incremental UX\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/marvelapp.com\/blog\/incremental-ux\/#webpage\",\"url\":\"https:\/\/marvelapp.com\/blog\/incremental-ux\/\",\"name\":\"Incremental UX - Design Iterations - Marvel\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/incremental-ux\/#primaryimage\"},\"datePublished\":\"2016-08-30T11:47:05+00:00\",\"dateModified\":\"2020-12-14T08:27:44+00:00\",\"description\":\"The idea behind Incremental UX is to design iterations of a component, that can be developed one after the other, Joel takes us through the process.\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/marvelapp.com\/blog\/incremental-ux\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/marvelapp.com\/blog\/incremental-ux\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/incremental-ux\/#webpage\"},\"author\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/bd918804c59cc0048d0deb2468d1bfac\"},\"headline\":\"Incremental UX\",\"datePublished\":\"2016-08-30T11:47:05+00:00\",\"dateModified\":\"2020-12-14T08:27:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/incremental-ux\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/incremental-ux\/#primaryimage\"},\"articleSection\":\"User Experience\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/marvelapp.com\/blog\/incremental-ux\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/bd918804c59cc0048d0deb2468d1bfac\",\"name\":\"Joel\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/446f959ea3f2005eafa69e8557f344306dd78279239d1a518fae2af636dfb8dd?s=96&d=mm&r=g\",\"caption\":\"Joel\"},\"description\":\"UX Consultant in London focused on enterprise software for the Finance industry. Follow me on Twitter.\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/2771","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\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/comments?post=2771"}],"version-history":[{"count":0,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/2771\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media\/2823"}],"wp:attachment":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media?parent=2771"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/categories?post=2771"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/tags?post=2771"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}