Hi! I Am
Hasnaa EL-Bassiouny

A passionate and innovative Product Designer on a mission to bring new ideas to life and transform how users interact with technology.

Linkedin Profile
Hasnaa EL-Bassiouny
Client Logo 1 Client Logo 2 Client Logo 3 Client Logo 4 Client Logo 5

How Can I Assist You?

Product Design

I design end-to-end product experiences, from user flows and wireframes to high-fidelity interfaces. By balancing business goals with user needs, I create solutions that are intuitive, scalable, and visually engaging across platforms.

01

Market & User Research

I conduct research to uncover user behaviors, needs, and pain points, combining market insights with usability studies. This helps validate assumptions, define opportunities, and guide design decisions that align with both users and business.

02

UX Auditing

I evaluate digital products through detailed UX audits, Identifying usability issues, accessibility gaps, and design inconsistencies. My goal is to provide actionable recommendations that improve efficiency, clarity, and overall user satisfaction.

03

Design Systems & Handoff

I build scalable design systems using atomic components and design tokens, ensuring consistency across products. Alongside this, I prepare developer-friendly handoffs with clear documentation and extracted HTML/CSS, bridging the gap between design and code.

04

Projects

Secure ZMK Import Workflow

Secure ZMK Import Workflow

Redesigning the high-stakes ZMK Import process into a clear, compliant, and stress-free user journey for Super Admins and Custodians.

View Case study
Basata APP

Basata APP UI Innovation Sprint

I assessed the UI elements and interactions through Nielsen's Heuristics and UI Principles, then proposed focused improvements to enhance usability and user confidence.

View Case study

Testimonials

Don't take my
word for it*
* Take Theirs

❞

"Working With Hasnaa Has Been An Absolute Pleasure. She Possesses The Ability To Take Complex Problems And Transform Them Into Clear, Intuitive Designs That Truly Make Sense. What Sets Her Apart Is Her Exceptional Attention To Detail. She Consistently Identifies Nuances That Others Might..."

See more
Shrook Ashraf

SHROOK ASHRAF

Senior UX/UI designer at Cogent Infomedia

❞

"I Had The Opportunity To Have Hasnaa Report Directly To Me As A UI/UX Designer On One Of Our Website Projects Serving Egypt, UAE, And KSA, Throughout Her Work, She Demonstrated Professionalism, Creativity, And A Strong Ability To Translate Complex Requirements into Intuitive..."

See more
Ahmed Ghazouly

AHMED GHAZOULY

Founder CEO at Frogz Advertising Agency

❞

"Working With Hasnaa Was A Great Experience. She Had A Unique Way Of Simplifying Flows And Anticipating User Errors Before They Even Reached QA. This Helped Me And The Development Team Avoid Many Potential Issues Were Avoided Thanks To Her Eye For Detail And Proactive..."

See more
Muhammad Alkady

MUHAMMAD ALKADY

Senior Android Developer at PayTabs

Portfolio

A selection of my work. Each project showcases my process for solving complex problems through user-centered design.

Secure ZMK Import Workflow

Secure ZMK Import Workflow

Redesigning the high-stakes ZMK Import process into a clear, compliant, and stress-free user journey for Super Admins and Custodians.

View Case study
Basata APP

Basata APP UI Innovation Sprint

I assessed the UI elements and interactions through Nielsen's Heuristics and UI Principles, then proposed focused improvements to enhance usability and user confidence.

View Case study

More projects are in progress and will be added soon...

🔐 Secure ZMK Import Workflow

Redesigning one of the most critical and high-stakes security processes ZMK Import into a clear, stress-free, and compliant user journey that empowers both Super Admins and Custodians.

Role

UX/UI designer

Duration

3 weeks

Company

PayTabs

Tools

Figma, Figjam

ZMK Import Workflow UI

Overview

At PayTabs, one of the top priorities is securing cryptographic keys used in banking and payment transactions. As a UX/UI Designer, my responsibility was to redesign the ZMK Import Workflow to make it clearer, safer, and fully aligned with PCI DSS compliance requirements, while also integrating it into a scalable Design System for future growth.

What is ZMK Import?

  • A ZMK (Zone Master Key) is a master key used to securely exchange cryptographic keys between HSMs (Hardware Security Modules) and other systems.
  • It is split into multiple parts (components).
  • Each part is held by a different Custodian.
  • The ZMK is only formed when all Custodians enter their components.
  • This ensures Separation of Duties—no single person can ever own or control the entire key, significantly reducing fraud or misuse risks.

Business Context

  • The process is essential for any payment company to guarantee the integrity and security of transactions. Custodians and Super Admins ensure no single individual has control over a sensitive key.
  • By providing a clear interface, PayTabs reduces the risk of human error and ensures PCI DSS compilance.
  • This builds trust with banks, partners, and regulators.

PCI DSS Requirements Addressed

The redesigned workflow directly supports critical PCI DSS requirements:

  • Req 3: Protect stored cardholder date—strict key management.
  • Req 7: Restrict access by role (Super Admin vs Custodians).
  • Req 8: Individual authentication for each Custodian.
  • Req 10: Track and monitor all access with an audit trail.
  • Req 12: Enforce Separation of Duties as part of security policies.
Steps 2-4

The Challenge

  • The old process was manual and complex, with a high risk of error.
  • No clear navigation to indicate the current step.
  • Insufficient validation for Component Values and KCV.
  • Users were under pressure—any mistake could disrupt critical payment systems.
  • The solution had to align with the Design System to support scalability and efficiency.

Design Goals

  • Simplify steps for each role (Super Admin/Custodians).
  • Provide clear validation to reduce errors.
  • Add progress indicators and a summary screen.
  • Build modular Design System components using an Atomic Design approach.
  • Deliver Extracted HTML/CSS code from Figma to speed up developer handoff.

Task Flow (Super Admin)

Initiate import
Monitor Status
Review KCVs
Combine & Import
Confirmation

Task Flow (Custodians)

Login
Enter Component / KCV
Submit

Design System Integration

  • Developed reusable components with Atomic Design principles.
  • Improved consistency across PayTabs products.
  • Changes to a single atomic element propagate across the system, ensuring scalability.
Steps 2-4

Developer Handoff

  • Used 'Variables to JSON' plugin (Exported design as JSON).
  • Transformation: Used Style Dictionary to convert JSON tokens into CSS format.
  • Bridged the gap between design and code, enabling faster development and pixel-perfect accuracy.
Steps 2-4

Documentation Approach

Instead of leaving variables as plain code, I documented them visually using a mind map and structured tables. This approach reduced onboarding time for developers, ensured consistency across components, and made the Design System more intuitive to navigate.

Steps 2-4

ZMK Import Process

Step 1: Custodian Input

Each Custodian logs in and submits their Component Value (32 digits) and KCV (6-8 digits) with real-time validation.

Step 1

ZMK Import Process

Step 2: Review (Super Admin)

The Super Admin reviews Custodian statuses and verifies all KCVs in a summary table.

Step 3: Combine Keys

After verification, the Super Admin clicks "Combine", and the system merges all components into the final ZMK.

Step 4: Completion

The process ends with a success or error summary, providing full transparency and audit readiness.

Steps 2-4

Outcome & Impact

  • Simplified the workflow, reducing completion time by 30%.
  • Cut input errors by 40% through validation and prompts.
  • Gave Super Admins full visibility into each step, boosting trust.
  • Improved consistency and reusability via atomic Design System components.
  • Accelerated development with HTML/CSS handoff from Figma.
  • Strengthened PCI DSS compliance with audit-ready documentation.
Steps 2-4

Reflection

This project highlighted that the role of a UX/UI Designer goes beyond creating interfaces. It's about building scalable systems and balancing security compliance with user experience.

The final design delivered a workflow that is:

  • Clear: guided steps and navigation.
  • Secure: enforced separation of duties, validation, and confirmations.
  • User-friendly: reduced stress in a sensitive security process.
  • Scalable: atomic components within a Design System.
  • Developer-ready: seamless handoff with HTML/CSS assets.

Basata APP UI Innovation Sprint

Critique UI elements and interactions using Nielsen's Heuristics and UI Principles, then propose improvements.

Role

Research, Analysis, Ideation, UI designer

Duration

4 weeks

Company

Challenge

Tools

Figma, Figjam

Basata App Hero

Overview

Basata is an Egyptian e-payment service aiming to simplify daily payments and promote financial inclusion. As part of a design challenge, I conducted a UI heuristic evaluation to identify usability problems impacting navigation, task completion, and trust.

Goal

Critique UI elements and interactions using Nielsen's Heuristics and UI Principles, then propose improvements.

Step 1

01

Domain Exploration

Explored fintech apps, identified usability issues and selected a key user flow with major pain points.

Step 2

02

Problem Definition

Defined usability problems by conducting a UI heuristic evaluation and documenting them systematically.

Step 3

03

UI Critique & Reporting

Analyzed the findings and organized them into a structured report to communicate the problems clearly.

Step 4

04

Iterations & Concept Development

Created iterations and alternative design concepts to validate issues and propose improved solutions.

Image 2
Image 3
Image 4
Image 5
Image 6
Image 7
Image 8