UI/UX Design, Interaction Design, Content Strategy
My Cause, My Cleats
Designing a microsite that connects Lions' fans with their favorite players' charities.
Role
UI/UX Designer
Client
Detroit Lions
Industry
Sports
Year
2023
Project Overview
Every year, the NFL hosts their annual My Cause, My Cleats charity event. This is when all players and coaches pick a cause that's important to them and represent their chosen organization through custom designed cleats. During the event, fans have the option to donate to these causes and when the event is over, the cleats are auctioned off and all proceeds go to each players' chosen charities.
In 2023 due to limited bandwidth, the Detroit Lions' marketing team requested my team to build an engaging microsite that featured their all of their content, which includes product images for ~30 team members, their headshots, and pop-up blurbs that explains why they chose their organization. The marketing team also warned us that not all of the product photos would be ready in time and that I would need to have an alternative solution to present members and their causes without the photos. With all this in mind, I knew this would be a difficult, but rewarding challenge.
Every year, the NFL hosts their annual My Cause, My Cleats charity event. This is when all players and coaches pick a cause that's important to them and represent their chosen organization through custom designed cleats. During the event, fans have the option to donate to these causes and when the event is over, the cleats are auctioned off and all proceeds go to each players' chosen charities.
In 2023 due to limited bandwidth, the Detroit Lions' marketing team requested my team to build an engaging microsite that featured their all of their content, which includes product images for ~30 team members, their headshots, and pop-up blurbs that explains why they chose their organization. The marketing team also warned us that not all of the product photos would be ready in time and that I would need to have an alternative solution to present members and their causes without the photos. With all this in mind, I knew this would be a difficult, but rewarding challenge.
Utilizing their brand
The Lions provided an extensive branding kit for me to use for the microsite. During my review, I found opportunity to add animation and interactivity to assets so that they would engage with users and guide them through the site. Knowing that I would need to find a solution that would organize the content so that it didn't overwhelm users, I compiled different modules, such as carousels, pop-up windows, and tab systems within Ceros, a no-code publishing platform. I also made sure that the modules were reusable for future projects.
The Lions provided an extensive branding kit for me to use for the microsite. During my review, I found opportunity to add animation and interactivity to assets so that they would engage with users and guide them through the site. Knowing that I would need to find a solution that would organize the content so that it didn't overwhelm users, I compiled different modules, such as carousels, pop-up windows, and tab systems within Ceros, a no-code publishing platform. I also made sure that the modules were reusable for future projects.
Wireframing the Layout
As I was designing this site, I utilized the tab system and pop-up window modules extensively. The tab system module would become a "filter by" system to organize the team alphabetically by first name. This would significantly reduce long load times and page crashes since only a set number of people/cleats would be shown at a time. I also made sure that the layout could be reused as a template for future projects.
To solve the issue for players that did not have product photos, I crafted an alternative modular layout that would showcase members' names, their charities, and outbound links. This way, everyone is included and not left out.
As I was designing this site, I utilized the tab system and pop-up window modules extensively. The tab system module would become a "filter by" system to organize the team alphabetically by first name. This would significantly reduce long load times and page crashes since only a set number of people/cleats would be shown at a time. I also made sure that the layout could be reused as a template for future projects.
To solve the issue for players that did not have product photos, I crafted an alternative modular layout that would showcase members' names, their charities, and outbound links. This way, everyone is included and not left out.
Full Design
After I presented and gained marketing team's approval for both the layout and animations/interactions, I built out the microsite using the modules that I previously created in the brand toolkit. Since most of the heavy lifting was done, it was just a matter of moving the pieces around to complete the puzzle and filling in the content.
After I presented and gained marketing team's approval for both the layout and animations/interactions, I built out the microsite using the modules that I previously created in the brand toolkit. Since most of the heavy lifting was done, it was just a matter of moving the pieces around to complete the puzzle and filling in the content.
Outcome
After the event was over, the microsite proved to be a success in raising awareness to the charities and making it accessibility for users to donate to the causes. The Lions ( and their partners) managed to raise a total of $200,000. As of 2024, the microsite is being used for their 2024 campaign and can be reused or even repurposed for future events.
After the event was over, the microsite proved to be a success in raising awareness to the charities and making it accessibility for users to donate to the causes. The Lions ( and their partners) managed to raise a total of $200,000. As of 2024, the microsite is being used for their 2024 campaign and can be reused or even repurposed for future events.
Other projects
DMA Museum Map
Designing a mobile experience that helps visitors find their bearings.
The Standard Move-In 2023
Designing a landing page that organizes important information for students.
AI as a Service
Transforming a static PDF into an interactive experience
Quadreal Spaces
Creating awareness for an innovative office seat reservation system