US SOCCER.COM | US SOCCER.COM | US SOCCER.COM | US SOCCER.COM | US SOCCER.COM | US SOCCER.COM | US SOCCER.COM | US SOCCER.COM | US SOCCER.COM | US SOCCER.COM | US SOCCER.COM | US SOCCER.COM | US SOCCER.COM | US SOCCER.COM | US SOCCER.COM | US SOCCER.COM | US SOCCER.COM | US SOCCER.COM | US SOCCER.COM | US SOCCER.COM |


Visit the Site  |  UI Design, Design Systems





Back Story

US Soccer approached AKQA Portland to re-establish their brand system and rebuild their website from the ground up. This redesign was at the forefront of the Women’s National Team’s trip to the 2019 Women’s World Cup in Paris, making their fans feel more connected to their nation’s team on and off the pitch.

Objectives
  • Create a new brand identity for US Soccer focused around the “The Shield”
  • Create a new website experience for US Soccer from the ground up with a mobile first focus
  • Create new tool set for digital marketing and experiences for US Soccer as they prepared to go into 2019 Women’s World Cup








Discovering The CX Hardships



Major Media Outlets Lack Fan Fulfilling Coverage
Fans were desperate for a digital space to access content for the Women’s National Team and the younger men’s teams this is because these teams were overlooked by major sports news networks such ESPN, Bleacher Report, and Yahoo Sports
It’s Hard to Track The Team’s Games and Overall Schedule
One of the biggest challenges for fans was keeping track of the team’s off and on, year-round game schedule. It was found that many of the fans would accidentally miss games or the overall build-up to a big match simply because they didn’t know the game was even happening.
Lack of Transparency Between Players and Fans
One of the biggest benefits for Soccer fans in the UK is that they have such access and transparency with the players of their favorite team. This connection builds a strong emotional connection with the fans, the players, the club, and the nation.
A Non-Mobile Friendly Website For Fans on the Go
Making a mobile-first experience was essential because 65% of their user’s traffic experienced on mobile devices, but the existing site was far from mobile-friendly due to the design and functionality




Focusing On The Building Blocks



To ensure total systematic flexibility we focused on the building blocks (aka modules) and their features first. This approach was to ensure each module could easily fit on any page of the site and function independently from the overall page layout.









The Pillars Of Creative




Representing Our Nations Colors
A creative direction featuring red, white and blue at it’s core.

Angle of Attack
A creative direction focused on high enegy and sharp angles, utilizing the angles of 120 and 45 degrees for rhetorical elements.
Embracing Symbolism 
Our nations colors paired with the 13 stripes to represent the original 13 colonies.





My Role, Being The ‘Glue’


I was hired on as an Interaction Designer for the website redesign to be the middle person between the UX, UI, QA, Dev., and leadership teams, while working within each phase of the project. I was in charge of all design to dev. documentation, and focused on finding ways to evolve the design system’s characteristics and functionality.
The website was created with a module-based system, this allowed for flexibility, scalability as well as future proofing the website for clients. In my role, I maintained a 80 module (and 11 page templates) library to ensure each module was pixel perfect, using universal styles that were responsively formatted. 
The challenge of this role was not only delivering pixel perfect documentation, but also staying adaptable as the direction of the project changed and the scope increased. Near the end of the project, I led workshops with our clients that highlighted the new CMS’s functionality, and taught their authoring team how to construct new pages.







Highlights


During this project the team at AKQA was able to push forward and develop three new innovate features for the US Soccer brand.



Insider program
U.S. Soccer Insiders is the enhanced loyalty program for USWNT and USMNT fans. This new program allows fans to unlock perks like access to presale tickets, full access to the mobile app, and early invites to fan events. This program also allows for US Soccer to provide personalized content and communications to their users so that they’re getting the most relevant experience across digital and physical touchpoints with US Soccer.




Stats Integration & Live Match Engine
Further integrating player stats, and adding the ability to track matches live was crucial to making this website feel like the centralized hub for everything US Soccer. The new live match feature brought a new sense of energy to the site since it always felt directly connected to what was happening on the pitch. This feature took months to make, and was tested several times before launch day while watching WNT games with a few dozen boxes of pizza and team gatherings.



Editorialized Player’s Lives On
& Off The Pitch

Considering the teams play a limited number of matches in a given year, the creative team at AKQA recognized that we could not rely on stats, highlights, and gameplay as our only source of content. With the main goal of expanding the connection and experience to the nation’s teams in mind, AKQA tapped into US Soccer’s resource access to the players to create unique editorialized content focused on the player’s lives on and off the pitch.





The Team


This project was guided under the leadership of AKQA Design Director Dom Murphy, Associate Technical Director Gary Foubister, Associate Program Director Jessica Danner, and many others.