{"id":1009,"date":"2014-09-25T08:00:52","date_gmt":"2014-09-25T12:00:52","guid":{"rendered":"http:\/\/blog.agilityfeat.com\/?p=1009"},"modified":"2020-11-10T02:41:15","modified_gmt":"2020-11-10T02:41:15","slug":"7-keys-to-ux-harmony","status":"publish","type":"post","link":"https:\/\/agilityfeatpanama.com\/en\/blog\/2014\/09\/7-keys-to-ux-harmony\/","title":{"rendered":"7 Keys to ensure harmony between UX and Development"},"content":{"rendered":"<p>Software development is by its nature a very creative process.  Obviously graphic design is an art form, but there is also an art to the technical architecture of a project, the coding style, the way you test, and the interaction design.  Those roles are filled by multiple people on a single project, each one bringing their own perspectives, style, and tastes to the visual and technical design of a product.  <\/p>\n<p><strong>With that many artists in a room together, there is bound to be conflict.  If you manage it well, it\u2019s healthy conflict that results in a better end product.  If you foster the wrong types of conflict, then it will result in a team with no teamwork, bad feelings, and a worse product.<\/strong><\/p>\n<p>Here are 7 keys we have found to ensure that your interaction designers, visual designers, and developers are working together rather than against each other.<\/p>\n<h2>#1 &#8211; UX leads should have development experience<\/h2>\n<p>Google the phrase \u201cwhy everyone should learn to code\u201d, and you\u2019ll see a lot of debate about who needs to have programming skills in the modern world.  One thing is clear, that everyone benefits from having at least a little knowledge of how software development works.<\/p>\n<p>This is particularly true with User Experience leads because when you design the UI and interaction patterns of an application, you are also determining a lot about how the technical architecture of the application must work too.<\/p>\n<p>Our UX lead Mariana started out as a software developer, but realized how much she loved solving interaction design problems.  In the video below she talks about that epiphany she had \u2013 that even very technical people can have a hard time understanding poorly designed interfaces.  That inspired her to go on to a Master\u2019s degree in Human Computer Interaction.  <\/p>\n<p><iframe src=\"\/\/player.vimeo.com\/video\/86115060?byline=0&amp;portrait=0\" width=\"500\" height=\"281\" frameborder=\"0\" webkitallowfullscreen mozallowfullscreen allowfullscreen><\/iframe> <\/p>\n<p><a href=\"http:\/\/vimeo.com\/86115060\">Mariana Lopez on why she got into UX design<\/a> from <a href=\"http:\/\/vimeo.com\/user24916355\">Arin Sime<\/a> on <a href=\"https:\/\/vimeo.com\">Vimeo<\/a>.<\/p>\n<p>That UX training is certainly valuable to her, but what\u2019s also very valuable to our team is that <strong>her previous experience as a software developer means she understands the challenges a developer may have in implementing her ideas, and she also can call \u201cbullshit\u201d if a developer pushes back on her designs.<\/strong>  Her training in computer science helps her to know when to push harder on the team, and when to back off.  And they respect her more because she has that knowledge.<\/p>\n<h2>#2 &#8211; Designers should be HTML developers<\/h2>\n<p>Here\u2019s another fun term to Google:  \u201cis html a programming language?\u201d  While you can debate whether implementing a high quality HTML and CSS framework is true development or not, there\u2019s no debate that it\u2019s important.  And not everyone is good at it.<\/p>\n<p><strong>If your designer can only create things in Photoshop, then you should invest in having them learning more HTML and CSS skills.<\/strong> They don\u2019t have to become a developer, but it\u2019s incredibly helpful that on our teams our visual designer takes the first stab at implementing the HTML and CSS of his designs.<\/p>\n<p>In this way, Daniel ensures that the project starts off with a best practice CSS implementation and structure, and he can help developers with front end bugs as they migrate his HTML mockups into the larger application code base.<\/p>\n<p><img loading=\"lazy\" src=\"\/wp-content\/uploads\/2014\/09\/ProcessCloseup1.png\" alt=\"ProcessCloseup1\" width=\"700\" height=\"218\" class=\"alignleft size-full wp-image-1011\" style=\"max-width: 700px; max-height: 218px;\" \/><br clear=\"left\"\/><\/p>\n<h2>#3 \u2013 Everyone should be comfortable with iterative work<\/h2>\n<p>Not everyone is cut out for agile teams or the iterative work that they require.  <strong>Some people may be very talented at design or development, but they are simply not comfortable with working in small chunks.<\/strong>  They may have a hard time with showing you a half complete design for your feedback, or doing a demo of code that is not fully functional.<\/p>\n<p>If your team is making even a pretense at the speed and flexibility of agile work, then everyone on the team must be comfortable with working in iterations.  That means the UX and design leads must be comfortable with designing the website a piece at a time.  It\u2019s still okay to do a lightweight information architecture document upfront, or lightweight process flows and wireframes, just like it\u2019s okay for a developer to do a lightweight technical architecture diagram before coding.  The key word is it must be lightweight, quick, and subject to change as more information is learned not only from customers, but also from your teammates.<\/p>\n<p><strong>If anyone on the team, perhaps especially a design or UX lead, is not able to work in small pieces then harmful conflict is inevitable in the team.<\/strong><\/p>\n<p><img loading=\"lazy\" src=\"\/wp-content\/uploads\/2014\/09\/ProcessCloseup2.png\" alt=\"ProcessCloseup2\" width=\"700\" height=\"270\" class=\"alignleft size-full wp-image-1012\" style=\"max-width: 700px; max-height: 270px;\" \/><br clear=\"left\"\/><\/p>\n<h2>#4 &#8211; Developers should be empowered but respectful<\/h2>\n<p>Just because you have a User Experience expert on the team doesn\u2019t mean developers should have no opinions about the placement of buttons.  The UX lead should have final say in this area, just like developers have the final say in how they code the application.  <strong>Developers should respect that final authority lies with the UX lead for interaction design<\/strong>, just like they must respect that the final authority for work priorities lies with the customer or product owner.<\/p>\n<p><strong>But developers should also be empowered enough to offer their own ideas and improvements to what the UX lead comes up with.  And the UX lead has to be able to take feedback from others without a U or X in their title with grace and an open mind.<\/strong><\/p>\n<p><img loading=\"lazy\" src=\"\/wp-content\/uploads\/2014\/09\/TeamTamarindo.png\" alt=\"TeamTamarindo\" width=\"700\" height=\"151\" class=\"alignleft size-full wp-image-1013\" style=\"max-width: 700px; max-height: 151px;\" \/><br clear=\"left\"\/><\/p>\n<h2>#5 &#8211; Use Sprint Zero\u2019s effectively<\/h2>\n<p>Just because you\u2019re working in an agile fashion doesn\u2019t mean you can\u2019t have any up front design.  As I said before, it must be lightweight.<\/p>\n<p>In agile teams, this short and lightweight up front process is often referred to as <strong><a href=\"http:\/\/www.agilityfeat.com\/blog\/2013\/02\/improving-sprint-zero\">\u201cSprint 0.\u201d<\/a><\/strong>  In our team, that means a couple things:<\/p>\n<p>First, the entire team and customer agree on a \u201cwalking skeleton\u201d.  This is a very simple path through the system architecture that allows you to test interfaces and external API\u2019s, as well as try our new technical ideas or code libraries.  It\u2019s also a way to test the high-level process flow that the product will build.  The end product is not usable by customers, and has no design or attractiveness associated with it.  It\u2019s just a technical prototype, and the developers should focus their efforts on building that in the first couple weeks of a project.<\/p>\n<p>In parallel to that, the UX and design leads can start working on the first round of more detailed design artifacts like wireframes and HTML mockups.  That way when the developers complete the walking skeleton in a week or two, and they are ready to begin building the real product, the design team will have had time to complete the first round of mockups and graphic assets.<\/p>\n<p><strong>An effective Sprint 0 will be a collaborative design session between UX\/design and development, and at the end everyone on the team will have had their voice heard.<\/strong><\/p>\n<p><img loading=\"lazy\" src=\"\/wp-content\/uploads\/2014\/09\/TeamPicBW.png\" alt=\"Collaboration for the win\" width=\"700\" height=\"203\" class=\"alignleft size-full wp-image-1014\" style=\"max-width: 700px; max-height: 203px;\" \/><br clear=\"left\"\/><\/p>\n<h2>#6 &#8211; Use a 3 Amigos process<\/h2>\n<p>A <strong><a href=\"https:\/\/www.scrumalliance.org\/community\/articles\/2013\/2013-april\/introducing-the-three-amigos\" target=\"_blank\" rel=\"noopener noreferrer\">3 Amigos meeting<\/a><\/strong> is a pre-planning session for Scrum teams where the developers, testers, and the customer get together to have discussions about what items will be planned for in the next sprint.  The team is not committing to the next sprint\u2019s work yet, but this is an opportunity for them to ask the customer or Product Owner for more details about upcoming work.<\/p>\n<p><strong>These meetings are also the perfect opportunity for UX and design to present their wireframes and mockups to the full team for what they think should be worked on next.<\/strong>  Holding these meetings every sprint helps the design team to build a cadence that is one step ahead of the developers, so that both sides feel like they have the information and artifacts they need, just in time.<\/p>\n<h2>#7 &#8211; Get the team together outside of work<\/h2>\n<p>Finally, you need to <strong>get the team together regularly in social settings where they can build the friendships and trust that are necessary to weather the more stressful periods of work.<\/strong>  If your team is co-located, this can be as simple as taking everyone out to lunch.  <\/p>\n<p>If your team is distributed (as our is), this is more complicated and more expensive, but it\u2019s worth it.  The video below is one we made about a team building event we had earlier this year, and I encourage you to think creatively and think big about how you can use events outside of work to build the personal bond between design and development that high performing teams need.<\/p>\n<p><iframe src=\"\/\/player.vimeo.com\/video\/106243891\" width=\"500\" height=\"281\" frameborder=\"0\" webkitallowfullscreen mozallowfullscreen allowfullscreen><\/iframe> <\/p>\n<p><a href=\"http:\/\/vimeo.com\/106243891\">Team Building for Distributed Teams &#8211; AgilityFeat in Costa Rica<\/a> from <a href=\"http:\/\/vimeo.com\/user24916355\">Arin Sime<\/a> on <a href=\"https:\/\/vimeo.com\">Vimeo<\/a>.<\/p>\n<h2>It all comes down to TRUST<\/h2>\n<p><strong>Ultimately, the only way to ensure harmony and high performance between your UX\/design teams and your developers is to ensure they trust each other.  That\u2019s not easy, and if they are in conflict now, then be patient.  It will take time.<\/p>\n<p>Make sure they understand each other\u2019s jobs by learning a little bit of development or design techniques, are able to work collaboratively in an iterative fashion, and that they have the camaraderie to respect each other personally as well as professionally.  <\/p>\n<p>Then you too will be able to build a higher performing team that is a pleasure to be part of.<\/strong><\/p>","protected":false},"excerpt":{"rendered":"<p>Software development is by its nature a very creative process. Obviously graphic design is an art form, but there is also an art to the technical architecture of a project, the coding style, the way you test, and the interaction design. Those roles are filled by multiple people on a single project, each one bringing [&hellip;]<\/p>","protected":false},"author":4,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":""},"categories":[100],"tags":[5,101,32,33,49],"jetpack_featured_media_url":"","yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v15.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>7 Keys to ensure harmony between UX and Development - AgilityFeat Panama Software Test Center<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/34.200.113.64\/blog\/2014\/09\/7-keys-to-ux-harmony\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"7 Keys to ensure harmony between UX and Development - AgilityFeat Panama Software Test Center\" \/>\n<meta property=\"og:description\" content=\"Software development is by its nature a very creative process. Obviously graphic design is an art form, but there is also an art to the technical architecture of a project, the coding style, the way you test, and the interaction design. Those roles are filled by multiple people on a single project, each one bringing [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"http:\/\/34.200.113.64\/blog\/2014\/09\/7-keys-to-ux-harmony\/\" \/>\n<meta property=\"og:site_name\" content=\"AgilityFeat Panama Software Test Center\" \/>\n<meta property=\"article:published_time\" content=\"2014-09-25T12:00:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-11-10T02:41:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/agilityfeatpanama.com\/wp-content\/uploads\/2014\/09\/ProcessCloseup1.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"8 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/34.200.113.64\/#website\",\"url\":\"https:\/\/34.200.113.64\/\",\"name\":\"AgilityFeat Panama Software Test Center\",\"description\":\"AgilityFeat Panama offers customized, multilevel web and mobile software testing for a variety of industries.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/34.200.113.64\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"http:\/\/34.200.113.64\/blog\/2014\/09\/7-keys-to-ux-harmony\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"\/wp-content\/uploads\/2014\/09\/ProcessCloseup1.png\"},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/34.200.113.64\/blog\/2014\/09\/7-keys-to-ux-harmony\/#webpage\",\"url\":\"http:\/\/34.200.113.64\/blog\/2014\/09\/7-keys-to-ux-harmony\/\",\"name\":\"7 Keys to ensure harmony between UX and Development - AgilityFeat Panama Software Test Center\",\"isPartOf\":{\"@id\":\"https:\/\/34.200.113.64\/#website\"},\"primaryImageOfPage\":{\"@id\":\"http:\/\/34.200.113.64\/blog\/2014\/09\/7-keys-to-ux-harmony\/#primaryimage\"},\"datePublished\":\"2014-09-25T12:00:52+00:00\",\"dateModified\":\"2020-11-10T02:41:15+00:00\",\"author\":{\"@id\":\"https:\/\/34.200.113.64\/#\/schema\/person\/c8d60d597071526db386b2b8a4afac64\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/34.200.113.64\/blog\/2014\/09\/7-keys-to-ux-harmony\/\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/34.200.113.64\/#\/schema\/person\/c8d60d597071526db386b2b8a4afac64\",\"name\":\"arin\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/34.200.113.64\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/cc498e210512c707ed769986dd745896?s=96&d=mm&r=g\",\"caption\":\"arin\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/agilityfeatpanama.com\/en\/wp-json\/wp\/v2\/posts\/1009"}],"collection":[{"href":"https:\/\/agilityfeatpanama.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/agilityfeatpanama.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/agilityfeatpanama.com\/en\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/agilityfeatpanama.com\/en\/wp-json\/wp\/v2\/comments?post=1009"}],"version-history":[{"count":1,"href":"https:\/\/agilityfeatpanama.com\/en\/wp-json\/wp\/v2\/posts\/1009\/revisions"}],"predecessor-version":[{"id":1340,"href":"https:\/\/agilityfeatpanama.com\/en\/wp-json\/wp\/v2\/posts\/1009\/revisions\/1340"}],"wp:attachment":[{"href":"https:\/\/agilityfeatpanama.com\/en\/wp-json\/wp\/v2\/media?parent=1009"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/agilityfeatpanama.com\/en\/wp-json\/wp\/v2\/categories?post=1009"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/agilityfeatpanama.com\/en\/wp-json\/wp\/v2\/tags?post=1009"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}