{"id":95,"date":"2026-06-25T03:16:56","date_gmt":"2026-06-25T03:16:56","guid":{"rendered":"http:\/\/192.168.1.188\/?page_id=95"},"modified":"2026-07-15T22:40:52","modified_gmt":"2026-07-15T22:40:52","slug":"case-study-smartstart","status":"publish","type":"page","link":"https:\/\/naturalstructure.com\/index.php\/home\/portfolio\/case-study-smartstart\/","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; 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; }\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: 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    \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; \/* Prevents global figure margins from throwing off grid alignment *\/\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    \/* Grid Responsive Breakpoints *\/\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\" aria-label=\"Natural Structure home\">\n        <img decoding=\"async\" class=\"ns-logo__mark\" src=\"\/wp-content\/uploads\/2026\/06\/nslogoweb.jpg\" alt=\"Natural Structure dotted circular logo mark\" width=\"120px\">\n      <\/a>\n\n      <nav class=\"ns-nav\" aria-label=\"Primary\">\n        <ul class=\"ns-nav__links\">\n          <li><a href=\"\/index.php\/home\/\">Home<\/a><\/li>\n          <li><a href=\"\/index.php\/home\/portfolio\/\">Portfolio<\/a><\/li>\n        <\/ul>\n        <a href=\"#contact\" class=\"ns-cta-btn ns-js-contact-cta\">Contact Me<\/a>\n      <\/nav>\n    <\/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>Roster List and Crew Drill Down<\/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> SmartStart Roster List and Crew Drill Down screens after redesign by Grant Houston.<\/figcaption>\n  <\/figure>\n\n  <section class=\"ns-cs-section ns-cs\">\n    <h2>Introduction<\/h2>\n    <p>A Case Study on the complete UX Redesign of EP SmartStart\u2019s core features \u2014 leveraging data-driven insights learned from the UX Research phase that wrapped up just one month prior.<\/p>\n    \n    <h3>Summary of Research Efforts<\/h3>\n    <p>The research methodology used to gather user feedback and pain points on the existing SmartStart platform included moderated interviews and the creation of an experience map. EP contracted with a 3rd party \u2014 Philosophie \u2014 to run these activities.<\/p>\n    <ul>\n      <li><strong>Moderated Interviews:<\/strong> Researchers conducted a total of 39 moderated interviews with EP stakeholders (12), client users (19), and crew users (9) to understand the issues with the customer experience with SmartStart, SmartTime Classic, SmartTime Mobile, and Support.<\/li>\n      <li><strong>Experience Map:<\/strong> Based on the interviews and product walkthroughs, an experience map was created to document the end-to-end customer experience, which helped to identify key pain points and opportunities for improvement.<\/li>\n    <\/ul>\n    <p>Please note: While I didn\u2019t run the research phase of this effort, I sat in on many of the interviews and used the findings prepared by Philosophie and our UX Researcher to prioritize issues and ultimately inform my design decisions.<\/p>\n\n    <h2 style=\"margin-top:20px;\">Goals<\/h2>\n    <p>We wanted to reduce the friction points and completely redesign two screens that were the most highly-used in SmartStart: <em>Roster List<\/em> and <em>Crew Drill Down.<\/em> The Roster List contains Crew Member Offer Cards containing top-level details, actions, calls-to-action for a respective offer; the Crew Drill Down details every single term within that offer. Based on the research, I was going to be focusing most of my efforts on the following friction points:<\/p>\n    <ul>\n      <li> <strong>Search, Filter and Sort UI + Microinteractions<\/strong><\/li>\n      <li> <strong>Iconography and Approval Chain Status<\/strong><\/li>\n      <li> <strong>CTA (Call-to-Action) Buttons<\/strong><\/li>\n      <li> <strong>Inconsistent Information States<\/strong><\/li>\n    <\/ul>\n    <p>I got into more detail on these in the next section.<\/p>\n\n    <div class=\"ns-cs-twocol-list\">\n      <div>\n        <h3>My Responsibilities<\/h3>\n        <ul>\n          <li>Redesign Roster List and Crew Drill Down<\/li>\n          <li>Leverage research insights to resolve friction points outlined above and inform design decisions<\/li>\n          <li>Apply UX best practices<\/li>\n          <li>Re-think the overarching interaction model and navigation within and between these two screens<\/li>\n          <li>Optimize underlying information architecture<\/li>\n        <\/ul>\n      <\/div>\n      <div>\n        <h3>My Team<\/h3>\n        <ul>\n          <li>Sr. Product &amp; UX Designer (me)<\/li>\n          <li>Product Manager<\/li>\n          <li>Product Owner<\/li>\n          <li>Developers &amp; Engineers<\/li>\n          <li>QA Engineer<\/li>\n          <li>Stakeholders<\/li>\n        <\/ul>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <section class=\"ns-cs-section ns-cs\">\n    <h2>Old Design<\/h2>\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 two web pages from Entertainment Partner's SmartStart Product, showing offers for various crew on the left, and offer details for Hugo Weaver in the Crew Drill Down on the right.\" class=\"lightbox-trigger\" \/>\n      <figcaption><strong>Figure 2:<\/strong> (Left) Roster List. (Right) Crew Drill Down &#8211; <a href=\"\/index.php\/home\/portfolio\/case-study-smartstart\/smartstart-figure2-popup\/\" target=\"_blank\">View full version<\/a><\/figcaption>\n    <\/figure>\n\n    <h3>UX Priorities for Redesign<\/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> UX Priorities for (Left) Roster List and (Right) Crew Drill Down.<\/figcaption>\n          <\/figure>\n      <\/div>\n\n      <div class=\"ns-cs-report-col\">\n        <div class=\"ns-cs-report-block\">\n          <h3>A. Search, Filter and Sort UI + Microinteractions<\/h3>\n          <p>Placement of the Filter bar above the Search field breaks typical information hierarchy; they should be reversed. Additionally, the space taken up by the search, filter and sort functionality can be optimized to take up less, and microinteractions should be streamlined.<\/p>\n        <\/div>\n        \n        <div class=\"ns-cs-report-block\">\n          <h3>B. Iconography and Approval Chain Status<\/h3>\n          <p>The icon collections used in different places within SmartStart negatively impact usability because:<\/p>\n          <ul>\n            <li>They are ambiguous and lack static labels.<\/li>\n            <li>They rely upon tooltips to convey meaning\u2014which takes time and is ineffective because the user has to hover, wait, read, and repeat for each icon.<\/li>\n            <li>Color by itself is being used to convey different statuses for some of the steps in the approval chain, but that also has a cognitive cost and runs counter to accessible design guidelines.<\/li>\n          <\/ul>\n        <\/div>\n      <\/div>\n\n      <div class=\"ns-cs-report-col\">\n        <div class=\"ns-cs-report-block\">\n          <h3>C. CTA (Call-to-Action) Buttons<\/h3>\n          <p>The number and variety of CTA buttons (some shown above in the screenshot, and more to the right) is bad for usability because:<\/p>\n          <ul>\n            <li>Their dark, saturated colors give each of them a lot of weight.<\/li>\n            <li>There is often more than one on a screen, which means they&#8217;re all competing for attention and drawing the user&#8217;s gaze to different sections of the screen all at once.<\/li>\n            <li>Their lack of proximity to one another makes it more difficult to compare, contrast and evaluate the full list of options for any given context.<\/li>\n          <\/ul>\n        <\/div>\n\n        <div class=\"ns-cs-report-block\">\n          <h3>D. Inconsistent Information States<\/h3>\n          <p>Information is presented differently between the Roster List and Crew Drill Down screens, which means the user has to re-orient themselves to what information is displayed &mdash; and where &mdash; every time they click\/tap back and forth between them.<\/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> Variety of CTAs.<\/figcaption>\n        <\/figure>\n      <\/div>\n\n    <\/div>\n  <\/section>\n\n  <section class=\"ns-cs-section ns-cs\">\n    <h2>The Process<\/h2>\n    <p>Generally, the process for this and other projects would typically follow the following process:<\/p>\n    <ol>\n      <li>Sprint 0: UX Research and Requirements Gathering<\/li>\n      <li>Sprints 1 \u2013 X Iterations:\n        <ul>\n          <li>Whiteboard &amp; Sketching<\/li>\n          <li>Wireframe<\/li>\n          <li>Prototype<\/li>\n        <\/ul>\n      <\/li>\n      <li>Weekly or Bi-weekly Reviews for Feedback:\n        <ul>\n          <li>Frequency depends on how far along in the process a given feature is.<\/li>\n          <li>Generally involves product owner, product manager, other stakeholders, developers, and QA engineers.<\/li>\n        <\/ul>\n      <\/li>\n      <li>Repeat<\/li>\n      <li>Milestones: User Testing takes place periodically throughout the design process, with frequency dependent on budget, user availability, and other factors.<\/li>\n    <\/ol>\n  <\/section>\n\n  <section class=\"ns-cs-section ns-cs\">\n    <h2>Design Iterations<\/h2>\n    <h3>1st Iteration<\/h3>\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=\"Screenshot of two different crew cards in an interim design state. They show various approval statuses, key info, and key concerns including conflicts of interest, overscale rates, and box rental costs.\" class=\"lightbox-trigger\" \/>\n\t\t<figcaption><strong>Figure 4:<\/strong> 1st Iteration of Crew Offer Card that was tested with users.<\/figcaption>\n\t<\/figure>\n\t<p>The 1st iteraton of the redesigned Roster List focused on the Crew Offer Cards themselves\u00a0&mdash;\u00a0being intentional around what information to display, where to display it, and how to better communicate approver chain status for any given card at a glance. Specific changes include:<\/p>\n\t<ul>\n\t  <li><strong>Created a card header that\u2019s now visually distinct from the rest of the card<\/strong>, and it contains the status flag selector (added a caret icon to convey that it\u2019s actionable) and crew member\u2019s name in the top-left, and all primary\/secondary CTAs with appropriate styling in the top-right.<\/li>\n\t  <li><strong>Divided information within the card into three columns, each with a subheader<\/strong> and created a grid structure to improve alignment and spacing of data points.<\/li>\n\t  <li><strong>Removed the offer status icons \u2014 previously horizontal \u2014 and provided a checklist-style of icons\/labels<\/strong> in the second column under \u201cOffer Status,\u201d with each row containing either a step status icon and step name, or an approver.<\/li>\n      <li><strong>Up to five approvers are listed individually by role and name(s),<\/strong> and if there are more than five, links appear in the subheading and list itself allowing the user to \u201cShow More Approvers.\u201d This list would dynamically expand in place, increasing the height of the card itself on the screen.<\/li>\n      <li><strong>Explored and introduced a collection of four standardized status icons<\/strong> that more efficiently communicate the status of each step.<\/li>\n      <li><strong>Refined how we use the warning placard icon<\/strong>  changing its default fill color from red to marigold &mdash; in the \u201cKey Information\u201d column on the right. Red is now only being used for data points requiring \u201cimmediate action.&#8221;<\/li>\n    <\/ul>\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=\"Screenshot of two different crew cards in an interim design state with action menus expanded.\" class=\"lightbox-trigger\" \/>\n        <figcaption><strong>Figure 5:<\/strong> Same as Figure 4 above, but showing the approver chain expanded. I purposefully wanted to see how the UI would handle up to 13-15 approvers for any given offer card, because it was common for Disney to have that many for their productions.<\/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=\"Screenshot of two different crew cards in an interim design state with action menus expanded.\" class=\"lightbox-trigger\" \/>\n        <figcaption><strong>Figure 6:<\/strong> Crew Offer Card with newly-consolidated &#8220;Actions&#8221; menu shown here in its visible state. <\/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=\"Screenshot of two different crew cards in an interim design state with action menus expanded.\" class=\"lightbox-trigger\" \/>\n        <figcaption><strong>Figure 7:<\/strong> Iconography and sizing recommendations to visual design for the Offer Status and Key Information line items.<\/figcaption>\n    <\/figure>\n\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=\"SmartStart Roster dashboard showing multiple crew cards, each of which depicts a reorganized view of information, including start date, offer status, key information, and approval actions for five sample employees.\" class=\"lightbox-trigger\" \/>\n      <figcaption><strong>Figure 8:<\/strong> A collection of cards in a Roster List \u2014 each illustrating a potential permutation based on its offer status, number of approvers, etc.<\/figcaption>\n    <\/figure>\n\n    <h3>1st Round of User Testing<\/h3>\n    <p>Because the redesign involved some fairly major changes, from information being re-organized to the row of circular icons so prominent before being removed, it was important to get feedback from actual users on productions in the real world.<\/p>\n\n    <div class=\"ns-cs-callout-grid\">\n      <div class=\"ns-cs-callout\">\n        <strong>Insights<\/strong>\n        <ul>\n        \t<li>While overall users liked the consolidation of the CTAs and reduction of \u201cseeing red\u201d from harsh alert icons, the \u201cOffer Status\u201d column wasn\u2019t resonating intuitively with them.<\/li>\n        \t<li>Key feedback was that name AND role for approvers wasn\u2019t necessary, as production staff had everyone\u2019s name and role memorized early on.<\/li>\n        <\/ul>\n      <\/div>\n      <div class=\"ns-cs-callout\">\n        <strong>Takeaways<\/strong>\n        <ul>\n        \t<li>Some users missed the row of approver icons that had been removed.<\/li>\n        \t<li>Representing an approval chain visually was important.<\/li>\n        \t<li>Offer Status and the Approval Chain didn\u2019t necessarily have to be intertwined into one long list of steps.<\/li>\n        <\/ul>\n      <\/div>\n    <\/div>\n<\/section>\n\n<section class=\"ns-cs-section ns-cs\">\n    <h2>2nd Iteration<\/h2>\n    <h3>Approval Chain Visual Explorations<\/h3>\n    <p>Most approver chains represented visually took on the convention of circles with two-letter initials inside them \u2014 more or less borrowed from the use of circular avatars in social media sites. I did some visual explorations of this concept, with circles evolving into rounded rectangles as I pressure-tested different permutations for spacing, scan-ability, legibility, and group representation.<\/p>\n\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=\"Design exploration to test if round approval icons are really the best use of space for readability and aesthetics. This shows a move to rounded-rectangles and different color treatments.\" class=\"lightbox-trigger\"\/>\n        <figcaption><strong>Figure 9:<\/strong> Progression of approval chain visual explorations.<\/figcaption>\n  <\/figure>\n  \n  \t<p>Going through this exploration, I came to the following conclusons:<\/p>\n\t<ul>\n\t\t<li><strong>Circles are more difficult to parse than square or rectangles<\/strong>, because each circle edge and its interpl\tay with its neighbors is cognitively more costly than rectangular edges that fall into a predictable  grid pattern. <\/li>\n\t\t<li><strong>Enumerating groups AND all their respective members is too much<\/strong> and quickly gets out of hand with the sheer number of rectangular icons becoming untenable.<\/li>\n\t\t<li><strong>Using a group icon would be acceptable<\/strong>, so long as there\u2019s a way to see members of that group when needed. \n\t<\/ul>\n  \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=\"Screenshot of two different crew cards in an interim design state. They show various approval statuses, key info, and key concerns including conflicts of interest, overscale rates, and box rental costs.\" class=\"lightbox-trigger\"\/>\n\t\t<figcaption><strong>Figure 10:<\/strong>  At first, I dropped the visual approver chain into the Offer Status column.<\/figcaption>\n\t<\/figure>\n\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=\"Development and design notes for color-coded icons. They include offer status, including pending, completed, immediate action required, and warning, with a note about icon sizes and alignment.\">\n        <figcaption><strong>Figure 11:<\/strong> Illustrating how 15 levels of approvers would look.<\/figcaption>\n    <\/figure>\n \n\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=\"SmartStart Roster dashboard showing multiple crew cards, each of which depicts a reorganized view of information, including start date, offer status, key information, and approval actions for five sample employees.\">\n        <figcaption><strong>Figure 12:<\/strong> Separating the approver chain from the offer status allowed for more flexibility and efficient distribution of information on the card. Additionally, the checkmark icon was added to the approved state of each approval level\u2019s button, since color alone should never be relied on to communicate state (success, fail, etc.).<br><br>Also added \u201cMissing Uploads\u201d functionality in the Offer Status column, and made both it and \u201cGL codes\u201d dynamically able to be shown and hidden so that users didn\u2019t have to click into the Crew Detail screen for that information. <\/figcaption>\n    <\/figure>\n\n    <h2>Summary of Changes Before 2nd Round of Testing<\/h2>\n    <p><strong>Roster List<\/strong><\/p>\n    <ul>\n      <li>Separated the approver chain from offer status. Redesigned the approver icons, using initials for individuals and a group icon to represent pools.<\/li>\n      <li>Oriented them horizontally to match the same orientation used throughout other EP apps.<\/li>\n      <li>Offer Status is vertically-oriented and uses descriptive labels that are dynamic, but consistent.<\/li>\n      <li>Changed visual treatment for highlighting exceptions so they are less triggering.<\/li>\n      <li>Added \u201cHighlight Exceptions\u201d toggle at the top of the screen that lets the user show\/hide visual treatment en mass for all offers on the screen.<\/li>\n      <li>Added \u201cShow GL Codes\u201d toggle at the top of the screen.<\/li>\n    <\/ul>\n    <p><strong>Crew Drilldown<\/strong><\/p>\n    <ul>\n      <li>Changed top of Crew Drilldown to mirror the Roster List Offer Cards at the top.<\/li>\n      <li>Added internal hyperlinks to let users jump to specific parts of an offer, as there is a lot of information contained in this screen.<\/li>\n      <li>Formatted information into one column of expandable\/collapsible cards (instead of the previous two-column layout).<\/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=\"SmartStart Roster List after redesign\">\n      <figcaption><strong>Figure 13:<\/strong> Final Design of the SmartStart Roster List.<\/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        \/\/ Lightbox\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        \/\/ Carousel\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\n\n\n<p class=\"wp-block-paragraph\"><\/p>\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 Roster List and Crew Drill Down Figure 1: SmartStart Roster List and Crew Drill Down screens after redesign by Grant Houston. Introduction A Case Study on the complete [&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-95","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/naturalstructure.com\/index.php\/wp-json\/wp\/v2\/pages\/95","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=95"}],"version-history":[{"count":90,"href":"https:\/\/naturalstructure.com\/index.php\/wp-json\/wp\/v2\/pages\/95\/revisions"}],"predecessor-version":[{"id":479,"href":"https:\/\/naturalstructure.com\/index.php\/wp-json\/wp\/v2\/pages\/95\/revisions\/479"}],"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=95"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}