Senior UX Engineer · Product Experience Designer

I make complex product workflows easier to use—and easier for teams to build.

UX strategy, interface design, and frontend-aware handoff for SaaS, enterprise products, and business tools—so product teams and business owners can move from unclear journeys to screens developers can build on.

Accepting limited contract engagements

16+ years digital design & web · 7+ years UI/UX · frontend-aware UX

Front-facing portrait of Fazil Ali
MCA · Bharathiyar University Google UX Design Certificate · In progress AI-assisted workflow

When teams bring me in

Situations where clearer UX and frontend-aware design help.

Confusing journeys or screens

A useful product still has journeys, screens, or states that slow people down. I help clarify the path so the next step is easier to find and follow.

Direction before development

A team needs a clearer interface direction before build starts. I shape flows and screens so product and engineering share the same picture.

Designs ready for developers

Approved designs need to become responsive, developer-ready frontend reference. I translate UX into HTML/CSS structure teams can integrate—without taking on backend engineering.

Selected work

Problem, contribution, and the study behind it.

Current engagement Working with Bandhan on enterprise product experience, UX design, and frontend interfaces.

Illustrative Recruitment Bricks dashboard with sidebar navigation, matching shortcuts, and recent activity panels.

Recruitment · dashboards

Recruitment Bricks

Problem Hiring work spans role criteria, résumés, match comparison, and candidate detail—and disconnected views make context easy to lose.

Contribution UX and interface design for recruitment workflows, pipelines, records, and role-specific dashboards in Figma, with frontend-ready structure for engineering.

Read case study
Conceptual Jubilant PRVD procurement illustration comparing vendor quotations for a purchase request.

Jubilant · procurement

Jubilant PRVD

Problem Procurement moves across roles from request and quotations through approval, purchase order, and invoice—status and next actions are easy to lose between stages.

Contribution UX and interface work on multi-role PRVD flows in Figma and HTML/CSS, keeping comparison, status, and next actions readable across the path.

Read case study
Conceptual G4TV Video Command Center illustration with operations dashboard, ingest progress, and attention alerts.

OTT · operations

G4TV Video Command Center

Problem OTT operations need catalogues, assets, metadata, and monitoring together—disconnected views make status and next actions harder to judge.

Contribution UX and interface design for operational dashboards, catalogues, metadata, and monitoring in Figma and HTML/CSS/JavaScript with engineering.

Read case study

Also available: Jubilant LQE Oizys Quason

More process and product work lives in the full case studies archive.

View all case studies

What you receive

Concrete deliverables, shaped by project scope.

Not every engagement includes every item. We agree what is useful for your product stage before work starts.

  • Clearer flows and interface structure

    User journeys, screens, and states arranged so teams can agree on direction before build.

  • Usable responsive screens and states

    Practical UI for the views that matter—including empty, loading, and error states where the work requires them.

  • Figma references and HTML/CSS where useful

    Design files and, when the engagement calls for it, responsive HTML/CSS frontend reference for engineering.

  • Practical handoff developers can build on

    Structure and notes shaped with real frontend constraints—not isolated mockups handed over without context.

How we work together

A short conversation, agreed scope, then shared progress.

Four steps from first note to something your team can build on.

  1. Understand Product context, users, and the friction you want to reduce
  2. Structure Flows, hierarchy, and interface direction before build
  3. Design Screens and states the team can review and refine
  4. Build Frontend-ready reference and handoff where the scope includes it

We start with a short note about what you are trying to improve, then agree fit, scope, and availability. Confirmed hours get focused attention with limited concurrent clients. Progress is shared with your product and development team as we go—flows, screens, and frontend reference where agreed—so decisions stay visible and buildable.

Trust and privacy

Public visuals stay careful; private work stays protected.

Where a case study is labelled conceptual, the visuals are illustrations or compositions—not live client screens.

Internal products and confidential detail stay off this site. I do not publish private client work or screens without permission.

In conversation I can explain my approach at an appropriate level. I will not disclose confidential material without the client’s permission.

Tell me what you’re trying to improve.

A short note is enough to start. We can sort fit, scope, and availability from there.