Marco Raab
About Project List
Marco Raab • Service Design, User Experience, Product Design

Marco Raab • Service Design, User Experience, Product Design

I'm an experienced Design Leader based in Berlin. I bridge business objectives and user needs to deliver simple, clear and accessible services and digital experiences.

image
For 15+ years, I have lead and build design teams, in-house and as a consultant, in New York City and in Sydney, Australia. I specialise in identifying and solving customer challenges across professional services, health, transportation/ logistics and Government services.

Expertise

  • Human Centred Design
  • Experience Strategy
  • Thought leadership
  • Team building
  • User Research & Insights
  • Service & CX Design
  • UX & Product Design
  • Design in Agile delivery

Recent Projects

ProjectsAbout

Projects database

Ryder Last MileRyder Last Mile

Uplifting the 'Last Mile Delivery' Service Experience

Ryder USA
User ResearchService DesignUXProduct Design
BresicWhitneyBresicWhitney

Optimising Real-time Customer Relationship Management for Real Estate Agents

BresicWhiteny
User ResearchUXProduct Design
icare NSW icare NSW

Streamlining the Care Advise Conversation

icare
User ResearchService Design

Footer

Name
Rows
1

Find me on LinkedIn • I'm mentoring on ADPList • Site made with Super + Notion, original design by Sam Judge

‣
Hide your pages in this toggle menu, only you will see it
Projects databaseFooterProject ListProject Template

Stuff:

Page previewMy Superpower
‣
Original CSS (based on Sam Judge's) 
<link rel="stylesheet" href="https://raabsolutely.github.io/cy/style.css" >
‣
My old <Head>
‣
My current <Head>
‣
New <Head> as per current Sam Judge site
🥴SUPER site CSS issue
Super App

app.super.so

previous link for super.so: https://notion.so/02b52c98da95475490062dcf13c88621

‣
Instructions
  1. Duplicate this template to your Notion workspace
  2. Create a site using Super, using your newly created page as the Notion URL.
  3. Set up your fonts and add the code to your Super settings:
    4. ‣
    Fonts

    The fonts used in the template are: PS Fournier: Light Reason New: Regular and Medium You’ll need to add these fonts to a new web project in your Adobe Typekit account and paste the Unique ID into the code below.

    If you don’t have a Typekit account you can rely on the chosen Google Webfonts as a fallback instead. They’re a pretty good match, here’s the difference:

    image
    ‣
    Using your own font choices

    If you want to change the fonts you’ll need to add custom overrides in the CSS editor. You can see the original CSS at the following link: https://iamsamsmall.github.io/cy/style.css 

    /* Here are the font stacks in the code. Search for them so you know which lines to override in your customisations. */
font-family: reason-new, 'Work Sans', sans-serif !important;
font-family: psfournier-std, 'Nanum Myeongjo', serif !important;
    ‣
    Code for Beta (new) Super Editor

    1. Go to Options > Global Site Injection > Edit Code 2. Paste the following code into HTML (Head)

    3. Paste the following code into HTML (Body)

4. Make sure you’ve done these things before you go live

‣
Go live checklist
Change all links in the footer database
Check the favicon, update if necessary in the snippet code
Amend the meta description in the snippet code
Update the share image in the snippet code
Check that the Show or hide page properties option in Super settings is set to ‘Show’
Check that all navigation labels and links are correct and that they point to the right pages. Note, they do not automatically update when you amend page names or add new pages.
Add pretty links for your pages, projects, and articles into Super’s pretty URL settings. By default you’ll need to use projects/ and writing/, you can amend these if you want but you’ll need to add CSS overrides.
‣
Example of pretty links and url structure
image
<!-- Google fonts for fallback -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;600&family=Nanum+Myeongjo&display=swap" rel="stylesheet">

<!-- Typekit: Update the link below with your Typekit ID -->
<link rel="stylesheet" href="https://use.typekit.net/gnx8fcu.css">

<!-- Add your analytics script here -->

<!-- Fathom - beautiful, simple website analytics -->
<script src="https://cdn.usefathom.com/script.js" data-site="MBKFIMIB" defer></script>
<!-- / Fathom -->

<!--- Cy template styles: This is the CSS file that contains all the styles for the template. It is centrally hosted via GitHub. If you’d like to make changes to the style of your website you can add custom overrides in the style tag below. -->
<link rel="stylesheet" href="https://raabsolutely.github.io/cy/style.css">
<link rel="stylesheet" href="https://raabsolutely.github.io/cy/style.css"/>

    <link rel="preconnect" href="https://fonts.gstatic.com"/>
    <link rel="stylesheet" data-href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;600&amp;family=Nanum+Myeongjo&amp;display=swap"/>

    <link rel="stylesheet" data-href="https://use.typekit.net/gnx8fcu.css"/>

    <link rel="preconnect" href="https://fonts.googleapis.com"/>
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin=""/>
    <link rel="stylesheet" data-href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;1,400&amp;display=swap"/>

    <link rel="stylesheet" data-href="https://use.typekit.net/mrh3xxw.css"/>

    <!--colours from original template--> 
    <!--link rel="stylesheet" href="https://iamsamsmall.github.io/cy/colour/cotton.css"/-->
    <!--link rel="stylesheet" href="https://iamsamsmall.github.io/cy/fonts/editorial.css"/-->
    
    <link rel="preconnect" href="https://fonts.googleapis.com"/>
    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin=""/>
    <link rel="stylesheet" data-href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;500;600;700"/>
    <meta charSet="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="icon" href="https://s3.amazonaws.com/super-notion/images/8a28f49c-9631-4450-89f2-b87a3a60099e.png"/>

    <!--Who title-->
    <title>Marco Raab · Experience Desig Leader</title>
    
    <meta name="robots" content="index,follow"/>
    <meta name="googlebot" content="index,follow"/>
    <meta name="description" content="I bridge business objectives and user needs to deliver simple, clear and accessible services and digital experiences"/>
    <meta name="twitter:card" content="summary_large_image"/>
    <meta property="og:url" content="https://marcoraab.com/"/>
    <meta property="og:type" content="website"/>
    <meta property="og:title" content="Marco Raab · Experience Desig Leader"/>
    <meta property="og:description" content="I design user-centred products that help companies adapt and grow"/>
    <meta property="og:image" content="https://s3.amazonaws.com/super-notion/images/4755ad0e-2ff9-4c46-88ef-9754d696c0a0.png"/>
    <meta property="og:image:alt" content="Marco Raab · Experience Desig Leader"/>
    <meta property="og:locale" content="en_US"/>
    <meta property="og:site_name" content="Marco Raab · Experience Desig Leader"/>
    <meta name="next-head-count" content="16"/>
    <link rel="preload" href="/_next/static/css/6061fe8cabe26582.css" as="style"/>
    <link rel="stylesheet" href="/_next/static/css/6061fe8cabe26582.css" data-n-g=""/>
    <noscript data-n-css=""></noscript>
    <script defer="" nomodule="" src="/_next/static/chunks/polyfills-a40ef1678bae11e696dba45124eadd70.js"></script>
    <script src="/_next/static/chunks/webpack-5f561012eed10e6c.js" defer=""></script>
    <script src="/_next/static/chunks/framework-4b251beadeb24897.js" defer=""></script>
    <script src="/_next/static/chunks/main-b7f669c656e5d928.js" defer=""></script>
    <script src="/_next/static/chunks/pages/_app-62fcc40e783edff5.js" defer=""></script>
    <script src="/_next/static/chunks/239-2db633a7b2e81358.js" defer=""></script>
    <script src="/_next/static/chunks/170-c96335aa7c3eb317.js" defer=""></script>
    <script src="/_next/static/chunks/118-abb3884bdd6261ab.js" defer=""></script>
    <script src="/_next/static/chunks/pages/index-4ac0bbd42b0bc142.js" defer=""></script>
    <script src="/_next/static/JgC7wbyUOJUMr4a9q_qfS/_buildManifest.js" defer=""></script>
    <script src="/_next/static/JgC7wbyUOJUMr4a9q_qfS/_ssgManifest.js" defer=""></script>
    <script src="/_next/static/JgC7wbyUOJUMr4a9q_qfS/_middlewareManifest.js" defer=""></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;600&family=Nanum+Myeongjo&display=swap"/>
    <link rel="stylesheet" href="https://use.typekit.net/gnx8fcu.css"/>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;1,400&display=swap"/>
    <link rel="stylesheet" href="https://use.typekit.net/mrh3xxw.css"/>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;500;600;700"/>
    
    <!-- Fathom - beautiful, simple website analytics -->
<script src="https://cdn.usefathom.com/script.js" data-site="MBKFIMIB" defer></script>
<!-- / Fathom -->
<head>

<link rel="stylesheet" href="https://iamsamsmall.github.io/cy/style.css">




<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet" data-href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;600&amp;family=Nanum+Myeongjo&amp;display=swap">

<link rel="stylesheet" data-href="https://use.typekit.net/gnx8fcu.css">




<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link rel="stylesheet" data-href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;1,400&amp;display=swap">

<link rel="stylesheet" data-href="https://use.typekit.net/mrh3xxw.css">



<link rel="stylesheet" href="https://iamsamsmall.github.io/cy/colour/coppice.css">


<link rel="stylesheet" href="https://iamsamsmall.github.io/cy/fonts/rational.css">
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin=""><link rel="stylesheet" data-href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;500;600;700"><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="icon" href="https://s3.amazonaws.com/super-notion/images/8a28f49c-9631-4450-89f2-b87a3a60099e.png"><title>Sam Judge · Product Designer</title><meta name="robots" content="index,follow"><meta name="googlebot" content="index,follow"><meta name="description" content="I design user-centred products that help companies adapt and grow"><meta name="twitter:card" content="summary_large_image"><meta property="og:url" content="https://samjudge.studio/"><meta property="og:type" content="website"><meta property="og:title" content="Sam Judge · Product Designer"><meta property="og:description" content="I design user-centred products that help companies adapt and grow"><meta property="og:image" content="https://s3.amazonaws.com/super-notion/images/4755ad0e-2ff9-4c46-88ef-9754d696c0a0.png"><meta property="og:image:alt" content="Sam Judge · Product Designer"><meta property="og:locale" content="en_US"><meta property="og:site_name" content="Sam Judge · Product Designer"><meta name="next-head-count" content="16"><link rel="preload" href="/_next/static/css/6061fe8cabe26582.css" as="style"><link rel="stylesheet" href="/_next/static/css/6061fe8cabe26582.css" data-n-g=""><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-a40ef1678bae11e696dba45124eadd70.js"></script><script src="/_next/static/chunks/webpack-5f561012eed10e6c.js" defer=""></script><script src="/_next/static/chunks/framework-4b251beadeb24897.js" defer=""></script><script src="/_next/static/chunks/main-b7f669c656e5d928.js" defer=""></script><script src="/_next/static/chunks/pages/_app-62fcc40e783edff5.js" defer=""></script><script src="/_next/static/chunks/239-2db633a7b2e81358.js" defer=""></script><script src="/_next/static/chunks/170-c96335aa7c3eb317.js" defer=""></script><script src="/_next/static/chunks/118-abb3884bdd6261ab.js" defer=""></script><script src="/_next/static/chunks/pages/index-4ac0bbd42b0bc142.js" defer=""></script><script src="/_next/static/JgC7wbyUOJUMr4a9q_qfS/_buildManifest.js" defer=""></script><script src="/_next/static/JgC7wbyUOJUMr4a9q_qfS/_ssgManifest.js" defer=""></script><script src="/_next/static/JgC7wbyUOJUMr4a9q_qfS/_middlewareManifest.js" defer=""></script><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;600&amp;family=Nanum+Myeongjo&amp;display=swap"><link rel="stylesheet" href="https://use.typekit.net/gnx8fcu.css"><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;1,400&amp;display=swap"><link rel="stylesheet" href="https://use.typekit.net/mrh3xxw.css"><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;500;600;700"><style data-emotion="css-global" data-s="">html{font-size:16px;}body{font-family:Space Mono,Helvetica,Apple Color Emoji,Segoe UI Emoji,NotoColorEmoji,Noto Color Emoji,Segoe UI Symbol,Android Emoji,EmojiSymbols,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Noto Sans,sans-serif;}:root{--color-text-default:rgb(55, 53, 47);--color-text-default-light:rgba(55, 53, 47, 0.6);--color-text-gray:rgb(155, 154, 151);--color-text-brown:rgb(100, 71, 58);--color-text-orange:rgb(217, 115, 13);--color-text-yellow:rgb(223, 171, 1);--color-text-green:rgb(15, 123, 108);--color-text-blue:rgb(11, 110, 153);--color-text-purple:rgb(105, 64, 165);--color-text-pink:rgb(173, 26, 114);--color-text-red:rgb(224, 62, 62);--color-bg-default:rgb(255, 255, 255);--color-bg-gray:rgb(235, 236, 237);--color-bg-brown:rgb(233, 229, 227);--color-bg-orange:rgb(250, 235, 221);--color-bg-yellow:rgb(251, 243, 219);--color-bg-green:rgb(221, 237, 234);--color-bg-blue:rgb(221, 235, 241);--color-bg-purple:rgb(234, 228, 242);--color-bg-pink:rgb(244, 223, 235);--color-bg-red:rgb(251, 228, 228);--color-bg-gray-light:rgba(235, 236, 237, 0.3);--color-bg-brown-light:rgba(233, 229, 227, 0.3);--color-bg-orange-light:rgba(250, 235, 221, 0.3);--color-bg-yellow-light:rgba(251, 243, 219, 0.3);--color-bg-green-light:rgba(221, 237, 234, 0.3);--color-bg-blue-light:rgba(221, 235, 241, 0.3);--color-bg-purple-light:rgba(234, 228, 242, 0.3);--color-bg-pink-light:rgba(244, 223, 235, 0.3);--color-bg-red-light:rgba(251, 228, 228, 0.3);--color-pill-default:rgba(206, 205, 202, 0.5);--color-pill-gray:rgba(155, 154, 151, 0.4);--color-pill-brown:rgba(140, 46, 0, 0.2);--color-pill-orange:rgba(245, 93, 0, 0.2);--color-pill-yellow:rgba(233, 168, 0, 0.2);--color-pill-green:rgba(0, 135, 107, 0.2);--color-pill-blue:rgba(0, 120, 223, 0.2);--color-pill-purple:rgba(103, 36, 222, 0.2);--color-pill-pink:rgba(221, 0, 129, 0.2);--color-pill-red:rgba(255, 0, 26, 0.2);--color-ui-hover-bg:rgba(239, 239, 239);--color-ui-hover-bg-light:rgba(55, 53, 47, 0.03);--color-card-bg:rgb(255, 255, 255);--color-accent-bg:rgb(46, 170, 220);--color-border-default:rgba(235, 236, 237, 0.8);--color-border-dark:rgba(55, 53, 47, 0.16);--column-spacing:46px;--collection-card-cover-size-small:172px;--collection-card-cover-size-medium:260px;--collection-card-cover-size-large:320px;}</style><link as="script" rel="prefetch" href="/_next/static/chunks/pages/%5B...page%5D-cb94913e26ca595b.js"></head>
<!-- Google fonts for fallback -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;600&family=Nanum+Myeongjo&display=swap" rel="stylesheet">

<!-- Typekit: Update the link below with your Typekit ID -->
<link rel="stylesheet" href="https://use.typekit.net/gnx8fcu.css">

<!-- Add your analytics script here -->
<!-- I use Fathom, it’s a great alternative to Google Analytics with a minimal dashboard and a focus on privacy. Please consider using my referral link when creating an account: https://usefathom.com/ref/CSKBJR -->

<!--- Cy template styles: This is the CSS file that contains all the styles for the template. It is centrally hosted via GitHub. If you’d like to make changes to the style of your website you can add custom overrides in the style tag below. -->
<link rel="stylesheet" href="<link rel="stylesheet" href="https://raabsolutely.github.io/cy/style.css">
<!-- Navigation -->
<nav class="nav">
  <div class="left">
    <a class="nav-link" href="/">Cy</a>
  </div>
  <div class="right">
    <a class="nav-link" href="/projects">Projects</a>
    <a class="nav-link" href="/about">About</a>
    <a class="nav-link" href="/writing">Writing</a>
  </div>
</nav>