Duration

3 weeks

Role

UX Designer / User Researcher

Tools

Figma

Team

Ryan Baaldoz, Chloe Padilla

Redesigning Riot Mobile’s NewsFeed page

Problem

📌 Poor navigation, Users found the layout cluttered, filters and search tools lacking

📌 Inconsistent design decisions across app

📌 Frequent scrolling for users

📌 Vague categorization of different categories in the news feed made it difficult to accomplish tasks in an efficient manner

Solution

📌 Conduct product research of three other apps to gather insights on creating a smoother, more navigable News Feed

📌 Sketch design solutions and create prototypes

📌 Have users use the final prototype for more feedback

Component Redesign Rationale

These are the main issues users identified with the original app

In order to solve these issues, we have conducted a competitive analysis on 3 other apps in order to gather some inspiration as to what exactly makes a News Feed smooth to navigate

Ground News

  1. Clear organization of the news page for a more user-friendly experience.

  2. Top navigation feature with swipeable pages for seamless browsing.

  3. Comprehensive filtering options, allowing users to sort articles by date, game, or time.

  4. Intuitive interface that simplifies finding relevant content.

  5. A model for improving Riot's news feed layout and filtering capabilities.

Product Research

Bluesky

  1. Customization Options: Users can personalize their “feed” with categories like Discover, Following, Mutuals, and broad topics

  2. Intuitive Swiping: Smooth left or right swiping

  3. Interactive Layout: The design encourages interactivity, enhancing user engagement with the platform

  4. User-Friendly Experience: The layout feels modern

  5. Versatile Feeds: Diverse feed options cater to different user preferences

Apple News

  1. Visually Consistent Layout: Articles are presented in a consistent two-column format, reducing visual clutter

  2. Increased Information Density: The two-column layout allows more articles to be visible, decreasing scrolling time

  3. Effective Highlighting: A larger article at the top draws attention to breaking news or featured stories

  4. Organized Information: Titles, dates, and photos are consistently organized

  5. User-Friendly Experience: Reduces cognitive strain by offering a predictable and structured design

Sketching

Prototypes

Redesign 1

Redesign 2

📌 introducing a swiping functionality

📌 adding more news categories to enhance navigation and usability

📌 eSports news has been relocated to the app's "eSports" section for better organization.

📌 These updates aim to provide a familiar experience for those that are use to swiping on apps like Reddit , Twitter and Instagram

📌 Our second redesign focuses on improving the organization and readability

📌 It features five main categories—Patch Notes, Gameplay, Merch, and /dev

📌 These categories have short descriptions which help users quickly identify content they’re interested in without reading the entire news card

We had Eric, Anisha, Connor and Lisa take a look at our re-designs , here are their thoughts :

User interviews and testing

You can read our detailed user interviews here

Key Insights from testing:

Redesign 1: Preferred by Eric (a regular Riot user) for its easy interactivity and seamless swiping functionality. However, its layout was seen as too visually crowded by other users

Redesign 2: Favored by Connor, Anisha, and Lisa for its clean layout, improved organization, and color-coded subcategories, which made navigation easier

Our Users think both redesigns were a significant improvement over the original Newsfeed page, particularly in visual consistency and completing tasks

Dates on articles were appreciated for improving content organization.

Future improvements could include refining the color scheme and further balancing interactivity and visual design to appeal to both general users and dedicated Riot players

Final Analyses and Takeaways!

1. Valuable User Feedback
Through user testing, we confirmed that our prototypes effectively addressed key pain points in the original app, such as visual clutter and navigation challenges. After testing out both prototypes most of our users preferred the second prototype for its clean layout and intuitive design

2. Diverse User Perspectives
Testing with both experienced Riot players and general users provided us with a balanced perspective. While the second prototype appealed to those unfamiliar with Riot games due to its traditional mobile design, the first prototype resonated with active Riot users for its interactive features. These differences emphasize the need for future designs to balance broad appeal with functionality tailored to dedicated users

3. Future Steps
Our redesigns successfully enhanced interactivity and readability, but the process also revealed opportunities for growth. Moving forward, we aim to optimize visual hierarchy, refine the color scheme for better clarity, and combine the best elements of both prototypes. We’ll also conduct further testing with more Riot users to ensure the app meets the needs of its core audience!