Clear digital experiences,thoughtfully designed.

I design reusable interface systems, accessible interaction patterns, and responsive components that stay consistent from Figma to the browser.

UX Engineer at Technway & Frontend Developer at raffiniert media AG

Portrait of Nada Mustafa, UX Engineer
Design systemsReusable components, variants, shared patterns, and documentation built for consistency.
Accessible interactionStates, focus, keyboard behavior, and responsive interaction considered as part of the system.
Figma to browserPrototypes, component references, implementation alignment, and browser-level design QA.

I design the system behind the screen, not just the screen itself.

I work on interfaces as connected systems: components, variants, states, responsive behavior, and interaction rules that need to remain coherent across design and implementation.

In Figma, I build reusable interface foundations and high-fidelity prototypes. In the browser, I validate how those decisions translate into accessible, responsive components, real content, and complete interaction states.

Three projects, three different design problems.

A design system, a role-based application, and a bilingual website. Each project is shown through real product evidence and the part I owned.

Technway Website Experience

A bilingual service website structured to explain the business clearly, present proof, and guide visitors toward the right conversation.

My role
UX Engineering & Design QA
Result
One bilingual website system connecting services, work, content, team, and contact.
Visit technway.biz (opens in a new tab)
Current Technway English homepage in its light black-and-white presentation with orange accents

Technway Component Library

A reusable interface system connecting component decisions in Figma with implementation behavior documented in Storybook.

My role
Design Systems & UX Engineering
Result
34 documented components with a shared Storybook reference.
Open Storybook (opens in a new tab)
Button system tnw-buttonstable
StandardClick Me
OutlinedOutlined Button
Light variantClick Me
DisabledDisabled Button
Start iconAdd to Cart
End iconRead More
xssmmdlgxl

CABA Clinic Appointment System

A responsive clinic product connecting booking, availability, appointment decisions, and daily oversight without flattening the needs of each role.

My role
Interaction Design & UI Development Support
Result
One responsive bilingual product across three distinct user roles.
View project on Technway (opens in a new tab)
CABA clinic dashboard showing appointment statistics, activity, and role-based navigation

From Figma systems to accessible, implementation-ready interfaces.

I connect design systems, interaction behavior, accessibility, and frontend implementation so interface decisions stay coherent from design through browser delivery.

FigmaDesign systemsInteraction designAccessibilityResponsive UIComponent statesStorybookDesign QA

Design systems & Figma architecture

Reusable components, variants, shared patterns, and documentation that keep interface decisions consistent across products.

Accessible interaction design

Component states, focus behavior, keyboard interaction, responsive behavior, and accessibility considerations built into interaction patterns from the beginning.

Prototyping & implementation alignment

High-fidelity prototypes, component specifications, Storybook references, and implementation-aware decisions that reduce ambiguity between Figma and frontend components.

Design QA & browser validation

Browser-level review for visual accuracy, component consistency, responsive behavior, accessibility, real-content states, and interaction quality.

From design systems to the browser, without losing the interaction in between.

I move from interface decisions into reusable systems, implementation-ready behavior, and browser validation.

01

Define

Define interaction behavior, responsive layouts, accessibility needs, and the states each component must support.

02

Systemize

Turn repeated decisions into reusable components, variants, shared patterns, and clear documentation.

03

Prototype & align

Use high-fidelity prototypes and component references to make interaction behavior clear before and during implementation.

04

Validate

Review the built interface for visual accuracy, accessibility, responsive behavior, real content, and interaction consistency.

Good interface design should feel clear before it feels impressive.

Make the important obvious

Hierarchy should help people understand what matters, what changed, and what to do next.

Design for real states

Loading, empty, error, success, and edge cases belong in the design process.

Build for reuse

Good systems help teams move faster without sacrificing consistency or intent.

Stay close to implementation

The final browser experience matters more than the perfection of an isolated mockup.

A career connecting front-end development, interface systems, and UX engineering.

Since 2017, my work has moved across responsive front-end delivery, reusable components, design systems, accessibility, bilingual interfaces, and browser-level quality.

2023 - Present

UX Engineer

Technway

Design systems, accessible interaction patterns, responsive component behavior, Figma-to-browser alignment, component documentation, and design QA across client and internal products.

  • Design systems
  • Accessibility
  • Interaction design
2019 - Present

Frontend Developer

Raffiniert Media AG

Long-term front-end delivery for responsive, maintainable digital platforms, working across component implementation, browser behavior, accessibility, technical fixes, and production quality.

  • Implement and maintain responsive interfaces across long-running digital platforms.
  • Resolve browser, layout, accessibility, and production UI issues through focused technical fixes.
  • Responsive UI
  • Component work
  • Accessibility
2017 - 2018

Freelance Web Developer

Independent

Early client work covering website design, responsive interface implementation, content structure, and practical delivery from initial requirements to a working browser experience.

  • Web design
  • Front-end delivery
  • Responsive builds

The technical and research foundation behind how I design.

Technology, systems thinking, management, and research shape how I approach interface systems, implementation, and quality beyond the visual layer.

Information Technology

Bachelor's degree · 2017

Cairo University

Foundation

Software development, systems analysis, databases, networking, and web technologies.

The Impact of Scrum-XP Hybrid Methodology on Quality in Web Development with Distributed Teamwork

First author conference paper · 2023

Published in

2023 3rd International Conference on Emerging Smart Technologies and Applications (eSmarTA)

Research focus

Hybrid agile practice, distributed teamwork, and quality in web application development.

Enhancing Frontend Efficiency: Reusability and Testability in Component-Driven Development

Co-author conference paper · 2024

Published in

2024 4th International Conference on Emerging Smart Technologies and Applications (eSmarTA)

Research focus

Reusable component practice, testability, and efficient component-driven front-end workflows.

Have an interface that needs stronger systems, accessibility, or implementation alignment?

I work best where design systems, interaction behavior, accessibility, and frontend implementation need to come together clearly.