{"id":790,"date":"2026-08-31T17:29:26","date_gmt":"2026-08-31T17:29:26","guid":{"rendered":"https:\/\/naturalstructure.com\/?page_id=790"},"modified":"2026-08-31T17:53:12","modified_gmt":"2026-08-31T17:53:12","slug":"case-study-nevro","status":"publish","type":"page","link":"https:\/\/naturalstructure.com\/?page_id=790","title":{"rendered":"case-study-nevro"},"content":{"rendered":"\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Grant Houston &#8211; Case Study &#8211; Pairing Rapid Prototyping with Wireframes &amp; UI Design<\/title>\n<style>\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; min-height: 44px; display: inline-flex; align-items: center; }\n    .ns-cta-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; 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; background-color: var(--ns-white) !important; border: none; cursor: pointer; padding: 10px; min-width: 44px; min-height: 44px; border-radius: 6px; -webkit-tap-highlight-color: transparent; outline: none;\n  }\n  .ns-mobile-toggle span { display: block; width: 24px; height: 2px; background: var(--ns-charcoal-heading); margin: 5px 0; }\n  \n    .ns-cs { max-width: var(--ns-max-width); margin: 0 auto; padding: 0 var(--ns-gutter); }\n    .ns-cs-hero { padding: 56px var(--ns-gutter) 8px; }\n    .ns-cs-hero h1 { font-size: 36px; letter-spacing: -0.01em; }\n    .ns-cs-hero p { font-size: 17px; margin-top: 14px; }\n    .ns-cs-figure { margin: 32px auto; }\n    .ns-cs-figure figcaption { font-size: 13.5px; color: #6B6B6B; margin-top: 10px; line-height: 1.5; }\n    .ns-cs-section { padding: 48px 0; }\n    .ns-cs-section h2 { font-size: 26px; margin-bottom: 16px; margin-top: 24px; }\n    .ns-cs-section h3 { font-size: 17px; margin: 32px 0 8px; }\n    .ns-cs-section p + p, .ns-cs-section ul, .ns-cs-section ol { margin-top: 14px; margin-bottom: 14px; }\n    .ns-cs-section li { margin-bottom: 8px; margin-left: 0px;}\n    .ns-cs-section p { font-size: 15.5px; }\n    .ns-cs-section + .ns-cs-section { border-top: 1px solid var(--ns-border); }\n    .ns-cs-twocol-list { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 0px; }\n    .ns-cs-twocol-list h3 { font-size: 15px; letter-spacing: 0.04em; margin: 32px 0 10px; }\n    .ns-cs-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 32px 0; }\n    .ns-cs-threecol { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; margin: 32px 0; }\n    .ns-cs-fourcol { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 24px; margin: 16px 0; }\n    \n    .ns-cs-callout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 28px 0; }\n    .ns-cs-callout { border-left: 3px solid var(--ns-blue); background: var(--ns-gray-bg); border-radius: 4px; padding: 18px 20px; }\n    .ns-cs-callout strong { display: block; font-size: 14.5px; margin-bottom: 4px; }\n    \n    .ns-cs-video { position: relative; margin: 28px 0; border-radius: 6px; overflow: hidden; background: #000; padding-bottom: 56.25%; height: 0; }\n    .ns-cs-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }\n    \n    .ns-footer { padding: 64px var(--ns-gutter) 80px; border-top: 1px solid var(--ns-border); margin-top: 24px; }\n    .ns-footer__inner { max-width: var(--ns-max-width); margin: 0 auto; }\n    .ns-footer h2 { font-size: 30px; margin-bottom: 18px; }\n    .ns-footer__line { font-size: 16px; margin-bottom: 0; line-height: 1.4; }\n    .ns-footer a { color: var(--ns-charcoal-heading); text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; }\n    \n    \/* Lightbox *\/\n    .lightbox-trigger { cursor: zoom-in; transition: opacity 0.2s ease; border: 0px solid var(--ns-border); }\n    .lightbox-trigger:hover { opacity: 0.9; }\n    .lightbox-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.85); align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; }\n    .lightbox-modal.active { display: flex; opacity: 1; }\n    .lightbox-content { max-width: 90%; max-height: 90vh; border-radius: 4px; transform: scale(0.95); transition: transform 0.3s ease; }\n    .lightbox-modal.active .lightbox-content { transform: scale(1); }\n    .lightbox-close { position: absolute; top: 25px; right: 40px; color: #f1f1f1; font-size: 40px; font-weight: bold; cursor: pointer; z-index: 10000; }\n\n    .carousel-container { position: relative; width: 100%; margin: 30px auto 10px auto; border: 0px solid var(--ns-border); background: var(--ns-white-bg); border-radius: 6px; overflow: hidden; }\n    .carousel-track-container { width: 100%; overflow: hidden; }\n    .carousel-track { display: flex; padding: 0; margin: 0; list-style: none; transition: transform 0.4s ease-in-out; }\n    .carousel-slide { min-width: 100%; box-sizing: border-box; padding: 0px; display: flex; justify-content: center; align-items: center; }\n    .carousel-image { max-width: 100%; height: auto; display: block; border-radius: 4px; }\n    \n    .carousel-btn { \n      position: absolute; top: 50%; transform: translateY(-50%); background-color: var(--ns-blue) !important; color: white !important; border: none; border-radius: 50%; width: 44px; height: 44px; cursor: pointer; font-size: 1.2rem; z-index: 10; display: flex; justify-content: center; align-items: center; transition: background-color 0.15s ease; -webkit-tap-highlight-color: transparent; outline: none;\n    }\n    .carousel-btn:hover { background-color: var(--ns-blue-hover) !important; color: white !important; }\n    .carousel-btn:focus, .carousel-btn:focus-visible, .carousel-btn:active { background-color: var(--ns-blue) !important; color: white !important; outline: none; }\n    .carousel-btn:disabled { opacity: 0.3 !important; cursor: not-allowed !important; }\n\n    .prev-btn { left: 15px; } .next-btn { right: 15px; }\n    .carousel-indicator { text-align: center; font-size: 0.95rem; color: #666; margin-bottom: 40px; margin-top: 10px; }\n\n    \/* Unified Impact & Decision Grid *\/\n    .ns-impact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 32px 0 48px; }\n    .ns-impact-card { background: var(--ns-gray-bg); border: 1px solid var(--ns-border); border-left: 4px solid var(--ns-blue); border-radius: 0 8px 8px 0; padding: 20px 22px; display: flex; flex-direction: column; }\n    .ns-impact-card__label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ns-blue); margin-bottom: 6px; }\n    .ns-impact-card__title { font-size: 16px; font-weight: 800; color: var(--ns-charcoal-heading); margin-bottom: 8px; line-height: 1.3; }\n    .ns-impact-card__desc { font-size: 14px; color: var(--ns-charcoal-body); line-height: 1.5; }\n\n    @media (max-width: 720px) {\n      .ns-header__inner { padding: 14px 20px; flex-wrap: wrap; }\n      .ns-nav { display: none; width: 100%; order: 3; flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 16px; }\n      .ns-mobile-toggle { display: block; }\n      .ns-page.is-nav-open .ns-nav { display: flex; }\n      .ns-page.is-nav-open .ns-nav__links { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; width: 100%; }\n      .ns-cs { padding: 0 20px; }\n      .ns-cs-hero { padding: 36px 20px 8px; }\n      .ns-footer { padding: 40px 20px 60px; }\n      .ns-impact-grid { grid-template-columns: 1fr; gap: 16px; }\n    }\n\n    .ns-page figcaption, .ns-page .ux-caption { font-style: normal !important; }\n<\/style>\n\n<div class=\"ns-page\">\n\n  <header class=\"ns-header\">\n    <div class=\"ns-header__inner\">\n      <a href=\"\/?page_id=763\" 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=\"120\">\n      <\/a>\n\n      <nav class=\"ns-nav\" aria-label=\"Primary\">\n        <ul class=\"ns-nav__links\">\n          <li><a href=\"\/?page_id=763\">Home<\/a><\/li>\n          <li><a href=\"\/?page_id=777\">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  <section class=\"ns-cs-hero ns-cs\" style=\"text-align: center;\">\n    <h1>Pairing Rapid Prototyping with Wireframes and UI Design<\/h1>\n    <p>Guiding product strategy, FDA accessibility compliance, and cross-functional alignment for a next-generation medical device ecosystem.<\/p>\n  <\/section>\n\n  <figure class=\"ns-cs-figure ns-cs\">\n    <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/07\/case-study-nevro-hero.png\" alt=\"HFXiQ program control screen\">\n  <\/figure>\n\n  <section class=\"ns-cs\">\n    <div class=\"ns-impact-grid\">\n      <div class=\"ns-impact-card\">\n        <span class=\"ns-impact-card__label\">Product Strategy<\/span>\n        <div class=\"ns-impact-card__title\">&#8220;One App&#8221; Recommendation<\/div>\n        <p class=\"ns-impact-card__desc\">Advocated combining two planned separate apps into a single interface, avoiding fragmented patient experience and technical debt.<\/p>\n      <\/div>\n\n      <div class=\"ns-impact-card\">\n        <span class=\"ns-impact-card__label\">Compliance<\/span>\n        <div class=\"ns-impact-card__title\">FDA Accessibility Standards<\/div>\n        <p class=\"ns-impact-card__desc\">Designed screen-reader navigation patterns and high-contrast views required for FDA certification.<\/p>\n      <\/div>\n\n      <div class=\"ns-impact-card\">\n        <span class=\"ns-impact-card__label\">Engineering Handoff<\/span>\n        <div class=\"ns-impact-card__title\">Alphanumeric Spec Specs<\/div>\n        <p class=\"ns-impact-card__desc\">Created an ID-tagged spec system that separated UI text from design files, allowing asynchronous copy reviews without unblocking code builds.<\/p>\n      <\/div>\n\n      <div class=\"ns-impact-card\">\n        <span class=\"ns-impact-card__label\">Interaction Design<\/span>\n        <div class=\"ns-impact-card__title\">Handling Device Latency<\/div>\n        <p class=\"ns-impact-card__desc\">Engineered clear visual confirmation screens to account for Bluetooth delay between phone commands and the implanted device.<\/p>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <section class=\"ns-cs-section ns-cs\">\n    <h2>Project Overview<\/h2>\n    <p>This case study details the user experience (UX) design process for the Nevro Patient Therapy App (PTA) and Pathfinder applications. Developed in collaboration between Karten Design and Nevro with Velentium as the development partner, these applications aimed to provide patients with enhanced control and insights into their HFX implant therapy. The project focused on creating intuitive interfaces for managing stimulation, tracking progress, and receiving personalized recommendations.<\/p>\n    <p><em>Project Duration:<\/em> Feb 2018 \u2013 October 2018<\/p>\n    \n    <div class=\"ns-cs-twocol-list\">\n      <div>\n        <h3>My Role<\/h3>\n        <ul>\n          <li>Sr. UX Designer (owning end-to-end design strategy)<\/li>\n          <li>Research synthesis &amp; user journey mapping<\/li>\n          <li>Systemic Information Architecture<\/li>\n          <li>Interactive Axure prototyping &amp; technical spec documentation<\/li>\n          <li>Centralized alphanumeric content inventory management<\/li>\n        <\/ul>\n      <\/div>\n      <div>\n        <h3>Team Members<\/h3>\n        <ul>\n          <li>Project Lead<\/li>\n          <li>Sr. UX Designer (myself)<\/li>\n          <li>UI Designer &amp; Sr. UX Researcher<\/li>\n          <li>Project Manager<\/li>\n        <\/ul>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <section class=\"ns-cs-section ns-cs\">\n    <h2>Design Roadmap<\/h2>\n    <p>Our design process was iterative and collaborative, comprising of an initial 3-month design sprint followed by six bi-weekly sprints. We had weekly reviews for continuous feedback from Nevro and Velentium. Key phases included:<\/p>\n    <ol>\n        <li><strong>Information Architecture &amp; User Flows:<\/strong> Mapping core navigation pathways for onboarding, daily therapy adjustments, and pain logging.<\/li>\n        <li><strong>Wireframing &amp; Visual Design:<\/strong> Building low-fidelity structural layouts in tandem with a visual designer who established the production UI language.<\/li>\n        <li><strong>Interactive Prototyping:<\/strong> Creating prototypes to test physical device pairing routines and custom slider mechanics.<\/li>\n        <li><strong>Spec Documentation &amp; Content Inventory:<\/strong> Tagging wireframe elements with a permanent alphanumeric ID system linked to a master copy directory.<\/li>\n    <\/ol>\n  <\/section>\n\t\n  <section class=\"ns-cs-section ns-cs\">\n    <h2>Product Strategy: Consolidating Two Apps Into One<\/h2>\n    <p>Patients using the Nevro HFX implant for chronic pain needed a reliable mobile app to adjust therapy programs and log daily outcomes. Initially, the client requested two separate apps: <\/p>\n    <ul>\n        <li><strong>Nevro PTA (Patient Therapy App):<\/strong> A manual remote-control app for daily stimulation adjustments and basic pain tracking.<\/li>\n        <li><strong>Nevro Pathfinder:<\/strong> An automated recommendation tool that suggested new program settings based on logged survey data.<\/li>\n    <\/ul>\n    <p>Having two standalone apps for the same medical hardware presented clear usability issues: patients would have to switch between apps to manage a single device, creating confusion and doubling engineering maintenance. I recommended merging both toolsets into a single, unified application structure, simplifying the experience for patients and reducing long-term code complexity.<\/p>\n    <figure class=\"ns-cs-figure ns-cs\">\n          <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/07\/why-two-apps-with-shadow.webp\" alt=\"Frustrated woman holding two smartphones up\" class=\"lightbox-trigger\">\n    <\/figure>\n  <\/section>\n\t\n  <section class=\"ns-cs-section ns-cs\">\n    <h2>Core UX Priorities<\/h2>\n    <ul>\n        <li><strong>Clarity:<\/strong> Simplifying complex medical device controls into clear, recognizable interface patterns.<\/li>\n        <li><strong>Patient Engagement:<\/strong> Making daily pain journaling feel quick and rewarding without overwhelming the user.<\/li>\n        <li><strong>Accessibility (FDA Requirement):<\/strong> Structuring the DOM hierarchy to fully support screen readers and dynamic text sizing.<\/li>\n    <\/ul>\n  <\/section>\n\n  <section class=\"ns-cs-section ns-cs\">\n    <h2>Onboarding &amp; Hardware Pairing<\/h2>\n    <p>The initial setup flow was critical for a smooth patient onboarding experience. Key steps included:<\/p>\n    <ul style=\"list-style-type: none;\">\n        <li style=\"list-style-type: '1.1'; padding-left: 10px; margin:10px;\"><strong> EULA Acceptance<\/strong> \u2013 Ensuring required medical disclaimers were read and accepted.<\/li>\n        <li style=\"list-style-type: '1.2'; padding-left: 10px; margin:10px;\"><strong> Compatibility Check<\/strong> \u2013 Verifying the phone&#8217;s operating system and Bluetooth version supported the implant hardware.<\/li>\n        <li style=\"list-style-type: '1.3'; padding-left: 10px; margin:10px;\"><strong> Bluetooth Discovery &amp; Pairing<\/strong> \u2013 Guiding the user through searching for and pairing with their implanted device.<\/li>\n        <li style=\"list-style-type: '1.4'; padding-left: 10px; margin:10px;\"><strong> Profile Setup<\/strong> \u2013 Personalizing therapy goals and selecting target pain areas.<\/li>\n        <li style=\"list-style-type: '1.5'; padding-left: 10px; margin:10px;\"><strong> Push Notifications<\/strong> \u2013 Setting up gentle reminders for daily pain surveys.<\/li>\n        <li style=\"list-style-type: '1.6'; padding-left: 10px; margin:10px;\"><strong> App Security<\/strong> \u2013 Adding PIN and biometric protection to prevent accidental adjustments.<\/li>\n    <\/ul>\n\n    <h3>Onboarding User Flows<\/h3>\n    <p>Use the arrows below to browse through the onboarding wireflows.<\/p>\n    <div class=\"carousel-container\">\n        <button class=\"carousel-btn prev-btn\" aria-label=\"Previous Flow\">\u276e<\/button>\n        <div class=\"carousel-track-container\">\n            <ul class=\"carousel-track\">\n                <li class=\"carousel-slide current-slide\">\n                    <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/07\/nvr-userflow-12.png\" alt=\"User Flow 1 &amp; 2\" class=\"carousel-image\">\n                <\/li>\n                <li class=\"carousel-slide\">\n                    <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/07\/nvr-userflow-3.png\" alt=\"User Flow 3: Discover &amp; Pair\" class=\"carousel-image\">\n                <\/li>\n                <li class=\"carousel-slide\">\n                    <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/07\/nvr-userflow-45.png\" alt=\"User Flow 4 &amp; 5\" class=\"carousel-image\">\n                <\/li>\n                <li class=\"carousel-slide\">\n                    <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/07\/nvr-userflow-6.png\" alt=\"User Flow 6: App Security Settings\" class=\"carousel-image\">\n                <\/li>\n            <\/ul>\n        <\/div>\n        <button class=\"carousel-btn next-btn\" aria-label=\"Next Flow\">\u276f<\/button>\n    <\/div>\n    <div class=\"carousel-indicator\">Item 1 of 6<\/div>\n  <\/section>\n\n  <section class=\"ns-cs-section ns-cs\">\n    <h2>Testing the Onboarding Flow<\/h2>\n    <p>Below is an early prototype walkthrough demonstrating how we tested the Bluetooth setup and hardware pairing flows with users.<\/p>\n\t\t\n    <div class=\"ns-cs-video\">\n        <iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/s578rh2udEU?si=TX-lpMSSSRFMyrjV\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen=\"\"><\/iframe>\n    <\/div>\n  <\/section>\n\n  <section class=\"ns-cs-section ns-cs\">\n    <h2>Final UI: Bluetooth Pairing States<\/h2>\n    <p>Following prototype feedback, our visual designer created step-by-step animations and UI states to guide patients clearly through hardware pairing.<\/p>\n    <figure class=\"ns-cs-figure\">\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/07\/nevro-appendix-e-bluetooth-pairing-animation-and-content-states.webp\" alt=\"Visual Design\" class=\"lightbox-trigger\">\n    <\/figure>\n  <\/section>\n\n  <section class=\"ns-cs-section ns-cs\">\n    <h2>Designing Around Physical System Latency<\/h2>\n    <p>When a patient adjusts stimulation levels in the app, there is a physical delay while the phone sends the Bluetooth signal to the implanted device and receives confirmation back. To prevent patients from tapping repeatedly or worrying that the app froze, we designed explicit loading transitions that clearly show signal progress during these delay windows.<\/p>\n    \n    <h3>Stimulation Controls &amp; Feedback States<\/h3>\n    <div class=\"ns-cs-video\">\n        <iframe src=\"https:\/\/youtube.com\/embed\/cpET2fUzwDo?si=mmdiTNngMxIwnRoC\" title=\"Prototype of how a patient would turn their Nevro stimulator on and off.\" allowfullscreen=\"\"><\/iframe>\n    <\/div>\n  <\/section>\n    \n  <section class=\"ns-cs-section ns-cs\">\n    <h2>Data Visualization &amp; Pain Progress Tracking<\/h2>\n    <p>To give patients useful feedback on how their treatment was progressing, we designed clear data summary screens showing pain scores over time.<\/p>\n    <p>Below are three early prototype variations we tested to evaluate different graph layouts and scrolling behaviors:<\/p>\n    \n    <div class=\"ns-cs-threecol\">\n        <div>\n            <figure class=\"ns-cs-figure\">\n                <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/07\/nevro-my-progress-prototype-v1-A.gif\" alt=\"Prototype Left\" class=\"lightbox-trigger\">\n                <figcaption><strong>Left:<\/strong> Early wireframe showing current therapy settings and basic progress metrics.<\/figcaption>\n            <\/figure>\n        <\/div>\n        <div>\n            <figure class=\"ns-cs-figure\">\n               <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/07\/nevro-my-progress-prototype-v2-A.gif\" alt=\"Prototype Middle\" class=\"lightbox-trigger\">\n               <figcaption><strong>Middle:<\/strong> Horizontal card carousel for reviewing past weekly and monthly scores.<\/figcaption>\n            <\/figure>\n        <\/div>\n        <div>\n            <figure class=\"ns-cs-figure\">\n                <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/07\/nevro-my-progress-prototype-v3-A.gif\" alt=\"Prototype Right\" class=\"lightbox-trigger\">\n                <figcaption><strong>Right:<\/strong> Full dashboard view with toggle controls between weekly and monthly trends.<\/figcaption>\n            <\/figure>\n        <\/div>\n    <\/div>\n    \n    <h3>Timing Prompts Around Treatment Cycles<\/h3>\n    <p>Implanted spinal stimulators require roughly 48 hours for a patient&#8217;s body to adjust to a new setting. Prompting a patient for a pain survey right after a setting change yields inaccurate data. To address this, the UI suppresses survey prompts during the 48-hour adjustment window, then displays a clear survey banner on the home screen when it&#8217;s time to log feedback.<\/p>\n\n    <h3>Survey Flows &amp; Screen States<\/h3>\n    <div class=\"ns-cs-compare\">\n        <figure class=\"ns-cs-figure\">\n            <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/07\/nevro-appendix-b-pathfinder-survey-wire-data-flows.webp\" alt=\"Survey Wire &amp; Data Flows 1\" class=\"lightbox-trigger\">\n        <\/figure>\n        <figure class=\"ns-cs-figure\">\n            <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/07\/nevro-appendix-b-pathfinder-survey-wire-data-flows.webp\" alt=\"Survey Wire &amp; Data Flows 2\" class=\"lightbox-trigger\">\n        <\/figure>\n    <\/div>\n        \n    <h3>Home Screen Survey Prompts<\/h3>\n    <figure class=\"ns-cs-figure\">\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/07\/nevro-pathfinder-pta-survey-ctas-home-screen-states.webp\" alt=\"Home Screen States Diagram for Survey CTAs\" class=\"lightbox-trigger\">\n    <\/figure>\n\n    <h3>Survey Wireflow Map<\/h3>\n    <figure class=\"ns-cs-figure\">\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/07\/nevro-2.4-pathfinder-pta-survey-wireflow.png\" alt=\"Survey Wireflow\" class=\"lightbox-trigger\">\n    <\/figure>\n\n    <h3>Survey Cards &amp; Exit Confirmations<\/h3>\n    <div class=\"ns-cs-threecol\">\n        <div>\n            <figure class=\"ns-cs-figure\">\n                <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/07\/nevro-2.4-survey-cards-q1-pain-relief.png\" alt=\"Survey Q1\" class=\"lightbox-trigger\">\n            <\/figure>\n        <\/div>\n        <div>\n            <figure class=\"ns-cs-figure\">\n                <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/07\/nevro-2.4-survey-cards-q2-pain-scores.png\" alt=\"Survey Q2\" class=\"lightbox-trigger\">\n            <\/figure>\n        <\/div>\n        <div>\n            <figure class=\"ns-cs-figure\">\n                <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/07\/nevro-2.4-survey-cards-q3-activity-level-q4-pain-medication.png\" alt=\"Survey Q3 &amp; Q4\" class=\"lightbox-trigger\">\n            <\/figure>\n        <\/div>\n    <\/div>\n    <div class=\"ns-cs-threecol\">\n        <div>\n            <figure class=\"ns-cs-figure\">\n                <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/07\/nevro-2.4-survey-end-cards-pathfinder.png\" alt=\"Pathfinder End Card\" class=\"lightbox-trigger\">\n            <\/figure>\n        <\/div>\n        <div>\n            <figure class=\"ns-cs-figure\">\n                <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/07\/nevro-2.4-survey-end-cards-pta.png\" alt=\"PTA End Card\" class=\"lightbox-trigger\">\n            <\/figure>\n        <\/div>\n        <div>\n            <figure class=\"ns-cs-figure\">\n                <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/07\/nevro-2.4-exiting-survey-early-pta-pathfinder.png\" alt=\"Exit Confirmation\" class=\"lightbox-trigger\">\n            <\/figure>\n        <\/div>\n    <\/div>\n  <\/section>\n\n  <section class=\"ns-cs-section ns-cs\">\n    <h2>Hardware State Alerts<\/h2>\n    <p>Device alerts\u2014such as low battery or lost Bluetooth connection\u2014are displayed cleanly in the app header and via OS push notifications.<\/p>\n    <figure class=\"ns-cs-figure\">\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/07\/nevro-battery-states-detailed.webp\" alt=\"Battery Alerts\" class=\"lightbox-trigger\">\n    <\/figure>\n    <figure class=\"ns-cs-figure\">\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/07\/col4-nevro-battery-bluetooth-connection-notifications-alerts.webp\" alt=\"Battery Alerts\" class=\"lightbox-trigger\">\n    <\/figure>   \t\n  <\/section>\n  \n  <section class=\"ns-cs-section ns-cs\">\n    <h2>Leveraging Content Strategy to Mitigate Risk<\/h2>\n    <p>In medical software, interface text and safety disclaimers go through continuous legal and clinical review. Updating text strings directly inside design files during early sprints created unnecessary bottlenecks for our stakeholders at Nevro and our development partners.<\/p>\n    <p>To mitigate this risk, I implemented a content inventory system that comprised of a spreadsheet and annotation IDs. Every single piece of text, instructional copy, default field value, list of menu options, header, error, and alert in the wireframes was tagged with an annotation marker, whose corresponding row in the spreadsheet contained copy and any conditional logic rules if applicable. Medical and legal leads could update wording directly in the spreadsheet without requiring designer edits to the wireframes and UI design files on a weekly basis.<\/p>\n    <p>This approach also makes it much easier to implement multi-lingual and localization features, which are required for compliance with FDA regulations.<\/p>\n    <figure class=\"ns-cs-figure\">\n        <a href=\"\/wp-content\/uploads\/2026\/07\/Content-Inventory-Nevro-HF10-Content-Inventory.pdf\" target=\"_blank\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/07\/nevro-content-inventory-partial.webp\" alt=\"Content Inventory\"><\/a>\n        <figcaption><em>Content Inventory spreadsheet (click to open PDF version)<\/em><\/figcaption>\n    <\/figure>\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<div id=\"lightbox-modal\" class=\"lightbox-modal\">\n    <span class=\"lightbox-close\">\u00d7<\/span>\n    <img class=\"lightbox-content\" id=\"lightbox-img\" alt=\"Expanded view\">\n<\/div>\n\n<script>\n    document.addEventListener('DOMContentLoaded', () => {\n        const modal = document.getElementById('lightbox-modal'), modalImg = document.getElementById('lightbox-img'), closeBtn = document.querySelector('.lightbox-close');\n        document.querySelectorAll('.lightbox-trigger').forEach(img => { img.addEventListener('click', () => { modal.classList.add('active'); modalImg.src = img.src; }); });\n        const closeModal = () => { modal.classList.remove('active'); setTimeout(() => { modalImg.src = ''; }, 300); };\n        if (closeBtn) closeBtn.addEventListener('click', closeModal);\n        if (modal) modal.addEventListener('click', (e) => { if (e.target === modal) closeModal(); });\n        document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && modal.classList.contains('active')) closeModal(); });\n\n        const track = document.querySelector('.carousel-track');\n        if (track) {\n            const slides = Array.from(track.children), nextBtn = document.querySelector('.next-btn'), prevBtn = document.querySelector('.prev-btn'), indicator = document.querySelector('.carousel-indicator');\n            let currentIndex = 0;\n            const flowLabels = [\"Item 1 & 2 of 6\", \"Item 3 of 6\", \"Item 4 & 5 of 6\", \"Item 6 of 6\"];\n            const updateButtons = () => { prevBtn.disabled = currentIndex === 0; nextBtn.disabled = currentIndex === slides.length - 1; };\n            const updateCarousel = (index) => { if (index < 0 || index >= slides.length) return; currentIndex = index; const slideWidth = slides[0].getBoundingClientRect().width; track.style.transform = `translateX(-${slideWidth * currentIndex}px)`; indicator.textContent = flowLabels[currentIndex]; updateButtons(); };\n            nextBtn.addEventListener('click', () => updateCarousel(currentIndex + 1));\n            prevBtn.addEventListener('click', () => updateCarousel(currentIndex - 1));\n            window.addEventListener('resize', () => { track.style.transition = 'none'; updateCarousel(currentIndex); setTimeout(() => track.style.transition = 'transform 0.4s ease-in-out', 10); });\n            updateButtons();\n        }\n\n        var root = document.querySelector('.ns-page');\n        var cta = root.querySelector('.ns-js-contact-cta');\n        if (cta) cta.addEventListener('click', function (e) {\n          var t = document.getElementById('contact');\n          if (t) { e.preventDefault(); t.scrollIntoView({ behavior: 'smooth', block: 'start' }); }\n        });\n\n        var toggle = root.querySelector('.ns-mobile-toggle');\n        if (toggle) toggle.addEventListener('click', function () {\n          var open = root.classList.toggle('is-nav-open');\n          toggle.setAttribute('aria-expanded', open ? 'true' : 'false');\n        });\n    });\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Grant Houston &#8211; Case Study &#8211; Pairing Rapid Prototyping with Wireframes &amp; UI Design Home Portfolio Contact Me Pairing Rapid Prototyping with Wireframes and UI Design Guiding product strategy, FDA accessibility compliance, and cross-functional alignment for a next-generation medical device ecosystem. Product Strategy &#8220;One App&#8221; Recommendation Advocated combining two planned separate apps into a single [&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-790","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/naturalstructure.com\/index.php?rest_route=\/wp\/v2\/pages\/790","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/naturalstructure.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/naturalstructure.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/naturalstructure.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/naturalstructure.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=790"}],"version-history":[{"count":4,"href":"https:\/\/naturalstructure.com\/index.php?rest_route=\/wp\/v2\/pages\/790\/revisions"}],"predecessor-version":[{"id":811,"href":"https:\/\/naturalstructure.com\/index.php?rest_route=\/wp\/v2\/pages\/790\/revisions\/811"}],"wp:attachment":[{"href":"https:\/\/naturalstructure.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=790"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}