[{"data":1,"prerenderedAt":104},["ShallowReactive",2],{"work-adnoc-design-system":3},{"id":4,"title":5,"alsoRead":6,"body":7,"client":51,"description":52,"extension":53,"facts":54,"highlights":75,"inShort":92,"locked":93,"meta":94,"navigation":93,"next":95,"outcomes":6,"partners":6,"path":96,"readMinutes":97,"ready":93,"seo":98,"slides":99,"status":6,"stem":100,"tagline":101,"updated":102,"__hash__":103},"work\u002Fwork\u002Fadnoc-design-system.md","Adnoc Design System",null,{"type":8,"value":9,"toc":44},"minimark",[10,15,19,22,25,29,32,35],[11,12,14],"h2",{"id":13},"what-did-i-do-on-adnocs-design-system","What did I do on ADNOC's design system?",[16,17,18],"p",{},"IBM iX was building a new app for ADNOC to plan and manage turnarounds: the planned shutdowns in oil and gas when a plant stops for maintenance. ADNOC had a starter design system, made for its internal HR tools. It worked more like a style library than a full system, and it didn't cover what a turnaround app needs.",[16,20,21],{},"With a team of six designers, growing to ten, working on different flows across time zones, the screens kept drifting apart. So I became the team's dedicated design system manager. We didn't replace ADNOC's system, we extended it: components, templates and guidelines for the new app, in four parts.",[23,24],"highlights",{},[11,26,28],{"id":27},"how-did-we-keep-it-from-drifting-again","How did we keep it from drifting again?",[16,30,31],{},"The library had been an open file, so anyone could add a component, and copies of the same thing kept appearing. We locked the file, and I became its gatekeeper. Designers asked for new parts through a backlog, and I checked each request before it went in.",[16,33,34],{},"Components came with enough options, and no more. We learned that too many options make a component harder to use than to rebuild, and then designers detach it. Everything ended up in a design handbook with usage guidelines, templates, patterns, colour, type, accessibility, and how to contribute.",[16,36,37,38,43],{},"The product side of the same project, the app itself, is in ",[39,40,42],"a",{"href":41},"\u002Fwork\u002Fadnoc","ADNOC: a turnaround and shutdown management app",".",{"title":45,"searchDepth":46,"depth":47,"links":48},"",2,0,[49,50],{"id":13,"depth":46,"text":14},{"id":27,"depth":46,"text":28},"ADNOC","At IBM iX in Dubai, Jinson Johny ran the design system for ADNOC's turnaround and shutdown management app in 2023–2024. He audited the starter system the client used for internal HR tools and extended it with a modular table, page templates, shared patterns, a gatekept library file and a design handbook.","md",[55,57,60,63,66,69,72],{"label":56,"value":51},"Client",{"label":58,"value":59},"Agency","IBM iX, Dubai",{"label":61,"value":62},"Role","Design System Manager · Visual Designer",{"label":64,"value":65},"Timeline","2023–2024",{"label":67,"value":68},"Product","Turnaround and shutdown management (internal tool)",{"label":70,"value":71},"Team","Up to 10 designers, across time zones",{"label":73,"value":74},"Tools","Figma · Adobe XD",[76,80,84,88],{"icon":77,"title":78,"text":79},"search","Audit first","Measured the starter system against the new app before building anything: tables and graphs were about 70% of the UI, and about 75% of the app was inconsistent.",{"icon":81,"title":82,"text":83},"table","A modular table","Split one rigid table into parts, with cell types for text, dates, statuses, attachments and more, plus filtering and sorting.",{"icon":85,"title":86,"text":87},"layout-grid","Templates and patterns","Page templates and new shared patterns, the missing levels that stopped every designer inventing their own layout.",{"icon":89,"title":90,"text":91},"book-open","A gatekept library and a handbook","One person owns the library file, requests go through a backlog, and a design handbook says how to use it all.","From 2023 to 2024, Jinson Johny was Design System Manager at IBM iX in Dubai for ADNOC's turnaround and shutdown management app. ADNOC's starter design system had been built for internal HR tools and worked more like a style library. He audited it against the new app, then extended it with a modular table component, page templates, new shared patterns, a gatekept library file and a design handbook for a team of up to 10 designers.",true,{},"adnoc","\u002Fwork\u002Fadnoc-design-system",4,{"description":52},[],"work\u002Fadnoc-design-system","Scaling a starter design system to run a whole turnaround app","2026-10","aBRVMv9amsMKm9xh5QxR6ah5_5NVgRZYY7QND1VBlqE",1793655448351]