Opinion Battle

Opinion Battle

Design a new Opinion Battle feature, inspired by the IPL battles, where users could support their chosen side by sending gifts.

Design a new Opinion Battle feature, inspired by the IPL battles, where users could support their chosen side by sending gifts.

Role:

Lead UX Designer

Goal:

The goal was to design a new 1v1 Opinion Battle feature, inspired by the IPL battles, where users could support their chosen side by sending gifts. This required incorporating the opinion voting mechanic into the existing gifting system and providing clear visual cues without overwhelming the already crowded livestream screen.

Problem Statement

Problem Statement

Problem Statement

Key Challenges:

  • Screen Space Management: Incorporating the opinion battle without cluttering the livestream screen, which was already filled with comments, gifts, and live content.

  • Seamless Integration with Gifting Flow: Ensuring that users could easily send gifts to their preferred opinion without disrupting the existing flow.

  • Real-time Feedback: Providing immediate visual updates on the battle's progress to keep users engaged.

  • User Gratification: Rewarding top supporters by recognising their contributions during the battle.

Design Challenges & Solutions

Design Challenges & Solutions

Design Challenges & Solutions

Challenge 1: Including the Battle Query Without Overloading the UI

Solution:

We removed the battle query from the UI and relied on the host’s verbal cues to explain the context, keeping the interface simple and focused on the interaction.

Challenge 2: Integration with the Gifting Flow

Solution:

The Opinion Battle card was placed directly above the gifting bottom sheet, making it easy for users to select their opinion while sending gifts, without disrupting the flow.

Challenge 3: User Engagement and Visual Feedback

Solution:

The real-time background color fill and percentage display ensured continuous user engagement, while the countdown timer heightened excitement during the final seconds of the battle.

Challenge 4: Recognizing Top Supporters

Solution:

Displaying the top three supporters for each option kept users motivated to contribute more, as they were publicly recognized on the battle card and in the final modal.

User flows

User flows

Final Design & Features

Final Design & Features

Final Design & Features

Final Design & Features

Opinion Battle Card Design

The Opinion Battle card was added above the gifting bottom sheet, ensuring easy access while preserving the existing interface.

To avoid clutter, the battle query (e.g., "Which team will win?") was omitted from the card, as hosts typically explained it during the livestream. This simplified the design and reduced cognitive overload.

Two options were displayed side-by-side, each with a distinct color. Background fill indicated the percentage of votes (gifts) received by each side in real-time.

Gifting Integration

Users could vote by selecting an option from the Opinion Battle card while sending gifts. The opinion battle card appeared alongside the gifting bottom sheet, streamlining the process.
The remaining time for the battle was shown through a countdown timer on the card. In the final 15 seconds, the timer turned red to add urgency.

Top Supporters & Real-Time Feedback

The top three supporters from each side were displayed on the card. Users could tap to see the full list of supporters, giving them a sense of recognition and encouraging further engagement.
Along with the percentage of votes, the exact number of gifts received for each option was shown on the card, offering transparency and clarity.

End of Battle Announcement

When the battle concluded, a pop-up modal announced the winner, using the winning option’s color theme for visual impact. This ensured users had a clear and gratifying end to the battle experience.
The modal also highlighted the top gifters, providing additional recognition and encouraging repeat participation.

Outcomes

Outcomes

Outcomes

Increased Engagement:
The Opinion Battle feature significantly boosted viewer participation during livestreams, creating an engaging and competitive atmosphere.


Seamless Integration:
By placing the opinion battle card in the gifting flow, users could easily participate without any additional friction or confusion.


User Gratification:
The recognition of top supporters enhanced user gratification and increased repeat participation.

Reflection

Reflection

Reflection

This project effectively extended the user engagement seen during the IPL season into a permanent feature, allowing users to engage in opinion battles during livestreams. The seamless integration with the existing interface and the real-time feedback kept users engaged throughout the feature's lifecycle.

Create a free website with Framer, the website builder loved by startups, designers and agencies.