{"id":210,"date":"2025-12-20T15:51:45","date_gmt":"2025-12-20T11:51:45","guid":{"rendered":"https:\/\/portfolio.uxicdesign.ir\/?page_id=210"},"modified":"2025-12-20T17:35:25","modified_gmt":"2025-12-20T13:35:25","slug":"mci","status":"publish","type":"page","link":"https:\/\/portfolio.uxicdesign.ir\/?page_id=210","title":{"rendered":"MCI"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"210\" class=\"elementor elementor-210\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ea4db3a e-flex e-con-boxed e-con e-parent\" data-id=\"ea4db3a\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-a083a98 e-con-full e-flex e-con e-child\" data-id=\"a083a98\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d63aaf2 elementor-widget elementor-widget-html\" data-id=\"d63aaf2\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n\/* --- STYLES DARK MODE (BACKGROUND MESHKI) --- *\/\r\n:root {\r\n    --text-color: #e0e0e0;        \/* Matn-ha: Khakestari Roshan *\/\r\n    --accent-color: #ffffff;      \/* Hover va Button: Sefid Kamel *\/\r\n    --active-color: #2F8CC9;      \/* RANG ACTIVE: Abi Neon\/Cyan *\/\r\n    --button-text-hover: #000000; \/* Matn-e Button vaghti Hover mishe: Meshki *\/\r\n    --glass-border: rgba(255, 255, 255, 0.2); \/* Kadr-e Button: Sefid Shaffaf *\/\r\n}\r\n\r\n.modern-navbar {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    padding: 20px 5%; \r\n    background-color: transparent; \r\n    position: relative;\r\n    z-index: 1000;\r\n    font-family: 'Inter', sans-serif;\r\n    flex-wrap: wrap; \r\n}\r\n\r\n\/* --- LOGO SETTINGS --- *\/\r\n.nav-logo img {\r\n    height: 50px; \r\n    width: auto;  \r\n    display: block;\r\n    filter: brightness(0) invert(1); \/* Sefid kardan-e Logo *\/\r\n}\r\n\r\n\/* --- LINKS CONTAINER --- *\/\r\n.nav-links {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 40px; \r\n}\r\n\r\n\/* --- LINK ITEMS --- *\/\r\n.nav-item {\r\n    text-decoration: none;\r\n    color: var(--text-color); \r\n    font-size: 16px;\r\n    font-weight: 500;\r\n    transition: all 0.3s ease;\r\n    white-space: nowrap; \r\n}\r\n\r\n.nav-item:hover {\r\n    color: var(--accent-color); \r\n    font-weight: 600;\r\n    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); \r\n}\r\n\r\n\/* --- ACTIVE LINK STYLE --- *\/\r\n.nav-item.active {\r\n    color: var(--active-color); \r\n    font-weight: 700;           \r\n    text-shadow: 0 0 12px rgba(0, 212, 255, 0.4); \r\n}\r\n\r\n\/* --- RESUME BUTTON --- *\/\r\n.nav-btn-resume {\r\n    text-decoration: none;\r\n    color: var(--accent-color); \r\n    font-size: 15px;\r\n    font-weight: 600;\r\n    padding: 10px 24px;\r\n    border: 1px solid var(--glass-border); \r\n    border-radius: 50px; \r\n    background: rgba(255, 255, 255, 0.05); \r\n    transition: all 0.3s ease;\r\n    white-space: nowrap;\r\n}\r\n\r\n.nav-btn-resume:hover {\r\n    background: var(--accent-color); \r\n    color: var(--button-text-hover); \r\n    border-color: var(--accent-color);\r\n    transform: translateY(-2px); \r\n    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3); \r\n}\r\n\r\n\/* --- MOBILE RESPONSIVE --- *\/\r\n@media (max-width: 768px) {\r\n    .modern-navbar {\r\n        flex-direction: column; \r\n        padding: 15px 5%;\r\n        gap: 20px; \r\n    }\r\n\r\n    .nav-logo img {\r\n        height: 40px; \r\n    }\r\n\r\n    .nav-links {\r\n        width: 100%;\r\n        justify-content: center; \r\n        gap: 25px; \r\n    }\r\n\r\n    .nav-item {\r\n        font-size: 14px; \r\n    }\r\n\r\n    .nav-btn-resume {\r\n        padding: 8px 20px;\r\n        font-size: 14px;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<nav class=\"modern-navbar\">\r\n    <a href=\"https:\/\/portfolio.uxicdesign.ir\/\" class=\"nav-logo\">\r\n        <img decoding=\"async\" src=\"https:\/\/portfolio.uxicdesign.ir\/wp-content\/uploads\/2025\/12\/logo-1313-2-1024x403-1.png\" alt=\"Logo\">\r\n    <\/a>\r\n\r\n    <div class=\"nav-links\">\r\n        <a href=\"https:\/\/portfolio.uxicdesign.ir\/\" class=\"nav-item active\">Work<\/a>\r\n        \r\n        <a href=\"\/blog\" class=\"nav-item\">Blog<\/a>\r\n        \r\n        <a href=\"#about\" class=\"nav-item\">About<\/a>\r\n        <a href=\"\/path-to-your-cv.pdf\" class=\"nav-btn-resume\" target=\"_blank\">Resume<\/a>\r\n    <\/div>\r\n<\/nav>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-fdb6425 e-flex e-con-boxed e-con e-parent\" data-id=\"fdb6425\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-532dcbe elementor-widget elementor-widget-html\" data-id=\"532dcbe\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n\/* --- 1. PREMIUM BUSINESS DARK THEME --- *\/\r\n:root {\r\n    --bg-main: #0a0a0a;\r\n    --bg-card: #141414;\r\n    --text-white: #ffffff;\r\n    --text-gray: #999999;\r\n    --text-muted: #555555;\r\n    --brand-mci: #00BFA5; \/* MCI Teal *\/\r\n    --accent-blue: #3B82F6;\r\n    --border-line: rgba(255, 255, 255, 0.08);\r\n    --font-primary: 'Inter', sans-serif;\r\n}\r\n\r\nbody {\r\n    background-color: var(--bg-main);\r\n    color: var(--text-white);\r\n    font-family: var(--font-primary);\r\n    margin: 0;\r\n    line-height: 1.6;\r\n    overflow-x: hidden; \/* Prevent horizontal scroll globally *\/\r\n}\r\n\r\n.case-wrapper {\r\n    max-width: 1400px;\r\n    margin: 0 auto;\r\n    padding: 0 4%;\r\n}\r\n\r\n\/* --- 2. HERO SECTION --- *\/\r\n.hero-header {\r\n    min-height: 85vh;\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    align-items: flex-start;\r\n    border-bottom: 1px solid var(--border-line);\r\n    padding-bottom: 40px;\r\n    padding-top: 60px;\r\n}\r\n\r\n.hero-meta-top {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 15px;\r\n    margin-bottom: 30px;\r\n    flex-wrap: wrap;\r\n}\r\n\r\n.company-tag {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    background: rgba(255,255,255,0.05);\r\n    padding: 5px 12px 5px 5px;\r\n    border-radius: 50px;\r\n    border: 1px solid var(--border-line);\r\n}\r\n\r\n.company-logo-small {\r\n    width: 28px;\r\n    height: 28px;\r\n    border-radius: 50%;\r\n    object-fit: cover;\r\n}\r\n\r\n.company-name-text {\r\n    font-size: 13px;\r\n    font-weight: 700;\r\n    color: #fff;\r\n    letter-spacing: 0.5px;\r\n}\r\n\r\n.hero-tag {\r\n    display: inline-block;\r\n    padding: 8px 16px;\r\n    border: 1px solid var(--brand-mci);\r\n    color: var(--brand-mci);\r\n    border-radius: 50px;\r\n    font-size: 13px;\r\n    font-weight: 600;\r\n    letter-spacing: 1px;\r\n    height: fit-content;\r\n}\r\n\r\n.hero-title {\r\n    font-size: clamp(48px, 6vw, 96px);\r\n    font-weight: 800;\r\n    line-height: 1.05;\r\n    margin: 0 0 40px 0;\r\n    background: linear-gradient(180deg, #fff, #888);\r\n    -webkit-background-clip: text;\r\n    -webkit-text-fill-color: transparent;\r\n}\r\n\r\n.hero-description {\r\n    font-size: 22px;\r\n    color: var(--text-gray);\r\n    max-width: 800px;\r\n    font-weight: 300;\r\n    line-height: 1.6;\r\n    margin-bottom: 0;\r\n}\r\n\r\n.hero-metrics {\r\n    display: flex;\r\n    gap: 50px;\r\n    margin-top: 50px;\r\n    padding-top: 30px;\r\n    border-top: 1px solid var(--border-line);\r\n    width: 100%;\r\n}\r\n\r\n.metric-box span { display: block; }\r\n.metric-val { font-size: 32px; font-weight: 700; color: #fff; }\r\n.metric-lbl { font-size: 13px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }\r\n\r\n\/* --- 3. SINGLE HERO IMAGE --- *\/\r\n.hero-image-wrapper {\r\n    width: 100%;\r\n    margin-top: 40px; \r\n    position: relative;\r\n    z-index: 2;\r\n    padding-bottom: 80px;\r\n    display: flex;\r\n    justify-content: center;\r\n}\r\n\r\n.hero-single-img {\r\n    width: 100%;\r\n    max-width: 1300px; \r\n    height: auto;\r\n    object-fit: contain;\r\n}\r\n\r\n\/* --- GLOBAL IMAGE STYLES --- *\/\r\n.zoomable-img {\r\n    border-radius: 16px !important; \r\n    border: 1px solid var(--border-line);\r\n    cursor: zoom-in;\r\n    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s ease;\r\n    width: 100%;\r\n    display: block;\r\n}\r\n\r\n.zoomable-img:hover {\r\n    transform: scale(1.02);\r\n    box-shadow: 0 25px 60px rgba(0,0,0,0.7);\r\n    z-index: 10;\r\n    border-color: rgba(255,255,255,0.3);\r\n}\r\n\r\n\/* --- LIGHTBOX MODAL --- *\/\r\n#lightbox-modal {\r\n    display: none; \r\n    position: fixed;\r\n    z-index: 9999;\r\n    left: 0;\r\n    top: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    overflow: hidden;\r\n    background-color: rgba(0,0,0,0.95); \r\n    flex-direction: column;\r\n    justify-content: center;\r\n    align-items: center;\r\n    padding: 20px;\r\n    box-sizing: border-box;\r\n    backdrop-filter: blur(10px);\r\n}\r\n\r\n#lightbox-image {\r\n    display: block;\r\n    max-width: 90vw;\r\n    max-height: 90vh;\r\n    border-radius: 12px; \r\n    box-shadow: 0 0 50px rgba(0,0,0,1);\r\n    animation: zoomStart 0.3s ease-out;\r\n    object-fit: contain;\r\n}\r\n\r\n#close-lightbox {\r\n    position: absolute;\r\n    top: 30px;\r\n    right: 40px;\r\n    color: #fff;\r\n    font-size: 50px;\r\n    font-weight: 300;\r\n    transition: 0.3s;\r\n    cursor: pointer;\r\n    z-index: 10000;\r\n    line-height: 1;\r\n}\r\n#close-lightbox:hover { color: var(--brand-mci); transform: rotate(90deg); }\r\n\r\n@keyframes zoomStart {\r\n    from {transform:scale(0.9); opacity: 0;} \r\n    to {transform:scale(1); opacity: 1;}\r\n}\r\n\r\n\/* --- 4. LAYOUT --- *\/\r\n.content-layout {\r\n    display: grid;\r\n    grid-template-columns: 350px 1fr; \r\n    gap: 100px;\r\n    padding-bottom: 100px;\r\n}\r\n\r\n\/* Overview Image Container *\/\r\n.overview-image-container {\r\n    grid-column: 1 \/ -1; \r\n    margin-bottom: 80px;\r\n}\r\n\r\n.sticky-info {\r\n    position: sticky;\r\n    top: 100px;\r\n    height: fit-content;\r\n    padding: 30px;\r\n    background: var(--bg-card);\r\n    border-radius: 16px;\r\n    border: 1px solid var(--border-line);\r\n}\r\n\r\n.info-group { margin-bottom: 30px; }\r\n.info-label { display: block; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; font-weight: 700; }\r\n.info-value { font-size: 16px; color: #fff; font-weight: 500; }\r\n.info-list { list-style: none; padding: 0; margin: 0; }\r\n.info-list li { font-size: 14px; color: var(--text-gray); margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }\r\n.info-list li::before { content: '\u2022'; color: var(--brand-mci); }\r\n\r\n.story-block { margin-bottom: 150px; }\r\n.block-header { border-left: 3px solid var(--brand-mci); padding-left: 20px; margin-bottom: 30px; }\r\n.block-subtitle { font-size: 14px; color: var(--brand-mci); text-transform: uppercase; letter-spacing: 2px; font-weight: 700; display: block; margin-bottom: 10px; }\r\n.block-title { font-size: 36px; font-weight: 700; color: #fff; margin: 0; }\r\n.block-text { font-size: 18px; line-height: 1.8; color: #b0b0b0; margin-bottom: 30px; }\r\n\r\n\/* Grids *\/\r\n.cards-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 40px; }\r\n.pro-card { background: rgba(255,255,255,0.03); border: 1px solid var(--border-line); padding: 25px; border-radius: 16px; }\r\n.pro-card h4 { margin: 0 0 10px 0; color: #fff; font-size: 18px; }\r\n.pro-card p { margin: 0; font-size: 14px; color: #888; }\r\n\r\n.ds-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-top: 30px; }\r\n.landing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 30px; }\r\n.mobile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 30px; }\r\n.ad-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 30px; }\r\n.ad-img { height: 250px; object-fit: cover; }\r\n\r\n.story-image { margin-top: 20px; }\r\n.mascot-image { max-width: 400px; margin: 0 auto 40px; display: block; }\r\n\r\n\/* --- 5. FOOTER --- *\/\r\n.case-footer {\r\n    padding: 80px 0;\r\n    border-top: 1px solid var(--border-line);\r\n    text-align: center;\r\n    margin-bottom: 60px;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: center;\r\n}\r\n\r\n.footer-title {\r\n    font-size: 24px;\r\n    color: var(--text-gray);\r\n    margin-bottom: 30px;\r\n    font-weight: 300;\r\n}\r\n\r\n.btn-back {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 12px;\r\n    padding: 16px 40px;\r\n    background: transparent;\r\n    border: 1px solid rgba(255,255,255,0.2);\r\n    border-radius: 50px;\r\n    color: #fff;\r\n    font-size: 16px;\r\n    font-weight: 600;\r\n    text-decoration: none;\r\n    transition: all 0.3s ease;\r\n}\r\n\r\n.btn-back:hover {\r\n    background: #fff;\r\n    color: #000;\r\n    transform: translateY(-5px);\r\n    box-shadow: 0 10px 30px rgba(255,255,255,0.1);\r\n}\r\n\r\n.btn-back svg {\r\n    fill: currentColor;\r\n    width: 20px;\r\n    height: 20px;\r\n    transition: transform 0.3s ease;\r\n}\r\n.btn-back:hover svg { transform: translateX(-5px); }\r\n\r\n\/* --- RESPONSIVE --- *\/\r\n@media (max-width: 1024px) {\r\n    .content-layout { grid-template-columns: 1fr; }\r\n    .sticky-info { position: relative; top: 0; margin-bottom: 60px; }\r\n    .landing-grid, .mobile-grid, .ad-grid { grid-template-columns: 1fr; } \r\n    .hero-metrics { gap: 30px; }\r\n}\r\n\r\n@media (max-width: 768px) {\r\n    .hero-metrics { flex-direction: column; gap: 30px; text-align: left; }\r\n    .cards-grid { grid-template-columns: 1fr; }\r\n    .hero-header { padding-top: 40px; }\r\n    .hero-title { font-size: 42px; }\r\n    \r\n    \/* --- MACBOOK BIGGER ON MOBILE --- *\/\r\n    .hero-single-img {\r\n        width: 140%; \/* 40% Bigger than screen *\/\r\n        max-width: unset;\r\n        margin-left: -20%; \/* Center alignment *\/\r\n        display: block;\r\n    }\r\n    \r\n    .hero-image-wrapper {\r\n        overflow: hidden; \/* Prevent horizontal scroll *\/\r\n        padding-bottom: 50px;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<div class=\"case-wrapper\">\r\n\r\n    <header class=\"hero-header\">\r\n        <div class=\"hero-meta-top\">\r\n            <div class=\"company-tag\">\r\n                <img decoding=\"async\" src=\"http:\/\/portfolio.uxicdesign.ir\/wp-content\/uploads\/2025\/12\/Ellipse-94.png\" alt=\"MCI Logo\" class=\"company-logo-small\">\r\n                <span class=\"company-name-text\">MCI (Hamrahe Aval)<\/span>\r\n            <\/div>\r\n            <span class=\"hero-tag\">Role: Senior Product Designer<\/span>\r\n        <\/div>\r\n        \r\n        <h1 class=\"hero-title\">Reimagining EdTech<br>through Cognitive Design.<\/h1>\r\n        \r\n        <p class=\"hero-description\">\r\n            Leading the transformation of <strong>ino.school<\/strong> for MCI. \r\n            Merging <strong>Cognitive Science Research<\/strong> with <strong>UX Strategy<\/strong> to build a habit-forming ecosystem for 3 Million students.\r\n        <\/p>\r\n\r\n        <div class=\"hero-metrics\">\r\n            <div class=\"metric-box\"><span class=\"metric-val\">+40%<\/span><span class=\"metric-lbl\">User Retention<\/span><\/div>\r\n            <div class=\"metric-box\"><span class=\"metric-val\">3M+<\/span><span class=\"metric-lbl\">Active Students<\/span><\/div>\r\n            <div class=\"metric-box\"><span class=\"metric-val\">2.5x<\/span><span class=\"metric-lbl\">Conversion Rate<\/span><\/div>\r\n        <\/div>\r\n    <\/header>\r\n\r\n    <div class=\"hero-image-wrapper\">\r\n        <img decoding=\"async\" src=\"http:\/\/portfolio.uxicdesign.ir\/wp-content\/uploads\/2025\/12\/Free_MacBook_Pro_1bbb-scaled.png\" class=\"zoomable-img hero-single-img\" alt=\"ino.school MacBook Mockup\">\r\n    <\/div>\r\n\r\n    <div id=\"lightbox-modal\">\r\n        <span id=\"close-lightbox\">&times;<\/span>\r\n        <img decoding=\"async\" id=\"lightbox-image\" src=\"\">\r\n    <\/div>\r\n\r\n    <div class=\"content-layout\">\r\n\r\n       \r\n\r\n        <aside class=\"sticky-info\">\r\n            <div class=\"info-group\">\r\n                <span class=\"info-label\">Project Context<\/span>\r\n                <div class=\"info-value\">EdTech Transformation<\/div>\r\n            <\/div>\r\n            <div class=\"info-group\">\r\n                <span class=\"info-label\">Key Responsibilities<\/span>\r\n                <ul class=\"info-list\">\r\n                    <li>Design System Architecture<\/li>\r\n                    <li>UX Strategy & Research<\/li>\r\n                    <li>Marketing Art Direction<\/li>\r\n                    <li>Growth Design (Landings)<\/li>\r\n                <\/ul>\r\n            <\/div>\r\n            <div class=\"info-group\">\r\n                <span class=\"info-label\">Tools Used<\/span>\r\n                <ul class=\"info-list\">\r\n                    <li>Figma (Tokens\/Auto-layout)<\/li>\r\n                    <li>Microsoft Clarity<\/li>\r\n                    <li>Google Analytics 4<\/li>\r\n                <\/ul>\r\n            <\/div>\r\n        <\/aside>\r\n\r\n        <div class=\"case-content\">\r\n\r\n            <div class=\"story-block\">\r\n                <div class=\"block-header\"><span class=\"block-subtitle\">01. The Challenge<\/span><h2 class=\"block-title\">High Traffic, Low Engagement.<\/h2><\/div>\r\n                <p class=\"block-text\">MCI had the traffic, but the product wasn't converting. <strong>ino.school<\/strong> was functioning as a static content library. Analyzing 100k+ sessions on Microsoft Clarity revealed that the \"Subscription Flow\" was too complex.<\/p>\r\n            <\/div>\r\n            \r\n             <img decoding=\"async\" src=\"http:\/\/portfolio.uxicdesign.ir\/wp-content\/uploads\/2025\/12\/Pose019ssss-scaled.png\" class=\"zoomable-img mascot-image\" alt=\"Mascot Character Pose\">\r\n <div class=\"overview-image-container\">\r\n            <img decoding=\"async\" src=\"http:\/\/portfolio.uxicdesign.ir\/wp-content\/uploads\/2025\/12\/ino-site-scaled.png\" class=\"zoomable-img story-image\" alt=\"Site Overview Full Page\">\r\n        <\/div>\r\n            <div class=\"story-block\">\r\n                <div class=\"block-header\"><span class=\"block-subtitle\">02. Scalability<\/span><h2 class=\"block-title\">The \"Ino\" Design System.<\/h2><\/div>\r\n                <p class=\"block-text\">To ensure consistency across Web, Mobile, and Marketing assets, I architected a comprehensive <strong>Design System<\/strong>. We moved to atomic components and strict tokenization.<\/p>\r\n                <div class=\"ds-grid\">\r\n                    <img decoding=\"async\" src=\"http:\/\/portfolio.uxicdesign.ir\/wp-content\/uploads\/2025\/12\/Screenshot-2025-12-20-155641.png\" class=\"zoomable-img ds-img\">\r\n                    <img decoding=\"async\" src=\"http:\/\/portfolio.uxicdesign.ir\/wp-content\/uploads\/2025\/12\/Screenshot-2025-12-20-155646.png\" class=\"zoomable-img ds-img\">\r\n                    <img decoding=\"async\" src=\"http:\/\/portfolio.uxicdesign.ir\/wp-content\/uploads\/2025\/12\/Screenshot-2025-12-20-155650.png\" class=\"zoomable-img ds-img\">\r\n                    <img decoding=\"async\" src=\"http:\/\/portfolio.uxicdesign.ir\/wp-content\/uploads\/2025\/12\/Screenshot-2025-12-20-155654.png\" class=\"zoomable-img ds-img\">\r\n                    <img decoding=\"async\" src=\"http:\/\/portfolio.uxicdesign.ir\/wp-content\/uploads\/2025\/12\/Screenshot-2025-12-20-155705.png\" class=\"zoomable-img ds-img\">\r\n                    <img decoding=\"async\" src=\"http:\/\/portfolio.uxicdesign.ir\/wp-content\/uploads\/2025\/12\/Screenshot-2025-12-20-155716.png\" class=\"zoomable-img ds-img\">\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"story-block\">\r\n                <div class=\"block-header\"><span class=\"block-subtitle\">03. First Impressions<\/span><h2 class=\"block-title\">Frictionless Entry.<\/h2><\/div>\r\n                <p class=\"block-text\">The drop-off rate at login was alarming. I redesigned the <strong>Onboarding & Login flow<\/strong> to be seamless and inviting, simplifying the OTP process.<\/p>\r\n                <div class=\"mobile-grid\">\r\n                    <img decoding=\"async\" src=\"http:\/\/portfolio.uxicdesign.ir\/wp-content\/uploads\/2025\/12\/Screenshot-2025-12-20-155426.png\" class=\"zoomable-img mobile-img\">\r\n                    <img decoding=\"async\" src=\"http:\/\/portfolio.uxicdesign.ir\/wp-content\/uploads\/2025\/12\/Screenshot-2025-12-20-155417.png\" class=\"zoomable-img mobile-img\">\r\n                    <img decoding=\"async\" src=\"http:\/\/portfolio.uxicdesign.ir\/wp-content\/uploads\/2025\/12\/Screenshot-2025-12-20-155352.png\" class=\"zoomable-img mobile-img\">\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"story-block\">\r\n                <div class=\"block-header\"><span class=\"block-subtitle\">04. The Core Product<\/span><h2 class=\"block-title\">Smart Dashboard & Cognitive UI.<\/h2><\/div>\r\n                <p class=\"block-text\">Leveraging Cognitive Science, I redesigned the core experience around a <strong>\"Smart Dashboard\"<\/strong> that predicts the student's next lesson based on exams.<\/p>\r\n                <img decoding=\"async\" src=\"http:\/\/portfolio.uxicdesign.ir\/wp-content\/uploads\/2025\/12\/Konkor.png\" class=\"zoomable-img story-image\" alt=\"Smart Dashboard UI\">\r\n            <\/div>\r\n\r\n            <div class=\"story-block\">\r\n                <div class=\"block-header\"><span class=\"block-subtitle\">05. Growth Engine<\/span><h2 class=\"block-title\">High-Performance Landing Pages.<\/h2><\/div>\r\n                <p class=\"block-text\">To support marketing campaigns, I designed over <strong>10 dedicated landing pages<\/strong> (Konkor, Final Exams), each A\/B tested for maximum conversion.<\/p>\r\n                <div class=\"landing-grid\">\r\n                    <img decoding=\"async\" src=\"http:\/\/portfolio.uxicdesign.ir\/wp-content\/uploads\/2025\/12\/Screenshot-2025-12-20-155229.png\" class=\"zoomable-img story-image\">\r\n                    <img decoding=\"async\" src=\"http:\/\/portfolio.uxicdesign.ir\/wp-content\/uploads\/2025\/12\/Screenshot-2025-12-20-155213.png\" class=\"zoomable-img story-image\">\r\n                    <img decoding=\"async\" src=\"http:\/\/portfolio.uxicdesign.ir\/wp-content\/uploads\/2025\/12\/Screenshot-2025-12-20-155144.png\" class=\"zoomable-img story-image\">\r\n                    <img decoding=\"async\" src=\"http:\/\/portfolio.uxicdesign.ir\/wp-content\/uploads\/2025\/12\/Screenshot-2025-12-20-155305.png\" class=\"zoomable-img story-image\">\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"story-block\">\r\n                <div class=\"block-header\"><span class=\"block-subtitle\">06. Content Strategy<\/span><h2 class=\"block-title\">Redesigning the Knowledge Hub.<\/h2><\/div>\r\n                <p class=\"block-text\">SEO was a major acquisition channel. I led the redesign of the <strong>Blog<\/strong> to improve readability and time-on-page.<\/p>\r\n                <div class=\"landing-grid\">\r\n                    <img decoding=\"async\" src=\"http:\/\/portfolio.uxicdesign.ir\/wp-content\/uploads\/2025\/12\/Screenshot-2025-12-20-155442.png\" class=\"zoomable-img story-image\">\r\n                    <img decoding=\"async\" src=\"http:\/\/portfolio.uxicdesign.ir\/wp-content\/uploads\/2025\/12\/Screenshot-2025-12-20-155436.png\" class=\"zoomable-img story-image\">\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"story-block\">\r\n                <div class=\"block-header\"><span class=\"block-subtitle\">07. Validation<\/span><h2 class=\"block-title\">Data-Driven Decisions.<\/h2><\/div>\r\n                <div class=\"cards-grid\">\r\n                    <div class=\"pro-card\"><h4>A\/B Testing<\/h4><p>Tested 3 variations of the checkout page. The winner increased conversion by 25%.<\/p><\/div>\r\n                    <div class=\"pro-card\"><h4>5-Second Tests<\/h4><p>Ensured the value proposition on Landing Pages was understood instantly.<\/p><\/div>\r\n                    <div class=\"pro-card\"><h4>Usability Studies<\/h4><p>Moderated sessions to observe friction points in the new onboarding flow.<\/p><\/div>\r\n                    <div class=\"pro-card\"><h4>Heatmaps<\/h4><p>Continuous monitoring via Clarity to optimize CTA placements.<\/p><\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"story-block\">\r\n                <div class=\"block-header\"><span class=\"block-subtitle\">08. 360\u00b0 Brand Experience<\/span><h2 class=\"block-title\">From Billboard to Mobile.<\/h2><\/div>\r\n                <p class=\"block-text\">We created a unified visual language that extended from the UI to <strong>National TV Commercials<\/strong> and <strong>City Billboards<\/strong>.<\/p>\r\n                <div class=\"ad-grid\">\r\n                    <img decoding=\"async\" src=\"http:\/\/portfolio.uxicdesign.ir\/wp-content\/uploads\/2025\/12\/5855111710010706783.jpg\" class=\"zoomable-img ad-img\" alt=\"Billboard\">\r\n                    <img decoding=\"async\" src=\"http:\/\/portfolio.uxicdesign.ir\/wp-content\/uploads\/2025\/12\/5859462082384825110.jpg\" class=\"zoomable-img ad-img\" alt=\"Visuals\">\r\n                    <img decoding=\"async\" src=\"http:\/\/portfolio.uxicdesign.ir\/wp-content\/uploads\/2025\/12\/5855111710010706780.jpg\" class=\"zoomable-img ad-img\" alt=\"TV Ad\">\r\n                <\/div>\r\n            <\/div>\r\n\r\n        <\/div> \r\n    <\/div>\r\n\r\n    <footer class=\"case-footer\">\r\n        <h3 class=\"footer-title\">Ready to explore more?<\/h3>\r\n        <a href=\"https:\/\/portfolio.uxicdesign.ir\/\" class=\"btn-back\">\r\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n                <path d=\"M20 12H4M4 12L10 6M4 12L10 18\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n            <\/svg>\r\n            Back to Portfolio\r\n        <\/a>\r\n    <\/footer>\r\n\r\n<\/div>\r\n\r\n<script>\r\n    const modal = document.getElementById(\"lightbox-modal\");\r\n    const modalImg = document.getElementById(\"lightbox-image\");\r\n    const closeBtn = document.getElementById(\"close-lightbox\");\r\n\r\n    const allImages = document.querySelectorAll('.zoomable-img');\r\n\r\n    allImages.forEach(img => {\r\n        img.addEventListener('click', function() {\r\n            modal.style.display = \"flex\";\r\n            modalImg.src = this.src;\r\n        });\r\n    });\r\n\r\n    closeBtn.onclick = function() {\r\n        modal.style.display = \"none\";\r\n    }\r\n\r\n    modal.onclick = function(event) {\r\n        if (event.target === modal) {\r\n            modal.style.display = \"none\";\r\n        }\r\n    }\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Work Blog About Resume MCI (Hamrahe Aval) Role: Senior Product Designer Reimagining EdTechthrough Cognitive Design. Leading the transformation of ino.school for MCI. Merging Cognitive Science Research with UX Strategy to build a habit-forming ecosystem for 3 Million students. +40%User Retention 3M+Active Students 2.5xConversion Rate &times; Project Context EdTech Transformation Key Responsibilities Design System Architecture UX [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-210","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/portfolio.uxicdesign.ir\/index.php?rest_route=\/wp\/v2\/pages\/210","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/portfolio.uxicdesign.ir\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/portfolio.uxicdesign.ir\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/portfolio.uxicdesign.ir\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/portfolio.uxicdesign.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=210"}],"version-history":[{"count":38,"href":"https:\/\/portfolio.uxicdesign.ir\/index.php?rest_route=\/wp\/v2\/pages\/210\/revisions"}],"predecessor-version":[{"id":281,"href":"https:\/\/portfolio.uxicdesign.ir\/index.php?rest_route=\/wp\/v2\/pages\/210\/revisions\/281"}],"wp:attachment":[{"href":"https:\/\/portfolio.uxicdesign.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=210"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}