For over a decade, I have specialized in the “Hard Parts” of design\u2014taking fragmented legacy applications (for websites, apps, and eLearning courses) and “upcycling” them into high-performance systems. My passion lies not in empty white space, but in information density<\/strong>. I find the hidden order in data so that users don\u2019t have to.<\/p>\n\n\n\n Some enterprise software with lots of data needs better architecture. My core methodology is technical alignment of design<\/strong>\u2014creating tokenized, documented, and production-ready systems that eliminate engineering ambiguity and accelerate shipping velocity.<\/p>\n\n\n\n Here is a look at how I apply this “Upcycler” mindset to some of the most challenging screens in Enterprise and Healthcare:<\/p>\n\n\n\n The standard data table is the engine of the enterprise, and it\u2019s often the biggest source of user frustration.<\/p>\n\n\n The Upcycle:<\/strong> Even in a simple grid, clarity is governance. I architect these grids by standardizing typography ( In dense applications, users need to edit data without navigating away. This creates massive complexity for design governance.<\/p>\n\n\n The Upcycle:<\/strong> I reverse-engineer legacy applications that require dense, inline data manipulation. This redesign isn\u2019t just aesthetic; it\u2019s logical. Each cell (forms, select lists, date pickers) is tokenized and aligned to a direct Kendo UI mapping, ensuring the final UI matches the documented specs and that the code is easy to build and maintain.<\/p>\n\n\n\n <\/p>\n\n\n\n The Upcycle:<\/strong> How do you design for content you cannot predict? In the tables I work with, I architect the design to handle long cell titles by wrapping the text or using abbreviated text. This ensures the visual integrity of the system holds across wide grids while still making the most critical metadata readable for the user. For grids with more columns, I’ll use a horizontal scroll.<\/p>\n\n\n <\/p>\n\n\n\n Sometimes, data needs to be sorted and grouped.<\/p>\n\n\n The Upcycle:<\/strong> In this refactor, I created clear visual hierarchy for data that needed to be grouped. By standardizing the ‘Expand\/Collapse’ logic and separating data clusters with governed white space, I took a complex set of records and transformed it into an organized, navigable experience.<\/p>\n\n\n\n <\/p>\n\n\n\n And sometimes, data needs to be nested inside grids.<\/p>\n\n\n The Upcycle:<\/strong> I took overwhelming legacy data tables and modernised them to be much more readable. This “re-architecting” reduces user cognitive load and directly impacts business velocity.<\/p>\n\n\n\n <\/p>\n \u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722<\/p>\n IC UI Designer \u2022 Design Systems Contributor \u2022 Figma Libraries, Telerik\/Kendo UI, Tokens, Component Libraries<\/p>\n\n In the world of Enterprise UX, there is a distinct dividing line: between those who want to design minimalist “landing pages” and those who want to fix the messy, mission-critical screens that keep businesses running. I am firmly on the side of complexity. And I love to “upcycle”, both in my life and my job. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-872","post","type-post","status-publish","format-standard","hentry","category-ui-design"],"_links":{"self":[{"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/posts\/872","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/comments?post=872"}],"version-history":[{"count":1,"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/posts\/872\/revisions"}],"predecessor-version":[{"id":878,"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/posts\/872\/revisions\/878"}],"wp:attachment":[{"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/media?parent=872"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/categories?post=872"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/tags?post=872"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}From “Legacy Chaos” to “Systemic Logic”<\/h3>\n\n\n\n
\n\n\n\n1. Transforming the Standard Grid (The “Upcycle” Foundation)<\/h3>\n\n\n\n
![\"\"](\"https:\/\/amyoukey.com\/blog\/wp-content\/uploads\/2025\/12\/The-First-Thing-I-Do-When-Facing-a-Legacy-App-Full-of-UI-Inconsistencies-scaled.png\")
<\/figure>\n<\/div>\n\n\nBase Text\/MD<\/code>), defining exact padding (e.g., kendo-spacing-10<\/code>), and aligning all elements to a strict Design System. This transforms a basic table into a structured, scalable component that handles sorting, filtering, and pagination with zero cognitive load for the user.<\/p>\n\n\n![\"\"](\"https:\/\/amyoukey.com\/blog\/wp-content\/uploads\/2026\/05\/Table.png\")
<\/figure>\n<\/div>\n\n\n2. In-Cell Editing: Governance in Every Cell<\/h3>\n\n\n\n
![\"\"](\"https:\/\/amyoukey.com\/blog\/wp-content\/uploads\/2026\/05\/TableEditable.png\")
<\/figure>\n<\/div>\n\n\n3. The “20-Column Table”<\/h3>\n\n\n\n
![\"\"](\"https:\/\/amyoukey.com\/blog\/wp-content\/uploads\/2026\/05\/ScrollableTable-scaled.png\")
<\/figure>\n<\/div>\n\n\n4. Grouping and Hierarchy in Complex Data<\/h3>\n\n\n\n
![\"\"](\"https:\/\/amyoukey.com\/blog\/wp-content\/uploads\/2026\/05\/TableGrouped.png\")
<\/figure>\n<\/div>\n\n\n5. The Nested Table (Healthcare & EHR Complexity)<\/h3>\n\n\n\n
![\"\"](\"https:\/\/amyoukey.com\/blog\/wp-content\/uploads\/2026\/05\/TableExpandedNested.png\")
<\/figure>\n<\/div>\n\n\n![\"Anne](\"https:\/\/amyoukey.com\/blog\/wp-content\/uploads\/2023\/09\/icon-AY-6.png\"){kind=icon}
<\/a>\n\n![\"Anne](\"https:\/\/amyoukey.com\/blog\/wp-content\/uploads\/2023\/09\/icon-linkedin-2.png\"){kind=icon}
<\/a>\n\n![\"Anne](\"https:\/\/amyoukey.com\/blog\/wp-content\/uploads\/2023\/09\/icon-figma-1.png\"){kind=icon}
<\/a>\n","protected":false},"excerpt":{"rendered":"