Streamlining EP SmartStart for TV & Film Production Staff

Roster List and Crew Drill Down

Figure 1: Hero image for this case study showing the SmartStart Roster List after the redesign by Grant Houston.

Introduction

A Case Study on the complete UX Redesign of EP SmartStart’s core features — leveraging data-driven insights learned from the UX Research phase that wrapped up just one month prior.

Goals

We wanted to reduce the friction points and completely redesign two screens that were the most highly-used in SmartStart: Roster List and Crew Drill Down. 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:

A. Search, Filter and Sort UI + Microinteractions

B. Iconography and Approval Chain Status

C. CTA (Call-to-Action) Buttons

D. Inconsistent Information States

Summary of Research Efforts

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 — Philosophie — to run these activities.

  • Moderated Interviews: Researchers conducted a total of 39 moderated interviews with EP stakeholders, client users, and crew users to understand the issues with the customer experience with SmartStart, SmartTime Classic, SmartTime Mobile, and Support.

    • EP Stakeholders (12)

    • Client Users (19)

    • Crew Users (9)

  • Experience Map: 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.

Please note: While I didn’t 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.

My Responsibilities

  • Redesign Roster List and Crew Drill Down

  • Leverage research insights to resolve friction points outlined above and inform design decisions

  • Apply UX best practices

  • Re-think the overarching interaction model and navigation within and between these two screens

  • Optimize underlying information architecture

My Team

  • Sr. Product & UX Designer (me)

  • Product Manager

  • Product Owner

  • Developers & Engineers

  • QA Engineer

  • Stakeholders

Current Design

Figure 2: (Left) Roster List. (Right) Crew Drill Down - View Full Page

UX Priorities for Redesign

Figure 3: UX Priorities for (Left) Roster List and (Right) Crew Drill Down.

A Search, Filter and Sort UI + Microinteractions - 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.

B. Iconography and Approval Chain Status - The icon collections used in different places within SmartStart negatively impact usability because:

  • They are ambiguous and lack static labels.

  • They rely upon tooltips to convey meaning — which takes time and is ineffective because the user has to hover, wait, read, and repeat for each icon.

  • 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 (tha

C. CTA (Call-to-Action) Buttons - The number and variety of CTA buttons (some shown above in the screenshot, and more to the right) is bad for usability because:

  • Their dark, saturated colors give each of them a lot of visual weight.

  • There is often more than one on a screen, which means they’re all competing for attention and drawing the user’s gaze to different sections of the screen all at once.

  • 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.

D. Inconsistent Information States - 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 — and where — every time they click/tap back and forth between them.

Figure 3a. Variety of CTAs

The Process

Generally, the process for this and other projects would typically follow the following process:

  1. Sprint 0: UX Research and Requirements Gathering

  2. Sprints 1 – X Iterations:

    1. Whiteboard & Sketching

    2. Wireframe

    3. Prototype

    4. Weekly or Bi-weekly Reviews for Feedback

      1. Frequency depends on how far along in the process a given feature is.

      2. Generally involves product owner, product manager, other stakeholders, developers, and QA engineers.

    5. Repeat

  3. Milestones: User Testing takes place periodically throughout the design process, with frequency dependent on budget, user availability, and other factors.

Figure 4. Crew Offer Cards

  1. Created a card header that’s now visually distinct from the rest of the card, and it contains the status flag selector (added a caret icon to convey that it’s actionable) and crew member’s name in the top-left, and all primary/secondary CTAs — with appropriate styling of fill for primary and outline for secondary — and the actions dropdown in the top-right.

  2. Divided information within the card into three columns, each with a subheader and created a grid structure to improve alignment and spacing of data points.

  3. Removed the offer status icons — previously horizontal — and provided a checklist-style of icons/labels in the second column under “Offer Status,” with each row containing either a step status icon and step name, or an approver.

    1. Up to five approvers are listed individually by role and name(s), and if there are more than five, links appear in the subheading and list itself allowing the user to “Show More Approvers.” This list would dynamically expand in place, increasing the height of the card itself on the screen.

    2. Explored and introduced a collection of four standardized status icons that more efficiently communicate the status of each step.

  4. In the “Key Information” column on the right, kept the use of the warning placard icon, but changed its default fill color from red to marigold — with red only being now being used for “immediate action needed” data points.

Design Iterations

1st Iteration

Figure 5. Crew Offer Cards - Action Menu Open

Figure 8. A collection of cards in a Roster List — each illustrating a potential permutation based on its offer status, number of approvers, etc.

1st Round of User Testing

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.

Insights

  1. While overall users liked the consolidation of the CTAs, the reduction of “seeing red” from the harsh alert icons, and overall thought that was being put into how information was being organized, the “Offer Status” column wasn’t resonating intuitively with them.

  2. Key feedback on that last point was that name AND role for approvers wasn’t necessary, as production staff typically had everyone’s name and role memorized early on.

  3. Additionally, some users missed the row of approver icons that had been removed, but after additional conversation to to get more specific feedback, admitted they were unintuitive and that at least having each approver STEP’s role name in text form was more helpful.

Three points I took from this — which I also confirmed through several conversations with team members and users:

  1. Representing an approval chain visually was important.

  2. Offer Status and the Approval Chain didn’t necessarily have to be intertwined into one long list of steps; in fact, the two progressions could potentially be represented separately.

  3. Production staff typically had everyone’s name and role memorized early on, and they could quickly recall who a person was just from their initials.

2nd Iteration

Approval Chain Visual Exploration

Most approver chains represented visually took on the convention of circles with two-letter initials inside them — more or less borrowed from the use of circular avatars in social media sites that also used initials of a person’s name in the absence of an actual photo of them. Instead of using random icons whose meanings were ambiguous at best, having initials would at least be more usable.

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 even how to represent groups at an approval level (when more than one person at a given approver level is designated as an approver, but approval is only needed from one within that group). The progression is illustrated in Figure 9.

Figure 6. Crew Offer Cards - Approver Details Shown

The number of approvers in an approver chain on any given production vary. Typically there are 3 to 4, but some studios/production houses — e.g., Disney — have up to 15. It was important to design cards that could scale to support this requirement, but do so in such a way that still allows the user to see more than just one card at a time on the screen.

Figure 7. Iconography and sizing recommendations to visual design for the Offer Status and Key Information Line Items

Figure 9. Progression of approval chain visual exploration, which can be summarized by the following points:

  1. Circles are more difficult to parse than square or rectangles, because each circle edge and its interplay with its neighbors is cognitively more costly than rectangular edges that fall into a predictable grid pattern.

  2. Enumerating groups AND all their respective members is too much and quickly gets out of hand with the sheer number of rectangular icons becoming untenable.

  3. Using a group icon would be acceptable, so long as there’s a way to see members of that group when needed.

Integrating Visual Approver Chain

Figure 10. At first, I dropped the visual approver chain into the Offer Status column.

Figure 11. Illustrating how 15 levels of approvers would look.

Figure 12. 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’s button, since color alone should never be relied on to communicate state (success, fail, etc.).

Also added “Missing Uploads” functionality in the Offer Status column, and made both it and “GL codes” dynamically able to be shown and hidden so that users didn’t have to click into the Crew Detail screen for that information.

Summary of Changes Before 2nd Round of Testing

Roster List

  • Separated the approver chain from offer status

    • Redesigned the approver icons, using initials for individuals and a group icon to represent pools of approvers for a given level.

    • Oriented them horizontally to match the same orientation used throughout other EP apps.

    • Offer Status is vertically-oriented and uses descriptive labels that are dynamic, but consistent.

  • Changed visual treatment for highlighting exceptions so they are less triggering.

  • Added “Highlight Exceptions” toggle at the top of the screen that lets the user show/hide visual treatment en mass for all offers on the screen. This selection maintains state across screens for each user, and alleviates noise on the screen.

  • Added “Show GL Codes” toggle at the top of the screen that lets the user show/hide codes specifically useful for production accountant users, but not necessarily so for other users. This selection maintains state across screens for each user, and alleviates noise on the screen.

Crew Drilldown

  • Changed top of Crew Drilldown to mirror the Roster List Offer Cards at the top

  • Added internal hyperlinks to let users jump to specific parts of an offer, as there is a lot of information contained in this screen.

  • Formatted information into one column of expandable/collapsible cards (instead of the previous two-column layout).