Sporting Delaware

UI / UX / Website Design + Development

The Product

The stakeholders wanted this website that would be the preferred method of communication to their audience - current and prospective parents of the players. The goal was two-fold - we wanted to provide current parents with all relevant upcoming news, schedules, events, etc, as well as educate prospective parents as to why Sporting Delaware is a national top-tier club.

Sporting Delaware is a multifaceted Soccer Club that provides a comprehensive set of resources to provide the best in class soccer experiences powered by BPG|SPORTS.

Client

Sporting Delaware
General Manager, Marketing & Communications Director

Year

2020

The Research

Talking with stakeholders, we were able to determine that the user-base was going to be overwhelmingly parents of soccer players - either parents researching soccer clubs for their young athlete to join, or parents of a current Sporting Delaware player. In both instances, the same demographics seems to play - middle-aged adults between the age of 40-55 years of age, business professional and competitive, sports enthusiast, and would be geographically located in the tri-state area around Wilmington, DE.

The Design

The goal of this project was to deliver a product where the user (the athlete's parent) could easily find what they were looking for in a website that contained an overwhelming amount of information, while staying true to brand, representing one of the premier soccer clubs in the United States. The brand colors along with a clean font-selection, plenty of white-space provides, and filtered high-quality photography helped provide the luxury look and feel we were looking to achieve, while making the content easily digestible.

With the wealth of information Sporting Delaware is providing it's user, our solution was to tuck the navigation within a hamburger menu, ensuring the user will have visibility of everything Sporting Delaware, and the ability to quickly access and find the content they are looking for. Also, on the homepage under the hero we provide custom block that the club can use for important information - upcoming tournament and tryout registrations, player success and team highlights, etc.

With that said, here are two of several personas that were created:

The Prospective Parent. This user has heard of Sporting Delaware in some capacity - has a child that has played against them, driven past their facility, has been introduced via social advertising, etc. The user most likely has googled the clubs name, and will land on the homepage. The homepage was designed with this intention - a quick intro into the club, immediately into a video endorsement from the MLS' Philadelphia Unions Head Coach, followed by the 3 pillars of "Why Sporting Delaware", and what makes them top-notch, and finally a 3-pack of upcoming events - camps, clinics, etc.

The Soccer Mom. A current parent of the Sporting Delaware club player that wants to be in the know. Although a lot of the website is focused around acquiring new players, we made sure we took the current player parents into consideration by making this website the primary stop to find everything Sporting Delaware - from the different camps, clinics and programs that are offered, the latest new on team performance in both league and tournament play, as well as quick access to the third-party shop for purchasing uniforms and sideline gear. By using a mega-menu structure, we were able to provide the user visibility to everything in a super-efficient manner. And the mobile-first design, makes all of this content accessible across any device.

The Analysis

The high-end, professional look combine with page-entrance animation ultimately delivered a website design that reflected the top-tier soccer club. Providing the mega-menu, separated into main categories with subcategories, simplifies the journey, allowing the user to quickly get to the information. Sporting Delaware staff has full control over the content and images of their website, having the ability to edit everything (pages, articles, categories, navigation, etc) via the CMS.