Sadaf Fatima
BSc Creative Computing · Portfolio
BSc (Hons) Creative Computing · Class of 2026

Sadaf
Fatima.

I build things at the intersection of design, code & creativity. UI/UX designer and full-stack developer crafting beautiful, functional digital experiences — from complete web platforms to generative art.

View My Work Get In Touch
6+
Projects
3
Years Study
2
Disciplines
Scroll
01 — About Me
Sadaf Fatima
Who I Am

Designer.
Developer.
Creative.

I'm a final-year BSc Creative Computing student, passionate about crafting digital experiences that are as functional as they are beautiful. My work spans UI/UX design, full-stack web development, and creative coding — where logic meets emotion.

Throughout my three years, I've developed a deep appreciation for human-centred design and clean engineering — from building complete e-commerce platforms to designing polished app prototypes and client-facing websites.

My design philosophy is rooted in the belief that the best digital products feel inevitable — so natural and intuitive that users forget someone built them. I build with empathy, iterate with purpose, and ship with craft.

I believe in "emotionally durable design" — creating interfaces that remain satisfying and usable long after the first interaction. This means prioritizing accessibility, performance, and timeless aesthetics over fleeting trends.

JavaScript / React
Node.js / MongoDB
HTML / CSS
UI/UX Design
Figma / Adobe CC
Full Stack Dev
Generative Art
Responsive Design
02 — Selected Work

Things I've
Built & Made.

💬
View Live Site →
Full StackNode.jsSocket.IOMongoDBJWT Auth
NEXUS — Real-Time Chat
A full-stack real-time chat application with a cyberpunk aesthetic. Features public chat rooms, private DMs with read receipts, typing indicators, file/image sharing, emoji reactions, message editing/deletion, and live online user status — powered by Socket.IO and MongoDB.
View Live Site →
📱
View Prototype →
UI/UX DesignFigma
Figma App Prototype
A fully interactive app prototype created in Figma, selected to be showcased on my university's website among the best app prototypes. Demonstrates UX/UI design skills, wireframing, and user flow planning.
View Prototype →
🛒
View Live Site →
Full StackReactNode.jsMongoDB
Full Stack E-Commerce Platform
A comprehensive gift shop website with complete Node.js/Express backend, MongoDB integration, authentication, shopping cart, order processing, and admin dashboard.
View Live Site →
✈️
View Live Site →
Client WorkWeb DesignFrontendGroup Project
Mondial Group — Travel & Tourism
A fully responsive front-end website for Mondial Group, a travel and tourism company. Showcases destinations, services, and packages with a back-end integrated contact form.
View Live Site →
⚡
View Source Code →
PortfolioThree.jsCreative CodingInteraction Design
Portfolio Website — This Site
A hand-crafted, fully animated portfolio featuring a live Three.js 3D particle background, mouse parallax, custom cursor, scroll-triggered reveals, and a dark futuristic aesthetic — built in vanilla HTML, CSS, and JavaScript. Zero frameworks. Pure craft.
View Source Code →
☁️
21°⛅
View Source Code →
Vanilla JSCSS ArtAPI IntegrationVercel
Nimbus — Weather Dashboard
A dreamy weather app with real-time data, 3D animated SVG icons, and a living sky background. Features secure API key handling through Vercel serverless functions, 5-day forecasts, geolocation, and a fully responsive glass-morphism interface.
View Source Code →
03 — Case Study

NEXUS — From Idea
to Real-Time Reality.

A deep dive into the design thinking, architecture decisions, and iterative process behind building a full-stack real-time chat application from scratch.

01

The Problem & Brief

The challenge was to build a real-time communication platform that didn't just "work" — it had to feel immersive, fast, and visually distinctive. Existing chat apps feel sterile. NEXUS was designed for a generation that grew up on cyberpunk aesthetics and expects instant, reactive interfaces.

User Research Problem Definition Competitive Analysis
02

Sketches & Wireframes

Initial sketches focused on layout hierarchy: sidebar navigation for rooms/DMs, a central chat thread, and a user presence panel. Low-fidelity wireframes in Figma mapped user flows — from onboarding and authentication through to sending a message and reacting with an emoji.

Chat Layout — Lo-Fi
Login
↓
Room Select
↓
Chat
↓
DM / React
User Flow Diagram
React Client
↕ Socket.IO
Node / Express
↕ Mongoose
MongoDB
System Architecture
03

Usability Testing Insights

Three rounds of testing with peers and target users revealed key friction points. The findings directly shaped the final product.

🔴
Issue Found
Users couldn't tell if their message had been seen — no read receipt feedback caused uncertainty.
✅
Fix Implemented
Added double-tick read receipts per message, inspired by familiar messaging conventions.
🔴
Issue Found
Room navigation was buried — users opened the wrong chat and didn't notice immediately.
✅
Fix Implemented
Redesigned sidebar with clear active state, unread message badges, and pinned DMs at the top.
🔴
Issue Found
Mobile users struggled with the emoji picker covering the input field on smaller screens.
✅
Fix Implemented
Emoji picker repositioned to open upward on mobile, with scroll-lock to prevent layout shift.
04

Iterations & Final Outcome

Three major iterations refined NEXUS from a functional prototype into a polished product. Key evolution points:

v1
Basic Socket.IO messaging — no auth, no persistence. Proof of concept only.
→
v2
JWT authentication added, MongoDB persistence, basic room system. Usability tested.
→
v3
Full feature set: DMs, reactions, file sharing, read receipts, typing indicators, cyberpunk UI. Deployed.
View Live Project →
04 — Expertise

What I Do
Best.

⚡
Full Stack Development
Building complete, production-ready web applications from database design to polished frontend — with a focus on clean architecture and excellent user experience.
HTML / CSS95%
JavaScript / React88%
Node.js / Express82%
MongoDB / Databases78%
🎨
UI/UX Design
Human-centred design practice from research and ideation through to high-fidelity prototypes and polished, tested design systems.
Figma / Prototyping92%
Adobe Creative Suite85%
UX Research80%
Design Systems82%
🔮
Creative Coding & Web
Writing code as a creative medium — interactive canvas experiences, generative visuals, and animated interfaces that go far beyond the ordinary.
Three.js / Canvas API78%
CSS Animation / Motion88%
Responsive / Mobile92%
Git / Version Control80%
05 — Journey

Education &
Experience.

2023 – Present
BSc (Hons) Creative Computing
University · RAK, UAE
Three-year programme spanning interactive design, creative coding, human-computer interaction, full-stack development, and digital media. Expected 1st Class Honours.
2024 - 2025
Mondial Group — Travel & Tourism Website
Freelance / Client Project
Designed and developed a complete travel and tourism website for Mondial Group — managing the full project lifecycle from client brief through to a coded, deployed website.
2023 – Present
Freelance Designer & Developer
Self-Employed
Designing and building websites and digital experiences for clients end-to-end — from initial brief and UX research through to fully coded, deployed products.
2022 – 2025
Full Stack E-Commerce Platform
Academic & Personal Project
Architected and built a complete MERN stack e-commerce platform — from authentication and product management through to cart, payments, and an admin dashboard.
06 — Kind Words

What People
Say.

"

Sadaf delivered a stunning website for our travel company that exceeded every expectation. The design was modern and immersive, the development was clean and fast, and she managed the entire project professionally from brief to deployment. We received so many compliments from our clients on the new site.

MG
Mondial Group
Travel & Tourism Client
Mondial Group Website
"

Working with Sadaf on our e-commerce platform was a fantastic experience. She understood our brand immediately and translated it into a beautiful, functional online store. The checkout flow, admin dashboard, and product management system all worked flawlessly. Sales went up within the first month of launch.

GG
GoGifts Creations
E-Commerce Client
GoGifts Platform
"

Sadaf's MedCare app prototype was one of the standout submissions of the year. The user flow was intuitive, the visual design was polished and accessible, and her documentation showed a real depth of UX thinking. It was an easy decision to feature it on the university's showcase page.

UC
University Showcase Panel
Faculty — Creative Computing
MedCare Figma Prototype
07 — Thoughts & Writing

Ideas I've
Been Thinking About.

Featured · In Progress
🚀 Coming Soon

Building EduLink — A SaaS Document Management Platform for Universities

What happens when you realise that universities still manage compliance documents over email and spreadsheets? You build a platform. EduLink is a subscription-based SaaS product I'm building to centralise student, faculty, and parent document management — with automated expiry tracking, role-based dashboards, and real-time attendance for up to 4 user types.

SaaS React / Next.js Node.js Product Design
📁 Centralised document uploads for students, faculty & parents
⏰ Automated expiry reminders at 60/30/15 days
📊 Real-time attendance with parent visibility
🛡️ Role-based dashboards — Student, Faculty, Parent, Admin
💌 Bulk email reminders & compliance reporting
💰 Annual SaaS subscriptions — 2K–5K AED + enterprise
Interested in EduLink? Get in touch →
Design

Why "Emotionally Durable Design" Should Be Every Developer's North Star

We obsess over performance metrics, load times, and conversion rates. But the products people return to aren't just fast — they feel right. Here's how thinking about emotional durability changed the way I design.

UX DesignPhilosophy
5 min read
Development

Real-Time UX: What Building NEXUS Taught Me About Latency and Trust

When you're building with Socket.IO, you're not just managing data — you're managing user perception of time. A 200ms delay that shows nothing feels broken. The same delay with a typing indicator feels instant. Here's what I learnt.

Socket.IOFull Stack
7 min read
Creative Coding

Three.js in a Portfolio: When 3D Makes Sense (and When It Doesn't)

Everyone loves a spinning cube. But 3D for its own sake is a distraction. This is how I decided to use Three.js in my portfolio — and the rules I set for myself to make sure it added to the experience rather than overwhelming it.

Three.jsWebGL
4 min read

✍️ Full articles coming soon — follow me on LinkedIn to be notified.

08 — Contact
Let's
Work
Together.

I'm actively looking for graduate roles in UI/UX design, front-end development, and creative technology. If you think I'd be a good fit — let's talk.

✉ Email Me in LinkedIn ⌥ GitHub ↓ Download CV