CMS Article Module
Created dynamic modules in article that display priority or contextual information to be easily consumed by the readers
Duration
Ongoing as of Aug 2023
Contribution
User Experience
UI Design
Platform
Desktop & mobile web
Team
Andrea Sudharta / Software Engineer
Ajit Selvakumaran / Product Manager
Olivia Han / Senior Product Designer
Peace Chung / Senior Product Designer
Background
Placeholder
Problem
Placeholder
Our attention spans are getting shorter. Increasingly, users prefer skimming articles to reading through them in their entirety. Important, contextual information should jump out at users in a digestible and enticing manner.
Yahoo Sports articles were a combination of merely, text, images, and the occasional table. We did include a section at the top that depicts clickable tiles for players and teams mentioned in the article, but we can take this a step further by incorporating in-article modules that convey contextual information in a visual, intuitive format that allows for users to quickly grasp the most relevant information in a condensed tile or card. This would provide a more delightful reader experience while also adding utility as users could click into the modules to further explore players, teams, scores, and contests of interests through Yahoo Sports’ ecosystem of product offerings.
Goal
For editors
Empower editors to enhance sports stories with contextual and captivating cards that offer a premium reading experience.
For readers
Improve the sports article reading experience with visual moments of simplicity, utility, and delight.
Design
Placeholder
We had three type of contextual cards that each features players and game information relevant to the article.
Placeholder
Player Card
Placeholder
Player card has basic season stats. Editors can manage to show how many and what type of stats to present in the internal tool.
The example shows NFL player Christian McCaffrey's performance stat. The key information includes player headshot, metadata (team, position, number), status (injury), and stats.
Placeholder
Player Card Variations
Placeholder
We added more variations to player information that includes 2-Player Comparison, Multiple Players Table, and Player Rankings.
2-Player Comparison
The goal is to provide quick run-through of two key players in the article. Highlighted badge is added to put emphasis on the winning stats.
Placeholder
Multiple Player Table
If editors prefer to provide stat comparison for more than two players, we added an option for table layout that allow multiple players stats are displayed. Since the context is more open than 2-Player Comparison, we provide option for editors to add editorial lines to encapsulate the context of the table.
Placeholder
Player Rankings
If there needs to be put more gravitas certain stat, the Player Rankings layout provides option for editors to use more visuals.
Placeholder
Game Card
Placeholder
CMS module has another variation that contextualize the key event happening relevant to the article. The challenge in Game Card is to serve both different leagues/sports and game status.
Treating Dark Mode
Placeholder
Mobile version needs supports dark theme.
Performance & User Feedback
Placeholder
Metrtics
Placeholder
Article views
Placeholder
Visit frequency, visit intensity, overall message opens
Placeholder
Time spent on article
Placeholder
Indirectly measure commerce revenue growth, average daily revenue, and average order value
Placeholder
Top of funnel conversion
Placeholder
Module CTR & Increase in MAUs from top of funnel into deeper engagement including Sports, Fantasy.
Placeholder
User Feedback
Placeholder
We wanted to see how much value the CMS module brings to the user experience when reading articles. We looked to explore alternative methods for measuring the impact of CMS modules beyond views and clicks, as these metrics have limitations in isolating the true impact. Ultimately we landed on unmoderated interviews with sports fans. Our aim was to gain a more comprehensive understanding of the modules' effects on user engagement, informing content optimization and improving user experience.
Placeholder
2-Player Comparison: The module's comprehensive and organized presentation, integrating multiple stat categories, led to overwhelming user satisfaction and perceived high value. It enabled quick player comparisons, trade outcome determination, and user-friendly readability for efficient understanding of player performance.
Base Player Card Users liked the modules' minimalistic design and relevant stats, finding them easy to read. However, they suggested space optimization and reducing a perceived blocky appearance. The modules' provision of relevant stats significantly contributed to their high perceived value.
Player Rankings: Users liked the carousel's sleek, space-efficient presentation, finding the clear and well-organized information appealing.
Multiple Player Table: The module's presentation impressed users with its comprehensive and organized approach, as it effectively organized multiple stat categories together, leading to overwhelming user satisfaction.
What's the next step?
Placeholder
Address UXR findings
Placeholder
Adjust general visual design feedback on using white space of the module
Placeholder
Next phase for game card
Placeholder
Add more information on the game card to provide more context of the article. For example, if the article is about betting, then consider adding betting odds information on the card
What's the next step?
Contact
oliviahan.design@gmail.com
© 2024