Partie 1 \u2014 \u00c9tude de cas<\/title>\n\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Prime Moby \u2014 Sch\u00e9ma des parcours utilisateurs<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Antonio:wght@400;500;700&family=Manrope:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n<style>\n :root{\n --bg: #F5F6F2;\n --panel: #FFFFFF;\n --ink: #1B2430;\n --ink-soft: #5B6472;\n --line: #DEDBD0;\n --existing: #1F6F5C;\n --existing-soft: #E7F1EC;\n --new: #C9791A;\n --new-soft: #FBEFDE;\n --hub: #2B3646;\n --hub-soft: #EDEEEA;\n }\n *{box-sizing:border-box;}\n body{\n margin:0;\n background:var(--bg);\n color:var(--ink);\n font-family:'Manrope', sans-serif;\n line-height:1.5;\n padding:48px 24px 80px;\n }\n .wrap{max-width:1180px;margin:0 auto;}\n\n header.top{margin-bottom:44px;max-width:720px;}\n .kicker{\n font-family:'Manrope',sans-serif;\n font-weight:600;\n font-size:14px;\n color:var(--ink-soft);\n letter-spacing:0.01em;\n margin:0 0 10px;\n }\n h1{\n font-family:'Antonio',sans-serif;\n font-weight:500;\n text-transform:uppercase;\n font-size:clamp(32px,5vw,48px);\n margin:0 0 14px;\n letter-spacing:0.01em;\n line-height:1.05;\n }\n .lede{font-size:16px;color:var(--ink-soft);margin:0;max-width:62ch;}\n\n .legend{\n display:flex;gap:28px;margin:28px 0 48px;flex-wrap:wrap;\n font-size:14px;color:var(--ink-soft);\n }\n .legend span{display:inline-flex;align-items:center;gap:8px;}\n .dot{width:10px;height:10px;border-radius:50%;display:inline-block;}\n .dot.existing{background:var(--existing);}\n .dot.new{background:var(--new);}\n\n section.block{margin-bottom:56px;}\n\n .context{\n display:flex;gap:28px;flex-wrap:wrap;\n margin-bottom:48px;\n padding-bottom:40px;\n border-bottom:1px solid var(--line);\n }\n .context .main{flex:2;min-width:280px;}\n .context .main p{font-size:15px;color:var(--ink-soft);margin:0;max-width:60ch;}\n .context .main strong{color:var(--ink);}\n .context .aside{\n flex:1;min-width:220px;max-width:300px;\n background:var(--hub-soft);\n border-left:3px solid var(--hub);\n border-radius:6px;\n padding:14px 16px;\n align-self:flex-start;\n }\n .context .aside .label{\n font-family:'Manrope',sans-serif;font-weight:600;font-size:12px;\n color:var(--hub);margin:0 0 6px;\n }\n .context .aside p{font-size:13px;color:var(--ink-soft);margin:0;}\n .block-head{\n display:flex;align-items:baseline;gap:14px;margin-bottom:20px;\n border-bottom:1px solid var(--line);padding-bottom:14px;\n }\n .block-tag{\n font-family:'Manrope',sans-serif;font-weight:600;font-size:13px;\n padding:4px 10px;border-radius:5px;white-space:nowrap;\n }\n .block-tag.existing{background:var(--existing-soft);color:var(--existing);}\n .block-tag.new{background:var(--new-soft);color:var(--new);}\n .block-head h2{\n font-family:'Manrope',sans-serif;font-size:21px;font-weight:600;margin:0;\n }\n .block-head .who{font-size:14px;color:var(--ink-soft);}\n\n .flow{\n background:var(--panel);\n border:1px solid var(--line);\n border-radius:10px;\n padding:24px 26px;\n margin-bottom:32px;\n }\n .flow-label{\n font-family:'Manrope',sans-serif;\n font-weight:600;\n font-size:14px;\n margin:0 0 14px;\n color:var(--ink);\n }\n .flow-label .num{\n display:inline-flex;align-items:center;justify-content:center;\n width:20px;height:20px;border-radius:50%;\n background:var(--hub-soft);color:var(--hub);\n font-size:12px;margin-right:8px;\n }\n .steps{\n display:flex;align-items:stretch;flex-wrap:wrap;gap:4px 0;\n }\n .step{\n background:var(--bg);\n border:1px solid var(--line);\n border-radius:8px;\n padding:12px 14px;\n font-size:13.5px;\n min-width:150px;\n max-width:210px;\n display:flex;\n flex-direction:column;\n justify-content:center;\n }\n .step .t{font-weight:600;font-size:13.5px;margin-bottom:3px;}\n .step .d{color:var(--ink-soft);font-size:12.5px;}\n .arrow{\n display:flex;align-items:center;justify-content:center;\n width:40px;color:var(--ink-soft);font-size:15px;flex-shrink:0;\n }\n .step.outcome.existing{border-color:var(--existing);background:var(--existing-soft);}\n .step.outcome.new{border-color:var(--new);background:var(--new-soft);}\n\n .note{\n margin-top:12px;\n font-size:12.5px;\n color:var(--ink-soft);\n border-left:2px solid var(--line);\n padding-left:10px;\n }\n\n .hub{\n background:var(--hub);\n color:#fff;\n border-radius:10px;\n padding:26px 28px;\n display:flex;\n gap:24px;\n align-items:center;\n flex-wrap:wrap;\n }\n .hub h3{\n font-family:'Manrope',sans-serif;\n font-size:18px;margin:0 0 6px;font-weight:600;\n }\n .hub p{margin:0;font-size:13.5px;color:#C7CCD4;max-width:60ch;}\n .hub .badges{display:flex;gap:10px;flex-wrap:wrap;}\n .hub .badge{\n font-size:12px;font-family:'Manrope',sans-serif;font-weight:600;\n padding:5px 10px;border-radius:5px;background:rgba(255,255,255,0.1);\n }\n .converge{\n display:flex;justify-content:center;gap:10px;margin:6px 0 18px;\n color:var(--ink-soft);font-size:13px;align-items:center;\n }\n .converge .ln{height:1px;width:60px;background:var(--line);}\n\n\n .case-intro{\n display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;\n margin:0 0 48px;\n }\n .case-card{\n background:var(--panel);border:1px solid var(--line);border-radius:10px;\n padding:20px 22px;\n }\n .case-card h3{\n font-family:'Manrope',sans-serif;font-size:16px;font-weight:600;\n margin:0 0 8px;\n }\n .case-card p{margin:0;font-size:13.5px;color:var(--ink-soft);}\n .case-card strong{color:var(--ink);}\n .image-placeholder{\n min-height:250px;border:2px dashed #B9B8B0;border-radius:10px;\n background:repeating-linear-gradient(135deg,#F8F8F5,#F8F8F5 10px,#F2F2EE 10px,#F2F2EE 20px);\n display:flex;align-items:center;justify-content:center;text-align:center;\n padding:28px;margin:20px 0 32px;\n }\n .image-placeholder .ph-title{\n font-family:'Manrope',sans-serif;font-size:15px;font-weight:600;\n margin-bottom:5px;\n }\n .image-placeholder .ph-sub{font-size:12.5px;color:var(--ink-soft);max-width:52ch;}\n .image-block{margin:20px 0 32px;}\n .image-block img{\n width:100%;display:block;border-radius:10px;border:1px solid var(--line);\n }\n .image-block .cap{\n font-size:12px;color:var(--ink-soft);margin-top:8px;text-align:center;\n }\n .image-block.grid-2{\n display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;\n }\n .hero-image{margin:0 0 44px;}\n .hero-image img{\n width:100%;display:block;border-radius:14px;border:1px solid var(--line);\n }\n .system{\n background:var(--hub-soft);border-left:3px solid var(--hub);border-radius:6px;\n padding:20px 22px;margin-top:20px;\n }\n .system h3{font-family:'Manrope',sans-serif;font-size:17px;margin:0 0 7px;}\n .system p{font-size:13.5px;color:var(--ink-soft);margin:0;}\n @media (max-width:640px){.case-intro{grid-template-columns:1fr;}.image-block.grid-2{grid-template-columns:1fr;}}\n\n @media print{\n body{padding:20px;background:#fff;}\n .flow{break-inside:avoid;}\n section.block{break-inside:avoid;}\n .image-block, .hero-image{break-inside:avoid;}\n }\n @media (max-width:640px){\n .steps{flex-direction:column;}\n .arrow{transform:rotate(90deg);width:100%;padding:2px 0;}\n .step{max-width:none;}\n }\n<\/style>\n\n<\/head>\n<body>\n<div class=\"wrap\">\n<div class=\"wrap\">\n\n <header class=\"top\">\n <p class=\"kicker\">Case study \u2014 Product Design<\/p>\n <h1>Prime Moby \u2014 User Journeys<\/h1>\n <p class=\"lede\">Turning a promotional offer into a driver of acquisition and retention, while laying the foundations for a reusable offer architecture<\/p>\n <\/header>\n\n <section class=\"case-intro\">\n <div class=\"case-card\">\n <h3>Context<\/h3>\n <p>A few months after the launch of the marketplace, the product strategy evolved to increase adoption among two populations with strong potential for recurring use: <strong>professionals and students<\/strong>.<\/p>\n <\/div>\n <div class=\"case-card\">\n <h3>Business challenge<\/h3>\n <p>Give professionals and students a concrete reason to adopt the platform over its competitors, then turn this adoption into regular <strong>use regular and loyalty<\/strong>, with the possibility to change the user to a formula member.<\/p>\n <\/div>\n <div class=\"case-card\">\n <h3>Role of design<\/h3>\n <p>Integrate Moby Prime into the user journey: identify key moments, make the benefit easy to understand and access, facilitate activation, and create reminders throughout the experience.<\/p>\n <\/div>\n <div class=\"case-card\">\n <h3>Solution<\/h3>\n <p>Make Moby Prime <strong>more than a promotional communication<\/strong> : a visible benefit that can be activated at several stages of the journey, from discovery to usage, with follow-up available in the account area.<\/p>\n <\/div>\n <\/section>\n\n <div class=\"legend\">\n <span><i class=\"dot existing\"><\/i> Existing user \u2014 John<\/span>\n <span><i class=\"dot new\"><\/i> New user \u2014 Bertrand<\/span>\n <\/div>\n\n <div class=\"context\">\n <div class=\"main\">\n <p><strong>An offer designed as a loyalty mechanism:<\/strong> each activation of Moby Prime gives access to a benefit that can extend over time. The offer accompanies users beyond their first use and creates new reasons to return.<\/p>\n <\/div>\n <div class=\"aside\">\n <p class=\"label\">Point of contact<\/p>\n <p>Each time a Moby Prime code is generated, a confirmation email complements the experience and serves as a reminder encouraging the user to take advantage of the benefit.<\/p>\n <\/div>\n <\/div>\n<\/div>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-51596b0 e-con-full e-flex e-con e-child\" data-id=\"51596b0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d7942ce elementor-widget elementor-widget-image\" data-id=\"d7942ce\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"1312\" height=\"1199\" src=\"https:\/\/designdinterface.com\/wp-content\/uploads\/2026\/09\/mockup-prime-moby.png\" class=\"attachment-full size-full wp-image-3933\" alt=\"\" srcset=\"https:\/\/designdinterface.com\/wp-content\/uploads\/2026\/09\/mockup-prime-moby.png 1312w, https:\/\/designdinterface.com\/wp-content\/uploads\/2026\/09\/mockup-prime-moby-300x274.png 300w, https:\/\/designdinterface.com\/wp-content\/uploads\/2026\/09\/mockup-prime-moby-1024x936.png 1024w, https:\/\/designdinterface.com\/wp-content\/uploads\/2026\/09\/mockup-prime-moby-768x702.png 768w, https:\/\/designdinterface.com\/wp-content\/uploads\/2026\/09\/mockup-prime-moby-13x12.png 13w\" sizes=\"(max-width: 1312px) 100vw, 1312px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-84824ff e-con-full e-flex e-con e-child\" data-id=\"84824ff\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-743484e elementor-widget elementor-widget-html\" data-id=\"743484e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Partie 2 \u2014 Cas n\u00b01<\/title>\n\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Prime Moby \u2014 Sch\u00e9ma des parcours utilisateurs<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Antonio:wght@400;500;700&family=Manrope:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n<style>\n :root{\n --bg: #F5F6F2;\n --panel: #FFFFFF;\n --ink: #1B2430;\n --ink-soft: #5B6472;\n --line: #DEDBD0;\n --existing: #1F6F5C;\n --existing-soft: #E7F1EC;\n --new: #C9791A;\n --new-soft: #FBEFDE;\n --hub: #2B3646;\n --hub-soft: #EDEEEA;\n }\n *{box-sizing:border-box;}\n body{\n margin:0;\n background:var(--bg);\n color:var(--ink);\n font-family:'Manrope', sans-serif;\n line-height:1.5;\n padding:48px 24px 80px;\n }\n .wrap{max-width:1180px;margin:0 auto;}\n\n header.top{margin-bottom:44px;max-width:720px;}\n .kicker{\n font-family:'Manrope',sans-serif;\n font-weight:600;\n font-size:14px;\n color:var(--ink-soft);\n letter-spacing:0.01em;\n margin:0 0 10px;\n }\n h1{\n font-family:'Antonio',sans-serif;\n font-weight:500;\n text-transform:uppercase;\n font-size:clamp(32px,5vw,48px);\n margin:0 0 14px;\n letter-spacing:0.01em;\n line-height:1.05;\n }\n .lede{font-size:16px;color:var(--ink-soft);margin:0;max-width:62ch;}\n\n .legend{\n display:flex;gap:28px;margin:28px 0 48px;flex-wrap:wrap;\n font-size:14px;color:var(--ink-soft);\n }\n .legend span{display:inline-flex;align-items:center;gap:8px;}\n .dot{width:10px;height:10px;border-radius:50%;display:inline-block;}\n .dot.existing{background:var(--existing);}\n .dot.new{background:var(--new);}\n\n section.block{margin-bottom:56px;}\n\n .context{\n display:flex;gap:28px;flex-wrap:wrap;\n margin-bottom:48px;\n padding-bottom:40px;\n border-bottom:1px solid var(--line);\n }\n .context .main{flex:2;min-width:280px;}\n .context .main p{font-size:15px;color:var(--ink-soft);margin:0;max-width:60ch;}\n .context .main strong{color:var(--ink);}\n .context .aside{\n flex:1;min-width:220px;max-width:300px;\n background:var(--hub-soft);\n border-left:3px solid var(--hub);\n border-radius:6px;\n padding:14px 16px;\n align-self:flex-start;\n }\n .context .aside .label{\n font-family:'Manrope',sans-serif;font-weight:600;font-size:12px;\n color:var(--hub);margin:0 0 6px;\n }\n .context .aside p{font-size:13px;color:var(--ink-soft);margin:0;}\n .block-head{\n display:flex;align-items:baseline;gap:14px;margin-bottom:20px;\n border-bottom:1px solid var(--line);padding-bottom:14px;\n }\n .block-tag{\n font-family:'Manrope',sans-serif;font-weight:600;font-size:13px;\n padding:4px 10px;border-radius:5px;white-space:nowrap;\n }\n .block-tag.existing{background:var(--existing-soft);color:var(--existing);}\n .block-tag.new{background:var(--new-soft);color:var(--new);}\n .block-head h2{\n font-family:'Manrope',sans-serif;font-size:21px;font-weight:600;margin:0;\n }\n .block-head .who{font-size:14px;color:var(--ink-soft);}\n\n .flow{\n background:var(--panel);\n border:1px solid var(--line);\n border-radius:10px;\n padding:24px 26px;\n margin-bottom:32px;\n }\n .flow-label{\n font-family:'Manrope',sans-serif;\n font-weight:600;\n font-size:14px;\n margin:0 0 14px;\n color:var(--ink);\n }\n .flow-label .num{\n display:inline-flex;align-items:center;justify-content:center;\n width:20px;height:20px;border-radius:50%;\n background:var(--hub-soft);color:var(--hub);\n font-size:12px;margin-right:8px;\n }\n .steps{\n display:flex;align-items:stretch;flex-wrap:wrap;gap:4px 0;\n }\n .step{\n background:var(--bg);\n border:1px solid var(--line);\n border-radius:8px;\n padding:12px 14px;\n font-size:13.5px;\n min-width:150px;\n max-width:210px;\n display:flex;\n flex-direction:column;\n justify-content:center;\n }\n .step .t{font-weight:600;font-size:13.5px;margin-bottom:3px;}\n .step .d{color:var(--ink-soft);font-size:12.5px;}\n .arrow{\n display:flex;align-items:center;justify-content:center;\n width:40px;color:var(--ink-soft);font-size:15px;flex-shrink:0;\n }\n .step.outcome.existing{border-color:var(--existing);background:var(--existing-soft);}\n .step.outcome.new{border-color:var(--new);background:var(--new-soft);}\n\n .note{\n margin-top:12px;\n font-size:12.5px;\n color:var(--ink-soft);\n border-left:2px solid var(--line);\n padding-left:10px;\n }\n\n .hub{\n background:var(--hub);\n color:#fff;\n border-radius:10px;\n padding:26px 28px;\n display:flex;\n gap:24px;\n align-items:center;\n flex-wrap:wrap;\n }\n .hub h3{\n font-family:'Manrope',sans-serif;\n font-size:18px;margin:0 0 6px;font-weight:600;\n }\n .hub p{margin:0;font-size:13.5px;color:#C7CCD4;max-width:60ch;}\n .hub .badges{display:flex;gap:10px;flex-wrap:wrap;}\n .hub .badge{\n font-size:12px;font-family:'Manrope',sans-serif;font-weight:600;\n padding:5px 10px;border-radius:5px;background:rgba(255,255,255,0.1);\n }\n .converge{\n display:flex;justify-content:center;gap:10px;margin:6px 0 18px;\n color:var(--ink-soft);font-size:13px;align-items:center;\n }\n .converge .ln{height:1px;width:60px;background:var(--line);}\n\n\n .case-intro{\n display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;\n margin:0 0 48px;\n }\n .case-card{\n background:var(--panel);border:1px solid var(--line);border-radius:10px;\n padding:20px 22px;\n }\n .case-card h3{\n font-family:'Manrope',sans-serif;font-size:16px;font-weight:600;\n margin:0 0 8px;\n }\n .case-card p{margin:0;font-size:13.5px;color:var(--ink-soft);}\n .case-card strong{color:var(--ink);}\n .image-placeholder{\n min-height:250px;border:2px dashed #B9B8B0;border-radius:10px;\n background:repeating-linear-gradient(135deg,#F8F8F5,#F8F8F5 10px,#F2F2EE 10px,#F2F2EE 20px);\n display:flex;align-items:center;justify-content:center;text-align:center;\n padding:28px;margin:20px 0 32px;\n }\n .image-placeholder .ph-title{\n font-family:'Manrope',sans-serif;font-size:15px;font-weight:600;\n margin-bottom:5px;\n }\n .image-placeholder .ph-sub{font-size:12.5px;color:var(--ink-soft);max-width:52ch;}\n .image-block{margin:20px 0 32px;}\n .image-block img{\n width:100%;display:block;border-radius:10px;border:1px solid var(--line);\n }\n .image-block .cap{\n font-size:12px;color:var(--ink-soft);margin-top:8px;text-align:center;\n }\n .image-block.grid-2{\n display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;\n }\n .hero-image{margin:0 0 44px;}\n .hero-image img{\n width:100%;display:block;border-radius:14px;border:1px solid var(--line);\n }\n .system{\n background:var(--hub-soft);border-left:3px solid var(--hub);border-radius:6px;\n padding:20px 22px;margin-top:20px;\n }\n .system h3{font-family:'Manrope',sans-serif;font-size:17px;margin:0 0 7px;}\n .system p{font-size:13.5px;color:var(--ink-soft);margin:0;}\n @media (max-width:640px){.case-intro{grid-template-columns:1fr;}.image-block.grid-2{grid-template-columns:1fr;}}\n\n @media print{\n body{padding:20px;background:#fff;}\n .flow{break-inside:avoid;}\n section.block{break-inside:avoid;}\n .image-block, .hero-image{break-inside:avoid;}\n }\n @media (max-width:640px){\n .steps{flex-direction:column;}\n .arrow{transform:rotate(90deg);width:100%;padding:2px 0;}\n .step{max-width:none;}\n }\n<\/style>\n\n<\/head>\n<body>\n<div class=\"wrap\">\n<section class=\"block\">\n <div class=\"block-head\">\n <span class=\"block-tag existing\">Case 1<\/span>\n <h2>Existing user<\/h2>\n <span class=\"who\"> \u2014 3 possible entry points for all<\/span>\n <\/div>\n\n <div class=\"flow\">\n <p class=\"flow-label\"><span class=\"num\">Has<\/span>Since an advertising campaign<\/p>\n <div class=\"steps\">\n <div class=\"step\"><div class=\"t\">Pub \/ mail \/ Instagram<\/div><div class=\"d\">\"Take advantage of the Bonus Moby \"<\/div><\/div>\n <div class=\"arrow\">\u2192<\/div>\n <div class=\"step\"><div class=\"t\">Moby Prime landing page<\/div><div class=\"d\">Company name automatically completed<\/div><\/div>\n <div class=\"arrow\">\u2192<\/div>\n <div class=\"step\"><div class=\"t\">Company Code generated<\/div><div class=\"d\">Dynamic, specific to the company<\/div><\/div>\n <div class=\"arrow\">\u2192<\/div>\n <div class=\"step\"><div class=\"t\">Sign in \/ create account<\/div><div class=\"d\">Enter benefit code<\/div><\/div>\n <div class=\"arrow\">\u2192<\/div>\n <div class=\"step outcome existing\"><div class=\"t\">Order or \u201cMy Benefits\u201d<\/div><div class=\"d\">Place an order immediately or view the benefit in the account area<\/div><\/div>\n <\/div>\n <\/div>\n\n <div class=\"flow\">\n <p class=\"flow-label\"><span class=\"num\">B<\/span>From checkout<\/p>\n <div class=\"steps\">\n <div class=\"step\"><div class=\"t\">End of order<\/div><div class=\"d\">Delivery or pickup<\/div><\/div>\n <div class=\"arrow\">\u2192<\/div>\n <div class=\"step\"><div class=\"t\">Discount offered<\/div><div class=\"d\">Applied directly to the amount due<\/div><\/div>\n <div class=\"arrow\">\u2192<\/div>\n <div class=\"step outcome existing\"><div class=\"t\">Moby Prime subscription<\/div><div class=\"d\">In consideration of the reduction<\/div><\/div>\n <\/div>\n <\/div>\n\n <div class=\"flow\">\n <p class=\"flow-label\"><span class=\"num\">C<\/span>Since the space includes<\/p>\n <div class=\"steps\">\n <div class=\"step\"><div class=\"t\">My Account<\/div><div class=\"d\">New item available<\/div><\/div>\n <div class=\"arrow\">\u2192<\/div>\n <div class=\"step\"><div class=\"t\">\"My privilege \"<\/div><div class=\"d\">Visual + CTA discovery<\/div><\/div>\n <div class=\"arrow\">\u2192<\/div>\n <div class=\"step outcome existing\"><div class=\"t\">Join the Moby Prime<\/div><div class=\"d\">Membership since this space<\/div><\/div>\n <\/div>\n <\/div>\n\n <div class=\"flow\">\n <p class=\"flow-label\"><span class=\"num\">D<\/span>From the home page<\/p>\n <div class=\"steps\">\n <div class=\"step\"><div class=\"t\">Banner CTA<\/div><div class=\"d\">On the marketplace homepage<\/div><\/div>\n <div class=\"arrow\">\u2192<\/div>\n <div class=\"step outcome existing\"><div class=\"t\">Moby Prime landing page<\/div><div class=\"d\">Then the same journey as A: company name automatically completed \u2192 code \u2192 sign in\/account \u2192 order or \u201cMy Benefits\u201d\nAccount area, under \u201cMy Benefits\u201d and benefit code<\/div><\/div>\n <\/div>\n <\/div>\n\n <div>\n \n <p class=\"cap\">Space account, under \"My privilege\" and code advantage.<\/p>\n <\/div>\n <\/div>\n <\/section>\n<\/div>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-21ecfe7 e-con-full e-flex e-con e-child\" data-id=\"21ecfe7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e5b7b02 elementor-widget elementor-widget-video\" data-id=\"e5b7b02\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"video_type":"hosted","mute":"yes","loop":"yes","controls":"yes"}\" data-widget_type=\"video.default\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/designdinterface.com\/wp-content\/uploads\/2026\/09\/prime-moby-landing.mov\" loop=\"\" controls=\"\" preload=\"metadata\" muted=\"muted\" controlslist=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9ce346b e-con-full e-flex e-con e-child\" data-id=\"9ce346b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-32f40f8 elementor-widget elementor-widget-html\" data-id=\"32f40f8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Partie 3 \u2014 Cas n\u00b02<\/title>\n\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Prime Moby \u2014 Sch\u00e9ma des parcours utilisateurs<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Antonio:wght@400;500;700&family=Manrope:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n<style>\n :root{\n --bg: #F5F6F2;\n --panel: #FFFFFF;\n --ink: #1B2430;\n --ink-soft: #5B6472;\n --line: #DEDBD0;\n --existing: #1F6F5C;\n --existing-soft: #E7F1EC;\n --new: #C9791A;\n --new-soft: #FBEFDE;\n --hub: #2B3646;\n --hub-soft: #EDEEEA;\n }\n *{box-sizing:border-box;}\n body{\n margin:0;\n background:var(--bg);\n color:var(--ink);\n font-family:'Manrope', sans-serif;\n line-height:1.5;\n padding:48px 24px 80px;\n }\n .wrap{max-width:1180px;margin:0 auto;}\n\n header.top{margin-bottom:44px;max-width:720px;}\n .kicker{\n font-family:'Manrope',sans-serif;\n font-weight:600;\n font-size:14px;\n color:var(--ink-soft);\n letter-spacing:0.01em;\n margin:0 0 10px;\n }\n h1{\n font-family:'Antonio',sans-serif;\n font-weight:500;\n text-transform:uppercase;\n font-size:clamp(32px,5vw,48px);\n margin:0 0 14px;\n letter-spacing:0.01em;\n line-height:1.05;\n }\n .lede{font-size:16px;color:var(--ink-soft);margin:0;max-width:62ch;}\n\n .legend{\n display:flex;gap:28px;margin:28px 0 48px;flex-wrap:wrap;\n font-size:14px;color:var(--ink-soft);\n }\n .legend span{display:inline-flex;align-items:center;gap:8px;}\n .dot{width:10px;height:10px;border-radius:50%;display:inline-block;}\n .dot.existing{background:var(--existing);}\n .dot.new{background:var(--new);}\n\n section.block{margin-bottom:56px;}\n\n .context{\n display:flex;gap:28px;flex-wrap:wrap;\n margin-bottom:48px;\n padding-bottom:40px;\n border-bottom:1px solid var(--line);\n }\n .context .main{flex:2;min-width:280px;}\n .context .main p{font-size:15px;color:var(--ink-soft);margin:0;max-width:60ch;}\n .context .main strong{color:var(--ink);}\n .context .aside{\n flex:1;min-width:220px;max-width:300px;\n background:var(--hub-soft);\n border-left:3px solid var(--hub);\n border-radius:6px;\n padding:14px 16px;\n align-self:flex-start;\n }\n .context .aside .label{\n font-family:'Manrope',sans-serif;font-weight:600;font-size:12px;\n color:var(--hub);margin:0 0 6px;\n }\n .context .aside p{font-size:13px;color:var(--ink-soft);margin:0;}\n .block-head{\n display:flex;align-items:baseline;gap:14px;margin-bottom:20px;\n border-bottom:1px solid var(--line);padding-bottom:14px;\n }\n .block-tag{\n font-family:'Manrope',sans-serif;font-weight:600;font-size:13px;\n padding:4px 10px;border-radius:5px;white-space:nowrap;\n }\n .block-tag.existing{background:var(--existing-soft);color:var(--existing);}\n .block-tag.new{background:var(--new-soft);color:var(--new);}\n .block-head h2{\n font-family:'Manrope',sans-serif;font-size:21px;font-weight:600;margin:0;\n }\n .block-head .who{font-size:14px;color:var(--ink-soft);}\n\n .flow{\n background:var(--panel);\n border:1px solid var(--line);\n border-radius:10px;\n padding:24px 26px;\n margin-bottom:32px;\n }\n .flow-label{\n font-family:'Manrope',sans-serif;\n font-weight:600;\n font-size:14px;\n margin:0 0 14px;\n color:var(--ink);\n }\n .flow-label .num{\n display:inline-flex;align-items:center;justify-content:center;\n width:20px;height:20px;border-radius:50%;\n background:var(--hub-soft);color:var(--hub);\n font-size:12px;margin-right:8px;\n }\n .steps{\n display:flex;align-items:stretch;flex-wrap:wrap;gap:4px 0;\n }\n .step{\n background:var(--bg);\n border:1px solid var(--line);\n border-radius:8px;\n padding:12px 14px;\n font-size:13.5px;\n min-width:150px;\n max-width:210px;\n display:flex;\n flex-direction:column;\n justify-content:center;\n }\n .step .t{font-weight:600;font-size:13.5px;margin-bottom:3px;}\n .step .d{color:var(--ink-soft);font-size:12.5px;}\n .arrow{\n display:flex;align-items:center;justify-content:center;\n width:40px;color:var(--ink-soft);font-size:15px;flex-shrink:0;\n }\n .step.outcome.existing{border-color:var(--existing);background:var(--existing-soft);}\n .step.outcome.new{border-color:var(--new);background:var(--new-soft);}\n\n .note{\n margin-top:12px;\n font-size:12.5px;\n color:var(--ink-soft);\n border-left:2px solid var(--line);\n padding-left:10px;\n }\n\n .hub{\n background:var(--hub);\n color:#fff;\n border-radius:10px;\n padding:26px 28px;\n display:flex;\n gap:24px;\n align-items:center;\n flex-wrap:wrap;\n }\n .hub h3{\n font-family:'Manrope',sans-serif;\n font-size:18px;margin:0 0 6px;font-weight:600;\n }\n .hub p{margin:0;font-size:13.5px;color:#C7CCD4;max-width:60ch;}\n .hub .badges{display:flex;gap:10px;flex-wrap:wrap;}\n .hub .badge{\n font-size:12px;font-family:'Manrope',sans-serif;font-weight:600;\n padding:5px 10px;border-radius:5px;background:rgba(255,255,255,0.1);\n }\n .converge{\n display:flex;justify-content:center;gap:10px;margin:6px 0 18px;\n color:var(--ink-soft);font-size:13px;align-items:center;\n }\n .converge .ln{height:1px;width:60px;background:var(--line);}\n\n\n .case-intro{\n display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;\n margin:0 0 48px;\n }\n .case-card{\n background:var(--panel);border:1px solid var(--line);border-radius:10px;\n padding:20px 22px;\n }\n .case-card h3{\n font-family:'Manrope',sans-serif;font-size:16px;font-weight:600;\n margin:0 0 8px;\n }\n .case-card p{margin:0;font-size:13.5px;color:var(--ink-soft);}\n .case-card strong{color:var(--ink);}\n .image-placeholder{\n min-height:250px;border:2px dashed #B9B8B0;border-radius:10px;\n background:repeating-linear-gradient(135deg,#F8F8F5,#F8F8F5 10px,#F2F2EE 10px,#F2F2EE 20px);\n display:flex;align-items:center;justify-content:center;text-align:center;\n padding:28px;margin:20px 0 32px;\n }\n .image-placeholder .ph-title{\n font-family:'Manrope',sans-serif;font-size:15px;font-weight:600;\n margin-bottom:5px;\n }\n .image-placeholder .ph-sub{font-size:12.5px;color:var(--ink-soft);max-width:52ch;}\n .image-block{margin:20px 0 32px;}\n .image-block img{\n width:100%;display:block;border-radius:10px;border:1px solid var(--line);\n }\n .image-block .cap{\n font-size:12px;color:var(--ink-soft);margin-top:8px;text-align:center;\n }\n .image-block.grid-2{\n display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;\n }\n .hero-image{margin:0 0 44px;}\n .hero-image img{\n width:100%;display:block;border-radius:14px;border:1px solid var(--line);\n }\n .system{\n background:var(--hub-soft);border-left:3px solid var(--hub);border-radius:6px;\n padding:20px 22px;margin-top:20px;\n }\n .system h3{font-family:'Manrope',sans-serif;font-size:17px;margin:0 0 7px;}\n .system p{font-size:13.5px;color:var(--ink-soft);margin:0;}\n @media (max-width:640px){.case-intro{grid-template-columns:1fr;}.image-block.grid-2{grid-template-columns:1fr;}}\n\n @media print{\n body{padding:20px;background:#fff;}\n .flow{break-inside:avoid;}\n section.block{break-inside:avoid;}\n .image-block, .hero-image{break-inside:avoid;}\n }\n @media (max-width:640px){\n .steps{flex-direction:column;}\n .arrow{transform:rotate(90deg);width:100%;padding:2px 0;}\n .step{max-width:none;}\n }\n<\/style>\n\n<\/head>\n<body>\n<div class=\"wrap\">\n<section class=\"block\">\n <div class=\"block-head\">\n <span class=\"block-tag new\">Case 2<\/span>\n <h2>New user<\/h2>\n <span class=\"who\"> Without a user account \u2014 The account creation is simplified<\/span>\n <\/div>\n\n <div class=\"flow\">\n <p class=\"flow-label\"><span class=\"num\">Has<\/span>From a targeted advertisement<\/p>\n <div class=\"steps\">\n <div class=\"step\"><div class=\"t\">Targeted Moby Prime ad<\/div><div class=\"d\">The same entry point that John<\/div><\/div>\n <div class=\"arrow\">\u2192<\/div>\n <div class=\"step\"><div class=\"t\">Moby Prime landing page<\/div><div class=\"d\">Identical journey, no account required<\/div><\/div>\n <div class=\"arrow\">\u2192<\/div>\n <div class=\"step\"><div class=\"t\">Order can be placed without an account<\/div><div class=\"d\">Completed through payment<\/div><\/div>\n <div class=\"arrow\">\u2192<\/div>\n <div class=\"step\"><div class=\"t\">Sign in \/ create an account step<\/div><div class=\"d\">Moby Prime is offered at this stage<\/div><\/div>\n <div class=\"arrow\">\u2192<\/div>\n <div class=\"step outcome new\"><div class=\"t\">Follow-up from My Account<\/div><div class=\"d\">Used benefits and new offers<\/div><\/div>\n <\/div>\n <p class=\"note\">Key difference with John: account creation is no longer a barrier imposed upfront \u2014 it only occurs if the user wants to join Premium Moby.<\/p>\n <\/div>\n\n <div class=\"flow\">\n <p class=\"flow-label\"><span class=\"num\">B<\/span>From the home page<\/p>\n <div class=\"steps\">\n <div class=\"step\"><div class=\"t\">Banner CTA<\/div><div class=\"d\">On the marketplace homepage<\/div><\/div>\n <div class=\"arrow\">\u2192<\/div>\n <div class=\"step outcome new\"><div class=\"t\">Moby Prime landing page<\/div><div class=\"d\">Then the same journey as A: no account required, membership offered at sign-in<\/div><\/div>\n <\/div>\n <\/div>\n\n \n <\/div>\n <\/section>\n<\/div>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-fcd7d55 e-flex e-con-boxed e-con e-child\" data-id=\"fcd7d55\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-744d82f elementor-widget elementor-widget-image\" data-id=\"744d82f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"2560\" height=\"1685\" src=\"https:\/\/designdinterface.com\/wp-content\/uploads\/2026\/09\/experience-compte-scaled.png\" class=\"attachment-full size-full wp-image-3932\" alt=\"\" srcset=\"https:\/\/designdinterface.com\/wp-content\/uploads\/2026\/09\/experience-compte-scaled.png 2560w, https:\/\/designdinterface.com\/wp-content\/uploads\/2026\/09\/experience-compte-300x197.png 300w, https:\/\/designdinterface.com\/wp-content\/uploads\/2026\/09\/experience-compte-1024x674.png 1024w, https:\/\/designdinterface.com\/wp-content\/uploads\/2026\/09\/experience-compte-768x506.png 768w, https:\/\/designdinterface.com\/wp-content\/uploads\/2026\/09\/experience-compte-1536x1011.png 1536w, https:\/\/designdinterface.com\/wp-content\/uploads\/2026\/09\/experience-compte-2048x1348.png 2048w, https:\/\/designdinterface.com\/wp-content\/uploads\/2026\/09\/experience-compte-18x12.png 18w\" sizes=\"(max-width: 2560px) 100vw, 2560px\" \/>\t\t\t\t\t\t\t\t\t\t\t\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-d8f870a e-flex e-con-boxed e-con e-child\" data-id=\"d8f870a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c4f2f3a elementor-widget elementor-widget-html\" data-id=\"c4f2f3a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Partie 4 \u2014 Concevoir au-del\u00e0 d'une seule offre<\/title>\n\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Prime Moby \u2014 Sch\u00e9ma des parcours utilisateurs<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Antonio:wght@400;500;700&family=Manrope:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n<style>\n :root{\n --bg: #F5F6F2;\n --panel: #FFFFFF;\n --ink: #1B2430;\n --ink-soft: #5B6472;\n --line: #DEDBD0;\n --existing: #1F6F5C;\n --existing-soft: #E7F1EC;\n --new: #C9791A;\n --new-soft: #FBEFDE;\n --hub: #2B3646;\n --hub-soft: #EDEEEA;\n }\n *{box-sizing:border-box;}\n body{\n margin:0;\n background:var(--bg);\n color:var(--ink);\n font-family:'Manrope', sans-serif;\n line-height:1.5;\n padding:48px 24px 80px;\n }\n .wrap{max-width:1180px;margin:0 auto;}\n\n header.top{margin-bottom:44px;max-width:720px;}\n .kicker{\n font-family:'Manrope',sans-serif;\n font-weight:600;\n font-size:14px;\n color:var(--ink-soft);\n letter-spacing:0.01em;\n margin:0 0 10px;\n }\n h1{\n font-family:'Antonio',sans-serif;\n font-weight:500;\n text-transform:uppercase;\n font-size:clamp(32px,5vw,48px);\n margin:0 0 14px;\n letter-spacing:0.01em;\n line-height:1.05;\n }\n .lede{font-size:16px;color:var(--ink-soft);margin:0;max-width:62ch;}\n\n .legend{\n display:flex;gap:28px;margin:28px 0 48px;flex-wrap:wrap;\n font-size:14px;color:var(--ink-soft);\n }\n .legend span{display:inline-flex;align-items:center;gap:8px;}\n .dot{width:10px;height:10px;border-radius:50%;display:inline-block;}\n .dot.existing{background:var(--existing);}\n .dot.new{background:var(--new);}\n\n section.block{margin-bottom:56px;}\n\n .context{\n display:flex;gap:28px;flex-wrap:wrap;\n margin-bottom:48px;\n padding-bottom:40px;\n border-bottom:1px solid var(--line);\n }\n .context .main{flex:2;min-width:280px;}\n .context .main p{font-size:15px;color:var(--ink-soft);margin:0;max-width:60ch;}\n .context .main strong{color:var(--ink);}\n .context .aside{\n flex:1;min-width:220px;max-width:300px;\n background:var(--hub-soft);\n border-left:3px solid var(--hub);\n border-radius:6px;\n padding:14px 16px;\n align-self:flex-start;\n }\n .context .aside .label{\n font-family:'Manrope',sans-serif;font-weight:600;font-size:12px;\n color:var(--hub);margin:0 0 6px;\n }\n .context .aside p{font-size:13px;color:var(--ink-soft);margin:0;}\n .block-head{\n display:flex;align-items:baseline;gap:14px;margin-bottom:20px;\n border-bottom:1px solid var(--line);padding-bottom:14px;\n }\n .block-tag{\n font-family:'Manrope',sans-serif;font-weight:600;font-size:13px;\n padding:4px 10px;border-radius:5px;white-space:nowrap;\n }\n .block-tag.existing{background:var(--existing-soft);color:var(--existing);}\n .block-tag.new{background:var(--new-soft);color:var(--new);}\n .block-head h2{\n font-family:'Manrope',sans-serif;font-size:21px;font-weight:600;margin:0;\n }\n .block-head .who{font-size:14px;color:var(--ink-soft);}\n\n .flow{\n background:var(--panel);\n border:1px solid var(--line);\n border-radius:10px;\n padding:24px 26px;\n margin-bottom:32px;\n }\n .flow-label{\n font-family:'Manrope',sans-serif;\n font-weight:600;\n font-size:14px;\n margin:0 0 14px;\n color:var(--ink);\n }\n .flow-label .num{\n display:inline-flex;align-items:center;justify-content:center;\n width:20px;height:20px;border-radius:50%;\n background:var(--hub-soft);color:var(--hub);\n font-size:12px;margin-right:8px;\n }\n .steps{\n display:flex;align-items:stretch;flex-wrap:wrap;gap:4px 0;\n }\n .step{\n background:var(--bg);\n border:1px solid var(--line);\n border-radius:8px;\n padding:12px 14px;\n font-size:13.5px;\n min-width:150px;\n max-width:210px;\n display:flex;\n flex-direction:column;\n justify-content:center;\n }\n .step .t{font-weight:600;font-size:13.5px;margin-bottom:3px;}\n .step .d{color:var(--ink-soft);font-size:12.5px;}\n .arrow{\n display:flex;align-items:center;justify-content:center;\n width:40px;color:var(--ink-soft);font-size:15px;flex-shrink:0;\n }\n .step.outcome.existing{border-color:var(--existing);background:var(--existing-soft);}\n .step.outcome.new{border-color:var(--new);background:var(--new-soft);}\n\n .note{\n margin-top:12px;\n font-size:12.5px;\n color:var(--ink-soft);\n border-left:2px solid var(--line);\n padding-left:10px;\n }\n\n .hub{\n background:var(--hub);\n color:#fff;\n border-radius:10px;\n padding:26px 28px;\n display:flex;\n gap:24px;\n align-items:center;\n flex-wrap:wrap;\n }\n .hub h3{\n font-family:'Manrope',sans-serif;\n font-size:18px;margin:0 0 6px;font-weight:600;\n }\n .hub p{margin:0;font-size:13.5px;color:#C7CCD4;max-width:60ch;}\n .hub .badges{display:flex;gap:10px;flex-wrap:wrap;}\n .hub .badge{\n font-size:12px;font-family:'Manrope',sans-serif;font-weight:600;\n padding:5px 10px;border-radius:5px;background:rgba(255,255,255,0.1);\n }\n .converge{\n display:flex;justify-content:center;gap:10px;margin:6px 0 18px;\n color:var(--ink-soft);font-size:13px;align-items:center;\n }\n .converge .ln{height:1px;width:60px;background:var(--line);}\n\n\n .case-intro{\n display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;\n margin:0 0 48px;\n }\n .case-card{\n background:var(--panel);border:1px solid var(--line);border-radius:10px;\n padding:20px 22px;\n }\n .case-card h3{\n font-family:'Manrope',sans-serif;font-size:16px;font-weight:600;\n margin:0 0 8px;\n }\n .case-card p{margin:0;font-size:13.5px;color:var(--ink-soft);}\n .case-card strong{color:var(--ink);}\n .image-placeholder{\n min-height:250px;border:2px dashed #B9B8B0;border-radius:10px;\n background:repeating-linear-gradient(135deg,#F8F8F5,#F8F8F5 10px,#F2F2EE 10px,#F2F2EE 20px);\n display:flex;align-items:center;justify-content:center;text-align:center;\n padding:28px;margin:20px 0 32px;\n }\n .image-placeholder .ph-title{\n font-family:'Manrope',sans-serif;font-size:15px;font-weight:600;\n margin-bottom:5px;\n }\n .image-placeholder .ph-sub{font-size:12.5px;color:var(--ink-soft);max-width:52ch;}\n .image-block{margin:20px 0 32px;}\n .image-block img{\n width:100%;display:block;border-radius:10px;border:1px solid var(--line);\n }\n .image-block .cap{\n font-size:12px;color:var(--ink-soft);margin-top:8px;text-align:center;\n }\n .image-block.grid-2{\n display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;\n }\n .hero-image{margin:0 0 44px;}\n .hero-image img{\n width:100%;display:block;border-radius:14px;border:1px solid var(--line);\n }\n .system{\n background:var(--hub-soft);border-left:3px solid var(--hub);border-radius:6px;\n padding:20px 22px;margin-top:20px;\n }\n .system h3{font-family:'Manrope',sans-serif;font-size:17px;margin:0 0 7px;}\n .system p{font-size:13.5px;color:var(--ink-soft);margin:0;}\n @media (max-width:640px){.case-intro{grid-template-columns:1fr;}.image-block.grid-2{grid-template-columns:1fr;}}\n\n @media print{\n body{padding:20px;background:#fff;}\n .flow{break-inside:avoid;}\n section.block{break-inside:avoid;}\n .image-block, .hero-image{break-inside:avoid;}\n }\n @media (max-width:640px){\n .steps{flex-direction:column;}\n .arrow{transform:rotate(90deg);width:100%;padding:2px 0;}\n .step{max-width:none;}\n }\n<\/style>\n\n<\/head>\n<body>\n<div class=\"wrap\">\n<section class=\"block\">\n <div class=\"block-head\">\n <span class=\"block-tag new\">System<\/span>\n <h2>Design beyond a one-time offer<\/h2>\n <span class=\"who\">An architecture that is flexible and reusable<\/span>\n <\/div>\n\n <div class=\"system\">\n <h3>From the specific case to the generic system<\/h3>\n <p>Starting from an existing UI, I developed the new use cases while ensuring that we did not create an experience specific only to Premium Moby. Components and patterns were designed to adapt to different content, messages, conditions, and contexts, making it possible to accommodate other types of benefits and promotional mechanisms within a single set of solutions.<\/p>\n <\/div>\n\n \n <\/div>\n\n <div class=\"system\">\n <h3>One system, multiple time horizons<\/h3>\n <p><strong>Short term :<\/strong> effectively address the need to acquire and activate Moby Prime. <strong>Long term<\/strong> : lay the foundations for a system capable of supporting product evolution, new offers, and a long-term loyalty strategy<\/p>\n <\/div>\n <\/section>\n\n <div class=\"converge\"><span class=\"ln\"><\/span>Convergence<span class=\"ln\"><\/span><\/div>\n\n <div class=\"hub\">\n <div style=\"flex:1;min-width:220px;\">\n MY BENEFITS\n <br><\/br>\n <p>A single point of convergence for two audiences: tracking consumed benefits and discovering new Premium Moby offers, accessible from the account area on both the app and website.<\/p>\n <\/div>\n <div class=\"badges\">\n <span class=\"badge\">History<\/span>\n <span class=\"badge\">Active deals<\/span>\n <span class=\"badge\">New benefits<\/span>\n <\/div>\n <\/div>\n<\/div>\n<\/body>\n<\/html>\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-a878d9f e-flex e-con-boxed e-con e-child\" data-id=\"a878d9f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bacbe9f elementor-widget elementor-widget-video\" data-id=\"bacbe9f\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"video_type":"hosted","autoplay":"yes","mute":"yes","loop":"yes","controls":"yes"}\" data-widget_type=\"video.default\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/designdinterface.com\/wp-content\/uploads\/2026\/09\/generique-prime-moby.mp4\" autoplay=\"\" loop=\"\" controls=\"\" muted=\"muted\" controlslist=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\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-7b8e0c6 e-con-full e-flex e-con e-child\" data-id=\"7b8e0c6\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b77919f elementor-widget elementor-widget-html\" data-id=\"b77919f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Partie 5 \u2014 Impact<\/title>\n\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Prime Moby \u2014 Sch\u00e9ma des parcours utilisateurs<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Antonio:wght@400;500;700&family=Manrope:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n<style>\n :root{\n --bg: #F5F6F2;\n --panel: #FFFFFF;\n --ink: #1B2430;\n --ink-soft: #5B6472;\n --line: #DEDBD0;\n --existing: #1F6F5C;\n --existing-soft: #E7F1EC;\n --new: #C9791A;\n --new-soft: #FBEFDE;\n --hub: #2B3646;\n --hub-soft: #EDEEEA;\n }\n *{box-sizing:border-box;}\n body{\n margin:0;\n background:var(--bg);\n color:var(--ink);\n font-family:'Manrope', sans-serif;\n line-height:1.5;\n padding:48px 24px 80px;\n }\n .wrap{max-width:1180px;margin:0 auto;}\n\n header.top{margin-bottom:44px;max-width:720px;}\n .kicker{\n font-family:'Manrope',sans-serif;\n font-weight:600;\n font-size:14px;\n color:var(--ink-soft);\n letter-spacing:0.01em;\n margin:0 0 10px;\n }\n h1{\n font-family:'Antonio',sans-serif;\n font-weight:500;\n text-transform:uppercase;\n font-size:clamp(32px,5vw,48px);\n margin:0 0 14px;\n letter-spacing:0.01em;\n line-height:1.05;\n }\n .lede{font-size:16px;color:var(--ink-soft);margin:0;max-width:62ch;}\n\n .legend{\n display:flex;gap:28px;margin:28px 0 48px;flex-wrap:wrap;\n font-size:14px;color:var(--ink-soft);\n }\n .legend span{display:inline-flex;align-items:center;gap:8px;}\n .dot{width:10px;height:10px;border-radius:50%;display:inline-block;}\n .dot.existing{background:var(--existing);}\n .dot.new{background:var(--new);}\n\n section.block{margin-bottom:56px;}\n\n .context{\n display:flex;gap:28px;flex-wrap:wrap;\n margin-bottom:48px;\n padding-bottom:40px;\n border-bottom:1px solid var(--line);\n }\n .context .main{flex:2;min-width:280px;}\n .context .main p{font-size:15px;color:var(--ink-soft);margin:0;max-width:60ch;}\n .context .main strong{color:var(--ink);}\n .context .aside{\n flex:1;min-width:220px;max-width:300px;\n background:var(--hub-soft);\n border-left:3px solid var(--hub);\n border-radius:6px;\n padding:14px 16px;\n align-self:flex-start;\n }\n .context .aside .label{\n font-family:'Manrope',sans-serif;font-weight:600;font-size:12px;\n color:var(--hub);margin:0 0 6px;\n }\n .context .aside p{font-size:13px;color:var(--ink-soft);margin:0;}\n .block-head{\n display:flex;align-items:baseline;gap:14px;margin-bottom:20px;\n border-bottom:1px solid var(--line);padding-bottom:14px;\n }\n .block-tag{\n font-family:'Manrope',sans-serif;font-weight:600;font-size:13px;\n padding:4px 10px;border-radius:5px;white-space:nowrap;\n }\n .block-tag.existing{background:var(--existing-soft);color:var(--existing);}\n .block-tag.new{background:var(--new-soft);color:var(--new);}\n .block-head h2{\n font-family:'Manrope',sans-serif;font-size:21px;font-weight:600;margin:0;\n }\n .block-head .who{font-size:14px;color:var(--ink-soft);}\n\n .flow{\n background:var(--panel);\n border:1px solid var(--line);\n border-radius:10px;\n padding:24px 26px;\n margin-bottom:32px;\n }\n .flow-label{\n font-family:'Manrope',sans-serif;\n font-weight:600;\n font-size:14px;\n margin:0 0 14px;\n color:var(--ink);\n }\n .flow-label .num{\n display:inline-flex;align-items:center;justify-content:center;\n width:20px;height:20px;border-radius:50%;\n background:var(--hub-soft);color:var(--hub);\n font-size:12px;margin-right:8px;\n }\n .steps{\n display:flex;align-items:stretch;flex-wrap:wrap;gap:4px 0;\n }\n .step{\n background:var(--bg);\n border:1px solid var(--line);\n border-radius:8px;\n padding:12px 14px;\n font-size:13.5px;\n min-width:150px;\n max-width:210px;\n display:flex;\n flex-direction:column;\n justify-content:center;\n }\n .step .t{font-weight:600;font-size:13.5px;margin-bottom:3px;}\n .step .d{color:var(--ink-soft);font-size:12.5px;}\n .arrow{\n display:flex;align-items:center;justify-content:center;\n width:40px;color:var(--ink-soft);font-size:15px;flex-shrink:0;\n }\n .step.outcome.existing{border-color:var(--existing);background:var(--existing-soft);}\n .step.outcome.new{border-color:var(--new);background:var(--new-soft);}\n\n .note{\n margin-top:12px;\n font-size:12.5px;\n color:var(--ink-soft);\n border-left:2px solid var(--line);\n padding-left:10px;\n }\n\n .hub{\n background:var(--hub);\n color:#fff;\n border-radius:10px;\n padding:26px 28px;\n display:flex;\n gap:24px;\n align-items:center;\n flex-wrap:wrap;\n }\n .hub h3{\n font-family:'Manrope',sans-serif;\n font-size:18px;margin:0 0 6px;font-weight:600;\n }\n .hub p{margin:0;font-size:13.5px;color:#C7CCD4;max-width:60ch;}\n .hub .badges{display:flex;gap:10px;flex-wrap:wrap;}\n .hub .badge{\n font-size:12px;font-family:'Manrope',sans-serif;font-weight:600;\n padding:5px 10px;border-radius:5px;background:rgba(255,255,255,0.1);\n }\n .converge{\n display:flex;justify-content:center;gap:10px;margin:6px 0 18px;\n color:var(--ink-soft);font-size:13px;align-items:center;\n }\n .converge .ln{height:1px;width:60px;background:var(--line);}\n\n\n .case-intro{\n display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;\n margin:0 0 48px;\n }\n .case-card{\n background:var(--panel);border:1px solid var(--line);border-radius:10px;\n padding:20px 22px;\n }\n .case-card h3{\n font-family:'Manrope',sans-serif;font-size:16px;font-weight:600;\n margin:0 0 8px;\n }\n .case-card p{margin:0;font-size:13.5px;color:var(--ink-soft);}\n .case-card strong{color:var(--ink);}\n .image-placeholder{\n min-height:250px;border:2px dashed #B9B8B0;border-radius:10px;\n background:repeating-linear-gradient(135deg,#F8F8F5,#F8F8F5 10px,#F2F2EE 10px,#F2F2EE 20px);\n display:flex;align-items:center;justify-content:center;text-align:center;\n padding:28px;margin:20px 0 32px;\n }\n .image-placeholder .ph-title{\n font-family:'Manrope',sans-serif;font-size:15px;font-weight:600;\n margin-bottom:5px;\n }\n .image-placeholder .ph-sub{font-size:12.5px;color:var(--ink-soft);max-width:52ch;}\n .image-block{margin:20px 0 32px;}\n .image-block img{\n width:100%;display:block;border-radius:10px;border:1px solid var(--line);\n }\n .image-block .cap{\n font-size:12px;color:var(--ink-soft);margin-top:8px;text-align:center;\n }\n .image-block.grid-2{\n display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;\n }\n .hero-image{margin:0 0 44px;}\n .hero-image img{\n width:100%;display:block;border-radius:14px;border:1px solid var(--line);\n }\n .system{\n background:var(--hub-soft);border-left:3px solid var(--hub);border-radius:6px;\n padding:20px 22px;margin-top:20px;\n }\n .system h3{font-family:'Manrope',sans-serif;font-size:17px;margin:0 0 7px;}\n .system p{font-size:13.5px;color:var(--ink-soft);margin:0;}\n @media (max-width:640px){.case-intro{grid-template-columns:1fr;}.image-block.grid-2{grid-template-columns:1fr;}}\n\n @media print{\n body{padding:20px;background:#fff;}\n .flow{break-inside:avoid;}\n section.block{break-inside:avoid;}\n .image-block, .hero-image{break-inside:avoid;}\n }\n @media (max-width:640px){\n .steps{flex-direction:column;}\n .arrow{transform:rotate(90deg);width:100%;padding:2px 0;}\n .step{max-width:none;}\n }\n<\/style>\n\n<\/head>\n<body>\n<div class=\"wrap\">\n<section class=\"block\" style=\"margin-top:56px;\">\n <div class=\"block-head\">\n <span class=\"block-tag existing\">Impact<\/span>\n <h2>A feature designed as a product lever<\/h2>\n <\/div>\n <div class=\"case-intro\" style=\"margin-bottom:0;\">\n <div class=\"case-card\">\n <h3>Acquisition<\/h3>\n <p>Give professionals and students <strong>a strong reason to install and try<\/strong> the marketplace.<\/p>\n <\/div>\n <div class=\"case-card\">\n <h3>Activation & retention<\/h3>\n <p>Create repeated opportunities to discover, use, and find their benefits throughout the journey.<\/p>\n <\/div>\n <div class=\"case-card\">\n <h3>Evolution of the model<\/h3>\n <p>Gradually prepare users to adopt a <strong>subscription plan<\/strong> and strengthen long-term commitment.<\/p>\n <\/div>\n <div class=\"case-card\">\n <h3>Reusability<\/h3>\n <p>Build a sufficiently <strong>generic and flexible UI<\/strong> architecture to support future offers.<\/p>\n <\/div>\n <\/div>\n\n \n <\/div>\n <\/section>\n\n<\/div>\n<\/div>\n<\/body>\n<\/html>\n\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\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Partie 1 \u2014 \u00c9tude de cas Prime Moby \u2014 Sch\u00e9ma des parcours utilisateurs \u00c9tude de cas \u2014 Product Design Prime Moby \u2014 parcours utilisateurs Transformer une offre promotionnelle en levier d’acquisition et de fid\u00e9lisation, tout en posant les bases d’une architecture d’offres r\u00e9utilisable. Contexte Quelques mois apr\u00e8s le lancement de la marketplace food, la strat\u00e9gie […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-3923","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/designdinterface.com\/en\/wp-json\/wp\/v2\/pages\/3923","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/designdinterface.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/designdinterface.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/designdinterface.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/designdinterface.com\/en\/wp-json\/wp\/v2\/comments?post=3923"}],"version-history":[{"count":61,"href":"https:\/\/designdinterface.com\/en\/wp-json\/wp\/v2\/pages\/3923\/revisions"}],"predecessor-version":[{"id":3989,"href":"https:\/\/designdinterface.com\/en\/wp-json\/wp\/v2\/pages\/3923\/revisions\/3989"}],"wp:attachment":[{"href":"https:\/\/designdinterface.com\/en\/wp-json\/wp\/v2\/media?parent=3923"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n\n\nPartie 1 \u2014 \u00c9tude de cas<\/title>\n\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Prime Moby \u2014 Sch\u00e9ma des parcours utilisateurs<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Antonio:wght@400;500;700&family=Manrope:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n<style>\n :root{\n --bg: #F5F6F2;\n --panel: #FFFFFF;\n --ink: #1B2430;\n --ink-soft: #5B6472;\n --line: #DEDBD0;\n --existing: #1F6F5C;\n --existing-soft: #E7F1EC;\n --new: #C9791A;\n --new-soft: #FBEFDE;\n --hub: #2B3646;\n --hub-soft: #EDEEEA;\n }\n *{box-sizing:border-box;}\n body{\n margin:0;\n background:var(--bg);\n color:var(--ink);\n font-family:'Manrope', sans-serif;\n line-height:1.5;\n padding:48px 24px 80px;\n }\n .wrap{max-width:1180px;margin:0 auto;}\n\n header.top{margin-bottom:44px;max-width:720px;}\n .kicker{\n font-family:'Manrope',sans-serif;\n font-weight:600;\n font-size:14px;\n color:var(--ink-soft);\n letter-spacing:0.01em;\n margin:0 0 10px;\n }\n h1{\n font-family:'Antonio',sans-serif;\n font-weight:500;\n text-transform:uppercase;\n font-size:clamp(32px,5vw,48px);\n margin:0 0 14px;\n letter-spacing:0.01em;\n line-height:1.05;\n }\n .lede{font-size:16px;color:var(--ink-soft);margin:0;max-width:62ch;}\n\n .legend{\n display:flex;gap:28px;margin:28px 0 48px;flex-wrap:wrap;\n font-size:14px;color:var(--ink-soft);\n }\n .legend span{display:inline-flex;align-items:center;gap:8px;}\n .dot{width:10px;height:10px;border-radius:50%;display:inline-block;}\n .dot.existing{background:var(--existing);}\n .dot.new{background:var(--new);}\n\n section.block{margin-bottom:56px;}\n\n .context{\n display:flex;gap:28px;flex-wrap:wrap;\n margin-bottom:48px;\n padding-bottom:40px;\n border-bottom:1px solid var(--line);\n }\n .context .main{flex:2;min-width:280px;}\n .context .main p{font-size:15px;color:var(--ink-soft);margin:0;max-width:60ch;}\n .context .main strong{color:var(--ink);}\n .context .aside{\n flex:1;min-width:220px;max-width:300px;\n background:var(--hub-soft);\n border-left:3px solid var(--hub);\n border-radius:6px;\n padding:14px 16px;\n align-self:flex-start;\n }\n .context .aside .label{\n font-family:'Manrope',sans-serif;font-weight:600;font-size:12px;\n color:var(--hub);margin:0 0 6px;\n }\n .context .aside p{font-size:13px;color:var(--ink-soft);margin:0;}\n .block-head{\n display:flex;align-items:baseline;gap:14px;margin-bottom:20px;\n border-bottom:1px solid var(--line);padding-bottom:14px;\n }\n .block-tag{\n font-family:'Manrope',sans-serif;font-weight:600;font-size:13px;\n padding:4px 10px;border-radius:5px;white-space:nowrap;\n }\n .block-tag.existing{background:var(--existing-soft);color:var(--existing);}\n .block-tag.new{background:var(--new-soft);color:var(--new);}\n .block-head h2{\n font-family:'Manrope',sans-serif;font-size:21px;font-weight:600;margin:0;\n }\n .block-head .who{font-size:14px;color:var(--ink-soft);}\n\n .flow{\n background:var(--panel);\n border:1px solid var(--line);\n border-radius:10px;\n padding:24px 26px;\n margin-bottom:32px;\n }\n .flow-label{\n font-family:'Manrope',sans-serif;\n font-weight:600;\n font-size:14px;\n margin:0 0 14px;\n color:var(--ink);\n }\n .flow-label .num{\n display:inline-flex;align-items:center;justify-content:center;\n width:20px;height:20px;border-radius:50%;\n background:var(--hub-soft);color:var(--hub);\n font-size:12px;margin-right:8px;\n }\n .steps{\n display:flex;align-items:stretch;flex-wrap:wrap;gap:4px 0;\n }\n .step{\n background:var(--bg);\n border:1px solid var(--line);\n border-radius:8px;\n padding:12px 14px;\n font-size:13.5px;\n min-width:150px;\n max-width:210px;\n display:flex;\n flex-direction:column;\n justify-content:center;\n }\n .step .t{font-weight:600;font-size:13.5px;margin-bottom:3px;}\n .step .d{color:var(--ink-soft);font-size:12.5px;}\n .arrow{\n display:flex;align-items:center;justify-content:center;\n width:40px;color:var(--ink-soft);font-size:15px;flex-shrink:0;\n }\n .step.outcome.existing{border-color:var(--existing);background:var(--existing-soft);}\n .step.outcome.new{border-color:var(--new);background:var(--new-soft);}\n\n .note{\n margin-top:12px;\n font-size:12.5px;\n color:var(--ink-soft);\n border-left:2px solid var(--line);\n padding-left:10px;\n }\n\n .hub{\n background:var(--hub);\n color:#fff;\n border-radius:10px;\n padding:26px 28px;\n display:flex;\n gap:24px;\n align-items:center;\n flex-wrap:wrap;\n }\n .hub h3{\n font-family:'Manrope',sans-serif;\n font-size:18px;margin:0 0 6px;font-weight:600;\n }\n .hub p{margin:0;font-size:13.5px;color:#C7CCD4;max-width:60ch;}\n .hub .badges{display:flex;gap:10px;flex-wrap:wrap;}\n .hub .badge{\n font-size:12px;font-family:'Manrope',sans-serif;font-weight:600;\n padding:5px 10px;border-radius:5px;background:rgba(255,255,255,0.1);\n }\n .converge{\n display:flex;justify-content:center;gap:10px;margin:6px 0 18px;\n color:var(--ink-soft);font-size:13px;align-items:center;\n }\n .converge .ln{height:1px;width:60px;background:var(--line);}\n\n\n .case-intro{\n display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;\n margin:0 0 48px;\n }\n .case-card{\n background:var(--panel);border:1px solid var(--line);border-radius:10px;\n padding:20px 22px;\n }\n .case-card h3{\n font-family:'Manrope',sans-serif;font-size:16px;font-weight:600;\n margin:0 0 8px;\n }\n .case-card p{margin:0;font-size:13.5px;color:var(--ink-soft);}\n .case-card strong{color:var(--ink);}\n .image-placeholder{\n min-height:250px;border:2px dashed #B9B8B0;border-radius:10px;\n background:repeating-linear-gradient(135deg,#F8F8F5,#F8F8F5 10px,#F2F2EE 10px,#F2F2EE 20px);\n display:flex;align-items:center;justify-content:center;text-align:center;\n padding:28px;margin:20px 0 32px;\n }\n .image-placeholder .ph-title{\n font-family:'Manrope',sans-serif;font-size:15px;font-weight:600;\n margin-bottom:5px;\n }\n .image-placeholder .ph-sub{font-size:12.5px;color:var(--ink-soft);max-width:52ch;}\n .image-block{margin:20px 0 32px;}\n .image-block img{\n width:100%;display:block;border-radius:10px;border:1px solid var(--line);\n }\n .image-block .cap{\n font-size:12px;color:var(--ink-soft);margin-top:8px;text-align:center;\n }\n .image-block.grid-2{\n display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;\n }\n .hero-image{margin:0 0 44px;}\n .hero-image img{\n width:100%;display:block;border-radius:14px;border:1px solid var(--line);\n }\n .system{\n background:var(--hub-soft);border-left:3px solid var(--hub);border-radius:6px;\n padding:20px 22px;margin-top:20px;\n }\n .system h3{font-family:'Manrope',sans-serif;font-size:17px;margin:0 0 7px;}\n .system p{font-size:13.5px;color:var(--ink-soft);margin:0;}\n @media (max-width:640px){.case-intro{grid-template-columns:1fr;}.image-block.grid-2{grid-template-columns:1fr;}}\n\n @media print{\n body{padding:20px;background:#fff;}\n .flow{break-inside:avoid;}\n section.block{break-inside:avoid;}\n .image-block, .hero-image{break-inside:avoid;}\n }\n @media (max-width:640px){\n .steps{flex-direction:column;}\n .arrow{transform:rotate(90deg);width:100%;padding:2px 0;}\n .step{max-width:none;}\n }\n<\/style>\n\n<\/head>\n<body>\n<div class=\"wrap\">\n<div class=\"wrap\">\n\n <header class=\"top\">\n <p class=\"kicker\">Case study \u2014 Product Design<\/p>\n <h1>Prime Moby \u2014 User Journeys<\/h1>\n <p class=\"lede\">Turning a promotional offer into a driver of acquisition and retention, while laying the foundations for a reusable offer architecture<\/p>\n <\/header>\n\n <section class=\"case-intro\">\n <div class=\"case-card\">\n <h3>Context<\/h3>\n <p>A few months after the launch of the marketplace, the product strategy evolved to increase adoption among two populations with strong potential for recurring use: <strong>professionals and students<\/strong>.<\/p>\n <\/div>\n <div class=\"case-card\">\n <h3>Business challenge<\/h3>\n <p>Give professionals and students a concrete reason to adopt the platform over its competitors, then turn this adoption into regular <strong>use regular and loyalty<\/strong>, with the possibility to change the user to a formula member.<\/p>\n <\/div>\n <div class=\"case-card\">\n <h3>Role of design<\/h3>\n <p>Integrate Moby Prime into the user journey: identify key moments, make the benefit easy to understand and access, facilitate activation, and create reminders throughout the experience.<\/p>\n <\/div>\n <div class=\"case-card\">\n <h3>Solution<\/h3>\n <p>Make Moby Prime <strong>more than a promotional communication<\/strong> : a visible benefit that can be activated at several stages of the journey, from discovery to usage, with follow-up available in the account area.<\/p>\n <\/div>\n <\/section>\n\n <div class=\"legend\">\n <span><i class=\"dot existing\"><\/i> Existing user \u2014 John<\/span>\n <span><i class=\"dot new\"><\/i> New user \u2014 Bertrand<\/span>\n <\/div>\n\n <div class=\"context\">\n <div class=\"main\">\n <p><strong>An offer designed as a loyalty mechanism:<\/strong> each activation of Moby Prime gives access to a benefit that can extend over time. The offer accompanies users beyond their first use and creates new reasons to return.<\/p>\n <\/div>\n <div class=\"aside\">\n <p class=\"label\">Point of contact<\/p>\n <p>Each time a Moby Prime code is generated, a confirmation email complements the experience and serves as a reminder encouraging the user to take advantage of the benefit.<\/p>\n <\/div>\n <\/div>\n<\/div>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-51596b0 e-con-full e-flex e-con e-child\" data-id=\"51596b0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d7942ce elementor-widget elementor-widget-image\" data-id=\"d7942ce\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"1312\" height=\"1199\" src=\"https:\/\/designdinterface.com\/wp-content\/uploads\/2026\/09\/mockup-prime-moby.png\" class=\"attachment-full size-full wp-image-3933\" alt=\"\" srcset=\"https:\/\/designdinterface.com\/wp-content\/uploads\/2026\/09\/mockup-prime-moby.png 1312w, https:\/\/designdinterface.com\/wp-content\/uploads\/2026\/09\/mockup-prime-moby-300x274.png 300w, https:\/\/designdinterface.com\/wp-content\/uploads\/2026\/09\/mockup-prime-moby-1024x936.png 1024w, https:\/\/designdinterface.com\/wp-content\/uploads\/2026\/09\/mockup-prime-moby-768x702.png 768w, https:\/\/designdinterface.com\/wp-content\/uploads\/2026\/09\/mockup-prime-moby-13x12.png 13w\" sizes=\"(max-width: 1312px) 100vw, 1312px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-84824ff e-con-full e-flex e-con e-child\" data-id=\"84824ff\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-743484e elementor-widget elementor-widget-html\" data-id=\"743484e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Partie 2 \u2014 Cas n\u00b01<\/title>\n\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Prime Moby \u2014 Sch\u00e9ma des parcours utilisateurs<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Antonio:wght@400;500;700&family=Manrope:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n<style>\n :root{\n --bg: #F5F6F2;\n --panel: #FFFFFF;\n --ink: #1B2430;\n --ink-soft: #5B6472;\n --line: #DEDBD0;\n --existing: #1F6F5C;\n --existing-soft: #E7F1EC;\n --new: #C9791A;\n --new-soft: #FBEFDE;\n --hub: #2B3646;\n --hub-soft: #EDEEEA;\n }\n *{box-sizing:border-box;}\n body{\n margin:0;\n background:var(--bg);\n color:var(--ink);\n font-family:'Manrope', sans-serif;\n line-height:1.5;\n padding:48px 24px 80px;\n }\n .wrap{max-width:1180px;margin:0 auto;}\n\n header.top{margin-bottom:44px;max-width:720px;}\n .kicker{\n font-family:'Manrope',sans-serif;\n font-weight:600;\n font-size:14px;\n color:var(--ink-soft);\n letter-spacing:0.01em;\n margin:0 0 10px;\n }\n h1{\n font-family:'Antonio',sans-serif;\n font-weight:500;\n text-transform:uppercase;\n font-size:clamp(32px,5vw,48px);\n margin:0 0 14px;\n letter-spacing:0.01em;\n line-height:1.05;\n }\n .lede{font-size:16px;color:var(--ink-soft);margin:0;max-width:62ch;}\n\n .legend{\n display:flex;gap:28px;margin:28px 0 48px;flex-wrap:wrap;\n font-size:14px;color:var(--ink-soft);\n }\n .legend span{display:inline-flex;align-items:center;gap:8px;}\n .dot{width:10px;height:10px;border-radius:50%;display:inline-block;}\n .dot.existing{background:var(--existing);}\n .dot.new{background:var(--new);}\n\n section.block{margin-bottom:56px;}\n\n .context{\n display:flex;gap:28px;flex-wrap:wrap;\n margin-bottom:48px;\n padding-bottom:40px;\n border-bottom:1px solid var(--line);\n }\n .context .main{flex:2;min-width:280px;}\n .context .main p{font-size:15px;color:var(--ink-soft);margin:0;max-width:60ch;}\n .context .main strong{color:var(--ink);}\n .context .aside{\n flex:1;min-width:220px;max-width:300px;\n background:var(--hub-soft);\n border-left:3px solid var(--hub);\n border-radius:6px;\n padding:14px 16px;\n align-self:flex-start;\n }\n .context .aside .label{\n font-family:'Manrope',sans-serif;font-weight:600;font-size:12px;\n color:var(--hub);margin:0 0 6px;\n }\n .context .aside p{font-size:13px;color:var(--ink-soft);margin:0;}\n .block-head{\n display:flex;align-items:baseline;gap:14px;margin-bottom:20px;\n border-bottom:1px solid var(--line);padding-bottom:14px;\n }\n .block-tag{\n font-family:'Manrope',sans-serif;font-weight:600;font-size:13px;\n padding:4px 10px;border-radius:5px;white-space:nowrap;\n }\n .block-tag.existing{background:var(--existing-soft);color:var(--existing);}\n .block-tag.new{background:var(--new-soft);color:var(--new);}\n .block-head h2{\n font-family:'Manrope',sans-serif;font-size:21px;font-weight:600;margin:0;\n }\n .block-head .who{font-size:14px;color:var(--ink-soft);}\n\n .flow{\n background:var(--panel);\n border:1px solid var(--line);\n border-radius:10px;\n padding:24px 26px;\n margin-bottom:32px;\n }\n .flow-label{\n font-family:'Manrope',sans-serif;\n font-weight:600;\n font-size:14px;\n margin:0 0 14px;\n color:var(--ink);\n }\n .flow-label .num{\n display:inline-flex;align-items:center;justify-content:center;\n width:20px;height:20px;border-radius:50%;\n background:var(--hub-soft);color:var(--hub);\n font-size:12px;margin-right:8px;\n }\n .steps{\n display:flex;align-items:stretch;flex-wrap:wrap;gap:4px 0;\n }\n .step{\n background:var(--bg);\n border:1px solid var(--line);\n border-radius:8px;\n padding:12px 14px;\n font-size:13.5px;\n min-width:150px;\n max-width:210px;\n display:flex;\n flex-direction:column;\n justify-content:center;\n }\n .step .t{font-weight:600;font-size:13.5px;margin-bottom:3px;}\n .step .d{color:var(--ink-soft);font-size:12.5px;}\n .arrow{\n display:flex;align-items:center;justify-content:center;\n width:40px;color:var(--ink-soft);font-size:15px;flex-shrink:0;\n }\n .step.outcome.existing{border-color:var(--existing);background:var(--existing-soft);}\n .step.outcome.new{border-color:var(--new);background:var(--new-soft);}\n\n .note{\n margin-top:12px;\n font-size:12.5px;\n color:var(--ink-soft);\n border-left:2px solid var(--line);\n padding-left:10px;\n }\n\n .hub{\n background:var(--hub);\n color:#fff;\n border-radius:10px;\n padding:26px 28px;\n display:flex;\n gap:24px;\n align-items:center;\n flex-wrap:wrap;\n }\n .hub h3{\n font-family:'Manrope',sans-serif;\n font-size:18px;margin:0 0 6px;font-weight:600;\n }\n .hub p{margin:0;font-size:13.5px;color:#C7CCD4;max-width:60ch;}\n .hub .badges{display:flex;gap:10px;flex-wrap:wrap;}\n .hub .badge{\n font-size:12px;font-family:'Manrope',sans-serif;font-weight:600;\n padding:5px 10px;border-radius:5px;background:rgba(255,255,255,0.1);\n }\n .converge{\n display:flex;justify-content:center;gap:10px;margin:6px 0 18px;\n color:var(--ink-soft);font-size:13px;align-items:center;\n }\n .converge .ln{height:1px;width:60px;background:var(--line);}\n\n\n .case-intro{\n display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;\n margin:0 0 48px;\n }\n .case-card{\n background:var(--panel);border:1px solid var(--line);border-radius:10px;\n padding:20px 22px;\n }\n .case-card h3{\n font-family:'Manrope',sans-serif;font-size:16px;font-weight:600;\n margin:0 0 8px;\n }\n .case-card p{margin:0;font-size:13.5px;color:var(--ink-soft);}\n .case-card strong{color:var(--ink);}\n .image-placeholder{\n min-height:250px;border:2px dashed #B9B8B0;border-radius:10px;\n background:repeating-linear-gradient(135deg,#F8F8F5,#F8F8F5 10px,#F2F2EE 10px,#F2F2EE 20px);\n display:flex;align-items:center;justify-content:center;text-align:center;\n padding:28px;margin:20px 0 32px;\n }\n .image-placeholder .ph-title{\n font-family:'Manrope',sans-serif;font-size:15px;font-weight:600;\n margin-bottom:5px;\n }\n .image-placeholder .ph-sub{font-size:12.5px;color:var(--ink-soft);max-width:52ch;}\n .image-block{margin:20px 0 32px;}\n .image-block img{\n width:100%;display:block;border-radius:10px;border:1px solid var(--line);\n }\n .image-block .cap{\n font-size:12px;color:var(--ink-soft);margin-top:8px;text-align:center;\n }\n .image-block.grid-2{\n display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;\n }\n .hero-image{margin:0 0 44px;}\n .hero-image img{\n width:100%;display:block;border-radius:14px;border:1px solid var(--line);\n }\n .system{\n background:var(--hub-soft);border-left:3px solid var(--hub);border-radius:6px;\n padding:20px 22px;margin-top:20px;\n }\n .system h3{font-family:'Manrope',sans-serif;font-size:17px;margin:0 0 7px;}\n .system p{font-size:13.5px;color:var(--ink-soft);margin:0;}\n @media (max-width:640px){.case-intro{grid-template-columns:1fr;}.image-block.grid-2{grid-template-columns:1fr;}}\n\n @media print{\n body{padding:20px;background:#fff;}\n .flow{break-inside:avoid;}\n section.block{break-inside:avoid;}\n .image-block, .hero-image{break-inside:avoid;}\n }\n @media (max-width:640px){\n .steps{flex-direction:column;}\n .arrow{transform:rotate(90deg);width:100%;padding:2px 0;}\n .step{max-width:none;}\n }\n<\/style>\n\n<\/head>\n<body>\n<div class=\"wrap\">\n<section class=\"block\">\n <div class=\"block-head\">\n <span class=\"block-tag existing\">Case 1<\/span>\n <h2>Existing user<\/h2>\n <span class=\"who\"> \u2014 3 possible entry points for all<\/span>\n <\/div>\n\n <div class=\"flow\">\n <p class=\"flow-label\"><span class=\"num\">Has<\/span>Since an advertising campaign<\/p>\n <div class=\"steps\">\n <div class=\"step\"><div class=\"t\">Pub \/ mail \/ Instagram<\/div><div class=\"d\">\"Take advantage of the Bonus Moby \"<\/div><\/div>\n <div class=\"arrow\">\u2192<\/div>\n <div class=\"step\"><div class=\"t\">Moby Prime landing page<\/div><div class=\"d\">Company name automatically completed<\/div><\/div>\n <div class=\"arrow\">\u2192<\/div>\n <div class=\"step\"><div class=\"t\">Company Code generated<\/div><div class=\"d\">Dynamic, specific to the company<\/div><\/div>\n <div class=\"arrow\">\u2192<\/div>\n <div class=\"step\"><div class=\"t\">Sign in \/ create account<\/div><div class=\"d\">Enter benefit code<\/div><\/div>\n <div class=\"arrow\">\u2192<\/div>\n <div class=\"step outcome existing\"><div class=\"t\">Order or \u201cMy Benefits\u201d<\/div><div class=\"d\">Place an order immediately or view the benefit in the account area<\/div><\/div>\n <\/div>\n <\/div>\n\n <div class=\"flow\">\n <p class=\"flow-label\"><span class=\"num\">B<\/span>From checkout<\/p>\n <div class=\"steps\">\n <div class=\"step\"><div class=\"t\">End of order<\/div><div class=\"d\">Delivery or pickup<\/div><\/div>\n <div class=\"arrow\">\u2192<\/div>\n <div class=\"step\"><div class=\"t\">Discount offered<\/div><div class=\"d\">Applied directly to the amount due<\/div><\/div>\n <div class=\"arrow\">\u2192<\/div>\n <div class=\"step outcome existing\"><div class=\"t\">Moby Prime subscription<\/div><div class=\"d\">In consideration of the reduction<\/div><\/div>\n <\/div>\n <\/div>\n\n <div class=\"flow\">\n <p class=\"flow-label\"><span class=\"num\">C<\/span>Since the space includes<\/p>\n <div class=\"steps\">\n <div class=\"step\"><div class=\"t\">My Account<\/div><div class=\"d\">New item available<\/div><\/div>\n <div class=\"arrow\">\u2192<\/div>\n <div class=\"step\"><div class=\"t\">\"My privilege \"<\/div><div class=\"d\">Visual + CTA discovery<\/div><\/div>\n <div class=\"arrow\">\u2192<\/div>\n <div class=\"step outcome existing\"><div class=\"t\">Join the Moby Prime<\/div><div class=\"d\">Membership since this space<\/div><\/div>\n <\/div>\n <\/div>\n\n <div class=\"flow\">\n <p class=\"flow-label\"><span class=\"num\">D<\/span>From the home page<\/p>\n <div class=\"steps\">\n <div class=\"step\"><div class=\"t\">Banner CTA<\/div><div class=\"d\">On the marketplace homepage<\/div><\/div>\n <div class=\"arrow\">\u2192<\/div>\n <div class=\"step outcome existing\"><div class=\"t\">Moby Prime landing page<\/div><div class=\"d\">Then the same journey as A: company name automatically completed \u2192 code \u2192 sign in\/account \u2192 order or \u201cMy Benefits\u201d\nAccount area, under \u201cMy Benefits\u201d and benefit code<\/div><\/div>\n <\/div>\n <\/div>\n\n <div>\n \n <p class=\"cap\">Space account, under \"My privilege\" and code advantage.<\/p>\n <\/div>\n <\/div>\n <\/section>\n<\/div>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-21ecfe7 e-con-full e-flex e-con e-child\" data-id=\"21ecfe7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e5b7b02 elementor-widget elementor-widget-video\" data-id=\"e5b7b02\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"video_type":"hosted","mute":"yes","loop":"yes","controls":"yes"}\" data-widget_type=\"video.default\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/designdinterface.com\/wp-content\/uploads\/2026\/09\/prime-moby-landing.mov\" loop=\"\" controls=\"\" preload=\"metadata\" muted=\"muted\" controlslist=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9ce346b e-con-full e-flex e-con e-child\" data-id=\"9ce346b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-32f40f8 elementor-widget elementor-widget-html\" data-id=\"32f40f8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Partie 3 \u2014 Cas n\u00b02<\/title>\n\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Prime Moby \u2014 Sch\u00e9ma des parcours utilisateurs<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Antonio:wght@400;500;700&family=Manrope:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n<style>\n :root{\n --bg: #F5F6F2;\n --panel: #FFFFFF;\n --ink: #1B2430;\n --ink-soft: #5B6472;\n --line: #DEDBD0;\n --existing: #1F6F5C;\n --existing-soft: #E7F1EC;\n --new: #C9791A;\n --new-soft: #FBEFDE;\n --hub: #2B3646;\n --hub-soft: #EDEEEA;\n }\n *{box-sizing:border-box;}\n body{\n margin:0;\n background:var(--bg);\n color:var(--ink);\n font-family:'Manrope', sans-serif;\n line-height:1.5;\n padding:48px 24px 80px;\n }\n .wrap{max-width:1180px;margin:0 auto;}\n\n header.top{margin-bottom:44px;max-width:720px;}\n .kicker{\n font-family:'Manrope',sans-serif;\n font-weight:600;\n font-size:14px;\n color:var(--ink-soft);\n letter-spacing:0.01em;\n margin:0 0 10px;\n }\n h1{\n font-family:'Antonio',sans-serif;\n font-weight:500;\n text-transform:uppercase;\n font-size:clamp(32px,5vw,48px);\n margin:0 0 14px;\n letter-spacing:0.01em;\n line-height:1.05;\n }\n .lede{font-size:16px;color:var(--ink-soft);margin:0;max-width:62ch;}\n\n .legend{\n display:flex;gap:28px;margin:28px 0 48px;flex-wrap:wrap;\n font-size:14px;color:var(--ink-soft);\n }\n .legend span{display:inline-flex;align-items:center;gap:8px;}\n .dot{width:10px;height:10px;border-radius:50%;display:inline-block;}\n .dot.existing{background:var(--existing);}\n .dot.new{background:var(--new);}\n\n section.block{margin-bottom:56px;}\n\n .context{\n display:flex;gap:28px;flex-wrap:wrap;\n margin-bottom:48px;\n padding-bottom:40px;\n border-bottom:1px solid var(--line);\n }\n .context .main{flex:2;min-width:280px;}\n .context .main p{font-size:15px;color:var(--ink-soft);margin:0;max-width:60ch;}\n .context .main strong{color:var(--ink);}\n .context .aside{\n flex:1;min-width:220px;max-width:300px;\n background:var(--hub-soft);\n border-left:3px solid var(--hub);\n border-radius:6px;\n padding:14px 16px;\n align-self:flex-start;\n }\n .context .aside .label{\n font-family:'Manrope',sans-serif;font-weight:600;font-size:12px;\n color:var(--hub);margin:0 0 6px;\n }\n .context .aside p{font-size:13px;color:var(--ink-soft);margin:0;}\n .block-head{\n display:flex;align-items:baseline;gap:14px;margin-bottom:20px;\n border-bottom:1px solid var(--line);padding-bottom:14px;\n }\n .block-tag{\n font-family:'Manrope',sans-serif;font-weight:600;font-size:13px;\n padding:4px 10px;border-radius:5px;white-space:nowrap;\n }\n .block-tag.existing{background:var(--existing-soft);color:var(--existing);}\n .block-tag.new{background:var(--new-soft);color:var(--new);}\n .block-head h2{\n font-family:'Manrope',sans-serif;font-size:21px;font-weight:600;margin:0;\n }\n .block-head .who{font-size:14px;color:var(--ink-soft);}\n\n .flow{\n background:var(--panel);\n border:1px solid var(--line);\n border-radius:10px;\n padding:24px 26px;\n margin-bottom:32px;\n }\n .flow-label{\n font-family:'Manrope',sans-serif;\n font-weight:600;\n font-size:14px;\n margin:0 0 14px;\n color:var(--ink);\n }\n .flow-label .num{\n display:inline-flex;align-items:center;justify-content:center;\n width:20px;height:20px;border-radius:50%;\n background:var(--hub-soft);color:var(--hub);\n font-size:12px;margin-right:8px;\n }\n .steps{\n display:flex;align-items:stretch;flex-wrap:wrap;gap:4px 0;\n }\n .step{\n background:var(--bg);\n border:1px solid var(--line);\n border-radius:8px;\n padding:12px 14px;\n font-size:13.5px;\n min-width:150px;\n max-width:210px;\n display:flex;\n flex-direction:column;\n justify-content:center;\n }\n .step .t{font-weight:600;font-size:13.5px;margin-bottom:3px;}\n .step .d{color:var(--ink-soft);font-size:12.5px;}\n .arrow{\n display:flex;align-items:center;justify-content:center;\n width:40px;color:var(--ink-soft);font-size:15px;flex-shrink:0;\n }\n .step.outcome.existing{border-color:var(--existing);background:var(--existing-soft);}\n .step.outcome.new{border-color:var(--new);background:var(--new-soft);}\n\n .note{\n margin-top:12px;\n font-size:12.5px;\n color:var(--ink-soft);\n border-left:2px solid var(--line);\n padding-left:10px;\n }\n\n .hub{\n background:var(--hub);\n color:#fff;\n border-radius:10px;\n padding:26px 28px;\n display:flex;\n gap:24px;\n align-items:center;\n flex-wrap:wrap;\n }\n .hub h3{\n font-family:'Manrope',sans-serif;\n font-size:18px;margin:0 0 6px;font-weight:600;\n }\n .hub p{margin:0;font-size:13.5px;color:#C7CCD4;max-width:60ch;}\n .hub .badges{display:flex;gap:10px;flex-wrap:wrap;}\n .hub .badge{\n font-size:12px;font-family:'Manrope',sans-serif;font-weight:600;\n padding:5px 10px;border-radius:5px;background:rgba(255,255,255,0.1);\n }\n .converge{\n display:flex;justify-content:center;gap:10px;margin:6px 0 18px;\n color:var(--ink-soft);font-size:13px;align-items:center;\n }\n .converge .ln{height:1px;width:60px;background:var(--line);}\n\n\n .case-intro{\n display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;\n margin:0 0 48px;\n }\n .case-card{\n background:var(--panel);border:1px solid var(--line);border-radius:10px;\n padding:20px 22px;\n }\n .case-card h3{\n font-family:'Manrope',sans-serif;font-size:16px;font-weight:600;\n margin:0 0 8px;\n }\n .case-card p{margin:0;font-size:13.5px;color:var(--ink-soft);}\n .case-card strong{color:var(--ink);}\n .image-placeholder{\n min-height:250px;border:2px dashed #B9B8B0;border-radius:10px;\n background:repeating-linear-gradient(135deg,#F8F8F5,#F8F8F5 10px,#F2F2EE 10px,#F2F2EE 20px);\n display:flex;align-items:center;justify-content:center;text-align:center;\n padding:28px;margin:20px 0 32px;\n }\n .image-placeholder .ph-title{\n font-family:'Manrope',sans-serif;font-size:15px;font-weight:600;\n margin-bottom:5px;\n }\n .image-placeholder .ph-sub{font-size:12.5px;color:var(--ink-soft);max-width:52ch;}\n .image-block{margin:20px 0 32px;}\n .image-block img{\n width:100%;display:block;border-radius:10px;border:1px solid var(--line);\n }\n .image-block .cap{\n font-size:12px;color:var(--ink-soft);margin-top:8px;text-align:center;\n }\n .image-block.grid-2{\n display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;\n }\n .hero-image{margin:0 0 44px;}\n .hero-image img{\n width:100%;display:block;border-radius:14px;border:1px solid var(--line);\n }\n .system{\n background:var(--hub-soft);border-left:3px solid var(--hub);border-radius:6px;\n padding:20px 22px;margin-top:20px;\n }\n .system h3{font-family:'Manrope',sans-serif;font-size:17px;margin:0 0 7px;}\n .system p{font-size:13.5px;color:var(--ink-soft);margin:0;}\n @media (max-width:640px){.case-intro{grid-template-columns:1fr;}.image-block.grid-2{grid-template-columns:1fr;}}\n\n @media print{\n body{padding:20px;background:#fff;}\n .flow{break-inside:avoid;}\n section.block{break-inside:avoid;}\n .image-block, .hero-image{break-inside:avoid;}\n }\n @media (max-width:640px){\n .steps{flex-direction:column;}\n .arrow{transform:rotate(90deg);width:100%;padding:2px 0;}\n .step{max-width:none;}\n }\n<\/style>\n\n<\/head>\n<body>\n<div class=\"wrap\">\n<section class=\"block\">\n <div class=\"block-head\">\n <span class=\"block-tag new\">Case 2<\/span>\n <h2>New user<\/h2>\n <span class=\"who\"> Without a user account \u2014 The account creation is simplified<\/span>\n <\/div>\n\n <div class=\"flow\">\n <p class=\"flow-label\"><span class=\"num\">Has<\/span>From a targeted advertisement<\/p>\n <div class=\"steps\">\n <div class=\"step\"><div class=\"t\">Targeted Moby Prime ad<\/div><div class=\"d\">The same entry point that John<\/div><\/div>\n <div class=\"arrow\">\u2192<\/div>\n <div class=\"step\"><div class=\"t\">Moby Prime landing page<\/div><div class=\"d\">Identical journey, no account required<\/div><\/div>\n <div class=\"arrow\">\u2192<\/div>\n <div class=\"step\"><div class=\"t\">Order can be placed without an account<\/div><div class=\"d\">Completed through payment<\/div><\/div>\n <div class=\"arrow\">\u2192<\/div>\n <div class=\"step\"><div class=\"t\">Sign in \/ create an account step<\/div><div class=\"d\">Moby Prime is offered at this stage<\/div><\/div>\n <div class=\"arrow\">\u2192<\/div>\n <div class=\"step outcome new\"><div class=\"t\">Follow-up from My Account<\/div><div class=\"d\">Used benefits and new offers<\/div><\/div>\n <\/div>\n <p class=\"note\">Key difference with John: account creation is no longer a barrier imposed upfront \u2014 it only occurs if the user wants to join Premium Moby.<\/p>\n <\/div>\n\n <div class=\"flow\">\n <p class=\"flow-label\"><span class=\"num\">B<\/span>From the home page<\/p>\n <div class=\"steps\">\n <div class=\"step\"><div class=\"t\">Banner CTA<\/div><div class=\"d\">On the marketplace homepage<\/div><\/div>\n <div class=\"arrow\">\u2192<\/div>\n <div class=\"step outcome new\"><div class=\"t\">Moby Prime landing page<\/div><div class=\"d\">Then the same journey as A: no account required, membership offered at sign-in<\/div><\/div>\n <\/div>\n <\/div>\n\n \n <\/div>\n <\/section>\n<\/div>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-fcd7d55 e-flex e-con-boxed e-con e-child\" data-id=\"fcd7d55\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-744d82f elementor-widget elementor-widget-image\" data-id=\"744d82f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"2560\" height=\"1685\" src=\"https:\/\/designdinterface.com\/wp-content\/uploads\/2026\/09\/experience-compte-scaled.png\" class=\"attachment-full size-full wp-image-3932\" alt=\"\" srcset=\"https:\/\/designdinterface.com\/wp-content\/uploads\/2026\/09\/experience-compte-scaled.png 2560w, https:\/\/designdinterface.com\/wp-content\/uploads\/2026\/09\/experience-compte-300x197.png 300w, https:\/\/designdinterface.com\/wp-content\/uploads\/2026\/09\/experience-compte-1024x674.png 1024w, https:\/\/designdinterface.com\/wp-content\/uploads\/2026\/09\/experience-compte-768x506.png 768w, https:\/\/designdinterface.com\/wp-content\/uploads\/2026\/09\/experience-compte-1536x1011.png 1536w, https:\/\/designdinterface.com\/wp-content\/uploads\/2026\/09\/experience-compte-2048x1348.png 2048w, https:\/\/designdinterface.com\/wp-content\/uploads\/2026\/09\/experience-compte-18x12.png 18w\" sizes=\"(max-width: 2560px) 100vw, 2560px\" \/>\t\t\t\t\t\t\t\t\t\t\t\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-d8f870a e-flex e-con-boxed e-con e-child\" data-id=\"d8f870a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c4f2f3a elementor-widget elementor-widget-html\" data-id=\"c4f2f3a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Partie 4 \u2014 Concevoir au-del\u00e0 d'une seule offre<\/title>\n\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Prime Moby \u2014 Sch\u00e9ma des parcours utilisateurs<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Antonio:wght@400;500;700&family=Manrope:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n<style>\n :root{\n --bg: #F5F6F2;\n --panel: #FFFFFF;\n --ink: #1B2430;\n --ink-soft: #5B6472;\n --line: #DEDBD0;\n --existing: #1F6F5C;\n --existing-soft: #E7F1EC;\n --new: #C9791A;\n --new-soft: #FBEFDE;\n --hub: #2B3646;\n --hub-soft: #EDEEEA;\n }\n *{box-sizing:border-box;}\n body{\n margin:0;\n background:var(--bg);\n color:var(--ink);\n font-family:'Manrope', sans-serif;\n line-height:1.5;\n padding:48px 24px 80px;\n }\n .wrap{max-width:1180px;margin:0 auto;}\n\n header.top{margin-bottom:44px;max-width:720px;}\n .kicker{\n font-family:'Manrope',sans-serif;\n font-weight:600;\n font-size:14px;\n color:var(--ink-soft);\n letter-spacing:0.01em;\n margin:0 0 10px;\n }\n h1{\n font-family:'Antonio',sans-serif;\n font-weight:500;\n text-transform:uppercase;\n font-size:clamp(32px,5vw,48px);\n margin:0 0 14px;\n letter-spacing:0.01em;\n line-height:1.05;\n }\n .lede{font-size:16px;color:var(--ink-soft);margin:0;max-width:62ch;}\n\n .legend{\n display:flex;gap:28px;margin:28px 0 48px;flex-wrap:wrap;\n font-size:14px;color:var(--ink-soft);\n }\n .legend span{display:inline-flex;align-items:center;gap:8px;}\n .dot{width:10px;height:10px;border-radius:50%;display:inline-block;}\n .dot.existing{background:var(--existing);}\n .dot.new{background:var(--new);}\n\n section.block{margin-bottom:56px;}\n\n .context{\n display:flex;gap:28px;flex-wrap:wrap;\n margin-bottom:48px;\n padding-bottom:40px;\n border-bottom:1px solid var(--line);\n }\n .context .main{flex:2;min-width:280px;}\n .context .main p{font-size:15px;color:var(--ink-soft);margin:0;max-width:60ch;}\n .context .main strong{color:var(--ink);}\n .context .aside{\n flex:1;min-width:220px;max-width:300px;\n background:var(--hub-soft);\n border-left:3px solid var(--hub);\n border-radius:6px;\n padding:14px 16px;\n align-self:flex-start;\n }\n .context .aside .label{\n font-family:'Manrope',sans-serif;font-weight:600;font-size:12px;\n color:var(--hub);margin:0 0 6px;\n }\n .context .aside p{font-size:13px;color:var(--ink-soft);margin:0;}\n .block-head{\n display:flex;align-items:baseline;gap:14px;margin-bottom:20px;\n border-bottom:1px solid var(--line);padding-bottom:14px;\n }\n .block-tag{\n font-family:'Manrope',sans-serif;font-weight:600;font-size:13px;\n padding:4px 10px;border-radius:5px;white-space:nowrap;\n }\n .block-tag.existing{background:var(--existing-soft);color:var(--existing);}\n .block-tag.new{background:var(--new-soft);color:var(--new);}\n .block-head h2{\n font-family:'Manrope',sans-serif;font-size:21px;font-weight:600;margin:0;\n }\n .block-head .who{font-size:14px;color:var(--ink-soft);}\n\n .flow{\n background:var(--panel);\n border:1px solid var(--line);\n border-radius:10px;\n padding:24px 26px;\n margin-bottom:32px;\n }\n .flow-label{\n font-family:'Manrope',sans-serif;\n font-weight:600;\n font-size:14px;\n margin:0 0 14px;\n color:var(--ink);\n }\n .flow-label .num{\n display:inline-flex;align-items:center;justify-content:center;\n width:20px;height:20px;border-radius:50%;\n background:var(--hub-soft);color:var(--hub);\n font-size:12px;margin-right:8px;\n }\n .steps{\n display:flex;align-items:stretch;flex-wrap:wrap;gap:4px 0;\n }\n .step{\n background:var(--bg);\n border:1px solid var(--line);\n border-radius:8px;\n padding:12px 14px;\n font-size:13.5px;\n min-width:150px;\n max-width:210px;\n display:flex;\n flex-direction:column;\n justify-content:center;\n }\n .step .t{font-weight:600;font-size:13.5px;margin-bottom:3px;}\n .step .d{color:var(--ink-soft);font-size:12.5px;}\n .arrow{\n display:flex;align-items:center;justify-content:center;\n width:40px;color:var(--ink-soft);font-size:15px;flex-shrink:0;\n }\n .step.outcome.existing{border-color:var(--existing);background:var(--existing-soft);}\n .step.outcome.new{border-color:var(--new);background:var(--new-soft);}\n\n .note{\n margin-top:12px;\n font-size:12.5px;\n color:var(--ink-soft);\n border-left:2px solid var(--line);\n padding-left:10px;\n }\n\n .hub{\n background:var(--hub);\n color:#fff;\n border-radius:10px;\n padding:26px 28px;\n display:flex;\n gap:24px;\n align-items:center;\n flex-wrap:wrap;\n }\n .hub h3{\n font-family:'Manrope',sans-serif;\n font-size:18px;margin:0 0 6px;font-weight:600;\n }\n .hub p{margin:0;font-size:13.5px;color:#C7CCD4;max-width:60ch;}\n .hub .badges{display:flex;gap:10px;flex-wrap:wrap;}\n .hub .badge{\n font-size:12px;font-family:'Manrope',sans-serif;font-weight:600;\n padding:5px 10px;border-radius:5px;background:rgba(255,255,255,0.1);\n }\n .converge{\n display:flex;justify-content:center;gap:10px;margin:6px 0 18px;\n color:var(--ink-soft);font-size:13px;align-items:center;\n }\n .converge .ln{height:1px;width:60px;background:var(--line);}\n\n\n .case-intro{\n display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;\n margin:0 0 48px;\n }\n .case-card{\n background:var(--panel);border:1px solid var(--line);border-radius:10px;\n padding:20px 22px;\n }\n .case-card h3{\n font-family:'Manrope',sans-serif;font-size:16px;font-weight:600;\n margin:0 0 8px;\n }\n .case-card p{margin:0;font-size:13.5px;color:var(--ink-soft);}\n .case-card strong{color:var(--ink);}\n .image-placeholder{\n min-height:250px;border:2px dashed #B9B8B0;border-radius:10px;\n background:repeating-linear-gradient(135deg,#F8F8F5,#F8F8F5 10px,#F2F2EE 10px,#F2F2EE 20px);\n display:flex;align-items:center;justify-content:center;text-align:center;\n padding:28px;margin:20px 0 32px;\n }\n .image-placeholder .ph-title{\n font-family:'Manrope',sans-serif;font-size:15px;font-weight:600;\n margin-bottom:5px;\n }\n .image-placeholder .ph-sub{font-size:12.5px;color:var(--ink-soft);max-width:52ch;}\n .image-block{margin:20px 0 32px;}\n .image-block img{\n width:100%;display:block;border-radius:10px;border:1px solid var(--line);\n }\n .image-block .cap{\n font-size:12px;color:var(--ink-soft);margin-top:8px;text-align:center;\n }\n .image-block.grid-2{\n display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;\n }\n .hero-image{margin:0 0 44px;}\n .hero-image img{\n width:100%;display:block;border-radius:14px;border:1px solid var(--line);\n }\n .system{\n background:var(--hub-soft);border-left:3px solid var(--hub);border-radius:6px;\n padding:20px 22px;margin-top:20px;\n }\n .system h3{font-family:'Manrope',sans-serif;font-size:17px;margin:0 0 7px;}\n .system p{font-size:13.5px;color:var(--ink-soft);margin:0;}\n @media (max-width:640px){.case-intro{grid-template-columns:1fr;}.image-block.grid-2{grid-template-columns:1fr;}}\n\n @media print{\n body{padding:20px;background:#fff;}\n .flow{break-inside:avoid;}\n section.block{break-inside:avoid;}\n .image-block, .hero-image{break-inside:avoid;}\n }\n @media (max-width:640px){\n .steps{flex-direction:column;}\n .arrow{transform:rotate(90deg);width:100%;padding:2px 0;}\n .step{max-width:none;}\n }\n<\/style>\n\n<\/head>\n<body>\n<div class=\"wrap\">\n<section class=\"block\">\n <div class=\"block-head\">\n <span class=\"block-tag new\">System<\/span>\n <h2>Design beyond a one-time offer<\/h2>\n <span class=\"who\">An architecture that is flexible and reusable<\/span>\n <\/div>\n\n <div class=\"system\">\n <h3>From the specific case to the generic system<\/h3>\n <p>Starting from an existing UI, I developed the new use cases while ensuring that we did not create an experience specific only to Premium Moby. Components and patterns were designed to adapt to different content, messages, conditions, and contexts, making it possible to accommodate other types of benefits and promotional mechanisms within a single set of solutions.<\/p>\n <\/div>\n\n \n <\/div>\n\n <div class=\"system\">\n <h3>One system, multiple time horizons<\/h3>\n <p><strong>Short term :<\/strong> effectively address the need to acquire and activate Moby Prime. <strong>Long term<\/strong> : lay the foundations for a system capable of supporting product evolution, new offers, and a long-term loyalty strategy<\/p>\n <\/div>\n <\/section>\n\n <div class=\"converge\"><span class=\"ln\"><\/span>Convergence<span class=\"ln\"><\/span><\/div>\n\n <div class=\"hub\">\n <div style=\"flex:1;min-width:220px;\">\n MY BENEFITS\n <br><\/br>\n <p>A single point of convergence for two audiences: tracking consumed benefits and discovering new Premium Moby offers, accessible from the account area on both the app and website.<\/p>\n <\/div>\n <div class=\"badges\">\n <span class=\"badge\">History<\/span>\n <span class=\"badge\">Active deals<\/span>\n <span class=\"badge\">New benefits<\/span>\n <\/div>\n <\/div>\n<\/div>\n<\/body>\n<\/html>\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-a878d9f e-flex e-con-boxed e-con e-child\" data-id=\"a878d9f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bacbe9f elementor-widget elementor-widget-video\" data-id=\"bacbe9f\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"video_type":"hosted","autoplay":"yes","mute":"yes","loop":"yes","controls":"yes"}\" data-widget_type=\"video.default\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/designdinterface.com\/wp-content\/uploads\/2026\/09\/generique-prime-moby.mp4\" autoplay=\"\" loop=\"\" controls=\"\" muted=\"muted\" controlslist=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\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-7b8e0c6 e-con-full e-flex e-con e-child\" data-id=\"7b8e0c6\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b77919f elementor-widget elementor-widget-html\" data-id=\"b77919f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Partie 5 \u2014 Impact<\/title>\n\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Prime Moby \u2014 Sch\u00e9ma des parcours utilisateurs<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Antonio:wght@400;500;700&family=Manrope:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n<style>\n :root{\n --bg: #F5F6F2;\n --panel: #FFFFFF;\n --ink: #1B2430;\n --ink-soft: #5B6472;\n --line: #DEDBD0;\n --existing: #1F6F5C;\n --existing-soft: #E7F1EC;\n --new: #C9791A;\n --new-soft: #FBEFDE;\n --hub: #2B3646;\n --hub-soft: #EDEEEA;\n }\n *{box-sizing:border-box;}\n body{\n margin:0;\n background:var(--bg);\n color:var(--ink);\n font-family:'Manrope', sans-serif;\n line-height:1.5;\n padding:48px 24px 80px;\n }\n .wrap{max-width:1180px;margin:0 auto;}\n\n header.top{margin-bottom:44px;max-width:720px;}\n .kicker{\n font-family:'Manrope',sans-serif;\n font-weight:600;\n font-size:14px;\n color:var(--ink-soft);\n letter-spacing:0.01em;\n margin:0 0 10px;\n }\n h1{\n font-family:'Antonio',sans-serif;\n font-weight:500;\n text-transform:uppercase;\n font-size:clamp(32px,5vw,48px);\n margin:0 0 14px;\n letter-spacing:0.01em;\n line-height:1.05;\n }\n .lede{font-size:16px;color:var(--ink-soft);margin:0;max-width:62ch;}\n\n .legend{\n display:flex;gap:28px;margin:28px 0 48px;flex-wrap:wrap;\n font-size:14px;color:var(--ink-soft);\n }\n .legend span{display:inline-flex;align-items:center;gap:8px;}\n .dot{width:10px;height:10px;border-radius:50%;display:inline-block;}\n .dot.existing{background:var(--existing);}\n .dot.new{background:var(--new);}\n\n section.block{margin-bottom:56px;}\n\n .context{\n display:flex;gap:28px;flex-wrap:wrap;\n margin-bottom:48px;\n padding-bottom:40px;\n border-bottom:1px solid var(--line);\n }\n .context .main{flex:2;min-width:280px;}\n .context .main p{font-size:15px;color:var(--ink-soft);margin:0;max-width:60ch;}\n .context .main strong{color:var(--ink);}\n .context .aside{\n flex:1;min-width:220px;max-width:300px;\n background:var(--hub-soft);\n border-left:3px solid var(--hub);\n border-radius:6px;\n padding:14px 16px;\n align-self:flex-start;\n }\n .context .aside .label{\n font-family:'Manrope',sans-serif;font-weight:600;font-size:12px;\n color:var(--hub);margin:0 0 6px;\n }\n .context .aside p{font-size:13px;color:var(--ink-soft);margin:0;}\n .block-head{\n display:flex;align-items:baseline;gap:14px;margin-bottom:20px;\n border-bottom:1px solid var(--line);padding-bottom:14px;\n }\n .block-tag{\n font-family:'Manrope',sans-serif;font-weight:600;font-size:13px;\n padding:4px 10px;border-radius:5px;white-space:nowrap;\n }\n .block-tag.existing{background:var(--existing-soft);color:var(--existing);}\n .block-tag.new{background:var(--new-soft);color:var(--new);}\n .block-head h2{\n font-family:'Manrope',sans-serif;font-size:21px;font-weight:600;margin:0;\n }\n .block-head .who{font-size:14px;color:var(--ink-soft);}\n\n .flow{\n background:var(--panel);\n border:1px solid var(--line);\n border-radius:10px;\n padding:24px 26px;\n margin-bottom:32px;\n }\n .flow-label{\n font-family:'Manrope',sans-serif;\n font-weight:600;\n font-size:14px;\n margin:0 0 14px;\n color:var(--ink);\n }\n .flow-label .num{\n display:inline-flex;align-items:center;justify-content:center;\n width:20px;height:20px;border-radius:50%;\n background:var(--hub-soft);color:var(--hub);\n font-size:12px;margin-right:8px;\n }\n .steps{\n display:flex;align-items:stretch;flex-wrap:wrap;gap:4px 0;\n }\n .step{\n background:var(--bg);\n border:1px solid var(--line);\n border-radius:8px;\n padding:12px 14px;\n font-size:13.5px;\n min-width:150px;\n max-width:210px;\n display:flex;\n flex-direction:column;\n justify-content:center;\n }\n .step .t{font-weight:600;font-size:13.5px;margin-bottom:3px;}\n .step .d{color:var(--ink-soft);font-size:12.5px;}\n .arrow{\n display:flex;align-items:center;justify-content:center;\n width:40px;color:var(--ink-soft);font-size:15px;flex-shrink:0;\n }\n .step.outcome.existing{border-color:var(--existing);background:var(--existing-soft);}\n .step.outcome.new{border-color:var(--new);background:var(--new-soft);}\n\n .note{\n margin-top:12px;\n font-size:12.5px;\n color:var(--ink-soft);\n border-left:2px solid var(--line);\n padding-left:10px;\n }\n\n .hub{\n background:var(--hub);\n color:#fff;\n border-radius:10px;\n padding:26px 28px;\n display:flex;\n gap:24px;\n align-items:center;\n flex-wrap:wrap;\n }\n .hub h3{\n font-family:'Manrope',sans-serif;\n font-size:18px;margin:0 0 6px;font-weight:600;\n }\n .hub p{margin:0;font-size:13.5px;color:#C7CCD4;max-width:60ch;}\n .hub .badges{display:flex;gap:10px;flex-wrap:wrap;}\n .hub .badge{\n font-size:12px;font-family:'Manrope',sans-serif;font-weight:600;\n padding:5px 10px;border-radius:5px;background:rgba(255,255,255,0.1);\n }\n .converge{\n display:flex;justify-content:center;gap:10px;margin:6px 0 18px;\n color:var(--ink-soft);font-size:13px;align-items:center;\n }\n .converge .ln{height:1px;width:60px;background:var(--line);}\n\n\n .case-intro{\n display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;\n margin:0 0 48px;\n }\n .case-card{\n background:var(--panel);border:1px solid var(--line);border-radius:10px;\n padding:20px 22px;\n }\n .case-card h3{\n font-family:'Manrope',sans-serif;font-size:16px;font-weight:600;\n margin:0 0 8px;\n }\n .case-card p{margin:0;font-size:13.5px;color:var(--ink-soft);}\n .case-card strong{color:var(--ink);}\n .image-placeholder{\n min-height:250px;border:2px dashed #B9B8B0;border-radius:10px;\n background:repeating-linear-gradient(135deg,#F8F8F5,#F8F8F5 10px,#F2F2EE 10px,#F2F2EE 20px);\n display:flex;align-items:center;justify-content:center;text-align:center;\n padding:28px;margin:20px 0 32px;\n }\n .image-placeholder .ph-title{\n font-family:'Manrope',sans-serif;font-size:15px;font-weight:600;\n margin-bottom:5px;\n }\n .image-placeholder .ph-sub{font-size:12.5px;color:var(--ink-soft);max-width:52ch;}\n .image-block{margin:20px 0 32px;}\n .image-block img{\n width:100%;display:block;border-radius:10px;border:1px solid var(--line);\n }\n .image-block .cap{\n font-size:12px;color:var(--ink-soft);margin-top:8px;text-align:center;\n }\n .image-block.grid-2{\n display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;\n }\n .hero-image{margin:0 0 44px;}\n .hero-image img{\n width:100%;display:block;border-radius:14px;border:1px solid var(--line);\n }\n .system{\n background:var(--hub-soft);border-left:3px solid var(--hub);border-radius:6px;\n padding:20px 22px;margin-top:20px;\n }\n .system h3{font-family:'Manrope',sans-serif;font-size:17px;margin:0 0 7px;}\n .system p{font-size:13.5px;color:var(--ink-soft);margin:0;}\n @media (max-width:640px){.case-intro{grid-template-columns:1fr;}.image-block.grid-2{grid-template-columns:1fr;}}\n\n @media print{\n body{padding:20px;background:#fff;}\n .flow{break-inside:avoid;}\n section.block{break-inside:avoid;}\n .image-block, .hero-image{break-inside:avoid;}\n }\n @media (max-width:640px){\n .steps{flex-direction:column;}\n .arrow{transform:rotate(90deg);width:100%;padding:2px 0;}\n .step{max-width:none;}\n }\n<\/style>\n\n<\/head>\n<body>\n<div class=\"wrap\">\n<section class=\"block\" style=\"margin-top:56px;\">\n <div class=\"block-head\">\n <span class=\"block-tag existing\">Impact<\/span>\n <h2>A feature designed as a product lever<\/h2>\n <\/div>\n <div class=\"case-intro\" style=\"margin-bottom:0;\">\n <div class=\"case-card\">\n <h3>Acquisition<\/h3>\n <p>Give professionals and students <strong>a strong reason to install and try<\/strong> the marketplace.<\/p>\n <\/div>\n <div class=\"case-card\">\n <h3>Activation & retention<\/h3>\n <p>Create repeated opportunities to discover, use, and find their benefits throughout the journey.<\/p>\n <\/div>\n <div class=\"case-card\">\n <h3>Evolution of the model<\/h3>\n <p>Gradually prepare users to adopt a <strong>subscription plan<\/strong> and strengthen long-term commitment.<\/p>\n <\/div>\n <div class=\"case-card\">\n <h3>Reusability<\/h3>\n <p>Build a sufficiently <strong>generic and flexible UI<\/strong> architecture to support future offers.<\/p>\n <\/div>\n <\/div>\n\n \n <\/div>\n <\/section>\n\n<\/div>\n<\/div>\n<\/body>\n<\/html>\n\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\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Partie 1 \u2014 \u00c9tude de cas Prime Moby \u2014 Sch\u00e9ma des parcours utilisateurs \u00c9tude de cas \u2014 Product Design Prime Moby \u2014 parcours utilisateurs Transformer une offre promotionnelle en levier d’acquisition et de fid\u00e9lisation, tout en posant les bases d’une architecture d’offres r\u00e9utilisable. Contexte Quelques mois apr\u00e8s le lancement de la marketplace food, la strat\u00e9gie […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-3923","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/designdinterface.com\/en\/wp-json\/wp\/v2\/pages\/3923","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/designdinterface.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/designdinterface.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/designdinterface.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/designdinterface.com\/en\/wp-json\/wp\/v2\/comments?post=3923"}],"version-history":[{"count":61,"href":"https:\/\/designdinterface.com\/en\/wp-json\/wp\/v2\/pages\/3923\/revisions"}],"predecessor-version":[{"id":3989,"href":"https:\/\/designdinterface.com\/en\/wp-json\/wp\/v2\/pages\/3923\/revisions\/3989"}],"wp:attachment":[{"href":"https:\/\/designdinterface.com\/en\/wp-json\/wp\/v2\/media?parent=3923"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}