Available for Senior UI/UX & Front-End Roles | 7+ Years Exp

I design clean digital products
and write the code to ship them.

I'm Mohd Shabab, a Product Designer and Front-End Developer with over 7 years of experience. I take products from rough ideas in Figma straight into clean, responsive HTML, CSS, and JavaScript. Because I work across both design and code, projects ship faster and look exactly as intended.

💻 DEV VIEW

Code inspection mode: Highlighting front-end architecture, semantic HTML5 structure, SCSS variables, and component state.

See My Work Resume (PDF) WhatsApp / Call
7+ Years
Building Products
From early sketches to live web code
4 Core Apps
Designed & Shipped
Fintech, retail SaaS, POS & e-commerce
15,000+ Users
Daily Users
Using these tools in production
0.00 CLS
Fast Page Load
Clean CSS, semantic HTML & zero jank
⚡ Real Components

Interactive Product Demos

Screenshots can't show how an interface really feels. Here are two live modules adapted directly from products I've shipped so you can test their interactions.

Fintech Live Demo
Design: Clear Payment Estimates
Code: Real-Time JS Math

ALJ Finance — Monthly Loan Estimator

When people apply for personal financing, they want to know their monthly payment upfront. This slider gives immediate clarity before asking for any personal ID documents. Pure JavaScript calculation engine. Calculates loan amortization in real time as the slider moves, with zero external dependencies and zero lag.

💼 Real-World Impact

Showing monthly estimates on step 1 replaced an intimidating 34-field paper application and boosted completed loan submissions by 38%.

$25,000
$2,000 $50,000 $100,000
24 Months
Estimated Monthly Payment
$1,118 / mo
Base Principal: $25,000
Interest (6.9% APR): $1,832
Visit Official ALJ Live Page
Retail POS Live Demo
Design: Simple Prescription Entry
Code: Fast Keyboard Shortcuts

Super Optical — Prescription Checkout Counter

Entering optical prescriptions is prone to mistakes. I designed a clear side-by-side layout for right and left eyes (OD/OS) with built-in checks that prevent typos. Designed for speed: cashiers can complete transactions using only keyboard shortcuts and barcode scanners, without having to reach for a mouse.

💼 Real-World Impact

Cut counter checkout time from 4.5 minutes down to 85 seconds and reduced expensive optical lab remake errors by 44%.

👓
Titanium Edge Pro Series
SKU: OPT-8842-BLK • In Stock (14)
$185.00
Eye SPH CYL AXIS
OD (R)
OS (L)
Titanium Frame: $185.00
1.67 High-Index Lenses: +$55.00
Total Order: $240.00
Visit Live Super Optical App
💼 Selected Projects

Featured Work

A few highlights from the past few years where I led the design, built the user flows, and wrote the front-end code.

Fintech / Consumer Lending Abylle Solutions (Consulting for ALJ Finance) 2021 – Present

ALJ Finance — Multi-Step Loan Application

A simple, step-by-step loan application that turned an intimidating 34-field financial evaluation into an easy 5-minute online process.

🎨 Design & User Flow:
  • Clear 4-step progression: Broke a long, scary form into manageable bite-sized steps so applicants never feel overwhelmed.
  • Upfront monthly cost transparency: Borrowers see their estimated monthly payments right away, reducing drop-off before document uploads by 38%.
  • Trust and security cues: Added clear bank-grade SAMA security badges and helpful inline explanations where users enter sensitive ID information.
💻 Front-End Code:
  • Auto-saving drafts: Implemented automatic localStorage saving so users can step away and pick up where they left off without losing their data.
  • Instant client-side validation: Inline validation gives instant, friendly feedback on fields like IBAN and salary without waiting for slow server reloads.
  • Lightweight and responsive: Clean semantic HTML and SCSS ensure smooth performance on both smartphones and office desktops with zero layout shift.
Fintech Multi-Step Forms Figma HTML5 / SCSS JavaScript Design Systems
Live Product ↗ Behance
📈
+38% Form Completion
aljfinance.com/cash-finance
APPLICANT #ALJ-9042 🔒 256-Bit Encrypted
1 Identity
2 Finance
3 Verify
Verified Credit Pre-Approval
$35,000 Approved Limit
Tenure36 Months
Monthly$1,079/mo
Fixed APR5.8% Rate
⚡ Draft Saved Automatically
Enterprise SaaS / Retail POS Super Optical System Flagship SaaS

Super Optical — Optical Retail POS & Inventory

A retail counter system that unifies optometrist prescription entry, multi-branch frame inventory, and instant barcode cashiering into one fast interface.

🎨 Design & Ergonomics:
  • 85-second checkout at the counter: Cut store checkout time from 4.5 minutes down to 85 seconds by eliminating 5 separate popup windows and unifying the prescription matrix with the cart.
  • Stops optical lab mistakes: Built inline validation guards that instantly flag impossible sphere/cylinder/axis numbers, reducing costly lab remakes by 44%.
  • Easy on the eyes: Designed dark and light themes so store staff and optometrists have zero eye strain when moving between dim examination rooms and bright retail counters.
💻 Front-End Code:
  • Keyboard shortcuts for everything: Built full hotkey support (`F4` to pay, `Space` for barcode search, `Ctrl+Enter` to finish) so cashiers can ring up orders without reaching for a mouse.
  • Instant search across 5,000+ frames: Lightweight indexing and virtualized rendering let staff search thousands of frame SKUs in milliseconds without lag.
  • Works on both counter PCs and iPads: Responsive layout adapts smoothly whether staff are at the cash desk or consulting customers on a tablet.
SaaS POS Retail Inventory Data Tables Responsive UI
Live Product ↗ Behance
⚡
85 Sec POS Checkout Speed
superoptical.vercel.app
STORE #12 • REGISTER 04 Total: $428.50
Gucci Frame GG0026O SKU: OPT-8842 • Qty: 1
$320.00
1.67 High Index Anti-Glare Lens OD: -2.75 / OS: -3.00 • PD: 63mm
$108.50
✓ Optical Prescription Verified
Quick Tender [F4]
E-Commerce / DTC Retail Gift Place Platform Flagship E-Comm

Gift Place — Custom Gift Bundles & E-Commerce

An online store built to take the guesswork out of gifting with custom hamper builders, wax-seal cards, and guaranteed delivery scheduling.

🎨 Design & Shopper Experience:
  • Interactive "Build a Box" customizer: Shoppers see items visually drop into a luxury gift basket in real time, which lifted average order value by 34%.
  • Delivery date certainty: Placed an interactive delivery calendar directly on product pages, answering "Will it arrive in time?" before checkout and cutting cart abandonment by 28%.
  • Thoughtful touches: Designed custom unboxing animations, wax-seal greeting cards, and quick filters like "Anniversary" and "Corporate Milestones".
💻 Front-End Code:
  • Slide-out drawer cart: Built an optimistic slide cart so customers can adjust quantities and customize cards with zero page reloads.
  • Fast-loading imagery: Converted all product shots to modern WebP with explicit CSS aspect-ratio containers, achieving a 98+ Google Lighthouse speed score.
  • Streamlined single-page checkout: Fully accessible keyboard navigation and Apple Pay integration make mobile purchasing quick and easy.
E-Commerce Cart UX Design Thinking Responsive Web Frontend Dev
View on Behance
🛍️
-28% Cart Abandonment
giftplace.shop/custom-bundle
Curated Luxury Hamper For: Sarah K. • Corporate Milestone
$89.00
✨ French Lavender Artisan Candle
🍫 Dark Cocoa Belgian Truffles
💌 Gold Foil Note: "Happy 5th Anniversary!"
🚚 Guaranteed Delivery by Sept 2nd
1-Tap Instant Checkout ($89.00)
EdTech / Mobile App & Web School ERP Platform Mobile App & Web

School ERP — Parent Portal & Teacher Mobile App

A unified web and mobile portal connecting 15,000+ families across 6 campuses with teachers for attendance, homework, and instant school notices.

🎨 Design & Ergonomics:
  • Designed for busy parents: Created clean, color-coded daily agendas so parents of all tech backgrounds can check attendance, homework, and fee receipts in seconds.
  • Attendance in under 5 minutes: Replaced morning paper roll-call registers with rapid-tap student cards, saving teachers 15 minutes of instructional time every day.
  • One app for multiple kids: Parents with children in different grades can switch student profiles with a single tap from the top navigation.
💻 Front-End Code:
  • Works offline (PWA): Cached bus routes and weekly timetables locally so parents can check schedules even with weak internet signals.
  • One codebase, multiple roles: Built dynamic UI components that automatically display the right tools whether a Teacher, Parent, or Principal logs in.
  • Instant emergency broadcasts: Optimized push notification feeds so school closure alerts reach 15,000+ parent devices in seconds.
EdTech Mobile UX Parent App Teacher Workflows Responsive
View on Behance
👨‍👩‍👧
15,000+ Active Families
Parent Mobile Portal
👨‍🎓
Aayan Shabab Grade 5-A • Roll #14
Attendance Today Present (9:00 AM)
Mathematics Homework Due Tomorrow • 2 Exercises
TEACHER ROSTER PORTAL 98.4% On Track
Class 5-A Attendance Roster 32 of 33 Students Checked In
Term 2 Exam Schedules Broadcast to 15,000+ Parents
🎨 Component Sandbox

Design System Tokens

A design system has to work smoothly in code, not just in Figma. Play with the controls below to see how these live buttons, toggles, and controls adapt to token changes in real time.

12px
Dynamic Token Buttons
Stateful Segmented & Toggles
Auto-Save KYC Drafts
Production Verified • 99.98% SLA
Live Computed CSS Variables
:root {
  --primary-accent: #6366f1;
  --radius-dynamic: 12px;
  --elevation-ring: rgba(99, 102, 241, 0.25);
  --transition-fluid: cubic-bezier(0.16, 1, 0.3, 1);
}
⏳ Career Milestones

Professional Experience

A consistent track record of designing high-impact digital interfaces and leading front-end implementations.

Senior UI/UX Designer & Front-End Developer

Abylle Solutions — Consulting for ALJ Finance
2021 – Present

Leading product design and front-end code for consumer lending products, turning complex banking policies into clean, easy-to-use digital experiences.

  • Redesigned the core cash financing application: Rebuilt a monolithic 34-field paper application into a 4-step progressive flow, boosting application completion by 38%.
  • Built live loan calculators: Developed client-side payment calculators that give applicants upfront cost clarity, cutting repayment-related support inquiries by 52%.
  • Bridged Figma and code: Maintained design tokens and component libraries across design and engineering, ensuring bilingual (Arabic/English) responsiveness and accessible WCAG standards.

UI/UX & Product Designer

Tradecore Technology
2019 – 2021

Designed user interfaces, dashboards, and reporting workflows for high-volume enterprise SaaS products.

  • Streamlined analytics dashboards: Simplified complex reporting screens and data tables, reducing the steps required to generate monthly business summaries by 35%.
  • Conducted user research: Ran usability tests and interviews with business users, turning real-world friction into clean interface updates.
  • Maintained Figma design systems: Created reusable component sets and handoff guides that helped front-end teams build features consistently.

Web Designer & Front-End Developer

iDigite Pvt. Ltd.
2017 – 2018

Designed client websites and coded responsive interfaces from initial wireframes to live launch.

  • Designed modern, user-friendly layouts tailored to client branding and mobile screens.
  • Wrote clean, responsive HTML, CSS, and JavaScript, testing across major browsers for speed and consistency.

Web Designer

Sparkles Webtech Pvt. Ltd.
2016 – 2017

Created responsive website layouts, branding assets, and digital marketing materials.

Master of Computer Applications (MCA)

Swami Vivekanand Subharti University, Meerut
2018 – 2021

Advanced software engineering, computer networks, database systems, and object-oriented architecture.

Bachelor's Degree — School of Open Learning, University of Delhi (2014 – 2016)
🛠️ Competency Matrix

Technical & Design Expertise

A balanced equilibrium between user research empathy and front-end engineering rigour.

🎯

UX & Product Design

Structuring intuitive journeys and solving business bottlenecks.

User-Centered Design User Research Information Architecture User Flows Wireframing Prototyping Design Systems Usability Testing Design Thinking
🎨

Visual & Interface Craft

Mastering layout, micro-interactions, typography, and contrast.

Figma (Auto Layout & Vars) Adobe XD Photoshop Illustrator CorelDRAW Design Systems Responsive Web Mobile App UI Dashboard Design
💻

Front-End Engineering

Shipping clean, accessible, high-performance web applications.

HTML5 (Semantic) CSS3 / Modern SCSS JavaScript (ES6+) Bootstrap Angular Blazor & C# jQuery Responsive Architecture DOM Performance
🌐

Product Domains

Real-world experience managing complex domain constraints.

Fintech / Cash Financing Enterprise B2B SaaS Optical Retail POS E-Commerce & DTC EdTech & Parent Portals Executive Dashboards
⚡ GET IN TOUCH

Looking for someone who can design and build?

Whether you need a Senior Product Designer to simplify a complex product, or a Front-End Developer who writes clean, accessible code—I'd love to hear about what your team is building.

Call +91 798.283.2350 Text on WhatsApp Resume (PDF) LinkedIn Behance
Direct Phone: +91 798.283.2350
WhatsApp Text: +91 798.283.2350 (Instant Chat)
Email: creativeshabab@gmail.com
Location: India (Available Worldwide)
💼 Projects ⚡ Live Lab 📄 Resume 📞 Call 💬 WhatsApp