{"id":2,"date":"2026-06-16T23:19:23","date_gmt":"2026-06-16T23:19:23","guid":{"rendered":"http:\/\/192.168.1.188\/?page_id=2"},"modified":"2026-07-16T13:01:17","modified_gmt":"2026-07-16T13:01:17","slug":"home","status":"publish","type":"page","link":"https:\/\/naturalstructure.com\/","title":{"rendered":""},"content":{"rendered":"\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Grant Houston &#8211; User Experience &amp; Product Design Leader &#8211; Natural Structure<\/title>\n<style>\n  \/* ---------- Design Tokens ---------- *\/\n    .ns-page {\n        --ns-white: #FFFFFF; --ns-gray-bg: #F7F7F7; --ns-gray-bg-2: #F0F0F0;\n        --ns-charcoal-heading: #111111; --ns-charcoal-body: #333333;\n        --ns-blue: #2B82C9; --ns-blue-hover: #246EA8; --ns-blue-light: #EBF4FB;\n        --ns-black: #000000; --ns-border: #E5E5E5;\n        --ns-font: system-ui, -apple-system, BlinkMacSystemFont, 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n        --ns-max-width: 1440px; --ns-gutter: 56px;\n        font-family: var(--ns-font); color: var(--ns-charcoal-body); background: var(--ns-white);\n        line-height: 1.6; -webkit-font-smoothing: antialiased;\n    }\n    .ns-page, .ns-page *, .ns-page *::before, .ns-page *::after { box-sizing: border-box; }\n    .ns-page h1, .ns-page h2, .ns-page h3, .ns-page h4 { color: var(--ns-charcoal-heading); margin-top: 100px; font-weight: 800; line-height: 1.2; margin: 0; }\n    .ns-page p { margin: 0; color: var(--ns-charcoal-body); line-height: 1.6; }\n    .ns-page img { max-width: 100%; display: block; border-radius: 6px; }\n    .ns-page a { color: var(--ns-charcoal-heading); text-decoration: none; text-underline-offset: 3px; }\n    .ns-page a:hover { color: var(--ns-charcoal-heading); }\n    .ns-page em { font-style: italic; color: #555; }\n    \n    .ns-header { border-bottom: 1px solid var(--ns-border); }\n    .ns-header__inner { max-width: var(--ns-max-width); margin: 0 auto; padding: 18px var(--ns-gutter); display: flex; align-items: center; justify-content: space-between; gap: 24px; }\n    .ns-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }\n    .ns-logo__mark { width: 216px; height: 60px; flex-shrink: 0; }\n    .ns-nav { display: flex; align-items: center; gap: 32px; flex: 1; justify-content: flex-end; }\n    .ns-nav__links { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }\n    .ns-nav__links a { font-size: 15px; font-weight: 500; }\n    .ns-cta-btn { display: inline-block; background: var(--ns-blue); color: var(--ns-white) !important; font-weight: 600; font-size: 15px; padding: 11px 22px; border-radius: 8px; border: none; cursor: pointer; transition: background-color 0.15s ease; }\n\n  .ns-mobile-toggle {\n    display: none;\n    background: none;\n    border: none;\n    cursor: pointer;\n    padding: 6px;\n  }\n\n  .ns-mobile-toggle span {\n    display: block;\n    width: 22px;\n    height: 2px;\n    background: var(--ns-charcoal-heading);\n    margin: 4px 0;\n  }\n\n\/* ---------- Hero ---------- *\/\n.ns-hero {\n  padding: 0px var(--ns-gutter) 12px; \/* Reduced top padding from 56px to 24px, and bottom to 12px *\/\n}\n\n.ns-hero__stage {\n  max-width: var(--ns-max-width);\n  margin: 0 auto;\n  position: relative;\n  min-height: 540px;         \/* Reduced from 600px to tighten vertical spacing around images *\/\n  border-radius: 12px;\n  overflow: hidden;          \n  background: var(--ns-white-bg);\n}\n\n.ns-hero__track {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  transition: transform 0.5s ease-in-out;\n}\n\n.ns-hero__slide {\n  flex: 0 0 100%;\n  width: 100%;\n  position: relative;\n  height: 100%;\n  min-height: 540px;         \/* Matches the new stage height *\/\n  overflow: hidden;          \n}\n\n\/* Background layer: Sits behind text, aligned to the right *\/\n.ns-hero__bg {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end; \/* Restored original right-alignment *\/\n  padding: 0 64px;           \/* Restored clean margin from the right edge *\/\n  pointer-events: none;\n}\n\n\/* Scaled up to 1.75x of the original size *\/\n.ns-hero__bg img {\n  max-height: 520px;         \/* Increased from 420px (scales up vertically inside 600px stage) *\/\n  width: auto;               \/* Scales proportionately *\/\n  max-width: 108%;           \/* 1.75x of original 62% (stops short of left-clipping) *\/\n  border-radius: 6px;\n}\n\n  \/* Foreground layer: heading\/copy\/CTA, floats in front of background *\/\n  .ns-hero__content {\n    position: relative;\n    z-index: 2;\n    width: 100%;\n    max-width: 100%;\n    margin: 40px 0 40px 40px;\n    background: var(--ns-gray-bg);\n    border-radius: 8px;\n    padding: 40px 36px;\n    display: flex;\n    flex-direction: column;\n    gap: 18px;\n  }\n\n  .ns-hero__eyebrow {\n    font-size: 13px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.06em;\n    color: var(--ns-blue);\n    margin-bottom: -6px;\n  }\n\n  .ns-hero__content h1 {\n    font-size: 28px;\n    letter-spacing: -0.01em;\n  }\n\n  .ns-hero__content .ns-hero__stat {\n    font-size: 15px;\n    font-weight: 700;\n    color: var(--ns-charcoal-heading);\n  }\n\n  .ns-hero__content p {\n    font-size: 15px;\n  }\n\n  .ns-hero__cta {\n    display: inline-block;\n    align-self: flex-start;\n    background: var(--ns-black);\n    color: var(--ns-white) !important;\n    font-weight: 600;\n    font-size: 14px;\n    padding: 13px 24px;\n    text-decoration: none;\n    border-radius: 8px;\n    margin-top: 8px;\n    transition: background-color 0.15s ease;\n  }\n  .ns-hero__cta:hover {\n    background: var(--ns-blue-hover);\n  }\n\n.ns-hero__controls {\n  display: flex;\n  gap: 14px;\n  margin-top: -22px;         \/* Keeps the buttons pulled up by 50px *\/\n  margin-bottom: 48px;       \/* Adds 48px of clean vertical space below the buttons *\/\n  max-width: var(--ns-max-width);\n  margin-left: auto;\n  margin-right: auto;\n  padding: 0 var(--ns-gutter);\n}\n\n  .ns-hero__arrow {\n    width: 40px;\n    height: 40px;\n    border-radius: 50%;\n    background: #4A4A4A;\n    border: none;\n    color: var(--ns-white);\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    flex-shrink: 0;\n    transition: background-color 0.15s ease;\n    padding: 8px;\n    box-sizing: border-box;\n  }\n\n  .ns-hero__arrow:hover {\n    background: var(--ns-black);\n  }\n\n  .ns-hero__arrow svg {\n    width: 20px;\n    height: 20px;\n  }\n\n  \/* ---------- Section Heading ---------- *\/\n  .ns-section {\n    padding: 72px var(--ns-gutter);\n  }\n\n  .ns-section__heading {\n    max-width: var(--ns-max-width);\n    margin: 0 auto 44px;\n    font-size: 34px;\n  }\n\n  \/* ---------- Impact Grid ---------- *\/\n  .ns-impact {\n    padding: 0 var(--ns-gutter) 72px;\n  }\n\n  .ns-impact__grid {\n    max-width: var(--ns-max-width);\n    margin: 0 auto;\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    grid-template-rows: repeat(3, auto);\n    grid-auto-flow: row;\n    column-gap: 64px;\n    row-gap: 40px;\n  }\n\n  .ns-impact__item h3 {\n    font-size: 19px;\n    margin-bottom: 10px;\n  }\n\n  .ns-impact__item p {\n    font-size: 15px;\n  }\n\n  \/* ---------- Oval Photo ---------- *\/\n  .ns-oval-wrap {\n    max-width: var(--ns-max-width);\n    margin: 0 auto;\n    padding: 0 var(--ns-gutter) 72px;\n  }\n\n  .ns-oval {\n    width: 100%;\n    aspect-ratio: 16 \/ 9;\n    border-radius: 50% \/ 38%;\n    overflow: hidden;\n  }\n\n  .ns-oval img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    border-radius: 0; \/* Negate the global image rounded-corners logic for the full-bleed oval wrap *\/\n  }\n\n  \/* ---------- Consider This (callout) ---------- *\/\n  .ns-callout {\n    text-align: center;\n  }\n\n  .ns-callout__heading {\n    font-size: 30px;\n    margin-bottom: 36px;\n  }\n\n  .ns-callout__band {\n    background: var(--ns-gray-bg);\n    padding: 48px var(--ns-gutter);\n  }\n\n  .ns-callout__band p {\n    max-width: 760px;\n    margin: 0 auto;\n    font-size: 18px;\n    color: var(--ns-charcoal-heading);\n    font-weight: 500;\n    line-height: 1.45;\n  }\n\n  .ns-callout__arrow-wrap {\n    display: flex;\n    justify-content: center;\n    margin-top: 36px;\n  }\n\n  .ns-callout__arrow {\n    width: 40px;\n    height: 40px;\n    border-radius: 50%;\n    background: #4A4A4A;\n    border: none;\n    color: var(--ns-white);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n  }\n\n  .ns-callout__arrow svg {\n    width: 18px;\n    height: 18px;\n  }\n\n  \/* ---------- Capability Section ---------- *\/\n.ns-capability__heading {\n  text-align: left; \/* Changed from center *\/\n  font-size: 32px;\n  margin-bottom: 48px;\n}\n\n  .ns-capability__grid {\n    max-width: var(--ns-max-width);\n    margin: 0 auto;\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    grid-template-rows: repeat(3, auto);\n    grid-auto-flow: row;\n    column-gap: 64px;\n    row-gap: 36px;\n  }\n\n  .ns-capability__item--blank {\n    visibility: hidden;\n  }\n\n  .ns-capability__item h3 {\n    font-size: 18px;\n    margin-bottom: 10px;\n  }\n\n  .ns-capability__item p {\n    font-size: 15px;\n  }\n\n  \/* ---------- Footer ---------- *\/\n  .ns-footer {\n    padding: 64px var(--ns-gutter) 80px;\n    border-top: 1px solid var(--ns-border);\n  }\n\n  .ns-footer__inner {\n    max-width: var(--ns-max-width);\n    margin: 0 auto;\n  }\n\n  .ns-footer h2 {\n    font-size: 30px;\n    margin-bottom: 18px;\n  }\n\n  .ns-footer__line {\n    font-size: 16px;\n    margin-bottom: 4px;\n  }\n\n  .ns-footer a {\n    text-decoration: underline;\n    text-underline-offset: 3px;\n  }\n\n  \/* FORCING NON-ITALIC CAPTIONS OVER RULING WORDPRESS THEME DEFAULT *\/\n  .ns-page figcaption {\n      font-style: normal !important;\n  }\n\n  \/* ---------- Responsive ---------- *\/\n  @media (max-width: 900px) {\n    .ns-hero__stage {\n      min-height: 0;\n      border-radius: 8px;\n    }\n\n    .ns-hero__slide {\n      min-height: 0;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .ns-hero__bg {\n      position: relative;\n      inset: auto;\n      padding: 24px 24px 0;\n      justify-content: center;\n      order: 2;\n    }\n\n    .ns-hero__bg img {\n      max-width: 100%;\n      max-height: 280px;\n    }\n\n    .ns-hero__content {\n      max-width: none;\n      width: 100%;\n      margin: 0;\n      background: transparent;\n      border-radius: 0;\n      padding: 28px 24px 0;\n      order: 1;\n    }\n\n    .ns-impact__grid,\n    .ns-capability__grid {\n      grid-template-columns: 1fr;\n      grid-template-rows: none;\n      row-gap: 32px;\n    }\n\n    .ns-capability__item--blank {\n      display: none;\n    }\n\n    .ns-section__heading {\n      font-size: 28px;\n    }\n  }\n\n  @media (max-width: 720px) {\n    .ns-nav__links {\n      display: none;\n    }\n\n    .ns-mobile-toggle {\n      display: block;\n    }\n\n    .ns-header__inner {\n      flex-wrap: wrap;\n    }\n\n    .ns-page.is-nav-open .ns-nav__links {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n      gap: 16px;\n      width: 100%;\n      order: 3;\n      padding-top: 16px;\n    }\n\n    .ns-page.is-nav-open .ns-nav {\n      flex-wrap: wrap;\n    }\n\n    .ns-hero {\n      padding-top: 32px;\n    }\n\n    .ns-hero__slide {\n      padding: 28px 24px;\n    }\n\n    .ns-section {\n      padding: 56px 20px;\n    }\n\n    .ns-callout__band p {\n      font-size: 19px;\n    }\n\n    .ns-callout__heading,\n    .ns-capability__heading {\n      font-size: 26px;\n    }\n\n    .ns-footer {\n      padding: 48px 20px 64px;\n    }\n  }\n\n  @media (max-width: 480px) {\n    .ns-hero__slide h1 {\n      font-size: 23px;\n    }\n\n    .ns-section__heading {\n      font-size: 24px;\n    }\n  }\n<\/style>\n<style>\n  \/* --- Carousel Container & Track --- *\/\n  .ns-carousel-container {\n    position: relative;\n    width: 100%; \n    overflow: hidden;\n    background-color: #ffffff;\n    font-family: system-ui, -apple-system, sans-serif;\n  }\n\n  .ns-carousel-track {\n    display: flex;\n    width: 100%;\n  }\n\n  .ns-carousel-slide {\n    min-width: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    padding: 0rem 2rem 6rem 2rem;\n\/*    padding: 6rem 2rem; *\/\n    box-sizing: border-box;\n  }\n\n  \/* --- The Larger Hero Image (Increased by ~33%) --- *\/\n  .ns-carousel-image-wrapper {\n    width: 100%; \/* Increased from 80% to allow maximum scaling *\/\n    max-width: 1600px; \/* Increased from 1200px to allow images to render ~33% larger *\/\n    margin-left: auto;\n  }\n\n  .ns-carousel-image-wrapper img {\n    width: 100%;\n    height: auto;\n    object-fit: contain;\n    display: block;\n    border-radius: 12px; \n  }\n\n  \/* --- The High-Contrast Translucent Glass Card --- *\/\n  .ns-carousel-text-glass {\n    background: rgba(255, 255, 255, .5);\n    backdrop-filter: blur(5px);\n    -webkit-backdrop-filter: blur(5px);\n    border: 1px solid rgba(0, 0, 0, 0.08);\n    border-radius: 24px;\n    padding: 3rem;\n    width: 90%;\n    max-width: 500px;\n    box-shadow: \n      0 24px 64px rgba(0, 0, 0, 0.12), \n      0 8px 16px rgba(0, 0, 0, 0.04);\n    \n    position: absolute;\n    left: calc(8% - 15px);\n    z-index: 10;\n  }\n\n  .ns-carousel-text-glass h2 {\n    margin-top: 0;\n    margin-bottom: 1rem;\n    font-size: 2rem;\n    color: #111;\n    line-height: 1.2;\n  }\n\n  .ns-carousel-text-glass p {\n    margin: 0 0 1.5rem 0;\n    font-size: 1.1rem;\n    color: #444;\n    line-height: 1.5;\n  }\n\n  .ns-carousel-text-glass a.btn {\n    display: inline-block;\n    background: #111;\n    color: #fff;\n    padding: 0.8rem 1.5rem;\n    border-radius: 8px;\n    text-decoration: none;\n    font-weight: 600;\n    transition: background 0.2s;\n  }\n\n  .ns-carousel-text-glass a.btn:hover {\n    background: #333;\n  }\n\n\/* --- Navigation Controls --- *\/\n  .ns-carousel-nav {\n    position: absolute;\n    bottom: calc(2rem + 50px); \/* Moved up 50px *\/\n    left: 8%; \n    display: flex;\n    gap: 1rem;\n    z-index: 20;\n  }\n\n  .ns-carousel-btn {\n    background: #111;\n    color: #fff;\n    border: none;\n    border-radius: 50%;\n    width: 48px;\n    height: 48px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 1.2rem;\n    transition: transform 0.2s, background 0.2s;\n  }\n\n  .ns-carousel-btn:hover {\n    background: #333;\n    transform: scale(1.05);\n  }\n\n  \/* --- Mobile Breakpoint --- *\/\n  @media (max-width: 992px) {\n    .ns-carousel-slide {\n      flex-direction: column;\n      padding: 4rem 1rem 6rem 1rem;\n    }\n    .ns-carousel-image-wrapper {\n      width: 100%;\n      margin-left: 0;\n      padding-left: 15px;\n    }\n    .ns-carousel-text-glass {\n      position: relative;\n      left: 0;\n      width: 100%;\n      margin-top: -4rem; \n    }\n\t.ns-carousel-nav {\n      left: 50%;\n      transform: translateX(-50%);\n      bottom: calc(1rem + 50px); \/* Moved up 50px on mobile *\/\n    }\n  }\n<\/style>\n\n<div class=\"ns-page\">\n\n  <header class=\"ns-header\">\n    <div class=\"ns-header__inner\">\n      <a href=\"\/index.php\/home\/\" class=\"ns-logo\" aria-label=\"Natural Structure home\">\n        <img decoding=\"async\" class=\"ns-logo__mark\" src=\"\/wp-content\/uploads\/2026\/06\/nslogoweb.jpg\" alt=\"Natural Structure dotted circular logo mark\" width=\"120px\">\n      <\/a>\n\n      <nav class=\"ns-nav\" aria-label=\"Primary\">\n        <ul class=\"ns-nav__links\">\n          <li><a href=\"\/index.php\/home\/\" aria-current=\"page\">Home<\/a><\/li>\n          <li><a href=\"\/index.php\/home\/portfolio\/\">Portfolio<\/a><\/li>\n        <\/ul>\n        <a href=\"#contact\" class=\"ns-cta-btn ns-js-contact-cta\">Contact Me<\/a>\n      <\/nav>\n\n      <button class=\"ns-mobile-toggle\" type=\"button\" aria-label=\"Toggle menu\" aria-expanded=\"false\">\n        <span><\/span><span><\/span><span><\/span>\n      <\/button>\n    <\/div>\n  <\/header>\n\n\n  <section class=\"ns-hero\" aria-roledescription=\"carousel\" aria-label=\"Featured case studies\">\n\t<div class=\"ns-carousel-container\" id=\"ns-custom-carousel\">\n\t  <div class=\"ns-carousel-track\" id=\"ns-track\">\n\t\t\n\t\t<div class=\"ns-carousel-slide\">\n\t\t  <div class=\"ns-carousel-text-glass\">\n\t\t\t<h2>Streamlining EP SmartStart for TV &#038; Film Productions<\/h2>\n\t\t\t<p>Leveraging insights learned from research studies, usability testing sessions, and knowledge of user-centered design best practices, I streamlined their most frequently-used Roster List, Crew Drilldown, and other related workflows.<\/p>\n\t\t\t<a href=\"\/index.php\/home\/portfolio\/case-study-smartstart\/\" class=\"btn\">View Case Study<\/a>\n\t\t  <\/div>\n\t\t  <div class=\"ns-carousel-image-wrapper\">\n\t\t\t<img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/06\/smartstart-case-study-highlight-background.webp\" alt=\"EP SmartStart roster list and crew drilldown interface mockups on desktop browser windows\">\n\t\t  <\/div>\n\t\t<\/div>\n\t\n\t\t<div class=\"ns-carousel-slide\">\n\t\t  <div class=\"ns-carousel-text-glass\">\n\t\t\t<h2>Pairing Rapid Prototyping with Wireframes and UI Design<\/h2>\n\t\t\t<p>When partnering with Karten Design to create the HFXiQ\u2122 experience for Nevro\u2019s HFX neurostimulator, I created rapid prototypes that allowed us to test new feature explorations and interactions ahead of time without burdening the client\u2019s dev teams.<\/p>\n\t\t\t<a href=\"\/index.php\/home\/portfolio\/case-study-nevro\/\" class=\"btn\">View Case Study<\/a>\n\t\t  <\/div>\n\t\t  <div class=\"ns-carousel-image-wrapper\">\n\t\t\t <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/06\/nevro-case-study-highlight-background.webp\" alt=\"Nevro HFXiQ mobile app program control screens shown on three phone mockups\">\n\t\t  <\/div>\n\t\t<\/div>\n\t\n\t\t<div class=\"ns-carousel-slide\">\n\t\t  <div class=\"ns-carousel-text-glass\">\n\t\t\t<h2>Disney\u2019s MoviesAnywhere.com QC Screening Room<\/h2>\n\t\t\t<p>Designed and tested functional prototypes of backstage apps and digital workflows\u2014reducing the average time to review a title from four hours to 10 minutes.<\/p>\n\t\t\t<a href=\"\/index.php\/home\/portfolio\/case-study-disney\/\" class=\"btn\">View Case Study<\/a>\n\t\t  <\/div>\n\t\t  <div class=\"ns-carousel-image-wrapper\">\n\t\t\t<img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/06\/disney-ma-case-study-highlight-background.webp\" alt=\"Disney MoviesAnywhere QC screening room desktop application mockups with video review panel\">\n\t\t  <\/div>\n\t\t<\/div>\n\t\n\t  <\/div>\n\t\n\t  <div class=\"ns-carousel-nav\">\n\t\t<button class=\"ns-carousel-btn\" id=\"ns-prev\">&#10094;<\/button>\n\t\t<button class=\"ns-carousel-btn\" id=\"ns-next\">&#10095;<\/button>\n\t  <\/div>\n\t<\/div>\n<\/section>\n\n\n<!-- Streamlined main section heading with identity sub-headline -->\n  <section class=\"ns-section ns-impact\">\n    <h2 class=\"ns-section__heading\" style=\"margin-bottom: 12px;\">Proven Impact<\/h2>\n    <p class=\"ns-impact__intro\" style=\"font-size: 21px; font-weight: 600; line-height: 1.4; color: var(--ns-charcoal-body); margin-bottom: 48px; max-width: 850px; letter-spacing: -0.01em;\">\n      I am a UX &amp; Product Design Leader who owns the end-to-end design of digital web, mobile, TV, and XR experiences.\n    <\/p>\n\n    <div class=\"ns-impact__grid\">\n      <div class=\"ns-impact__item\">\n        <h3>Reduced Support Calls by 45%<\/h3>\n        <p>For EP SmartPO and MyEP in just two months by pitching and designing a contextual help system that walks clients through complicated tasks step-by-step if they choose.<\/p>\n      <\/div>\n\n      <div class=\"ns-impact__item\">\n        <h3>Empowered Chronic Pain Sufferers<\/h3>\n        <p>For Nevro by partnering with Karten Design to research, design, and test a medically-regulated mobile app that enables patients debilitated by chronic pain to control their implanted spinal cord stimulator and track their pain relief journey over time.<\/p>\n      <\/div>\n\n      <div class=\"ns-impact__item\">\n        <h3>Streamlined Movie Production Workflows<\/h3>\n        <p>For Disney\u2019s MoviesAnywhere.com to manage massive troves of metadata and assets for feature titles\u2014and designed their QC tool that enabled efficient review of more than 7,500 Disney and partner studio titles before launch. <strong>I helped reduce the average per-movie review time from four HOURS to just 10 MINUTES.<\/strong><\/p>\n      <\/div>\n\n      <div class=\"ns-impact__item\">\n        <h3>Optimized Customer Communications<\/h3>\n        <p>For every member touchpoint in HauteLook\u2019s customer journey by collaborating with their marketing team to streamline and redesign their email communication templates.<\/p>\n      <\/div>\n\n      <div class=\"ns-impact__item\">\n        <h3>Increased Cart Conversions by 23%<\/h3>\n        <p>And reduced shipping address errors by 35% for <a href=\"https:\/\/www.hautelook.com\" target=\"_blank\" rel=\"noopener\">HauteLook.com<\/a> by redesigning their mobile &amp; desktop checkout flows.<\/p>\n      <\/div>\n\n      <div class=\"ns-impact__item\">\n        <h3>Made \u2018Moving Day\u2019 Easier for Millions<\/h3>\n        <p>By redesigning how people search for and reserve storage units and buy essential packing supplies at over 2,000 U.S. locations on <a href=\"https:\/\/www.publicstorage.com\" target=\"_blank\" rel=\"noopener\">PublicStorage.com<\/a>\u2014helping to ensure moving day goes a little easier.<\/p>\n      <\/div>\n    <\/div>\n  <\/section>\n  \n  <div class=\"ns-oval-wrap\">\n    <div class=\"ns-oval\">\n      <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/07\/GrantSketchingDuringIdeationSession.png\" alt=\"Photo collage of whiteboard wireframe sketches and a designer writing on a whiteboard during a working session\">\n    <\/div>\n  <\/div>\n\n\n <!-- Streamlined capabilities section with Engineering Fluency added -->\n  <section class=\"ns-section ns-capability\" id=\"capabilities\">\n    <h2 class=\"ns-capability__heading\">Core Capabilities<\/h2><br><br>\n\n    <div class=\"ns-capability__grid\">\n      <div class=\"ns-capability__item\">\n        <h3>15+ Years Experience<\/h3>\n        <p>in UX, Interaction, and Services Design\u2014with a particular passion for Information Architecture, User Flows, and Microinteractions. I take ownership in design on every project, and from abstract idea to launch, I create and advocate for human-centered design solutions that are intuitive, data-driven and inclusive.<\/p>\n      <\/div>\n\n      <div class=\"ns-capability__item\">\n        <h3>Omnichannel Design for the Entire Customer Journey<\/h3>\n        <p>Expertise in designing across desktop, mobile, TV, IVR, and XR platforms, so your customer experience is consistent with every touchpoint in the customer journey.<\/p>\n      <\/div>\n\n      <div class=\"ns-capability__item\">\n        <h3>B2C, B2B, and Enterprise<\/h3>\n        <p>Well-practiced in designing for business enterprise environments (B2B) with back-office and corporate users, and consumer markets (B2C) where customers are purchasing personal services and products.<\/p>\n      <\/div>\n\n      <div class=\"ns-capability__item\">\n        <h3>Breadth of Knowledge Across Multiple Verticals<\/h3>\n        <p>E-commerce, Retail, Beauty, Entertainment, Payroll\/HR, Sports, Medical are just some of the vertical markets I\u2019ve practiced in\u2014and my skills can be applied to new ones through my commitment to immersive onboarding.<\/p>\n      <\/div>\n\n      <div class=\"ns-capability__item\">\n        <h3>From Startups to Global Digital Consultancies<\/h3>\n        <p>I\u2019ve had the privilege of working with and leading diverse teams, from small to incredibly large. This includes global digital consultancies like iXL and Sapient, advertising and design agencies such as Schematic and Ignited, in-house design divisions at Disney, DirecTV, and HauteLook, and even as a sole contributor partnering with organizations on UX\/Product\/Service Design initiatives.<\/p>\n      <\/div>\n\n      <!-- Replaced the empty spacer block with your new development background capability -->\n      <div class=\"ns-capability__item\">\n        <h3>Engineering Fluency<\/h3>\n        <p>I spent my early career as a full-stack developer and database designer before transitioning to UX. This technical foundation allows me to speak the same language as engineering teams, build immediate rapport, and design highly feasible solutions that dramatically reduce handoff friction.<\/p>\n      <\/div>\n    <\/div>\n  <\/section>\n  \n  <footer class=\"ns-footer\" id=\"contact\">\n    <div class=\"ns-footer__inner\">\n      <h2>Contact Me<\/h2>\n      <p class=\"ns-footer__line\">Grant Houston<\/p>\n      <p class=\"ns-footer__line\">310.426.8222<\/p>\n      <p class=\"ns-footer__line\"><a href=\"mailto:grant@naturalstructure.com\">grant@naturalstructure.com<\/a><\/p>\n      <p class=\"ns-footer__line\"><a href=\"https:\/\/www.linkedin.com\/in\/granthouston\" target=\"_blank\" rel=\"noopener\">https:\/\/www.linkedin.com\/in\/granthouston<\/a><\/p>\n    <\/div>\n  <\/footer>\n\n<\/div>\n\n<script>\n  document.addEventListener('DOMContentLoaded', () => {\n    const track = document.getElementById('ns-track');\n    const carouselContainer = document.getElementById('ns-custom-carousel');\n    let slides = Array.from(track.children);\n    const nextButton = document.getElementById('ns-next');\n    const prevButton = document.getElementById('ns-prev');\n    \n    \/\/ Clone first and last slides for infinite loop\n    const firstClone = slides[0].cloneNode(true);\n    const lastClone = slides[slides.length - 1].cloneNode(true);\n    \n    track.appendChild(firstClone);\n    track.insertBefore(lastClone, slides[0]);\n    \n    slides = Array.from(track.children);\n    \n    let currentIndex = 1; \n    let isTransitioning = false;\n    let autoPlayTimer;\n\n    \/\/ Initial positioning\n    track.style.transform = `translateX(-${currentIndex * 100}%)`;\n\n    const updateSlidePosition = (smooth = true) => {\n      if (smooth) {\n        track.style.transition = 'transform 0.6s cubic-bezier(0.25, 1, 0.5, 1)';\n      } else {\n        track.style.transition = 'none';\n      }\n      track.style.transform = `translateX(-${currentIndex * 100}%)`;\n    };\n\n    const moveToNextSlide = () => {\n      if (isTransitioning) return;\n      isTransitioning = true;\n      currentIndex++;\n      updateSlidePosition();\n    };\n\n    const moveToPrevSlide = () => {\n      if (isTransitioning) return;\n      isTransitioning = true;\n      currentIndex--;\n      updateSlidePosition();\n    };\n\n    \/\/ Button Event Listeners\n    nextButton.addEventListener('click', moveToNextSlide);\n    prevButton.addEventListener('click', moveToPrevSlide);\n\n    \/\/ Reset transition lock and handle infinite loop snapping\n    track.addEventListener('transitionend', () => {\n      isTransitioning = false;\n      \n      if (slides[currentIndex] === firstClone) {\n        currentIndex = 1;\n        updateSlidePosition(false);\n      }\n      \n      if (slides[currentIndex] === lastClone) {\n        currentIndex = slides.length - 2;\n        updateSlidePosition(false);\n      }\n    });\n\n    \/\/ Auto-Advance Logic\n    const startAutoPlay = () => {\n      \/\/ Clear any existing timers first to prevent duplicate loops\n      clearInterval(autoPlayTimer);\n      autoPlayTimer = setInterval(moveToNextSlide, 5000);\n    };\n\n    const stopAutoPlay = () => {\n      clearInterval(autoPlayTimer);\n    };\n\n    \/\/ Pause auto-advance on mouse hover and touch\n    carouselContainer.addEventListener('mouseenter', stopAutoPlay);\n    carouselContainer.addEventListener('mouseleave', startAutoPlay);\n    \n    \/\/ For touch devices\n    carouselContainer.addEventListener('touchstart', stopAutoPlay, {passive: true});\n    carouselContainer.addEventListener('touchend', startAutoPlay, {passive: true});\n\n    \/\/ Kick off the auto-play timer on load\n    startAutoPlay();\n  });\n<\/script>\n\n<script>\n\/* ---- Smooth scroll for Contact Me CTA ---- *\/\n  var contactCta = root.querySelector('.ns-js-contact-cta');\n  if (contactCta) {\n    contactCta.addEventListener('click', function (e) {\n      var target = document.getElementById('contact');\n      if (target) {\n        e.preventDefault();\n        target.scrollIntoView({ behavior: 'smooth', block: 'start' });\n      }\n    });\n  }\n\n  \/* ---- Mobile nav toggle ---- *\/\n  var mobileToggle = root.querySelector('.ns-mobile-toggle');\n  if (mobileToggle) {\n    mobileToggle.addEventListener('click', function () {\n      var isOpen = root.classList.toggle('is-nav-open');\n      mobileToggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false');\n    });\n  }\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Grant Houston &#8211; User Experience &amp; Product Design Leader &#8211; Natural Structure Home Portfolio Contact Me Streamlining EP SmartStart for TV &#038; Film Productions Leveraging insights learned from research studies, usability testing sessions, and knowledge of user-centered design best practices, I streamlined their most frequently-used Roster List, Crew Drilldown, and other related workflows. View Case [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/naturalstructure.com\/index.php\/wp-json\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/naturalstructure.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/naturalstructure.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/naturalstructure.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/naturalstructure.com\/index.php\/wp-json\/wp\/v2\/comments?post=2"}],"version-history":[{"count":93,"href":"https:\/\/naturalstructure.com\/index.php\/wp-json\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":562,"href":"https:\/\/naturalstructure.com\/index.php\/wp-json\/wp\/v2\/pages\/2\/revisions\/562"}],"wp:attachment":[{"href":"https:\/\/naturalstructure.com\/index.php\/wp-json\/wp\/v2\/media?parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}