Case Study — John Reglin

(01)

Project
Overview

Creating a richer browsing experience for fans by elevating related content.

This project was a strategic redesign of U.S. Soccer's web article template to improve readability and engagement while better serving the federation's goals.

(DETAILS)

Client

U.S. Soccer Federation

Year

2023

Type

Responsive Web

Services

UX Research
UX Strategy
UX/UI Design
Interaction Design
Prototyping
‍Documentation

View live

ussoccer.com ↗

(KEY RESULTS)

395% increase in ad impressions on desktop article sessions.

650% increase in ad impressions per desktop session (up to 1.5 from 0.2).

Increase in opportunities for additional page views/sessions through related content.

(02)

Discovery

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:

(KEY USER NEEDS)

Make content easier to scan and digest quickly.

Elevate relevant and related content.

Provide users with additional types of related content.

Don't let ads get in the way of the experience.

Establish business goals to create focus.

Working with internal stakeholders I gathered and summarized key goals for the federation.

(KEY BUSINESS GOALS)

Increase visitor return rate and time on site through improved user experience.

Increase ad views per page visit.

Update the interface to better match the updated design system.

(03)

Design:
Hero updates

A new layout tailored around the new goals.

This approach helped implement the key business goals & user needs simultaneously.

(KEY IMPROVEMENTS)

Left-aligned headline text for better scanability.

Provided industry best practice width limits to headlines and body text to avoid long fatiguing lines of text.

Introduced a right column to bring an ad and related content links above the fold on desktop.

(04)

Design:
Scroll animaiton

A data-driven animation solution leads to an increase in ad impressions.

Based on page tracking data from Hotjar, I knew that roughly only 20% of users scrolled far enough to reach the ad at the bottom of the old template. Based on this average scroll data the new template is projected to increase ad views substantially.

(Projected IMPROVEMENTS)

Increase desktop ad impressions to a minimum of 1 per session for roughly 100% of all desktop users.

Serve roughly 50% of desktop users a second ad impression from the scroll animation.

(05)

Design:
Related content

I provided opportunities to continue content discovery to combat bounce rates.

This approach supported the business goal of decreasing bounce rates. At the same time, 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 of the page.

(KEY IMPROVEMENTS)

A more impactful visual treatment was used compared to the side panel content, aiming to give more stopping power to the last section of the page.

Introduced content types beyond just articles.

(06)

Documentation

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.

(DELIVERABLES)

Figma designs for desktop, tablet, and mobile formats.

Figma UI style guide.

Design annotations with logic documentation.

Animated desktop scroll prototype built in Webflow.

(07)

Results

+650%

increase in average ad impressions per desktop session (up to 1.5 from 0.2).

+395%

increase in the number of users who registered at least one ad impression on each desktop article page view.

View live ↗