Product & Content Designer
My Role
UX Writer, Content Designer
Team
Product Designer (1)
Software Engineers (2)
AR/VR Graphics Engineer (1)
Business/Marketing Strategists (2)
Process
Plan > User Research > Ideate/Write Copy > Prototype > Test > Iterate > Test
Timeline
24 hours
Tools
Figma
THE CHALLENGE
HBCU Battle of the Brains is an annual hackathon that brings together students from historically black colleges and universities (HBCUs) in the United States to work on projects for major organizations and startups. Some of its partners include The National Football League, Dell Technologies, Expedia Group, Home Depot and KPMG.
Our challenge was to create a website or mobile application that utilized existing NFL sideline technology to improve the viewing experience of American football spectators. We were also tasked to maintain the integrity of the game, and implement technologies that would grow fandom and boost engagement.
​
I participated in the competition as a Content Designer on an 8 member team, competing with 34 other teams from various colleges across the country.
SOLUTION
Fanxcel is a mobile application that fosters a connection between fans and the NFL. It utilizes the NFL’s Sideline Technology and Augmented Reality to provide fans with dynamic views as well as a personalized and immersive experience of the game.
Additionally, it features a platform where they can build and maintain communities around their favorite NFL team.
APPROACH
The team and I deliberated on several ideas and for the first two hours of our 24 hour deadline. After we gained clearer insight on what our solution would be, I analyzed the NFL app as well as other sport streaming apps available and noted areas where our solution could improve viewing experience.
In addition, I studied the voice and tone used on the NFL website and app to comprehend its language style, and conducted interviews with NFL employees and NFL players to understand the brand and their expectations for sports streaming apps.
When I had sufficient knowledge of the NFL’s brand and audience, I started working on the app’s Information Architecture and Microcopy.
Finally, I conducted usability testing in order to iterate and improve the app’s content.
Planning
We decided to create a mobile app that included features curated to keep young audiences engaged with American football, and identified our target audience (members of Gen Z aged 12-26).
RESEARCH
As our 24 hour time limit progressed, I interviewed 6 NFL employees, and 3 NFL players to learn about the NFL’s vision and expectations for our solution.
Some of the insight I received was:
​
-
They wanted us to grasp the attention of younger demographics
-
It was important to encourage users to remain engaged with the NFL throughout the season
-
We needed to incorporate dynamic views of the game
After gaining ,more insight on the expectations for our solution. I utilized online resources to gather information on American Football and our target audience. The following findings helped me gain deeper understanding of the audience and allowed me write with the user in mind:
Usage Overview
Since our target audience had a short attention span, It was crucial to ensure that copy was simple, and relevant. I also maintained the NFL's voice and tone, while choosing to use terms that were popular to the demographic.
ITERATION
The 24 hour timeframe we were given did not give me sufficient time to test the copy extensively. However, I presented the product to two of our coaches who were also NFL employees aged 24 and 26, and improved the Watch, Highlights, and AR/VR pages based on their feedback.
WATCH
During testing, I observed the need to rewrite copy in order to create urgency, invoke curiosity, and encourage comprehension of product features.
Before
Did not grasp users' attention
Too vague for users to comprehend the feature
Inaccurate description
AFTER
Edited copy to create a sense of urgency
​
Renamed heading
Included copy to improve clarity of the feature’s functions.
​
Accurately conveys context
HIGHLIGHTS
I included copy to help with user comprehension and edited terms that did not match the NFL’s brand voice. Finally, I rewrote terms that were too vague and did not accurately communicate what the section of the product was about.
Before
No context
Does not match brand voice
Ambiguous and inaccurate
AFTER
Included heading to ensure clarity
Edited copy to match brand voice
Renamed tab bar for added context
AR/VR
Participants did not know what to do when the AR/VR field failed to display.
To solve this issue, I included a pop-up message to inform users of the necessary steps.
Before
No instructions to guide the user on what to do when the feature does not respond
AFTER
Included copy that provided users with suggestions to better assist them in their journey
Outcome
The competition concluded with the team and I being amongst the top 10 teams in a pool of 34 competitors.
In addition, I was commended by the coaches for my ability to take initiative by conducting usability testing and making good use of the limited time we were allotted.
Participating in this competition was a riveting and very impactful experience for me, and greatly improved my ability to work under pressure, and complete tasks before their deadlines.
