{"id":13021,"date":"2026-10-07T08:36:11","date_gmt":"2026-10-07T08:36:11","guid":{"rendered":"https:\/\/anchorzup.com\/?post_type=news-blogs&#038;p=13021"},"modified":"2026-10-07T08:36:11","modified_gmt":"2026-10-07T08:36:11","slug":"how-i-built-an-ai-ux-translator-to-bridge-our-legacy-system-and-the-modern-web","status":"publish","type":"news-blogs","link":"https:\/\/anchorzup.com\/de\/news-blogs\/how-i-built-an-ai-ux-translator-to-bridge-our-legacy-system-and-the-modern-web\/","title":{"rendered":"How I Built an AI &#8220;UX Translator&#8221; to Bridge Our Legacy System and the Modern Web"},"content":{"rendered":"<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Every designer who has worked on an enterprise platform knows the feeling. You open a legacy screen that has faithfully served school districts for decades, dense grids, cryptic field names, rules that live partly in the software and partly in the heads of the people who use it every day. Your job is to bring that screen into a modern web experience without losing a single rule that payroll depends on.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">That&#8217;s the work we do every day as we rebuild S3K for the web. And a few months ago, I found a way to make it dramatically faster: I built myself an AI teammate. I call it the UX Translator.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"2560\" height=\"1383\" src=\"https:\/\/anchorzup.com\/wp-content\/uploads\/2026\/10\/Image_4-scaled.webp\" alt=\"\" class=\"wp-image-13122\" srcset=\"https:\/\/anchorzup.com\/wp-content\/uploads\/2026\/10\/Image_4-scaled.webp 2560w, https:\/\/anchorzup.com\/wp-content\/uploads\/2026\/10\/Image_4-300x162.webp 300w, https:\/\/anchorzup.com\/wp-content\/uploads\/2026\/10\/Image_4-766x414.webp 766w, https:\/\/anchorzup.com\/wp-content\/uploads\/2026\/10\/Image_4-1024x553.webp 1024w, https:\/\/anchorzup.com\/wp-content\/uploads\/2026\/10\/Image_4-1536x830.webp 1536w, https:\/\/anchorzup.com\/wp-content\/uploads\/2026\/10\/Image_4-2048x1106.webp 2048w, https:\/\/anchorzup.com\/wp-content\/uploads\/2026\/10\/Image_4-18x10.webp 18w\" sizes=\"(max-width: 2560px) 100vw, 2560px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>The problem: translation, not decoration<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Modernizing an HR and payroll platform isn&#8217;t about making screens prettier. The hard part is translation. A legacy screen might have thirty fields, and behind those fields sit years of business logic, how salary versions roll over between fiscal years, how retro pay applies, when a position can or can&#8217;t be filled.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Before any design work can start, someone has to answer questions like: What does this field actually do? Which rules are enforced by the system, and which are habits users developed? What happens in the edge cases nobody wrote down?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Getting those answers used to mean hours of digging through documentation, old tickets, and conversations with our domain experts. All valuable but slow, and easy to get wrong. And when a designer misunderstands a legacy rule, the cost shows up later as rework, confused developers, or worse: a modern screen that quietly breaks a workflow a district relies on.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"2560\" height=\"1383\" src=\"https:\/\/anchorzup.com\/wp-content\/uploads\/2026\/10\/Image_2-scaled.webp\" alt=\"\" class=\"wp-image-13123\" srcset=\"https:\/\/anchorzup.com\/wp-content\/uploads\/2026\/10\/Image_2-scaled.webp 2560w, https:\/\/anchorzup.com\/wp-content\/uploads\/2026\/10\/Image_2-300x162.webp 300w, https:\/\/anchorzup.com\/wp-content\/uploads\/2026\/10\/Image_2-766x414.webp 766w, https:\/\/anchorzup.com\/wp-content\/uploads\/2026\/10\/Image_2-1024x553.webp 1024w, https:\/\/anchorzup.com\/wp-content\/uploads\/2026\/10\/Image_2-1536x830.webp 1536w, https:\/\/anchorzup.com\/wp-content\/uploads\/2026\/10\/Image_2-2048x1106.webp 2048w, https:\/\/anchorzup.com\/wp-content\/uploads\/2026\/10\/Image_2-18x10.webp 18w\" sizes=\"(max-width: 2560px) 100vw, 2560px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>The idea: what if AI could do the first pass?<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">I&#8217;m a designer, not a developer. But I&#8217;d been experimenting with AI tools in our documentation workspace, and I noticed something: AI is remarkably good at exactly the task that was slowing me down; reading dense, technical material and re-explaining it in plain language.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">So I built an agent with one job. I give it legacy material: screen references, field lists, client review notes, requirement documents and it gives me back a structured &#8220;translation&#8221;:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>A plain-language explanation<\/strong> of what the screen or feature actually does, written for someone who has never seen it<\/li>\n\n\n\n<li><strong>A field-by-field inventory<\/strong>: what each field means, where its data comes from, and whether it still makes sense in a modern flow<\/li>\n\n\n\n<li><strong>The hidden rules and edge cases<\/strong>:\u00a0 the &#8220;what happens if&#8221; scenarios that legacy systems handle silently and modern designs must handle visibly<\/li>\n\n\n\n<li><strong>Open questions<\/strong>: the things it couldn&#8217;t determine, flagged clearly so I know exactly what to bring to our domain experts<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"2560\" height=\"1383\" src=\"https:\/\/anchorzup.com\/wp-content\/uploads\/2026\/10\/Image_3-scaled.webp\" alt=\"\" class=\"wp-image-13124\" srcset=\"https:\/\/anchorzup.com\/wp-content\/uploads\/2026\/10\/Image_3-scaled.webp 2560w, https:\/\/anchorzup.com\/wp-content\/uploads\/2026\/10\/Image_3-300x162.webp 300w, https:\/\/anchorzup.com\/wp-content\/uploads\/2026\/10\/Image_3-766x414.webp 766w, https:\/\/anchorzup.com\/wp-content\/uploads\/2026\/10\/Image_3-1024x553.webp 1024w, https:\/\/anchorzup.com\/wp-content\/uploads\/2026\/10\/Image_3-1536x830.webp 1536w, https:\/\/anchorzup.com\/wp-content\/uploads\/2026\/10\/Image_3-2048x1106.webp 2048w, https:\/\/anchorzup.com\/wp-content\/uploads\/2026\/10\/Image_3-18x10.webp 18w\" sizes=\"(max-width: 2560px) 100vw, 2560px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Honestly, that last part is what won me over. The agent doesn&#8217;t replace our experts, nothing could. What it does is get me ready for them. I used to walk into those conversations asking, &#8220;Can you walk me through this screen?&#8221; Now I show up with, &#8220;Here&#8217;s what I think I understand; can you check these three things for me?&#8221; It&#8217;s a completely different conversation, and a much shorter one.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What changed<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The honest answer: the beginning of every design task got shorter and calmer.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Work that used to take days of detective work now starts with a solid first draft of understanding in minutes. Design briefs are more complete before a single pixel is placed. User stories reach our developers with fewer gaps because edge cases surface at the start of the process instead of the end. And conversations with clients are sharper; we spend our time confirming and refining, not reconstructing.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1383\" src=\"https:\/\/anchorzup.com\/wp-content\/uploads\/2026\/10\/Image_1-scaled.webp\" alt=\"\" class=\"wp-image-13125\" srcset=\"https:\/\/anchorzup.com\/wp-content\/uploads\/2026\/10\/Image_1-scaled.webp 2560w, https:\/\/anchorzup.com\/wp-content\/uploads\/2026\/10\/Image_1-300x162.webp 300w, https:\/\/anchorzup.com\/wp-content\/uploads\/2026\/10\/Image_1-766x414.webp 766w, https:\/\/anchorzup.com\/wp-content\/uploads\/2026\/10\/Image_1-1024x553.webp 1024w, https:\/\/anchorzup.com\/wp-content\/uploads\/2026\/10\/Image_1-1536x830.webp 1536w, https:\/\/anchorzup.com\/wp-content\/uploads\/2026\/10\/Image_1-2048x1106.webp 2048w, https:\/\/anchorzup.com\/wp-content\/uploads\/2026\/10\/Image_1-18x10.webp 18w\" sizes=\"(max-width: 2560px) 100vw, 2560px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Lessons learned along the way<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>You don&#8217;t need to be a developer.<\/strong> The skill that mattered most was one designers already have: asking precise questions and knowing what a good answer looks like. Building the agent was mostly about teaching it what to look for.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>The best output is a good question.<\/strong> The agent&#8217;s biggest gift isn&#8217;t answers: it&#8217;s clarity about what I don&#8217;t yet know. Flagged assumptions and open questions have prevented more design mistakes than any other part of the process.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Legacy logic deserves respect.<\/strong> Modernizing doesn&#8217;t mean discarding. Most legacy rules exist because a real district hit a real problem years ago. The UX Translator helps us keep those rules and finally make them visible and understandable in the interface.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">And the biggest lesson was a personal one. Building this changed how I think about AI in design. The best use I&#8217;ve found isn&#8217;t generating screens, it&#8217;s generating understanding. The design part is still very much human.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>","protected":false},"excerpt":{"rendered":"<p>Every designer who has worked on an enterprise platform knows the feeling. You open a legacy screen that has faithfully served school districts for decades, dense grids, cryptic field names, rules that live partly in the software and partly in the heads of the people who use it every day. Your job is to bring [&hellip;]<\/p>\n","protected":false},"author":19,"featured_media":13102,"template":"","categories":[47],"class_list":["post-13021","news-blogs","type-news-blogs","status-publish","has-post-thumbnail","hentry","category-expert-led"],"acf":{"expert_author_name":"Rona Lohaj","expert_author_first_name":"Rona","expert_author_role":"Product Designer","expert_hire_link":"","expert_author_photo":12989,"expert_author_bio":"Rona is a Product Designer at AnchorzUp with 8+ years of experience in the field. Alongside her design work, she has had the pleasure of teaching and mentoring others, helping new designers find their footing and sharing what she's learned about designing for complex, real-world systems. She currently leads the design of SYSTEMS 3000\u2019s enterprise HR platform, bringing it from legacy software to the modern web.","expert_tag_1":"Design","expert_tag_2":"User Interface","expert_tag_3":"User Experience","expert_tag_4":"Prototyping"},"_links":{"self":[{"href":"https:\/\/anchorzup.com\/de\/wp-json\/wp\/v2\/news-blogs\/13021","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/anchorzup.com\/de\/wp-json\/wp\/v2\/news-blogs"}],"about":[{"href":"https:\/\/anchorzup.com\/de\/wp-json\/wp\/v2\/types\/news-blogs"}],"author":[{"embeddable":true,"href":"https:\/\/anchorzup.com\/de\/wp-json\/wp\/v2\/users\/19"}],"version-history":[{"count":11,"href":"https:\/\/anchorzup.com\/de\/wp-json\/wp\/v2\/news-blogs\/13021\/revisions"}],"predecessor-version":[{"id":13134,"href":"https:\/\/anchorzup.com\/de\/wp-json\/wp\/v2\/news-blogs\/13021\/revisions\/13134"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/anchorzup.com\/de\/wp-json\/wp\/v2\/media\/13102"}],"wp:attachment":[{"href":"https:\/\/anchorzup.com\/de\/wp-json\/wp\/v2\/media?parent=13021"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/anchorzup.com\/de\/wp-json\/wp\/v2\/categories?post=13021"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}