{"id":89,"date":"2026-06-25T03:09:04","date_gmt":"2026-06-25T03:09:04","guid":{"rendered":"http:\/\/192.168.1.188\/?page_id=89"},"modified":"2026-07-15T22:45:29","modified_gmt":"2026-07-15T22:45:29","slug":"case-study-nevro","status":"publish","type":"page","link":"https:\/\/naturalstructure.com\/index.php\/home\/portfolio\/case-study-nevro\/","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; 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; }\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-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; }\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: 20px;}\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    \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 *\/\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    .carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); background: var(--ns-blue); color: white; 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; }\n    .carousel-btn:disabled { opacity: 0.3; cursor: not-allowed; }\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    \/* CONSOLIDATED & INTEGRATED GRID STYLES *\/\n    .ns-cs-report-grid {\n      display: grid;\n      grid-template-columns: 2fr 2fr 1.2fr;\n      gap: 35px 45px;\n      margin: 32px 0;\n    }\n    .ns-cs-report-hero { \n      grid-column: 1 \/ -1; \n    }\n    .ns-cs-report-grid .ns-cs-figure {\n      margin-top: 0;\n    }\n    .ns-cs-report-block { \n      margin-bottom: 24px; \n    }\n    .ns-cs-report-block h3 { \n      margin-top: 0; \n      margin-bottom: 12px;\n    }\n\n    @media (max-width: 960px) {\n      .ns-cs-report-grid { \n        grid-template-columns: 1fr 1fr; \n        column-gap: 30px; \n      }\n      .ns-cs-report-col-right { \n        grid-column: 1 \/ -1; \n        max-width: 320px; \n        justify-self: center; \n      }\n    }\n    @media (max-width: 640px) {\n      .ns-cs-report-grid { \n        grid-template-columns: 1fr; \n      }\n    }\n\n    \/* FORCING NON-ITALIC CAPTIONS OVER RULING WORDPRESS THEME DEFAULT *\/\n    .ns-page figcaption, \n    .ns-page .ux-caption {\n        font-style: normal !important;\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\"><img decoding=\"async\" class=\"ns-logo__mark\" src=\"\/wp-content\/uploads\/2026\/06\/nslogoweb.jpg\" alt=\"Natural Structure\"><\/a>\n      <nav class=\"ns-nav\">\n        <ul class=\"ns-nav__links\"><li><a href=\"\/index.php\/home\/\">Home<\/a><\/li><li><a href=\"\/index.php\/home\/portfolio\/\">Portfolio<\/a><\/li><\/ul>\n        <a href=\"#contact\" class=\"ns-cta-btn ns-js-contact-cta\">Contact Me<\/a>\n      <\/nav>\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>Using rapid prototypes to explore and test new interactional models with Nevro patients.<\/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-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 (they replaced Orthogonal several months into the process due to ineffective communication and lacking the skills needed to bring this product into reality), these applications aimed to provide patients with enhanced control and insights into their HF10 implant therapy. The project focused on creating intuitive interfaces for managing stimulation, tracking progress, and receiving personalized recommendations.<\/p>\n    <p><em>Note:<\/em> Nevro has changed the \u201cHF10\u201d name to \u201cHFX.\u201d<\/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 the end-to-end design process)<\/li>\n          <li>Research facilitation<\/li>\n          <li>Information architecture<\/li>\n          <li>Wireframes and prototypes<\/li>\n          <li>Content inventory and documentation<\/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 Process<\/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 Orthogonal (later Velentium). Key phases included:<\/p>\n    <ol>\n        <li><strong>Information Architecture (IA), Application Maps, and User Flows:<\/strong> Defining the high-level structure and navigation for both PTA and Pathfinder to ensure a logical flow for users, and further defining the step-by-step interactions for critical features\u2014 from first-time setup, to daily use, and advanced settings.<\/li>\n        <li><strong>Wireframing &amp; UI Design:<\/strong> Creating low-fidelity visual representations of each screen, focusing on layout, content placement, and interaction elements. Myself and a UI Designer worked in tandem on wireframes and visual designs, respectively, for each sprint.<\/li>\n        <li><strong>Prototyping:<\/strong> Creating prototypes to explore, visualize, and test new and unique interaction models related to changing device settings and other features throughout the wireframing process.<\/li>\n        <li><strong>Annotation &amp; Content Inventory:<\/strong> Used a numbered annotation marker system to document functional and interaction details, as well as linking to a comprehensive content inventory spreadsheet that was used as the \u201csource of truth\u201d throughout the project.<\/li>\n    <\/ol>\n  <\/section>\n\t\n  <section class=\"ns-cs-section ns-cs\">\n    <h2>Lingering Challenge: &#8220;One App to Rule Them All&#8221;<\/h2>\n    <p>Patients using the Nevro HF10 implant for pain management needed a seamless and empowering digital tool to interact with their therapy, and Nevro wanted a way to turn these interactions into actionable and historical data. From the start, the client had envisioned two distinct apps: <\/p>\n    <ul>\n        <li><strong>Nevro PTA (Patient Therapy App):<\/strong> A manual control app mirroring the Patient Therapy Remote (PTR) with added features for pain surveys, progress tracking, and favorites.<\/li>\n        <li><strong>Nevro Pathfinder:<\/strong> An automatic therapy optimization app that suggests new program settings based on patient data, offering a more hands-off approach while still allowing for adjustments within saved favorites.<\/li>\n    <\/ul>\n    <p>Both applications required a robust, user-friendly interface that could guide patients through initial setup, daily therapy management, and data-driven insights, all while ensuring patient safety and data privacy.<\/p>\n    <p>This is what Nevro said they wanted, but deep-down, our team knew that having two different apps would be a bad strategy, not just because patients wouldn\u2019t want to have to download two different apps, but because it would be confusing as to which one did what, and why.<\/p>\n    <p>It would also be costly to Nevro down the road since they\u2019d be maintaining two different code sets, marketing two different apps, and then spending a lot of customer support time explaining the difference. It would just be a massive headache.<\/p>\n    <p>We provided specs and application maps for two different apps, but ultimately they took our advice and released just one app.<\/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>Key Design Principles<\/h2>\n    <ul>\n        <li><strong>Simplicity:<\/strong> Ensuring that complex medical device interactions were presented in an easy-to-understand manner.<\/li>\n        <li><strong>Patient Empowerment:<\/strong> Giving patients control over their therapy and rewarding them with meaningful insights as they completed pain surveys and journaled their results.<\/li>\n        <li><strong>Accessibility:<\/strong> Ensuring compatibility with screen readers was imperative not only because it\u2019s the right thing to do, but because it was required for FDA certification.<\/li>\n    <\/ul>\n  <\/section>\n\n  <section class=\"ns-cs-section ns-cs\">\n    <h2>First-Time Setup: Onboarding &amp; Device Pairing<\/h2>\n    <p>The initial setup flow was critical for a smooth patient onboarding experience. This included:<\/p>\n    <ul style=\"list-style-type: none;\">\n        <li style=\"list-style-type: '1.1'; padding-left: 10px; margin:10px;\"><strong> EULA User Flow<\/strong> \u2013 Designed to ensure users understood and accepted the terms, with a modal overlay prompting acceptance if declined.<\/li>\n        <li style=\"list-style-type: '1.2'; padding-left: 10px; margin:10px;\"><strong> Phone Compatibility Test<\/strong> \u2013 A crucial step to ensure the patient&#8217;s device could properly interact with the HF10 implant.<\/li>\n        <li style=\"list-style-type: '1.3'; padding-left: 10px; margin:10px;\"><strong> Discover &amp; Pair<\/strong> \u2013 The process for connecting the patient&#8217;s phone to the HF10 implant.<\/li>\n        <li style=\"list-style-type: '1.4'; padding-left: 10px; margin:10px;\"><strong> App Personalization<\/strong> \u2013 Allowing patients to personalize their app experience by providing their name, confirming pain areas, and selecting activities they wish to \u201c\u2026be free to\u2026&#8221; do again.<\/li>\n        <li style=\"list-style-type: '1.5'; padding-left: 10px; margin:10px;\"><strong> Notification Settings<\/strong> \u2013 Configuring how the app delivers important alerts and reminders to the patient.<\/li>\n        <li style=\"list-style-type: '1.6'; padding-left: 10px; margin:10px;\"><strong> App Security Settings<\/strong> \u2013 Allowing patients to secure their app with a PIN or biometric authentication to prevent accidental changes to therapy settings.<\/li>\n    <\/ul>\n\n    <h3>User Flows<\/h3>\n    <p>Use the arrows below to see all six onboarding user flows.<\/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>Prototype: Onboarding &amp; Device Setup<\/h2>\n    <p>Here\u2019s a video walkthrough of a basic prototype that I did early on in the project as my team was designing the Onboarding and Device Setup userflows.<\/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>From Prototype to UI\/Visual Design<\/h2>\n    <p>After conducting tests with the prototype above, our UI Designer could create visual designs and animations that would assist the patient in pairing via bluetooth. Those are shown below.<\/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>Daily Use: Core Functionality<\/h2>\n    <p>The core of the application revolves around the home screen, where patients can easily view their status, turn stimulation on or off, and adjust their therapy settings. The design prioritizes clarity and immediate access to the most frequent tasks.<\/p>\n    \n    <h3>Turning Stimulation On &amp; Off<\/h3>\n    <p>This prototype details the process of turning stimulation on and off, including the drawer interaction, options to change HF10 settings, and proposed transitional animations while changes are being transmitted and confirmed by the device.<\/p>\n    <p>That last point is important to elaborate on. There is a noticeable lag between the app sending program adjustments, the stimulator changing its state to match the requested parameters, and then sending a success\/failure message when finished. Therefore it was important for the UI to clearly communicate these transitional states.<\/p>\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>My Progress &#8211; Data Visualization and Interaction Models<\/h2>\n    <p>To encourage patients to provide feedback through the surveys means we needed to provide them with meaningful and actionable data visualizations of their pain relief journey.<\/p>\n    <p>The animations below show quick sample click-throughs of three distinct prototypes that I created at various points in the design phase. They allowed us to get valuable feedback on interaction models and data visualization styles, even with a mix of low-fidelity wireframes, higher-fidelity comps, and placeholder data.<\/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-on wireframe view showing current therapy settings, survey question cards, and basic &#8220;Therapy Stats.&#8221;<\/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 swipe\/scroll concept browsing weekly or monthly pain relief 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> Complete &#8220;My Progress&#8221; dashboard allowing toggling between week and month views.<\/figcaption>\n            <\/figure>\n        <\/div>\n    <\/div>\n \n    <h3>Home Screen States &amp; Prompting for Survey Feedback<\/h3>\n    <p>The home screen uses a dynamic status card system to show the most relevant information, such as the current program being tested, an active favorite, or a prompt to take a survey.<\/p>\n    <p>Even though they\u2019re listed as Appendix B &amp; C, it was necessary to work through\u2014at a high-level\u2014what the wireframe and data flows.<\/p>\n    <p>For context, it\u2019s important to note that with a spinal cord stimulator, it\u2019s not something that\u2019s responding instantly to program\/level changes; this is especially true for the first month or so after surgery. When a program\/level change is requested for the first time, there is a 48-hour \u201cwash-in period\u201d (phrase used by the client) during which the stimulator would initiate the change and in response the patient\u2019s level of pain would be affected.<\/p>\n    <p>In this first month, Nevro wanted to make sure the patient had time for the program\/level\u2019s efficacy to take hold before prompting feedback via the survey. This is represented below under the 48 hr time window in the first column. Once that window of time has elapsed, the patient is prompted to take the survey via the app\u2019s home screen (and also via notifications if they\u2019re not in the app when that condition takes place). To ensure timeliness of feedback, they\u2019re given a 2-hour window to take the survey.<\/p>\n\n    <h3>Survey Wire &amp; Data Flows<\/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 States Diagram for Survey CTAs<\/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<\/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: Questions 1-4 + End Cards and Exiting Survey Early Confirmation<\/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>Battery &amp; Connectivity<\/h2>\n    <p>Critical system states like low battery or a lost Bluetooth connection are communicated through clear in-app alerts and system 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>Documentation, Annotations, and Content Inventory<\/h2>\n    <p>As the design phase progressed, we were becoming overwhelmed with copy change requests the client wanted for prior sprints. This quickly became a bottleneck, because it meant having to update past wireframes, prototype screens, and visual designs.<\/p>\n    <p>I proposed that we start using a simple version of a content inventory, comprised of a spreadsheet which would act as the source of truth for all copy\/content in the app that would be shared with the client. Each line in the spreadsheet would have its own unique content ID, which in turn would have a corresponding content tag in the wireframes.<\/p>\n    <p>After implementing that system, we could refer the client to the content inventory. And when development began, this system made their jobs easier since there was a single source of truth that also formed the foundation for integrating a CMS down the road.<\/p>\n\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 (click to view PDF of full version)<\/em><\/figcaption>\n    <\/figure>\n    <p>Throughout the project, nomenclature\u2014labels for navigation sections, action names, and other information\u2014evolved as our team gained knowledge and conducted interviews. More broadly, the goal with information architecture and nomenclature is to have a solution that employs a mental model to which a patient or any user can easily relate.<\/p>\n  <\/section>\n\n  <footer class=\"ns-footer\" id=\"contact\">\n    <div class=\"ns-footer__inner\">\n      <h2>Contact Me<\/h2>\n      <p>(310) 426-8222 | grant@naturalstructure.com<\/p>\n      <p><a href=\"https:\/\/www.linkedin.com\/in\/granthouston\" target=\"_blank\">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 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 = `Item ${currentIndex + 1} of ${slides.length}`; 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<\/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 Using rapid prototypes to explore and test new interactional models with Nevro patients. Project Overview This case study details the user experience (UX) design process for the Nevro Patient [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":11,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-89","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/naturalstructure.com\/index.php\/wp-json\/wp\/v2\/pages\/89","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=89"}],"version-history":[{"count":54,"href":"https:\/\/naturalstructure.com\/index.php\/wp-json\/wp\/v2\/pages\/89\/revisions"}],"predecessor-version":[{"id":480,"href":"https:\/\/naturalstructure.com\/index.php\/wp-json\/wp\/v2\/pages\/89\/revisions\/480"}],"up":[{"embeddable":true,"href":"https:\/\/naturalstructure.com\/index.php\/wp-json\/wp\/v2\/pages\/11"}],"wp:attachment":[{"href":"https:\/\/naturalstructure.com\/index.php\/wp-json\/wp\/v2\/media?parent=89"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}