USA Football

Abstract

In late 2017, USA Football approached Crafted to assist in developing their NFL Flag Football Application. We were challenged with a mere four month timeline to develop a solution that would be end-user ready to thousands of potential customers. Since the success of Flag, Crafted has continued to design and develop numerous web products for USA Football.

Design
Web

Wordpress

React

Next.js

Server-Side Rendering

Redux

Redux Thunk

KendoUI Grid

Design System

01

NFL Flag Football

We began by delivering expensive user flow maps and ensuring all requirements were met for each user persona. We used cutting edge technology employing a universal javascript architecture based on Node.js and React. The result was a fast, reliable and high-functioning web app with an extensive user dashboard layer.

Because of our agile strategy and thoughtful planning, the site was successfully able to handle thousands of concurrent visitors during a Super Bowl commercial (something they had ever previously been able to do), providing an enjoyable and seamless user experience.

User Journey Mapping

User Persona Research

Strategic Product Research

Wireframes

Interactive Prototypes

Visual Design

Sketch App

Invision App

Wordpress

React

Next.js

Server-Side Rendering

Redux

service-icon
design
service-icon
web

10,000 +

Concurrent, real time users

40

Redundant scalable servers

2%

CPU utilization on each server

service-icon
design
service-icon
web

02

USA Football Admin Page

USA Football was seeking to drastically improve their data integrity. Due to a system that was difficult for many of their users to use, mismatching of data was a common issue. We were hired to design and develop the front-end of their member portal.

Powered by Next.js and React, the portal includes account creation, assigning users to their specific roles (i.e. coaches, parents), associating users with their correct football organizations, in-depth training modules, online certifications and more. Our goal was to make these processes as fluid as possible to support the needs of users in a simplistic manner. To ensure the accuracy and consistency of the data, we created a multi-tenancy system that gives users dynamic information pertaining to their account.

In order to minimize additional technology support post launch, we created an in-depth design system that includes all the components that make up the portal. This design system works alongside Next.js server rendering to create a consistent layout throughout the portal.

As a result of these processes, we’ve created an all-inclusive web application which continues to be updated with new features.

User Journey Mapping

User Persona Research

Strategic Product Research

Wireframes

Interactive Prototypes

Visual Design

Design Thinking & Systems

Sketch App

Invision App

Wordpress

React

Next.js

Server-Side Rendering

Redux

ReduxThunk

03

Football Development

USA Football came to us with a need to create a Learning Management System (LMS) for their Systems program, Football Development. This system improves a coach’s understanding of how to teach football correctly and effectively. Some of the learning materials consist of articles, videos, quizzes and PDF resources on different techniques such as tackling, shoulder tackling and general contact in football.

Because Football Development is a subscription product, Crafted had to think through how the design would scale and display with each dynamic account type: free, freemium and premium. We worked closely with USA Football to determine business requirements for each of these account types in order to design and develop accordingly.

As for the LMS, one of our biggest challenges was to create a custom progression track for each type of learning material. With a foundation of React and Next.js, we were able to track user’s system completion rate, video progression and quiz progression and display this information in a digestible dashboard for users.

Through Wordpress, we give internal power to USA Football. As a result, systems can be edited, created and customized all through a single Content Management System (CMS) and complex flexible content editor. Each component is carefully designed and developed to work on any page and in any order. These tools make the web application scalable, which limits the need for technical support. Football Development continues to grow as new content and systems are added, increasing user success and subscriptions for the business.

User Journey Mapping

User Persona Research

Strategic Product Research

Wireframes

Interactive Prototypes

Visual Design

Sketch App

Invision App

Wordpress

React

Next.js

Server-Side Rendering

Redux

service-icon
design
service-icon
web

I had so much fun working with you guys on the new website. Thank you for being so patient with me through the launch and after. This was a great experience for me and my career and I truly appreciate all the help from you guys and the Crafted Team.

We have built countless apps for things like flag football, outdoor adventures, optometry and much more. Let’s help you bring your idea to life.

Wrap Up

Up Next

Memberway

Making it easy for staff and members to communicate effectively on their own private platform.

Design
Native

React Native

React Native SVG

Redux

React Navigation

Firebase

Firestore

Google Cloud Functions

Push Notifications

Styled Components

Read the Case Study

From idea to MVP in three months.

Learn how we do the seemingly impossible.