{"id":203,"date":"2025-12-22T12:02:09","date_gmt":"2025-12-22T12:02:09","guid":{"rendered":"https:\/\/aisyah.nl\/?page_id=203"},"modified":"2025-12-22T12:32:35","modified_gmt":"2025-12-22T12:32:35","slug":"when-editable-isnt-usable","status":"publish","type":"page","link":"https:\/\/aisyah.nl\/?page_id=203","title":{"rendered":"When &#8216;Editable&#8217; isn&#8217;t usable"},"content":{"rendered":"\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-23b1a4dc wp-block-group-is-layout-constrained\" style=\"padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)\">\n<div class=\"wp-block-group alignwide is-content-justification-space-between is-layout-flex wp-container-core-group-is-layout-b585a4aa wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group is-layout-flex wp-container-core-group-is-layout-7a92790e wp-block-group-is-layout-flex\"><div class=\"is-default-size wp-block-site-logo\"><a href=\"https:\/\/aisyah.nl\/\" class=\"custom-logo-link\" rel=\"home\"><img loading=\"lazy\" decoding=\"async\" width=\"113\" height=\"104\" src=\"https:\/\/aisyah.nl\/wp-content\/uploads\/2025\/12\/version-4.png\" class=\"custom-logo\" alt=\"\" \/><\/a><\/div>\n\n<\/div>\n\n\n<nav class=\"is-responsive items-justified-right wp-block-navigation is-content-justification-right is-layout-flex wp-container-core-navigation-is-layout-f665d2b5 wp-block-navigation-is-layout-flex\" aria-label=\"Navigation\" \n\t\t data-wp-interactive=\"core\/navigation\" data-wp-context='{\"overlayOpenedBy\":{\"click\":false,\"hover\":false,\"focus\":false},\"type\":\"overlay\",\"roleAttribute\":\"\",\"ariaLabel\":\"Menu\"}'><button aria-haspopup=\"dialog\" aria-label=\"Open menu\" class=\"wp-block-navigation__responsive-container-open\" \n\t\t\t\tdata-wp-on--click=\"actions.openMenuOnClick\"\n\t\t\t\tdata-wp-on--keydown=\"actions.handleMenuKeydown\"\n\t\t\t><svg width=\"24\" height=\"24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M4 7.5h16v1.5H4z\"><\/path><path d=\"M4 15h16v1.5H4z\"><\/path><\/svg><\/button>\n\t\t\t\t<div class=\"wp-block-navigation__responsive-container\"  id=\"modal-1\" \n\t\t\t\tdata-wp-class--has-modal-open=\"state.isMenuOpen\"\n\t\t\t\tdata-wp-class--is-menu-open=\"state.isMenuOpen\"\n\t\t\t\tdata-wp-watch=\"callbacks.initMenu\"\n\t\t\t\tdata-wp-on--keydown=\"actions.handleMenuKeydown\"\n\t\t\t\tdata-wp-on--focusout=\"actions.handleMenuFocusout\"\n\t\t\t\ttabindex=\"-1\"\n\t\t\t>\n\t\t\t\t\t<div class=\"wp-block-navigation__responsive-close\" tabindex=\"-1\">\n\t\t\t\t\t\t<div class=\"wp-block-navigation__responsive-dialog\" \n\t\t\t\tdata-wp-bind--aria-modal=\"state.ariaModal\"\n\t\t\t\tdata-wp-bind--aria-label=\"state.ariaLabel\"\n\t\t\t\tdata-wp-bind--role=\"state.roleAttribute\"\n\t\t\t>\n\t\t\t\t\t\t\t<button aria-label=\"Close menu\" class=\"wp-block-navigation__responsive-container-close\" \n\t\t\t\tdata-wp-on--click=\"actions.closeMenuOnClick\"\n\t\t\t><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><path d=\"m13.06 12 6.47-6.47-1.06-1.06L12 10.94 5.53 4.47 4.47 5.53 10.94 12l-6.47 6.47 1.06 1.06L12 13.06l6.47 6.47 1.06-1.06L13.06 12Z\"><\/path><\/svg><\/button>\n\t\t\t\t\t\t\t<div class=\"wp-block-navigation__responsive-container-content\" \n\t\t\t\tdata-wp-watch=\"callbacks.focusFirstElement\"\n\t\t\t id=\"modal-1-content\">\n\t\t\t\t\t\t\t\t<ul class=\"wp-block-navigation__container is-responsive items-justified-right wp-block-navigation\"><li data-wp-context=\"{ &quot;submenuOpenedBy&quot;: { &quot;click&quot;: false, &quot;hover&quot;: false, &quot;focus&quot;: false }, &quot;type&quot;: &quot;submenu&quot;, &quot;modal&quot;: null, &quot;previousFocus&quot;: null }\" data-wp-interactive=\"core\/navigation\" data-wp-on--focusout=\"actions.handleMenuFocusout\" data-wp-on--keydown=\"actions.handleMenuKeydown\" data-wp-on--mouseenter=\"actions.openMenuOnHover\" data-wp-on--mouseleave=\"actions.closeMenuOnHover\" data-wp-watch=\"callbacks.initMenu\" tabindex=\"-1\" class=\"wp-block-navigation-item has-child open-on-hover-click wp-block-navigation-submenu\"><a class=\"wp-block-navigation-item__content\" href=\"https:\/\/aisyah.nl\/?page_id=23\"><span class=\"wp-block-navigation-item__label\">Work<\/span><\/a><button data-wp-bind--aria-expanded=\"state.isMenuOpen\" data-wp-on--click=\"actions.toggleMenuOnClick\" aria-label=\"Work submenu\" class=\"wp-block-navigation__submenu-icon wp-block-navigation-submenu__toggle\" ><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M1.50002 4L6.00002 8L10.5 4\" stroke-width=\"1.5\"><\/path><\/svg><\/button><ul data-wp-on--focus=\"actions.openMenuOnFocus\" class=\"wp-block-navigation__submenu-container wp-block-navigation-submenu\"><li class=\" wp-block-navigation-item wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\"  href=\"https:\/\/aisyah.nl\/?page_id=23\"><span class=\"wp-block-navigation-item__label\">Designing a consent system<\/span><\/a><\/li><li class=\" wp-block-navigation-item wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\"  href=\"https:\/\/aisyah.nl\/?page_id=35\"><span class=\"wp-block-navigation-item__label\">Extending a communication application with push notification<\/span><\/a><\/li><li class=\" wp-block-navigation-item wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\"  href=\"https:\/\/aisyah.nl\/?page_id=203\"><span class=\"wp-block-navigation-item__label\">When \u2018Editable\u2019 isn\u2019t usable<\/span><\/a><\/li><\/ul><\/li><li class=\" wp-block-navigation-item wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\"  href=\"https:\/\/aisyah.nl\/?page_id=87\"><span class=\"wp-block-navigation-item__label\">About me<\/span><\/a><\/li><\/ul>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div><\/nav><\/div>\n<\/div>\n\n\n\n<h1 class=\"wp-block-heading\">When &#8216;Editable&#8217; isn&#8217;t usable<\/h1>\n\n\n\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-6c531013 wp-block-group-is-layout-flex\">\n<p class=\"is-style-text-annotation is-style-text-annotation--2\">UX Audit<\/p>\n\n\n\n<p class=\"is-style-text-annotation is-style-text-annotation--3\">Enterprise UX<\/p>\n<\/div>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/aisyah.nl\/wp-content\/uploads\/2025\/12\/Template-list-1-1024x683.png\" alt=\"\" class=\"wp-image-221\" style=\"width:1340px;height:auto\" srcset=\"https:\/\/aisyah.nl\/wp-content\/uploads\/2025\/12\/Template-list-1-1024x683.png 1024w, https:\/\/aisyah.nl\/wp-content\/uploads\/2025\/12\/Template-list-1-300x200.png 300w, https:\/\/aisyah.nl\/wp-content\/uploads\/2025\/12\/Template-list-1-768x512.png 768w, https:\/\/aisyah.nl\/wp-content\/uploads\/2025\/12\/Template-list-1-1536x1024.png 1536w, https:\/\/aisyah.nl\/wp-content\/uploads\/2025\/12\/Template-list-1-2048x1365.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Context.<\/h2>\n\n\n\n<p>Hailey is an internal application at Coolblue used by customer journey specialists to manage transactional email communications across multiple customer journeys.<\/p>\n\n\n\n<p>It was introduced to reduce reliance on development teams, enabling non-technical users to independently create and maintain high-volume, business-critical email templates.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Key constraints:<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Legacy architecture<\/li>\n\n\n\n<li>Strong developer ownership of the UI<\/li>\n\n\n\n<li>Limited appetite for visual change<\/li>\n\n\n\n<li>High cost of errors in production emails<\/li>\n\n\n\n<li>No immediate mandate for redesign<\/li>\n<\/ul>\n\n\n\n<p>These constraints shaped both the scope of the audit and the way recommendations were framed.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">The Challenge: Realigning a Developer-Centric System to a New User Reality<\/h2>\n\n\n\n<p>As ownership shifted from developers to customer journey and marketing specialists, Hailey\u2019s developer-centric interaction model no longer aligned with its primary users.<\/p>\n\n\n\n<p>Tasks that were once manageable for technical users introduced unnecessary cognitive load for non-technical specialists, increasing the risk of errors in everyday workflows.<\/p>\n\n\n\n<p>The challenge was not just identifying usability issues, but persuading a team deeply invested in the existing interface that the system\u2019s assumptions about its users had fundamentally changed.<\/p>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Approach.<\/h1>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Using a UX Audit as a Persuasion Tool<\/h2>\n\n\n\n<p>Given the system\u2019s legacy nature and resistance to large-scale UI changes, a full redesign proposal would have been premature and unlikely to succeed.<\/p>\n\n\n\n<p>Instead, I focused the audit on Hailey\u2019s core value driver: the <strong>email template editing workflow<\/strong>.<\/p>\n\n\n\n<p>My approach combined:<\/p>\n\n\n\n<div class=\"wp-block-media-text is-stacked-on-mobile\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"683\" src=\"http:\/\/aisyah.nl\/wp-content\/uploads\/2025\/12\/Usability-challenges-with-template-editor-1024x683.png\" alt=\"\" class=\"wp-image-219 size-full\" srcset=\"https:\/\/aisyah.nl\/wp-content\/uploads\/2025\/12\/Usability-challenges-with-template-editor-1024x683.png 1024w, https:\/\/aisyah.nl\/wp-content\/uploads\/2025\/12\/Usability-challenges-with-template-editor-300x200.png 300w, https:\/\/aisyah.nl\/wp-content\/uploads\/2025\/12\/Usability-challenges-with-template-editor-768x512.png 768w, https:\/\/aisyah.nl\/wp-content\/uploads\/2025\/12\/Usability-challenges-with-template-editor-1536x1024.png 1536w, https:\/\/aisyah.nl\/wp-content\/uploads\/2025\/12\/Usability-challenges-with-template-editor-2048x1365.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p>1. A task-based UX audit of the template editing flow and mapping key screens involved in template editing<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-media-text has-media-on-the-right is-stacked-on-mobile\"><div class=\"wp-block-media-text__content\">\n<p>2. A moderated user session to validate assumptions and evaluate whether users understood the purpose and functionality of each screen without external help<\/p>\n<\/div><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"809\" height=\"1024\" src=\"http:\/\/aisyah.nl\/wp-content\/uploads\/2025\/12\/User-session-2-809x1024.png\" alt=\"\" class=\"wp-image-217 size-full\" srcset=\"https:\/\/aisyah.nl\/wp-content\/uploads\/2025\/12\/User-session-2-809x1024.png 809w, https:\/\/aisyah.nl\/wp-content\/uploads\/2025\/12\/User-session-2-237x300.png 237w, https:\/\/aisyah.nl\/wp-content\/uploads\/2025\/12\/User-session-2-768x972.png 768w, https:\/\/aisyah.nl\/wp-content\/uploads\/2025\/12\/User-session-2-1213x1536.png 1213w, https:\/\/aisyah.nl\/wp-content\/uploads\/2025\/12\/User-session-2-1618x2048.png 1618w, https:\/\/aisyah.nl\/wp-content\/uploads\/2025\/12\/User-session-2.png 2000w\" sizes=\"auto, (max-width: 809px) 100vw, 809px\" \/><\/figure><\/div>\n\n\n\n<p>This allowed me to contrast the system\u2019s technical structure with users\u2019 mental models and surface where friction translated into real operational risk.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Key Findings<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Low adoption of the template editor<\/strong>, with only 2 out of 10 intended users actively using the feature<\/li>\n\n\n\n<li><strong>High cognitive load<\/strong>, driven by limited experience with template editors and a lack of in-context guidance<\/li>\n\n\n\n<li><strong>Technical terminology such as \u201cbranches,\u201d \u201cvariables,\u201d and \u201ccomponent classes\u201d created comprehension gaps<\/strong>, leading to hesitation, errors, and reliance on developer support<\/li>\n<\/ul>\n\n\n\n<p>These issues made the tool feel fragile and intimidating, particularly in high-stakes scenarios where accuracy and confidence were critical.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Recommendations<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Incremental, System-Aware Improvements<\/h3>\n\n\n\n<div class=\"wp-block-media-text is-stacked-on-mobile is-vertically-aligned-top\"><figure class=\"wp-block-media-text__media\"><a href=\"https:\/\/aisyah.nl\/wp-content\/uploads\/2025\/12\/MoSCow-scaled.png\"><img loading=\"lazy\" decoding=\"async\" width=\"683\" height=\"1024\" src=\"http:\/\/aisyah.nl\/wp-content\/uploads\/2025\/12\/MoSCow-683x1024.png\" alt=\"\" class=\"wp-image-218 size-full\" srcset=\"https:\/\/aisyah.nl\/wp-content\/uploads\/2025\/12\/MoSCow-683x1024.png 683w, https:\/\/aisyah.nl\/wp-content\/uploads\/2025\/12\/MoSCow-200x300.png 200w, https:\/\/aisyah.nl\/wp-content\/uploads\/2025\/12\/MoSCow-768x1152.png 768w, https:\/\/aisyah.nl\/wp-content\/uploads\/2025\/12\/MoSCow-1024x1536.png 1024w, https:\/\/aisyah.nl\/wp-content\/uploads\/2025\/12\/MoSCow-1365x2048.png 1365w, https:\/\/aisyah.nl\/wp-content\/uploads\/2025\/12\/MoSCow-scaled.png 1707w\" sizes=\"auto, (max-width: 683px) 100vw, 683px\" \/><\/a><\/figure><div class=\"wp-block-media-text__content\">\n<p>Rather than advocating for a complete overhaul, I framed recommendations as <strong>incremental, low-risk improvements<\/strong> aligned with both usability impact and technical feasibility.<\/p>\n\n\n\n<p>Using a MoSCoW prioritization framework, recommendations focused on:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Reducing exposure to technical terminology for non-technical users<\/li>\n\n\n\n<li>Introducing progressive disclosure and contextual guidance<\/li>\n\n\n\n<li>Improving error prevention in critical workflows<\/li>\n\n\n\n<li>Supporting confidence and clarity during template editing<\/li>\n<\/ul>\n\n\n\n<p>This approach allowed the team to discuss usability improvements without immediately challenging the existing architecture.<\/p>\n<\/div><\/div>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Outcome.<\/h1>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>The findings were shared with the product owner and development team, grounded in real user evidence rather than abstract heuristics.<\/p>\n\n\n\n<p>This shifted conversations from defending the current interface to exploring how the system could better support its evolving user base. While no immediate redesign was mandated, the audit created shared awareness of usability risks and established a more collaborative foundation for future improvements.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">What We Planned Next<\/h2>\n\n\n\n<p>Together with the product owner, we aligned on designing a scalable solution in the following quarter that addressed the highest-risk usability issues identified during the audit.<\/p>\n\n\n\n<p>The goal was to reduce error risk in customer communications while laying the groundwork for a more user-centric evolution of the tool.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Key takeaways<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Meaningful UX change often starts with <strong>alignment, not artifacts<\/strong><\/li>\n\n\n\n<li>Framing usability issues in terms of risk and operational impact builds cross-disciplinary trust<\/li>\n\n\n\n<li>Design influence does not always require high-fidelity solutions<\/li>\n\n\n\n<li>Establishing a shared vision was more valuable than proposing a polished redesign at this stage<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>When &#8216;Editable&#8217; isn&#8217;t usable UX Audit Enterprise UX Context. Hailey is an internal application at Coolblue used by customer journey specialists to manage transactional email communications across multiple customer journeys. It was introduced to reduce reliance on development teams, enabling non-technical users to independently create and maintain high-volume, business-critical email templates. Key constraints: These constraints [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-203","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/aisyah.nl\/index.php?rest_route=\/wp\/v2\/pages\/203","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aisyah.nl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/aisyah.nl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/aisyah.nl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aisyah.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=203"}],"version-history":[{"count":11,"href":"https:\/\/aisyah.nl\/index.php?rest_route=\/wp\/v2\/pages\/203\/revisions"}],"predecessor-version":[{"id":231,"href":"https:\/\/aisyah.nl\/index.php?rest_route=\/wp\/v2\/pages\/203\/revisions\/231"}],"wp:attachment":[{"href":"https:\/\/aisyah.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=203"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}