Ahmed YassineAbbane

Product capabilities

• Authentication — Secure user authentication with OAuth & JWT (Stable)
• Consultation Booking — Smart scheduling and calendar management (Stable)
• AI Assistant — AI-powered recommendations and insights (In Development)
• Notifications — Real-time alerts and communication system (Stable)
• Administration — Platform management and analytics dashboard (Stable)

Architecture

• Client: Web / Mobile
• API Gateway: Nginx / Express
• Services: Microservices
• Database: MongoDB
• Storage: Cloud Storage

Engineering highlights

• Modular Architecture
• Multi-language Support
• AI-first Workflow
• Scalable Backend
• Docker Ready
• Responsive Design System

Product capabilities

• Authentication — Secure JWT-based authentication system (Stable)
• Project Management — CRUD operations for project portfolio management (Stable)
• Analytics — Portfolio view tracking and engagement metrics (In Development)
• Administration — Content management and dashboard (Stable)

Architecture

• Frontend: Next.js / React
• Backend: Node.js / Express
• Database: MongoDB
• Storage: Cloud Storage

Engineering highlights

• SSR & Static Generation
• Responsive Design
• SEO Optimized
• Fast Load Times
• Admin Dashboard

Product capabilities

• Task Management — Create, assign, prioritize, and track work from backlog to done. (Stable)
• Team Collaboration — Keep comments, mentions, and activity updates attached to the work. (Stable)
• Delivery Analytics — Track cycle time, throughput, workload, and sprint progress. (In Development)
• Notifications — Receive focused alerts for assignments, mentions, and due dates. (Stable)

Architecture

• Frontend: Next.js / TypeScript
• Realtime: WebSocket Gateway
• Backend: NestJS / Node.js
• Database: PostgreSQL / Redis

Engineering highlights

• Realtime Event Sync
• Role-based Workspaces
• Sprint Analytics
• Optimistic UI Updates
• Responsive Workflows

Product capabilities

• Product Catalog — Structured catalog with variants, collections, inventory, and faceted filters. (Stable)
• Shopping Cart — Persistent cart that survives sessions and stays synchronized across devices. (Stable)
• Payment Processing — Checkout orchestration with payment intents, refunds, and order confirmation. (In Development)
• AI Recommendations — Contextual recommendations based on browsing and purchase signals. (In Development)

Architecture

• Frontend: Next.js / React
• Commerce API: NestJS / Node.js
• Database: PostgreSQL / Redis
• Search: OpenSearch

Engineering highlights

• Faceted Product Search
• Personalized Recommendations
• Payment Intent Flow
• Inventory Reservations
• Mobile-first Checkout

The challenge

Traditional banking applications suffer from convoluted navigation, cluttered dashboards, and slow transaction flows. Younger demographics struggle to gain meaningful clarity over their personal finances, leading to low engagement and high churn.

Experience highlights

• Real-Time Micro Analytics — Instant categorised breakdown of daily spending with interactive visual charts and monthly budget targets.
• Instant P2P Micro-Transfers — Send money via contact list or QR code with zero friction and instant biometric verification.
• Virtual & Physical Card Hub — Freeze cards, generate single-use virtual cards for secure online shopping, and change PINs instantly.
• Smart Savings Vaults — Automated spare-change roundups and scheduled automated deposits toward custom savings goals.

Design process

• 01 · Empathize & Research — Conducted 18 user interviews and competitor benchmarking to uncover financial anxiety triggers and navigation bottlenecks.
• 02 · Information Architecture — Streamlined app hierarchy from 6 top-level tabs down to 3 core hubs: Home, Analytics, and Cards.
• 03 · Wireframing & Flow — Created low-fidelity interactive wireframes to validate key user journeys including P2P transfer and bill splitting.
• 04 · Visual Identity & System — Developed a high-contrast dark theme, fluid micro-interactions, and a cohesive design component library in Figma.
• 05 · Usability Testing — Ran unmoderated usability tests with 25 participants, reaching a 94% task completion rate on first attempt.

Outcome signals

• App Store Rating: 4.9 / 5 (+0.4 vs Legacy) — Based on over 12,000 user reviews post-relaunch.
• User Retention (30d): 68% (+22%) — Significant boost following intuitive onboarding flow.
• Avg. Transfer Time: 4.2s (-60%) — Redesigned quick-pay flow reduced interaction steps.

Tools

• Figma
• Protopie
• Adobe Illustrator
• Maze
• Miro

The challenge

Existing analytics tools were too complex and difficult to navigate for average users

Experience highlights

• Real-time Data — Live updates and instant data refresh
• Custom Dashboards — Drag-and-drop widget customization
• Anomaly Alerts — Explain unusual movement with a clear signal, comparison period, and next action.

Design process

• 01 · Research — Conducted user interviews and competitive analysis
• 02 · Wireframing — Created low-fidelity wireframes for dashboard layouts
• 03 · Prototyping — Built interactive prototypes with data visualizations
• 04 · Handoff — Delivered a chart system, interaction rules, responsive layouts, and annotated component specs.

Outcome signals

• User Engagement: +45% (+45%) — Increased time on platform post-redesign
• Time to Insight: 3.4 min (-41%) — Median time from dashboard open to first useful decision.

Tools

• Figma
• FigJam
• Adobe XD
• Framer

The challenge

People were collecting health data across disconnected apps but could not tell which signals mattered together. Dense charts and judgmental reminders made the daily check-in feel like another task.

Experience highlights

• Daily Health Snapshot — See activity, sleep, mood, and recovery in one grounded overview.
• Explainable Insights — Understand what changed and why, without medical jargon or noisy charts.
• Flexible Health Goals — Set gentle targets that adapt to recovery instead of rewarding overwork.
• Private by Design — Choose what to connect, what to share, and when reminders appear.
• Guided Check-ins — Reflect in under two minutes with prompts shaped around how you feel.

Design process

• 01 · Listen & Map — Interviewed members and mapped the emotional cost of daily tracking.
• 02 · Frame the Day — Designed a calm dashboard around energy, recovery, and one next step.
• 03 · Make It Explainable — Tested insight language with members and wellness coaches.
• 04 · Validate & Tune — Ran two usability rounds and refined reminders, charts, and goals.

Outcome signals

• Weekly Check-in Completion: 78% (+31%) — Members completed more weekly reflections after the redesign.
• Onboarding Completion: 86% (+24%) — A shorter setup flow helped members reach their first insight.
• Daily Insight Opens: 2.4x (+52%) — Clearer explanations made personalized insights easier to trust.

Tools

• Figma
• FigJam
• Maze
• Notion

The challenge

Travelers jump between inspiration boards, maps, booking sites, and chat threads. Important decisions disappear in the gaps, while uncertainty about time and cost makes planning feel heavier than the trip itself.

Experience highlights

• Contextual Discovery — Find places through mood, pace, budget, and real trip context.
• Shared Itinerary — Build realistic days with travel time, opening hours, and companions.
• Booking Timeline — Keep confirmations, deadlines, and essential trip details together.
• Offline Trip View — Access addresses, tickets, and the next stop when connectivity is limited.

Design process

• 01 · Listen & Trace — Interviewed solo and group travelers across the planning journey.
• 02 · Shape the Trip — Mapped the shift from inspiration to decisions, logistics, and sharing.
• 03 · Design for Confidence — Created a visual system that balances discovery energy with clarity.
• 04 · Validate in Motion — Tested planning and day-of scenarios with real travelers.

Outcome signals

• Trip Plans Created: 42K+ (+64%) — Members created a complete plan after the redesigned discovery flow.
• Planning Confidence: 4.8 / 5 (+0.7) — Members felt more confident about timing, cost, and local logistics.
• Shared Itineraries: 71% (+38%) — Most active plans included at least one travel companion.

Tools

• Figma
• FigJam
• ProtoPie
• Maze

The challenge

Learners entered an LMS through a dense dashboard and had to remember where they left off. Educators saw completion numbers but not the moments where students became blocked, while discussions and feedback lived in separate surfaces.

Experience highlights

• Guided Course Discovery — Find the right course through goals, level, time, and learner intent.
• Focused Study Sessions — Move through lessons, practice, and discussion without losing context.
• Actionable Progress — See the next step as a learner and the support signal as an educator.
• Feedback Workspace — Review submissions, leave useful feedback, and keep the learner moving.

Design process

• 01 · Observe the Classroom — Interviewed learners, instructors, and program coordinators.
• 02 · Map Momentum — Mapped the moments from course intent to practice, feedback, and return.
• 03 · Test the Loop — Tested course discovery, lesson focus, and feedback workflows with real users.
• 04 · Refine for Access — Improved responsive layouts, keyboard flow, and content hierarchy.

Outcome signals

• Course Completion: 78% (+28%) — Learners completed more courses after the redesigned study path.
• Weekly Learning Streaks: 64% (+35%) — More learners returned each week after progress became actionable.
• Instructor Response Time: 18h (-42%) — Clearer feedback queues helped instructors respond sooner.

Tools

• Figma
• FigJam
• Maze
• Notion

The challenge

Teams solved the same interface problems in parallel. Colors drifted, component states were undocumented, and accessibility decisions arrived too late for a reliable release process.

Experience highlights

• Component Library — 60+ documented components with complete interaction states.
• Semantic Tokens — Theme-ready color, type, spacing, and elevation decisions.
• Contribution Docs — Usage guidance, accessibility checks, and a clear path to propose change.
• Accessibility by Default — Keyboard, focus, contrast, and reduced-motion requirements built into review.

Design process

• 01 · Audit the Product — Mapped repeated patterns, drift, accessibility gaps, and ownership.
• 02 · Define the Language — Established semantic tokens, component anatomy, and state rules.
• 03 · Prove in Code — Built accessible components and tested them in real product flows.
• 04 · Adopt & Govern — Created contribution rituals, release notes, and migration guidance.

Outcome signals

• Shared Component Adoption: 86% (+51%) — New interface work used a documented shared component.
• UI Delivery Time: -43% (-43%) — Reusable patterns reduced design and implementation handoff time.
• Accessibility Coverage: 94% (+37%) — Core components passed keyboard and contrast acceptance checks.

Tools

• Figma
• Storybook
• Tokens Studio
• Zeroheight

The challenge

Apex needed to evolve from a fragmented seed-stage startup aesthetic into an enterprise-ready brand identity capable of scaling seamlessly across digital interfaces, print collateral, dynamic video lower-thirds, and physical merchandise without losing brand recognition.

Creative direction

• Precision Geometry — Constructed around a golden-ratio grid system to ensure pristine rendering at micro-scales on mobile screens and macro-scales on billboards.
• High-Contrast Kinetic Palette — Electric Indigo and Cyber Emerald paired with deep obsidian shades ensure accessible visual hierarchy and high visibility across dark and light surfaces.
• Modular Layout Framework — Flexible 12-column marketing templates engineered for seamless cross-platform deployment across social, web, and physical print.

Deliverables

• Primary & Secondary Logo Suite
• Design System & Vector Assets
• 3D Brand Mark & Emblem Specs
• Typography & Scale Guidelines
• Social & Marketing Campaign Templates

Project signals

• Brand Recognition Lift: +74% (Post-Rebrand Survey)
• Production Turnaround: -65% (Asset Creation Time)
• Design System Adoption: 100% (Across All Departments)

Tools

• Adobe Illustrator
• Adobe Photoshop
• Figma
• After Effects
• InDesign

The challenge

The campaign needed to feel native to each platform without becoming a collection of disconnected posts. Fast production also had to preserve hierarchy, motion, and brand recognition.

Creative direction

• One Campaign Language — A recognizable visual rhythm across feed, story, short video, and professional formats
• Motion with Purpose — Short transitions that reveal product value instead of adding decorative noise
• Native Adaptation — Platform-specific crops, pacing, and calls to action built from shared modules

Deliverables

• Campaign Visual Identity
• 50+ Social Media Assets
• 3D Animated Graphics
• Video Motion Graphics
• Typography System

Project signals

• Engagement Rate: 8.5% (+145%)
• Reach: 2.3M+ (+312%)
• Conversion: 3.2% (+89%)

Tools

• Adobe Creative Suite
• Figma
• Cinema 4D

The challenge

The summit needed to feel ambitious without becoming cold or generic. The identity had to guide thousands of attendees through a physical venue while staying legible on screens and social posts.

Creative direction

• Human Innovation — A contemporary language that makes technical ideas feel welcoming and useful
• Spatial Continuity — A visual route connecting entrance, stage, rooms, badges, and screens
• Built for the Moment — Assets designed to work in print, motion, low light, and live social coverage

Deliverables

• Event Visual Identity
• Event Signage & Wayfinding
• 30+ Collateral Designs
• 3D Environment Graphics
• Digital Assets

Project signals

• Event Attendees: 5K+ (+180%)
• Brand Recognition: 94% (+65%)
• Social Mentions: 45K+ (+320%)

Tools

• Adobe Creative Suite
• Figma
• Blender

The challenge

The concept began with a common studio problem: a strong portfolio but no shared visual language for expressing precision, experimentation, and digital craft across touchpoints.

Brand strategy

We explored an architectural visual system rooted in light refraction, high-contrast typography, and dynamic grid motifs that can scale from digital interfaces to physical installations.

Brand pillars

• Architectural Precision — Every layout is anchored on structured 12-column grids with mathematical precision and balanced whitespace.
• Luminous Contrast — High-contrast monochrome bases paired with vibrant spectral accents symbolize clarity and light.
• Adaptive Kinetic Motion — Brand assets are designed to move—utilizing fluid physics, spring physics, and modular frame transitions.
• Engineered Simplicity — Removing non-essential ornamentation to let high-impact typography and clean mark geometry stand out.

Deliverables

• Brand Strategy & Identity: Brand Positioning & Narrative
• Brand Strategy & Identity: Tone of Voice & Messaging Architecture
• Brand Strategy & Identity: Primary & Secondary Emblem Marks
• Brand Strategy & Identity: Clear Space & Usage Specifications
• Visual System & Tokens: Color Swatches (HEX, RGB, CMYK, Pantone)
• Visual System & Tokens: Typography Hierarchy & Specimen Sets
• Visual System & Tokens: Iconography & Vector Illustration System
• Visual System & Tokens: Motion & Transition Guidelines
• Touchpoints & Execution: Digital Experience & Web Guidelines
• Touchpoints & Execution: Social Media Kit & Content Templates
• Touchpoints & Execution: Print Collateral & Executive Stationeries
• Touchpoints & Execution: Physical Signage & Architectural mockups

The challenge

The concept needed to make a heritage coffee story feel current without losing its handmade character or responsible sourcing point of view.

Brand strategy

We explored a tactile identity combining botanical forms, warm paper tones, confident typography, and restrained illustration to connect craft quality with everyday modern rituals.

Brand pillars

• Artisanal Craft — Handcrafted, high-quality coffee roasting and preparation methods at the heart of the brand.
• Sustainability Focus — Eco-friendly practices and ethical sourcing reflected throughout the visual identity.
• Modern Sophistication — Contemporary design language appealing to modern, discerning coffee enthusiasts.

Deliverables

• Brand Strategy & Identity: Brand Positioning & Story
• Brand Strategy & Identity: Logo Design & Variations
• Brand Strategy & Identity: Brand Voice & Messaging
• Brand Strategy & Identity: Visual System Guidelines
• Visual System & Tokens: Color Palette & Specifications
• Visual System & Tokens: Typography System
• Visual System & Tokens: Icon & Pattern Library
• Visual System & Tokens: Photography Style Guide
• Touchpoints & Execution: Packaging Design
• Touchpoints & Execution: Cafe Interior Signage
• Touchpoints & Execution: Digital Experience Guidelines
• Touchpoints & Execution: Marketing Collateral Suite

The challenge

The concept needed to help a neighborhood market stand apart from larger chains while making local sourcing and organic integrity easy to recognize.

Brand strategy

We explored a warm identity centered on community and responsible growing, using botanical forms, earthy colors, friendly typography, and a flexible illustration language.

Brand pillars

• Community Connection — Strong ties to local farmers, producers, and neighborhood residents.
• Organic Integrity — Unwavering commitment to certified organic and sustainable farming practices.
• Local First Philosophy — Prioritizing locally-sourced products and supporting regional suppliers.

Deliverables

• Brand Strategy & Identity: Brand Positioning & Narrative
• Brand Strategy & Identity: Logo System with Variations
• Brand Strategy & Identity: Brand Promise & Values
• Brand Strategy & Identity: Messaging Architecture
• Visual System & Tokens: Color Palette & Usage Guide
• Visual System & Tokens: Custom Typography
• Visual System & Tokens: Iconography System
• Visual System & Tokens: Illustration Style Guide
• Touchpoints & Execution: Signage & Store Branding
• Touchpoints & Execution: Packaging & Labels
• Touchpoints & Execution: Digital Presence Guidelines
• Touchpoints & Execution: Community Event Materials