FastModel Sports - Design System
FastModel Sports creates software tools for sports teams, coaches, and players that help give an edge over their opponents. The product line includes: FastScout for creating and viewing stats and scouting reports, FastRecruit for tracking high school recruits for top NCAA college basketball programs; FastAccess for maintaining relationships with high profile alumni and donors; FastDraw for play diagramming; and FastProtect for utilizing AI and machine learning to track social media activity to detect potential risk for student athletes.
Our Role
We were hired to design and implement the new design system for the entire company. Our tasks included gathering customer and business requirements in the discovery phase, design iterations with customer feedback, and embedded implementation with the development team.
Background
The first and most high priority task was to create a design system for the entire line of products. Having a consistent design language (i.e. layout, grid system, typography, iconography, and color palette) builds brand value for the customers and provides a pleasant experience. When a customer goes from one product to another, for example going from the play season to recruiting season, the experience will feel familiar and the learning curve would be greatly reduced.
The FastModel Sports design system was designed from the beginning with modularity and scalability in mind. By implementing the Shared Library feature in Sketch, every control and UI component was designed and maintained in a centralized location to maintain organization and for future product development.
Need for Consistent Design Language Across Web and Mobile Platforms
The FastModel Sports products are available on a wide range of platforms including: web, iOS, Android, macOS. One of the primary goals was for customers to instantly recognize the FastModel Sports brand regardless of which platform they were on. Even at a glance, specific UI components feel like a part of a unified family. This is attributable to setting strict standards and guidelines for layout, typography, iconography, color palette, and ensuring that all UI components are designed as a part of a central library. Maintaining symbols in a shared library meant that iterations on a design can be propagated to product specific working files.
Working closely with engineering to implement such a design system was also paramount to the task at hand. One of my core principles as a designer is to maintain a close and highly functional relationship with the engineering team. Regardless of what tools we as product designers use to design and communicate our ideas, what ends up in the product itself is the only thing that matters in the end.
Existing Designs
Web
Header System
At the core of the design system is the FastModel Sports web header system, which houses the main navigational components, headers, and account management pull-down menus. Certain products required up to four-levels of hierarchy, so the header system was designed to accomodate primary, secondary, tertiary, and quaternary navigational elements. As in the company’s new logo, everything above the Team Header (inclusive of the primary and secondary navigation) makes use of Futura PT Bold as the primary typeface. The top left features a single sign-on feature, where a customer can quickly switch between the different products.
The various navigational layers were intentionally made distinct to mask the fact that there are so many levels of hierarchy in our products. Specifically for the secondary and tertiary navigational controls, the decision was made to add the secondary navigation in the team header to visually separate from the tertiary navigation.
The bulk of the visual design of the header system is the team header, which is comprised of the large background element that is tinted with the team’s primary tint color (procedurally calculated and stored in a centralized database) and features the team’s logo on the righthand-side (which is also stored and maintained centrally by FastModel Sports).
Team Header
The team header sits below the top toolbar and houses the primary headers and the secondary navigation. When a member of a team (NBA, College, High School, Club) signs into their account, we wanted their experience to feel custom tailored to their team. For this reason, the background is tinted to the customer’s team’s primary color and features the team logo on the righthand-side.
The background gradient is calculated based on the team’s primary tint color, which is either procedurally calculated based on the dominant color of the team’s logo or set manually based on the team or university’s brand guidelines.
The team’s logo is right-aligned in the header, and is set on top of a larger, blurred, semi-opaque version. This helps to create more depth, texture, and adds to the overall visual interest. The team’s primary tint color is also applied to interactive UI elements, which helps connect the header to the rest of the content area and also reinforces the sense of customization for our customers.
Early Design Iterations
This is one of the first design iterations of the header system. The original intent was to tint the top toolbar with the color of the product (in this case green for FastScout). We later determined that tinting controls with the product color competed with the tinting of interactive UI components with the team’s primary tint color. In other words, too many colors was caused confusion for our customers. Also, note the use of two tint colors for the team (in this case the Los Angeles Lakers had a primary tint color of purple and a secondary tint color of Yellow).
In later iterations, we tightened the metrics for the overall height of the team header and added a sharp, fully opaque version of the team’s logo after receiving numerous requests from stakeholders. The secondary navigation was moved out of the team header to visually reduce the height of the team header background. This would later be reversed to accommodate the tertiary navigation.
Final Shipping Design
In the final shipping version of the design, there are numerous changes to highlight. The top toolbar was changed to be fully opaque after feedback that the text and selected states were hard to see. The account management pull-down menu uses a thinner weight to visually separate itself from the primary navigation. The team’s secondary tint colors were removed all together to simplify the color palette. The primary header now reflects the current selected tab (i.e. “MY TEAM” is selected in the primary navigation). The secondary navigation was moved back into the team header to accommodate a tertiary navigation. The selection state for the secondary navigation features a fully-opaque selection state rounded rectangle for improved clarity. The tertiary navigation uses Helvetica Neue typeface to further differentiate from the secondary navigation which uses Futura PT Bold. Everything below the team team (with the exception of headers inside modules) uses Helvetica Neue as the primary typeface.
Team Header Examples
Here are examples of how the team header system adapts to various teams. Note how the tint color is applied to interactive UI components (in this case, the tertiary navigation). These examples were used to test for legibility. Opacity levels for text and selection states were adjusted to ensure performance against all colors.
Example / Toronto Raptors
This fully constructed comp of FastScout shows how the Toronto Raptors’ team colors work harmoniously from the team header all the way down to the content area. The team’s primary tint color and consistent use of typography are how the various UI components are unified.
Responsiveness
The layout was designed to be responsive down to 900pt width, while optimized for 1440pt widths. Examples of specification like this was used to show how text should be truncated and how certain elements are anchored.
Component Library
We took inventory at all the various controls that were needed across every product offered on the web platform. This is a small sub-sample of the nearly hundred different UI components that were designed and maintained in the FastModel Sports UI Sketch shared library. All interactive controls were designed to be tinted to the customer’s team’s primary color. All icons were delivered in vector format to also be tinted programmatically.
Mobile
Header System
Similar to the web header system, setting up a framework that is consistent across the product line was the first and most important design challenge. All of the user needs that exist on the web are also present on mobile. The need for titles, subtitles, up to three levels of navigation, customized team header, etc.
The main different is the primary toolbar was moved down to the bottom for easier access and to respect existing design patterns. We kept the visual language consistent between the web and mobile, with the primary navigation sitting on an opaque black background (selection state showing the product colors), consistent typography and familiar implementation fo the team header.
Team Header
The background gradient in the team header is tinted to the team’s primary tint color on the left and a darker shade on the right (50% team tint color opacity on black). This allows higher contrast for the logo, which has a slight blur, is semi-opaque, and sits behind the navigation and headers.
The visual treatment of the headers (title, subtitle), secondary and tertiary navigation are consistent with the implementation seen on the web variants.
Team Header Variants
From left to right are the various variants of the team header. The leftmost screen shows a setting page that is invoked by tapping the top-left FastModel Sports logo. It is not intended to be used frequently. The other screens shows the different variants of the team header based on the needs of the content area. For example, in a maps context, the content area needs to be maximized, so the short version of the team header would be used.
Team Header Examples
Here are examples of how the team header system on mobile adapts to various teams. Teams were picked based on the primary tint color across the entire hue spectrum to verify legibility and visual performance.
Body Module System
At the heart of the products are the modules–each module addresses a specific function depending on the product and the currently selected page. In the example above, this Draft Board module is tracking the top high school recruits for a given University for the FastRecruit product.
Every module on the web consists of a header and body. The header is made up of the title (left-aligned) which communicates what the module is, the list of the primary actions (right-aligned), and a horizontal hairline that divides the header from the body.
Every control tinted with the team’s primary tint color indicates interactivity. The only exception is the use of the team’s tint on the horizontal hairline. The decisions was made to use the tint color even though the layout element is not interactive in order to unify the visual design of the header system to the rest of the product. The fact that the horizontal hairline does not at all look like a piece of UI was another reason for the exception.
Inside the modules themselves, we used a 10pt grid system to align elements within. The self-contained design of the modules is highly scalable and flexible, it can be deployed as: spreadsheets, contextual menus, list-views, etc.
There were instances where the standard module template was not used. In the example of the Shot Charts shown above, we avoided using the standard header as we felt the content of the shot chart itself was enough to indicate the context. However, the consistent use of typography, color palette, and line weights still reinforce the FastModel Sports design language.
In the example of a Scouting Report shown above, sports teams for the most part prefer to print their scouting reports for security purposes. Again, the consistent use of typography, grid system, line weights, and team tint color on the horizontal hairlines reinforce the FastModel Sports design language.
Iconography
A library of icons were designed and maintained in a central location to ensure that the entire set appeared as a family. The icons do not have a consistent size because they are used in various contexts (i.e. toolbars of various sizes). The icons were primarily exported as vector (SVG) format so that they could be tinted programmatically with the team’s primary tint color. Delivered and updated using Zeplin.
Example In-Context / Mobile Navigation
A library of icons were designed and maintained in a central location to ensure that the entire set appeared as a family. The icons do not have a consistent size because they are used in various contexts (i.e. toolbars of various sizes). The icons were primarily exported as vector (SVG) format so that they could be tinted programmatically with the team’s primary tint color. Delivered and updated using Zeplin.
Global Sign-In
This is the final design for the sign-in pages across mobile and web. The design has minimal footprint so that it can scale from mobile devices all the way up to desktop browsers. The logo and the tint colors changes based on what product the customer is signing into.