{"id":796,"date":"2026-08-31T17:33:04","date_gmt":"2026-08-31T17:33:04","guid":{"rendered":"https:\/\/naturalstructure.com\/?page_id=796"},"modified":"2026-08-31T17:52:22","modified_gmt":"2026-08-31T17:52:22","slug":"case-study-smartstart","status":"publish","type":"page","link":"https:\/\/naturalstructure.com\/?page_id=796","title":{"rendered":"case-study-smartstart"},"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; Streamlining EP SmartStart for TV &amp; Film Production Staff<\/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: 12px; color: #6B6B6B; margin-top: 16px; 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    .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    .ns-cs-report-grid { display: grid; grid-template-columns: 2fr 2fr 1.2fr; gap: 35px 45px; margin: 32px 0; }\n    .ns-cs-report-hero { grid-column: 1 \/ -1; }\n    .ns-cs-report-grid .ns-cs-figure { margin-top: 0; }\n    .ns-cs-report-block { margin-bottom: 24px; }\n    .ns-cs-report-block h3 { margin-top: 0; margin-bottom: 12px; }\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: 960px) {\n      .ns-cs-report-grid { grid-template-columns: 1fr 1fr; column-gap: 30px; }\n      .ns-cs-report-col-right { grid-column: 1 \/ -1; max-width: 320px; justify-self: center; }\n    }\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    @media (max-width: 640px) { .ns-cs-report-grid { grid-template-columns: 1fr; } }\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\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>Streamlining EP SmartStart for TV &amp; Film Productions<\/h1>\n    <p>Redesigning crew onboarding and offer approval workflows for entertainment production managers.<\/p>\n  <\/section>\n\n  <figure class=\"ns-cs-figure ns-cs\">\n    <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/07\/smartstart-hero-image.png\" alt=\"SmartStart Roster List and Crew Drill Down screens after redesign by Grant Houston.\">\n    <figcaption><strong>Figure 1:<\/strong> Redesigned SmartStart Roster List and Crew Detail screens.<\/figcaption>\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\">Layout Scale<\/span>\n        <div class=\"ns-impact-card__title\">Up to 15 Approver Tiers<\/div>\n        <p class=\"ns-impact-card__desc\">Re-architected candidate offer cards to handle complex studio sign-off chains cleanly on desktop screens.<\/p>\n      <\/div>\n\n      <div class=\"ns-impact-card\">\n        <span class=\"ns-impact-card__label\">Research Foundation<\/span>\n        <div class=\"ns-impact-card__title\">39 User Interviews<\/div>\n        <p class=\"ns-impact-card__desc\">Used findings from studio coordinators and crew members to prioritize layout updates and interaction changes.<\/p>\n      <\/div>\n\n      <div class=\"ns-impact-card\">\n        <span class=\"ns-impact-card__label\">UI Strategy<\/span>\n        <div class=\"ns-impact-card__title\">Rectangular Approval Icon Design<\/div>\n        <p class=\"ns-impact-card__desc\">Replaced circular avatar icons with rounded rectangular badges, and separated them from the multiple line-item statuses contained within an offer, making it easier to identify approval bottlenecks and missing documentation at a glance.<\/p>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <section class=\"ns-cs-section ns-cs\">\n    <h2>Project Overview<\/h2>\n    <p>A case study on redesigning two core screens in EP SmartStart: the <strong>Roster List<\/strong> and <strong>Crew Detail View<\/strong>. These tools are used daily by film and TV production staff to generate offer letters, verify crew details, and track approval sign-offs before production begins.<\/p>\n    \n    <h3>Research Context<\/h3>\n    <p>Prior to the redesign, EP commissioned a third-party research firm (Philosophie) to conduct user interviews and map out pain points across SmartStart and related tools. I sat in on many of these sessions and used the resulting data to inform my design choices.<\/p>\n    <ul>\n      <li><strong>Interviews Conducted:<\/strong> 39 interviews across EP internal stakeholders (12), studio administrators (19), and crew members (9).<\/li>\n      <li><strong>Key Output:<\/strong> An end-to-end journey map identifying where users experienced confusion or delays during onboarding.<\/li>\n    <\/ul>\n    <div class=\"ns-cs-twocol-list\">\n      <div>\n        <h3>My Responsibilities<\/h3>\n        <ul>\n          <li>Redesign the Roster List and Crew Detail View<\/li>\n          <li>Synthesize user research to prioritize UI fixes<\/li>\n          <li>Re-architect candidate offer cards and approval chain layouts<\/li>\n          <li>Standardize button hierarchy and search patterns<\/li>\n          <li>Partner with dev teams through implementation<\/li>\n        <\/ul>\n      <\/div>\n      <div>\n        <h3>Team Members<\/h3>\n        <ul>\n          <li>Sr. Product &amp; UX Designer (myself)<\/li>\n          <li>Product Manager<\/li>\n          <li>Product Owner<\/li>\n          <li>Software Engineers<\/li>\n          <li>QA Leads<\/li>\n        <\/ul>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <section class=\"ns-cs-section ns-cs\">\n    <h2>Auditing the Legacy Layout<\/h2>\n    <p>A usability audit of the original SmartStart interface revealed four clear issues that were slowing down production coordinators and accountants:<\/p>\n\n    <figure class=\"ns-cs-figure\">\n      <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/07\/figure-2-roster-drill-down.webp\" alt=\"Screenshots of the original SmartStart UI\" class=\"lightbox-trigger\">\n      <figcaption><strong>Figure 2:<\/strong> Original Roster List (left) and Crew Detail View (right). <a href=\"\/index.php\/home\/portfolio\/case-study-smartstart\/smartstart-figure2-popup\/\" target=\"_blank\">View Full Crew Detail Screen<\/a> <\/figcaption>\n    <\/figure>\n\n    <h3>Primary Usability Problems<\/h3>\n    \n    <div class=\"ns-cs-report-grid\">\n      \n      <div class=\"ns-cs-report-hero\">\n          <figure class=\"ns-cs-figure\">\n              <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/07\/figure-3-ux-priorities.webp\" alt=\"UX Priorities\" class=\"lightbox-trigger\">\n              <figcaption><strong>Figure 3:<\/strong> Audit map identifying layout issues in the original designs.<\/figcaption>\n          <\/figure>\n      <\/div>\n\n      <div class=\"ns-cs-report-col\">\n        <div class=\"ns-cs-report-block\">\n          <h3>A. Inverted Search &amp; Filter Hierarchy<\/h3>\n          <p>Placing filters above the main search bar broke standard visual hierarchy. The search controls also took up too much vertical screen space.<\/p>\n        <\/div>\n        \n        <div class=\"ns-cs-report-block\">\n          <h3>B. Ambiguous Icons &amp; Color Reliance<\/h3>\n          <p>Status icons lacked visible text labels, forcing users to hover for tooltips. Using color alone to indicate approval stages created accessibility issues.<\/p>\n        <\/div>\n      <\/div>\n\n      <div class=\"ns-cs-report-col\">\n        <div class=\"ns-cs-report-block\">\n          <h3>C. Button Clutter<\/h3>\n          <p>Too many competing dark button styles were scattered across each card, making it difficult for users to scan and compare primary actions.<\/p>\n        <\/div>\n\n        <div class=\"ns-cs-report-block\">\n          <h3>D. Layout Disconnect Between Views<\/h3>\n          <p>Key candidate data was organized differently between the master list and detail pages, forcing users to relearn the layout when clicking through.<\/p>\n        <\/div>\n      <\/div>\n\n      <div class=\"ns-cs-report-col-right\">\n        <figure class=\"ns-cs-figure\">\n            <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/07\/figure-3a-cta-variety.webp\" alt=\"Variety of CTAs\" class=\"lightbox-trigger\">\n            <figcaption><strong>Figure 3a:<\/strong> The variety of competing button styles on single offer cards.<\/figcaption>\n        <\/figure>\n      <\/div>\n\n    <\/div>\n  <\/section>\n\n  <section class=\"ns-cs-section ns-cs\">\n    <h2>Design Process &amp; Team Reviews<\/h2>\n    <p>I worked in bi-weekly design sprints, sharing whiteboard sketches, wireframes, and interactive prototypes with product leads, developers, and QA engineers for early feedback before user testing.<\/p>\n    <ol>\n      <li>Sprint 0: Research Review &amp; Requirements Gathering<\/li>\n      <li>Sprints 1\u20133: Wireframing, Layout Explorations &amp; Prototyping<\/li>\n      <li>Bi-Weekly Team Reviews (Product, Dev, QA)<\/li>\n      <li>Usability Testing &amp; Design Revisions<\/li>\n      <li>Development Handoff &amp; QA Support<\/li>\n    <\/ol>\n  <\/section>\n\n  <section class=\"ns-cs-section ns-cs\">\n    <h2>Rethinking the Candidate Offer Card<\/h2>\n    <p>My first priority was restructuring the core Offer Card component. I separated primary candidate details from secondary actions, establishing a predictable 3-column layout that scales cleanly across screen sizes.<\/p>\n    \n    <p>Key structural changes included:<\/p>\n    <ul>\n      <li><strong>Clean Header Layout:<\/strong> Placed candidate name and job title on the left, moving primary offer status and action buttons to a top-right cluster (Figure 4).<\/li>\n      <li><strong>Action Dropdown Menu:<\/strong> Consolidated secondary utilities into a single &#8220;Actions&#8221; menu to eliminate button clutter (Figures 5 &amp; 6).<\/li>\n      <li><strong>3-Column Data Alignment:<\/strong> Organized rate terms, start dates, and deal notes into three distinct columns with clear section headers (Figures 7 &amp; 8).<\/li>\n      <li><strong>Softened Warning Badges:<\/strong> Replaced harsh red alert fills with balanced amber placards for non-critical warnings, saving red strictly for required actions (Figure 7).<\/li>\n    <\/ul>\n    \n\t<figure class=\"ns-cs-figure\">\n\t\t<img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/07\/figure-4-crew-offer-cards-e1784138451658.webp\" alt=\"First iteration of crew offer card\" class=\"lightbox-trigger\">\n\t\t<figcaption><strong>Figure 4:<\/strong> First card iteration tested with users.<\/figcaption>\n\t<\/figure>\n\n    <figure class=\"ns-cs-figure\">\n    \t<img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/07\/figure-5-crew-offer-action-e1784139353450.webp\" alt=\"Card iteration with expanded approvers\" class=\"lightbox-trigger\">\n        <figcaption><strong>Figure 5:<\/strong> Testing card layouts with an expanded list of approvers.<\/figcaption>\n    <\/figure>\n\n    <figure class=\"ns-cs-figure\">\n    \t<img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/07\/smartstart-case-study-figure6-actionsmenu-e1784139661142.webp\" alt=\"Card showing consolidated actions menu\" class=\"lightbox-trigger\">\n        <figcaption><strong>Figure 6:<\/strong> Offer card featuring the consolidated &#8220;Actions&#8221; dropdown menu.<\/figcaption>\n    <\/figure>\n\n    <figure class=\"ns-cs-figure\">\n    \t<img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/07\/smartstart-case-study-figure7-iconography.webp\" alt=\"Updated status icons and text labels\" class=\"lightbox-trigger\">\n        <figcaption><strong>Figure 7:<\/strong> Updated status icons with visible text labels.<\/figcaption>\n    <\/figure>\n\n    <figure class=\"ns-cs-figure\">\n      <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/07\/smartstart-case-study-figure8-offers-cards-in-various-states-1.webp\" alt=\"Collection of offer cards in roster view\" class=\"lightbox-trigger\">\n      <figcaption><strong>Figure 8:<\/strong> Master Roster List showing offer cards in various approval states.<\/figcaption>\n    <\/figure>\n\n    <h3>Usability Test Feedback (Round 1)<\/h3>\n    <div class=\"ns-cs-callout-grid\">\n      <div class=\"ns-cs-callout\">\n        <strong>What Worked Well<\/strong>\n        <p>Coordinators appreciated the cleaner card layout and reduced red warning boxes, noting that primary actions were much easier to spot.<\/p>\n      <\/div>\n      <div class=\"ns-cs-callout\">\n        <strong>What Needed Revision<\/strong>\n        <p>Testing showed that listing every approver&#8217;s full name on the card took up too much space, as coordinators already knew team members by role.<\/p>\n      <\/div>\n    <\/div>\n<\/section>\n\n<section class=\"ns-cs-section ns-cs\">\n    <h2>Designing for Multi-Tier Approvals<\/h2>\n    <p>A major design challenge was displaying approval progress for large studio productions requiring up to 15 sign-off stages. Many consumer apps use stacked circular avatars for groups, but in high-density enterprise tables, circular tracks create irregular spacing gaps that make fast scanning difficult. I explored several badge geometries to improve legibility.<\/p>\n\n  <figure class=\"ns-cs-figure\">\n\t\t<img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/07\/smartstart-case-study-figure9-approver-icon-explorations-e1784143081274.webp\" alt=\"Approval badge design explorations\" class=\"lightbox-trigger\">\n        <figcaption><strong>Figure 9:<\/strong> Testing round vs. rectangular approval badges for scanability.<\/figcaption>\n  <\/figure>\n  \n  \t<p>Key insights from visual explorations:<\/p>\n\t<ul>\n\t\t<li><strong>Linear Rectangles Are Easier to Scan:<\/strong> Rectangular badges align cleanly in grid layouts, allowing the eye to sweep across status stages faster than circular icons.<\/li>\n\t\t<li><strong>Group Tokens Prevent Bloat:<\/strong> Showing 15 individual badges on a single card creates visual clutter. Collapsing approval stages into consolidated group tokens keeps cards readable while allowing users to hover or click for details.<\/li>\n\t\t<li><strong>Checkmarks for Accessibility:<\/strong> Added explicit checkmark icons inside completed approval badges so status doesn&#8217;t rely on color alone.<\/li>\n\t<\/ul>\n      \n    <figure class=\"ns-cs-figure\">\n\t\t<img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/07\/figure-4-crew-offer-cards-e1784138451658.webp\" alt=\"Initial approver layout concept\" class=\"lightbox-trigger\">\n\t\t<figcaption><strong>Figure 10:<\/strong> Early test placing approver badges inside the status column.<\/figcaption>\n\t<\/figure>\n\n    <figure class=\"ns-cs-figure\">\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/07\/smartstart-case-study-figure11-15-levels-of-approvers-e1784142241413.webp\" alt=\"15 levels of approvers in a structured layout\">\n        <figcaption><strong>Figure 11:<\/strong> Testing card layouts under extreme 15-stage approval conditions.<\/figcaption>\n    <\/figure>\n \n    <figure class=\"ns-cs-figure\">\n      <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/07\/smartstart-case-study-figure12-separating-approver-chain.webp\" alt=\"Separated approver chain layout\">\n        <figcaption><strong>Figure 12:<\/strong> Final card layout separating the approval chain into its own horizontal row with accessible checkmark indicators.<\/figcaption>\n    <\/figure>\n\n    <h2>Summary of Design Improvements<\/h2>\n    <p><strong>Roster List View<\/strong><\/p>\n    <ul>\n      <li>Separated the approval progress chain into a clean horizontal row.<\/li>\n      <li>Used rectangular group badges with explicit checkmarks for better scanability and accessibility.<\/li>\n      <li>Softened background alert fills to reserve high-contrast red strictly for required actions.<\/li>\n      <li>Added global filter toggles at the top of the list to let coordinators quickly highlight missing documents.<\/li>\n    <\/ul>\n    <p><strong>Crew Detail View<\/strong><\/p>\n    <ul>\n      <li>Matched top header card layout to the Roster List view for visual consistency.<\/li>\n      <li>Added section jump links so coordinators can skip directly to specific offer terms.<\/li>\n      <li>Reorganized content into single-column collapsible cards for better readability.<\/li>\n    <\/ul>\n\n    <figure class=\"ns-cs-figure\">\n      <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/07\/smartstart-case-study-figure13-final-screen-shot.webp\" alt=\"Final SmartStart Roster List redesign\">\n      <figcaption><strong>Figure 13:<\/strong> Final redesign of the SmartStart Roster List.<\/figcaption>\n    <\/figure>\n  <\/section>\n\n  <section class=\"ns-cs-section ns-cs\">\n    <h2>Engineering Handoff &amp; Results<\/h2>\n    <p>To ensure the redesigned components were implemented as intended, I partnered closely with development and QA leads throughout production. I provided interactive prototypes and explicit layout specs for component states, edge cases, and responsive breakpoints, preventing guesswork during front-end builds.<\/p>\n    <p>The updated designs successfully addressed the core usability issues identified in research, contributing to a <strong>45% reduction in support calls<\/strong> related to offer management and giving production staff a faster, clearer tool for daily onboarding tasks.<\/p>\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        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; Streamlining EP SmartStart for TV &amp; Film Production Staff Home Portfolio Contact Me Streamlining EP SmartStart for TV &amp; Film Productions Redesigning crew onboarding and offer approval workflows for entertainment production managers. Figure 1: Redesigned SmartStart Roster List and Crew Detail screens. Layout Scale Up to 15 Approver Tiers [&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-796","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/naturalstructure.com\/index.php?rest_route=\/wp\/v2\/pages\/796","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=796"}],"version-history":[{"count":4,"href":"https:\/\/naturalstructure.com\/index.php?rest_route=\/wp\/v2\/pages\/796\/revisions"}],"predecessor-version":[{"id":810,"href":"https:\/\/naturalstructure.com\/index.php?rest_route=\/wp\/v2\/pages\/796\/revisions\/810"}],"wp:attachment":[{"href":"https:\/\/naturalstructure.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=796"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}