Creating a richer browsing experience for fans by elevating related content
U.S. Soccer Responsive web
Overview
A strategic redesign of U.S. Soccer's web article template to improve readability and engagement while better serving the federation's goals.
My role:
→UX Research
→UX Strategy
→UX Design
→UI Design
→ Interaction Design
→Prototyping
(01)
Key user needs identified through industry best practices
In pursuit of crafting an unparalleled user experience for enthusiasts of the beautiful game, my initial audit of the original article template led me to focus on the following themes:
→Make content easier to scan and digest quickly
→Elevate relevant and related content
→Provide users with additional types of content
(02)
Establish business goals to create focus
Working with internal stakeholders I gathered and summarized key goals for the federation:
→Increase visitor return rate and time on site through improved user experience
→Increase ad views per visit
→Update the interface to better match the updated design system
(03)
A new layout tailored around the new goals
This approach helped with important business goals & user needs simultaneously:
→Left aligned text for better scanability
→Provided industry best practice width limits to headlines and body text to avoid long fatiguing lines of text
→Introduced a left column to bring an ad and related content links above the fold
(04)
A data-driven animation solution leads to an increase in ad impressions
Based on page tracking data I knew that roughly only 20% of users scrolled far enough to reach the ad at the bottom of the old template.
Using the average scroll data the new template is projected to:
→Increase desktop ad impressions to roughly 100% of desktop users
→Serve roughly 50% of desktop users a second ad impression from the scroll animation
(05)
I provided opportunities to continue content discovery to combat bounce rates
This approach supported the business goal of decreasing bounce rates, while the UX enhancements provided users with quicker and easier access to additional content on topics they are likely interested in. I also applied a more impactful visual treatment than the related articles in the side panel, aiming to give more stopping power to the last section on the page.
→Increase app interaction during and after match
(06)
Logic and documentation deliverables to support development
I produced final documentation assets as project deliverables, including recommendations for content display logic with specific callouts to edge-case scenarios, ensuring nothing was left to assumption for the development team.
