Bootstrap demo

Project Overview

NewsBytes is a redesigned mobile news app offering a faster, cleaner, and more personalised reading experience. I simplified the cluttered UI, improved navigation, and built a scalable design system—delivering a more intuitive and consistent product end-to-end.

About NewsBytes

NewsBytes is an Indian media-tech company that uses AI to create concise, contextual news for its platform and partners. Founded in 2015 by IIT, IIM, and Ivy League alumni, it aims to reduce information overload by delivering precise short(50 to 60) words news with essential background context.

Problem & Solution

Problem Statement

The existing app experience suffers from several UI/UX challenges, including complex navigation, a cluttered interface, inconsistent design patterns, poor content formatting, and minimal personalization, missing valuable features—resulting in a fragmented and frustrating user experience.

Solution

I redesigned NewsBytes to deliver a cleaner user interface, faster, and more personalised reading experience with improved readability, simpler navigation, and a consistent design system and add valuable features creating a seamless and engaging modern news app, so that user can feel a amazing user experience.

Process Highlights

Research & Analysis

Product Designer

Project Team

4 Members

Timelines

4 Weeks

Tools Used

Figma, Notion, Jira, Meets

Design Process

Discovery Phase

To effectively redesign the NewsBytes app, I began with an in-depth discovery phase to understand the product, user behavior, identify usability issues, uncover missing features in the existing app.

User Interviews

Conducted interviews with 6–8 users in-person and 2–4 via phone of news app users (ages 18–60) including professionals, retired individuals, and students, to understand their habits, needs, and frustrations with the NewsBytes. We got the following insights from them.

Users expect a clean and intuitive navigation flow where top stories, categories, and personal interests are easy to access without scrolling through cluttered screens.

Competitive Analysis

Analysed top competitors to understand their strengths, weaknesses, and the user experience standards that NewsBytes must meet or exceed.

App Review Analysis

Analysed App Store and Play Store reviews to uncover real user frustrations, feature requests, and usability issues.

Heuristic Evaluation

Conducted a heuristic evaluation using Nielsen’s 10 principles to identify major UX issues such as inconsistent navigation, weak feedback, and poor error handling.

Key Problems Identified after Heuristic Evaluations.

Define Phase

The Define phase helped transform scattered findings and insights into specific user pain points and design goals.

Persona 1

Sakshi Mehta

27 years
Journalist
Unmarried

Bio

Digital journalist delivering fast, reliable news with accuracy and clear storytelling.

🎯 Goals

Stay updated with real-time national and international news.
Quickly access reliable sources for fact-checking.
Save or share important stories for research and reporting.
Save important articles for future reporting.

🧩 Need

Stay updated with real-time national and international news.
Quickly access reliable sources for fact-checking.
Save or share important stories for research and reporting.
Save important articles for future reporting.

😣 Frustrations

Stay updated with real-time national and international news.
Quickly access reliable sources for fact-checking.
Save or share important stories for research and reporting.
Save important articles for future reporting.

Persona 2

Ramesh Pandey

56 years
Doctor
Married

Bio

Senior doctor seeking quick, trustworthy news with simple navigation and clarity.

🎯 Goals

Quickly stay updated on major national and health-related news.
Access reliable, verified information without sensationalism.
Read in short breaks between appointments.
Save important articles to read later when free.

🧩 Need

Clean, easy-to-read interface with larger text options.
Short summaries with an option to open full articles.
Personalized categories like health, politics, and local news.
Video/news shorts for quick consumption.

😣 Frustrations

Long, cluttered articles with too much unnecessary content.
Small fonts and poor readability, especially on mobile.
Unverified or sensational news affecting trust.
Frequent ads interrupting reading flow.

Finding & Insights

To improve overall usability by introducing a clear homepage, simplifying navigation, user flow and enhancing content readability, and making key actions like search, bookmarking, like and sharing more discoverable and intuitive.
To deliver faster news consumption by offering short summaries, swipe-based navigation, and video/shorts formats that match modern user habits and reduce reading time.
To increase user trust by showing verified sources, reducing sensational content, and maintaining a clean, distraction-free reading environment.
To enhance personalization by tailoring news categories, local updates, and recommendations based on user interests and reading patterns.
To reduce user frustration by minimizing ads, avoiding clutter, and creating a smoother, more consistent experience across the entire app.

Ideation Phase

After analyzing the data and brainstorming, I was clear about the required features and actions. I quickly moved on to mapping the user flow and creating wireframes.

User Flow

After the research and analysis, it was time to begin the redesign. The task flow below brings everything together before moving into ideation and screen redesign.

Ideation Phase

After analyzing the data and brainstorming, I was clear about the required features and actions. I quickly moved on to mapping the user flow and creating wireframes.

Sketches

Rough sketches were done to get my initial thoughts on paper and brainstorm new ideas for specific UI elements.

Visual Guidelines

Neo-pop was selected as the visual theme because the app's target demographic is young adults (18–35) with low or average salaries. The stakeholders also sought to maintain a street-friendly design.

Visual Design

After initial rounds of discussions and agreement on the design language, we proceeded to Visual Design.

PART 1

Splash & Onboarding

I designed an engaging splash screen and Introduce new onboarding flow to educate new users about key features, helping them connect with the app instantly.

PART 2

Home Page & Details

Redesigned the home page with a clear logo and strong visual hierarchy for a better reading experience.
Solved the issue of limited content by enabling full-article reading instead of 60-word snippets.
Improved navigation, allowing users to move easily and access all features seamlessly.
On the detail screen, users can adjust font size and easily navigate, save, and share their favourite news.

PART 3

Search, Bookmark & Category

Solved the search experience using the “Recognition over Recall” heuristic with recent searches feature with proper category, added a clear and easy-to-manage bookmark list, and introduced a simple category screen for quickly selecting favourite topics.

PART 4

Video Shorts & Share

Introduced a new short-video feature that allows users to consume news in a video format.
Users can like, save, share, or report news based on their preferences.
Users can easily share news across all social media platforms.

PART 5

Settings

Improved the settings screen to make it easily accessible, allowing users to navigate and update preferences effortlessly.
Introduced multi-language support, allowing users to easily choose their preferred language.
Improved and standardised icons using the design system for visual consistency.

Prototyping

Created interactive prototypes to validate flows, interactions, and overall usability.

Usability Testing

I conducted usability testing to validate the redesigned user flow, navigation, and reading experience.

👥 Participants

No of users tested

Age Group

18-60

Device type

Android and iOS Phones

Date

DD/MM/YYYY

User Types

Students, Working, Retired

Frequency of News Consumption

At least once a day

🔍 Methodology

Test Type : Moderated 1:1 usability sessions (conducted via Google Meet & in-person)
Duration : 10–15 minutes per user
Tools Used : Screen recording, observation notes, Figma prototype reference
Environment : Users interacted with the prototype link of new NewsBytes app design.

🧭 Tasks Given to Participants

Open the app and locate today’s top headlines.
Swipe up/down the news card and read the news.
Read a detailed article.
Bookmark or save an article for later reading.
Go for video/news shorts section and explore the news.
Choose a new news categories.
Share a news article with a friend via WhatsApp or instagram.
Change language from settings.
increase text size on the detail screen.

Users Feedback

Usability testing showed that users could easily find top headlines, navigate the feed using swipe interactions, and comfortably read full articles with adjustable text size. Key actions such as saving, sharing, exploring video shorts, switching categories, and changing language were completed smoothly. Overall, users described the experience as clean, intuitive, and enjoyable for daily news consumption.

Conclusion & Final Thoughts

The NewsBytes redesign successfully transformed the app into a cleaner, more intuitive, and user-focused news experience. By improving navigation, readability, and content depth, and introducing features like full-article reading, video shorts, multi-language support, and personalised categories, the app now supports both quick and immersive news consumption.

NewsBytes is currently in progress, as development is ongoing and several new features are being implemented to further enhance the overall user experience.

Thanks for watching