Zeyad Omran
Index ·

Hi, I’m Zeyad

Hard things,
made easy to use.

I’m a curious software developer at IBM who likes turning complex problems into interfaces that feel obvious. I build reusable frontend pieces for supply chain, climate risk, sustainability and order management products, and I led the UI of an AI assistant from first prototype to production.

After hours I build small tools and experiment with AI agents, looking for practical ways to make everyday work easier. I like making useful things, watching how people use them, and sharing what I learn.

Fig. 01 · Same data, less noiseMove to look closerTap to look

Orders · Today

3 orders need you.
Everything else is on track.

#1042Late from Toronto, customer waitingLateReschedule
#1047On hold until payment clearsHoldReview
#1051Carrier delayed in CalgaryRiskNotify

Everything is technically here. The lens shows what someone actually needs.

Three things I’m proud of.

All from my work at IBM. The figures are illustrations with sample content, not product screenshots.

  1. 1.1An answer is only the beginning.Proof of concept production
  2. 1.2Build it well. Build on it.One table, 50+ pages
  3. 1.3Eight seconds to three.62% faster at 50 rows
Story 1.1Fig. 02 · Try it

AI assistant

An answer is only the beginning.

I led the frontend of an AI assistant at IBM, from the first proof of concept all the way to production, alongside five other teams. The idea I pushed hardest for: open the work right next to the chat. In our internal builds, forms and reports sit beside the conversation, so you never lose your place.

Teams I worked with
5
Languages it speaks
10
Read the story

What went wrong

The component library couldn’t handle conversation history in time for the preview release. Rather than move the date, I built search, rename and delete myself and worked through the accessibility fixes with the design system team. We shipped on time.

What I took from it

The answer is only half the job. The interface around it decides whether anyone can actually do something with it.

Release scope

The preview release covers documentation help, feedback and conversation history. Workspace forms and embedded reports were built internally and have not been released.

React inside Angular · TypeScript · Accessibility · Localization

Fig. 02 · Answer, then actionIllustrative
Assistant

Pick a question below. One gets an answer. The other gets you started.

Layout study with sample content. The side-by-side workspace exists in internal builds.

Story 1.2Fig. 03 · Try it

Shared components

Build it well. Build on it.

Team after team was rebuilding the same tables and charts. I worked on the shared pieces instead, and on UI builders that let people set up a chart, table or filter without hand-writing JSON. The table I built now runs on more than 50 pages, and moving an old one over means changing a single field.

Pages using the table
50+
Packages other teams use
3
Read the story

How it worked

The new table kept the old configuration format, so nobody had to rewrite anything to switch. I also published three small TypeScript packages, now used by two teams, for shared components, app-shell messaging and loading states.

Angular · NgRx · TanStack Table

Fig. 03 · One table, many pagesIllustrative
/sites
Sites
NameStatus
TorontoOn track
CalgaryReview
MarkhamOn track
/suppliers
Suppliers
NameStatus
NorthwindReview
FabrikamOn track
ContosoLate
/orders
Orders
NameStatus
#1042Late
#1043On track
#1044On track

3 pages · 3 different tables

Each page has its own table. Every change gets made three times. Switch to After.Tap through the tabs: every page built its own table. Then switch to After.

{
  "widget": {
    "type": "data-grid",
    "columns": ["name", "status"]
  }
}

Sample pages. In production the shared table runs on 50+ pages.

Story 1.3Fig. 04 · Try it

Performance

Eight seconds to three.

One of our tables took about eight seconds to appear with 50 rows. The culprit was a shared parser doing its work one step at a time. I let the independent steps run together and stop early when they could. Same table, about three seconds. That parser sits behind more than 100 pages.

Faster at 50 rows
62%
Pages behind that parser
100+
Read the story

The rule I keep coming back to

If two things don’t depend on each other, don’t make one wait for the other. Then measure it.

Async execution · Profiling

Fig. 04 · Same table, two runsReal time
BeforeRendered

8.0s

Five steps, one after another

048 s
AfterRendered

3.0s

Same steps, together, two exit early

Early
Early
048 s
8.0 s

Schematic. Block sizes are illustrative; the 8 and 3 second totals are the reported 50-row result.

Things I make
after hours.

02.1 · Research libraryLive

Behind the Interface

A library of design research. I take apart websites I admire, look closely at their typography, layout, motion and interaction, and write it up with interactive demos you can play with. It grew out of the same habit that got me into this work.

Next.jsFumadocsTailwind CSS

I care about what happens on the other side of the screen.

I got into this by poking around Behance and Awwwards, trying to work out why some websites felt so good.

Studying human-computer interaction at the University of Calgary gave me better questions to ask. Is this clear? Does it use its space well? Would someone know what to do next?

These days I’m at IBM, on software for supply chains, climate risk, sustainability and order management. Alongside that, I build tools that make other developers’ days easier, and I’ve mentored five engineers from onboarding to shipping on their own.

  1. June 2024 – PresentSoftware Developer, IBMSCIS (opens in a new tab)EIS (opens in a new tab)Envizi (opens in a new tab)OMS (opens in a new tab)
  2. May 2022 – May 2024Front-End Developer Intern, IBMSCIS (opens in a new tab)EIS (opens in a new tab)
  3. September 2019 – June 2024BSc Computer Science, University of CalgaryHCI concentration