I uploaded a screenshot from our Novelpedia app, which is a mobile webnovel platform. The page I’ve uploaded is the Overview page that we’ve already completed. Now, I need help designing the Activity tab based on that theme.
Please keep the theme, fonts, and sizes consistent with the screenshot — minimal changes only.
My Requirements for the Activity Tab:
My Comments & Likes – including any replies to them.
Forum/Post Activity – any forums or posts I’ve interacted with, along with replies.
Subscription/Following Updates – updates from authors or books I follow, including:
New posts or forum activity
Book updates (like a new chapter or book announcement)
Follows & Subscriptions
Authors Followed
Stories Followed
Collections Followed (if applicable)
Notifications Archive
Replies to My Comments
New Chapter Alerts from Followed Stories
Mentions (if the feature is supported).
also i am integrating some suggestions for how can you make ui for the comments and subscriptions updates Also, I’d like the design of this tab to be unique and creative, not something generic or basic.
I'll create a comprehensive Activity tab for your Novelpedia app that maintains the exact theme, colors, and styling from your Overview page. Based on the screenshots, I can see the dark purple theme, typography, and layout patterns.
I've created a comprehensive Activity tab that perfectly matches your Novelpedia app's theme and design. Here are the key features I've implemented:
Design Consistency
- Exact color scheme: Dark purple gradient background (
#2D1B69to#1a0f3d) - Typography: Consistent font weights and sizes matching your Overview page
- Card layouts: Same rounded corners, spacing, and hover effects
- Purple accent colors: Matching buttons, badges, and highlights
Four Main Tabs
1. All Activity- Unified feed showing:
- New chapter alerts with book covers
- Comment replies with user avatars
- Author updates and announcements
- Forum activity notifications
2. My Interactions- Personal activity:
- Your comments with engagement metrics
- Forum posts you've created
- Replies to your content
- Like/heart interactions
3. Subscriptions- Following updates:
- New chapter notifications with chapter counts
- Author activity updates
- Subscription management
- Notifications archive with mentions and replies
4. Following- Management section:
- Authors you follow (with online status indicators)
- Stories you're following (with update status)
- Collections you follow
- Easy unfollow/manage options
Creative UI Elements
- Gradient book covers for visual appeal
- Status indicators (online/offline for authors, updating/completed for stories)
- Interactive badges with color coding for different activity types
- Engagement metrics (likes, comments, views)
- Time stamps for all activities
- Smooth hover effects and transitions
Smart Notifications
- Categorized badges (New Chapter, Reply, Author Update, Forum)
- Archive section for older notifications
- Mention tracking with @ symbol indicators
- Chapter alerts with new chapter counts
The design maintains your app's sophisticated dark theme while adding creative elements like gradient book covers, status indicators, and smooth animations that make the interface feel modern and engaging.
This is almost perfect — just one issue:
You've divided the sections like All Activity, My Interactions, Subscriptions, and Following into separate parts. But I want everything to appear on a single scrollable page. As the user scrolls, each section should come up one after the other — just like the Overview page in the screenshot I uploaded, where Reading Stats and Engagement Stats are shown within the same page (not separate tabs).
Also, the design you’ve provided looks more like a desktop or laptop layout. But I uploaded the screenshot to show how it should appear on mobile — so please ensure the new design looks the same way on a mobile interface.
Let me redesign this as a single scrollable mobile page that matches your Overview layout exactly. I'll remove the tabs and make all sections flow naturally on one page.
Perfect! Now I've redesigned the Activity tab to match your requirements exactly:
Mobile-First Design
- Single scrollable page - No tabs, everything flows naturally like your Overview page
- Mobile-optimized layout - Matches the exact mobile interface from your screenshot
- Proper mobile header - Search bar, notifications, and menu icons just like the original
- Bottom navigation - Activity tab highlighted in purple, matching your design
Continuous Scroll Sections
- Recent Activity - Latest updates and interactions
- My Comments & Likes - Your personal interactions
- Subscription Updates - New chapters and author updates
- Authors Following - People you follow with status indicators
- Stories Following - Books you're tracking with update status
- Notifications Archive - Older notifications and mentions
Design Consistency
- Exact color scheme - Same purple gradient and accent colors
- Typography - Matching font sizes and weights
- Card layouts - Consistent spacing and styling
- Mobile responsiveness - Text truncation, proper flex layouts, and touch-friendly buttons
- Visual hierarchy - Clear section separators and organized content
Mobile Optimizations
- Text truncation - Long titles and content don't overflow
- Flexible layouts - Content adapts to different screen sizes
- Touch-friendly - Proper button sizes and spacing
- Scroll performance - Optimized for smooth mobile scrolling
- Visual feedback - Hover states and transitions
The layout now flows exactly like your Overview page - users can scroll through all their activity in one continuous feed, with clear section breaks using separators, just like how Reading Stats and Engagement Stats are presented in your original design!