MAJOR LEAGUE SOCCER X AVANT PARTNERSHIP
Designing a sub-brand identity for a co-brand partnership
ROLE
Lead designer
TEAM
Managed by Sophie Erskine
Strategy developed by Partnership team at Avant and Major League Soccer
TYPE OF DESIGN
UX/UI, branding, development
TIMELINE
2022–2023, launched August 2023
PROJECTED GOALS
7k sign-ups in first 6 months of launch
1.5-3k cards per month to break even
8k impressions on Avant social channels
200k impressions via MLS newsletters
300–500k impressions on Avant paid digital
RESULTS
- 2 in-house designed cobrand credit cards, 24 MLS club credit cards total
- 2 launched partnership website experiences, and 8 final pages, including: Avant Card Status pages (Coming Soon, Waitlist, Live, Seo-optimized Live) and Pre-qualification flows (Pre-screen offer form, declined offer, success offer, form if directed from direct mail, various modals)
- 18 live Fiserv platform pages
- 5 annual newsletter graphics
- 8 social / email posts leading up to launch and MLS all-star game
- 4 stadium LED promo video graphics & banners
- 1 proposed sweepstakes landing page
- 1 credit card sign-up immediately after launch
Overview
In August 2022, MLS and Avant unveiled a card tailored to MLS fans, empowering undervalued customers to manage their finances while embracing their love for soccer.
The MLS Forward Credit Card by Avant offers pre-sale access to MLS events and rewards points for cash back, gift cards, and discounts on merch. The goal of this partnership was to increase Avant brand awareness and engagement amongst MLS fans. From May 2022 to December 2023, I led design efforts at Avant to aid in this promotion.
KEY INSIGHTS
How can Avant leverage insights from their initial credit card's success to replicate engagement for this new offering?
How can the MLS immersive fan experience attract Avant's existing customers with diverse demographics and needs?
How can Avant maintain its core brand identity while adjusting to match the powerful MLS identity?
HELPFUL INFO
This is Avant’s first major partnership— Avant’s core card, the Avant Credit Card—was named the third fastest-growing card business in the U.S. by Nilson. Avant Credit Card holders grew 145% in 2021 and surpassed one million cardholders in January 2022.
Avant's primary demographic consists of individuals over 60 years old with savings of $400. While some MLS fans may fall within this demographic, the majority do not.
The Avant x MLS review process included receiving requests, brainstorming ideas, presenting to Avant and MLS stakeholders, obtaining legal approval, and finalizing the product for launch. This process, though not always followed, led to the development of alternative methods, as discussed in the lessons learned section.
Credit card branding
PROCESS & DEVELOPMENT
- Avant secured licenses for 22 MLS clubs and crafted 2 personalized Avant cards. I led the strategy and creation of these personalized cards, while the MLS internal team managed the MLS x Avant core lockup and club cards.
- I developed three card options that I felt enhanced the Avant brand and aligned with the passion of the MLS brand. Since I lacked specific information on the MLS "fan," I relied on internet searches and the MLS website. I also collaborated with internal stakeholders to gain additional perspectives.
Photography—
High Contrast . Dramatic . Momentum
Iconic—
Established . Edgy . Confident
Collage—
Unique . Personable . Maximalist
FINAL CARDS
The final two personalized Avant cards included a primary photography-themed card and a secondary collage-themed card. The primary card mirrors the style of MLS photography, while the collage card embodies the modern energy of Avant's brand.
Avant web pages
OVERVIEW
Following the launch of the MLS Credit Card and its landing page on the Avant site, the Creative Services team assessed the page components for enhancements based on stakeholder feedback. Additionally, we evaluated the live MLS landing page for SEO optimizations to improve visibility in search results and attract potential new customers to sign up for credit cards.
ROLE
I collaborated with the Marketing and Partnerships teams to review new component requests and ensure alignment with the Avant design system. Taking into account constraints tied to MLS, I developed an updated landing page that effectively communicated MLS-related content in a fresh tone.
TIMELINE
Due to delays, three separate web pages were built to go live depending on factors related to the MLS Forward card launch.
THE CHALLENGE
The Brand and Acquisitions team requested additional sections to enhance the search rankings for the MLS x Avant card page. Despite active promotion by MLS on their own site, the page was not appearing on the first page of search results at the time.
A module that showcases all available club cards
A module displaying a text list of all participating clubs
The addition of an expanded FAQs section
IDEAL PROCESS
Develop current site-wide Avant design system
Evaluate existing page and define solvable problems
Redesign and test search optimizations
Launch final website deliverables
KEY INSIGHTS
Introducing an accordion component to the FAQ would address the length concern.
Updating typography and color application will create a more customer-friendly environment for information consumption.
Adding personality can help customers see the card as beneficial, while a highlighted list of teams shows MLS fan inclusivity.
Placing the rewards section at the top of the page saves customers time and simplifies finding information when shopping for a rewards card.
CONSTRAINTS
Due to changes in the web development roadmap and initial backend structure, the live site doesn't reflect the UI as shown in the Figma files. Nonetheless, the Creative team desires the pages to resemble the Figma designs and collaborated with the dev team to initiate a strategy for enhancing the most frequently used components.
LESSONS
Ideally, I want the website to closely resemble the Figma file for effective testing of Avant's Google search rankings. Additionally, I'm keen to analyze which site areas are most clicked on to gauge customer preferences. Since finance products tend to be text-heavy, understanding what visuals or copy resonates best with customers would be insightful.
Hero artwork was too difficult to read, so a simple typography shift allowed for legibility and shift in tone.
Exploration of card art to determine if the best solution is to list clubs beneath the headline. Final solution was to break the club text and card art module into two separate blocks.
Block card updates | Clear distinction of participating clubs
LED stadium signage
OVERVIEW
- We were tasked with creating LED signage for all MLS stadium games in the 2022 and 2023 seasons. The first season's signage was rushed and underdeveloped. In 2023, I focused on researching and refining the signage to elevate the Avant brand and demonstrate growth.
- In the 2023 season, we refined the brand identity to better integrate MLS branding with Avant's core branding. Changes included using an extended typography library, incorporating textures, and enhancing engagement with motion graphics in the videos.
CONSTRAINTS
With limited feedback and strategy beyond May 2022, I collaborated with another designer internally to focus the stadium signage on card offerings and value propositions, aligning closely with the bold, dramatic, and momentum-building direction of the credit card's look and feel.
RESULTS
The 2023 LED signage debuted at the sold-out MLS All-Game with 20,621 attendees. The captivating visuals and focus on card offerings likely boosted sign-ups. Yet, I aimed to assess post-game sign-up numbers and explore UI testing with a focus group for promotional materials.
2023 Season
2022 Season
Social media posts
OVERVIEW
Before the December 2023 All Star Cup, MLS asked for social media posts to align with their initiatives. With limited insight, I collaborated with the Creative and Partnerships teams to craft a series of versatile, generalized posts. They all conveyed a consistent visual story, ready for adaptation if needed.
DELIVERABLES
After multiple revisions and a change in MLS initiatives, the final social media promotion was condensed to three sets of artwork: one for announcing playoffs, another for Black Friday, and a general card promotion.
FINAL RESULTS
Metrics for these posts are currently unknown. However, I believe they would have garnered some online engagement. It's worth noting that Avant's personal social awareness was on hold when these were created.
Fiserv ticketing portal
OVERVIEW
Avant utilizes the Fiserv ticketing portal for their MLS credit card rewards system. While the platform is outdated, the business maintains a strong relationship with the company due to their credit card production, necessitating its use.
RESULTS
I haven't seen the final live version yet. I expect the functionality to meet basic requirements, such as users being able to sign in, apply points, earn rewards, and check out.
CONSTRAINTS
- Outdated technology—slow and lacking modern features. It fails to meet the visual appeal and needs of potential Avant customers.
- Limited information—Many UI change requests didn't align directly with UX functionality. I often had to relay questions to the project manager to contact Fiserv for implementation possibilities. The UI was restricted by the built-in code's limitations and lacked customization options.
- Lack of preparation—The partnership team's slow delivery of requests resulted in unmanageable quick turnarounds that don't align with the business process. All deadlines must be set at least one to two months in advance to be feasible.
KEY INSIGHTS
Upon logging in to the rewards platform, what information is crucial for the user to see?
Given the platform's constraints, how can we ensure a smooth checkout process for users, minimizing confusion?
How can we visually highlight the available MLS games effectively, considering the limited space for text?
Phase 1 Development: Cashback
Phase 1 Development: Gift cards
Phase 2 Development: Tickets
DEVELOPMENT
I started by examining screenshots from the Fiserv user guide to understand the checkout process. With no live site accessible, I contacted the Partnerships team to prioritize three rewards groups: Cash back, gift cards, and MLS tickets. Next, I asked for guidance on which Fiserv pages were essential, relying on others' expertise due to my unfamiliarity with the platform.
PHASE ONE
The checkout process was restricted to cash back and gift card categories only, despite displaying all rewards on the landing page, due to delays in ticket availability. This issue will be addressed in phase two, as it represents a significant oversight and functional breakdown.
PHASE TWO
In phase two, the MLS ticketing page was developed. Despite platform limitations, I experimented with various card descriptors to display game details, requiring clear placement of team info and logos in a small square. However, full information was visible only after adding items to the cart, posing a significant, unresolved functionality issue.
The ticketing checkout process involved numerous stakeholder meetings. Due to Fiserv's sorting limitations, implementing team filtering and game sorting wasn't viable. As a compromise, we opted for club card designs, though suboptimal.
Digital promotional materials
OVERVIEW
I designed a series of newsletter graphics for MLS to incorporate into their website and email newsletters, alongside advertisements from other MLS partners. The graphics focused on the product launch and provided an overview of the card product.
CONSTRAINTS
Internal stakeholders requested a new lockup to display MLS as the official partner of Avant. I proposed several variants to ensure compatibility across all promotional platforms, including the Avant website, social media, and banner ads. Despite challenges with MLS's uncertain usage permissions, a usable lockup was eventually provided after some delays.
Lessons
Despite external challenges, I anticipate an increase in customer engagement and sign-ups over the next two quarters, assuming external factors are resolved.
Due to ever-changing timelines, I decided it would be beneficial to adjust all design identity to be ever-green, and only possibly shift with one-off requests. This would allow for gradual evolution but also alleviate workload in times of quick-turnaround.
The strategy involved emphasizing completed briefs and dual timelines (long-term, six months out, and short-term, as soon as a week prior). Short-term deadlines were challenging due to legal review requirements, which could take weeks to months. I also pushed for prioritizing the public introduction of new activations, irrespective of external stakeholder opinions.
I learned to manage multiple stakeholders and create organization through the rounds of reviews and legal process.
To rectify internal errors regarding scope, timelines, and shifting initiatives, I proposed a new communication strategy. Although initially successful, ongoing implementation could have enhanced communication methods. As the sole designer on this project, I required more internal support to advocate for equitable representation in this partnership.
A major issue in this project is the undervaluation of UX/UI design. In a startup environment, both are equally crucial. Instead of focusing solely on launching the product, I spent time advocating for their importance. Due to the absence of testing, there are currently no measurable outcomes. I relied on my expertise, insights from the focus group, and input from my design team to make incremental adjustments for the sub-brand's growth.