Ranked Feed
A home feed scored on relevance, freshness, novelty, and learned signals, with reserved slots for discovery.
Mahdi Saiah
Product Designer/
Developer/
Founder of Connect
I design it, build it, and ship it. From the first pixel to the App Store.
I turn ideas into products people actually use. Design, engineering, and product, in one pair of hands.
/01 Product Designer
Interfaces, design systems, motion, and the small details that make software feel considered. Taste as a discipline, not decoration.
/02 Developer
Flutter and Dart on the front, Supabase and Postgres on the back. I'm hands-on in the codebase that ships to real phones, live on iOS with Android next.
/03 Founder
I run Connect end to end. Design decisions, the backend, the release pipeline, and everything in between. Solo.
03 Flagship
Connect.
A social app built for real conversation
Live on iOS
Android coming soon
Designed & built solo
Download on theApp Store
Connect is a social platform designed around interaction instead of passive scrolling. A ranked home feed, debate arenas where people actually argue an idea, short video, stories, and real messaging, all wrapped in one calm, opinionated design system. I designed every screen, worked hands-on across the app and backend, and shipped it to the App Store myself. Android is on the way.
Debate Arenas
Structured debates, auto tagged into a living taxonomy by an on-device style agent and matched to your interests.
Reels
A fullscreen short video player that reorders its own queue with an interest, diversity, and novelty ranker.
Stories
24 hour stories with a repost grace window, so a story stays alive as long as someone is still sharing it.
Messaging
Full chat with a rebuilt composer: photos, camera, voice notes, location, and documents in one clean bar.
Moods
Lightweight status moods on Explore, scoped to everyone or followers and enforced server side per viewer.
Push
Real push notifications with an owner Push Center to compose and target posts, profiles, and debates.
My Space
A premium offline planner with a 24 hour calendar timeline, a month grid, and inline notes. Calm and fast.
Hardened Backend
Owner gated RPCs, definer search paths, and profile guards. Security treated as a feature, not an afterthought.
03.1 The craft
A real design system
One source of truth drives the whole app: semantic color tokens, a fixed type scale, a 4 point spacing grid, one icon language, and motion rules. Nothing is hardcoded per screen.
Color tokens
Ink, greys, and one red
Ink#111111
Graphite#2A2A2A
Grey#888888
Line#E5E5E5
Surface#F7F7F7
Danger#D93025
Type scale
Playfair wordmark, system UI
WordmarkConnect.
Title · 22Real conversation
Body · 15Built for interaction, not passive scrolling.
Label · 11Semantic tokens
Spacing · 4pt grid
One rhythm
4
8
12
16
24
40
Motion rules
Smooth, never jarring
- Surfaces open in final form, no pop in
- Media crossfades over a finished placeholder
- Shared element flights between screens
- Respects reduced motion everywhere
Built with
FlutterDartSupabase
PostgreSQLRow Level SecurityEdge Functions
Groq · LLM agentsFirebase Cloud MessagingWebRTC
Sign in with AppleGoogle Sign inAppLovin MAX
iOSLive now, Android soon
2.5k+Localized strings
40+DB migrations
1Designer & engineer
04 How I work
Design
Design
that ships
I don't hand designs off. I research, design, build, and ship them myself, so the idea stays intact from the first interview to the App Store.
Because I understand the code, my designs are never wishful thinking.
I know what the framework can do, so I design at the edge of what's feasible instead of throwing impossible mockups over a wall. The design system lives in the code, not just in Figma, so there's no drift between the file and the product. In Connect that means 4pt spacing, a monochrome palette, one icon language, and 24 shared components, all driven from a single source. One person, one source of truth, no handoff tax.
01
Discovery
Frame the problem, the audience, and what "good" means before touching a pixel.
02
Research
User interviews, competitor teardowns, and journey maps to find the real friction.
03
Define
Turn findings into flows, information architecture, and a clear product direction.
04
Design system
Build tokens and components in Figma (components, auto-layout, variables, libraries), then mirror them in code.
05
Prototype & test
Interactive Figma prototypes, then usability testing to kill assumptions early.
06
Ship & iterate
Build it in Flutter, ship to the store, watch real usage, refine.
UX research
How I find the truth
Discovery interviews
Competitor teardowns
Journey mapping
Usability testing
Card sorting
Dogfooding
Analytics-informed iteration
Accessibility · Connect
Built in from the start
- A Reduce Motion toggle, and it respects the OS setting
- Haptic feedback everywhere it counts
- Keyboard focus order and autofocus in forms
- Tooltips and semantics on icon controls
- Smooth, interruptible motion, never blocking
05 Selected work
Beyond
Beyond
the app
Products, worlds, and images. A few other things I have designed and built.
01
Empreintes
An open world experience about human impact on the environment. Exploration, vehicles, and an environmental narrative, built in Unity with Blender assets and C#.
02
3D Craft
A study in modeling, texturing, lighting, and composition. Thirteen renders across architecture, objects, and materials.
03
Mémoire 2026
My research thesis from this year, on interface design and digital experience. Abstract and full text on its page.
More renders, prototypes, and case studies live on the archive at mahdisaiah.github.io/archive
06 Toolkit
How I
How I
build
Four disciplines, one goal: ship things that feel considered and actually work.
UX / UI & Product Design
FigmaDesign SystemDesign TokensPattern LibrariesInteractive PrototypingWireframingUX ResearchProduct DiscoveryDesign ThinkingUser JourneysUser TestingAccessibility (WCAG)
Design-to-Code & Front-End
Flutter / DartReactHTML / CSSJavaScriptTypeScriptThree.jsWebGL
Methods & Tools
Agile (Scrum)Product / Design / EngGenerative AI (Claude, ChatGPT)Node.jsREST / GraphQLFirebasePostgreSQLDockerGitHub Actions
3D & Immersive
UnityBlenderUnreal EngineSubstance 3DHLSL ShadersC#
07 About
A designer who ships, and cares how it's built.
Education
2026 – 2027
Master's, Interface, Multimedia & Web Design
Université Sorbonne Paris Nord
2025 – 2026
Master 1, Digital Creation & Interfaces
Université Gustave Eiffel
2022 – 2025
Bachelor's, Virtual Studies & Digital Media
Université Gustave Eiffel
Languages
FrenchNative
EnglishC1, Fluent
SpanishB1, Intermediate
Experience
Connect2025 – now · Paris
Founder, designer & engineer
- Designed and built the app and backend end to end, and shipped it to the App Store.
BNP Paribas Real Estate04/2025 – 09/2025 · Paris
Junior Front-End Developer · Internship
- Designed and built interactive web interfaces with the UX and design teams, agile, from mockups to production.
- Built reusable UI components and refined micro-interactions for fluid, consistent, intuitive screens.
- Optimized render performance (LOD, geometry compression, memory profiling) to keep real-time 3D visualizations smooth (Three.js / WebGL).
- Collaborated daily with the UX, design, and back-end teams, automated production workflows (JavaScript, Python), and wrote the technical documentation.
Atelier Daniela Zuniga2024
C# Developer & 3D Modeler · Internship
- Rebuilt a 3D model of a human brain from medical MRI data in Unity and Blender.
- Built interactive features in C#: spatial navigation and selection of anatomical structures.
- Optimized the volumetric data pipeline for real-time rendering.