Aa
Proxima Nova
Primary Typeface
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
1234567890 !@#$% &*()
auto_awesome
Case Study
Khabar -
Designing a cleaner, more personalized news experience for modern Nepalese readers.
A freelance project exploring calmer, personalized mobile news. Creating structure out of chaos to deliver a focused reading experience.
Role
Freelance UI/UX
Timeline
3 Months
Platform
Mobile Native App
warning
The Problem
Many mobile news experiences feel cluttered and hard to personalize, overwhelming modern readers.
work
The Details
- Role: Freelance UI/UX Designer
- Platform: Mobile News Product
- What I designed: Onboarding, personalized feed, article reading flow, widgets, source management, and profile/settings.
check_circle
The Solution
A modular, reader-focused mobile experience with integrated personalization and utility.
What informed the direction
visibility_off
Visual Clutter
Users expressed frustration with competing visual elements and intrusive ad placements in legacy apps.
tune
Lack of Control
Readers wanted granular control over their news sources and categories, rather than a generic feed.
menu_book
Poor Typography
Dense, poorly scaled typography made long-form reading exhausting on mobile devices.
Architecting the Experience
To solve the cognitive overload, we mapped out a clear structural hierarchy. The core focus was separating discovery, reading, and utility into distinct, manageable flows.
person_add
Onboarding Setup
Streamlined flow for defining initial interests and preferred publishers.
widgets
Widget Management
Modular dashboard allowing users to pin weather, markets, or specific topics.
format_list_bulleted
Source Management
Deep controls to mute, follow, or prioritize specific news outlets.
Design Pillars
menu_book
Improve Readability
Focusing on typographic hierarchy, comfortable line lengths, and generous whitespace to reduce eye strain.
tune
Personalize Intelligently
Allowing users to shape their feed without overwhelming them with complex settings.
widgets
Blend Utility
Integrating useful local widgets (weather, forex, market) naturally into the reading flow.
The Visual System
Three pillars - type, color, and iconography - working together to keep the reading experience calm, confident, and unmistakably Khabar.
02
Color
A grounded, signal-rich palette
The Khabar red anchors the brand, with supporting tokens for interaction, text hierarchy, and feedback states.
Brand
Primary
#CF2038
Secondary
#4693EE
Surface & Text
Text
#2B2B2B
Light Text
#707580
White
#FFFFFF
Feedback
Success
#34C05B
Error
#E5342E
03
Iconography
Quiet, consistent glyphs
A tight icon set spanning navigation, actions, status, and utility states - kept visually uniform across the app.
Curated Experience
A selection of final interface designs demonstrating the modular approach applied across key user flows.
Part 1
Onboarding & Setup
Guiding users to select their core interests for a personalized start. Focus on clear preference selection and account creation.
- check Seamless preference selection
- check Quick account creation
- check Intuitive interest tagging
Part 2
Personalized Feed
Show the modular feed with news tailored to user interests. A tailored mix of essential news and selected topics.
- check Dynamic content ranking
- check Modular card layouts
- check Quick topic filtering
Part 3
Reading Experience
Typography-led design minimizing cognitive load while reading. Focus on the clean, readability-first article view.
- check Optimized line length
- check Distraction-free mode
- check Adjustable typography
Part 4
Search & Discovery
A search layer with more structure than most news apps offered. Beyond keyword search with recent history, users could filter results by content category (National, Banking, Economy), time period (Today, This Week, Last Week), and content type (Article, Video, Audio). This made Khabar's search useful for specific research moments - not just headline scanning - and acknowledged that readers came to the app for different reasons at different times.
- check Recent search history for quick re-access
- check Filter by category, time period, and content type (Article / Video / Audio)
- check Voice search input
Part 5
Widgets & Utility
The widget layer was the most technically ambitious part of the product. Users could build a personal utility dashboard inside their news app — pulling in data they'd otherwise need three separate apps to access. Each widget type had its own detail view: the Weather widget supported multi-location management. The Gold & Silver widget showed live NRS pricing. The Forex widget displayed buy/sell rates for Indian Rupee, US Dollar, European Euro, and UK Pound Sterling with a rate trend chart. The Stock Market widget showed sectoral indices (Banking, Hotels, Hydro Power) with a live graph and related Share Market News below.
- check Widget library: add, remove, and reorder from homepage
- check Weather: multi-location support, weekly forecast, wind and sunrise data
- check Gold & Silver: live NRS pricing
- check Forex: buy/sell rates with trend chart for 4 major currencies
- check Stock Market: sectoral indices with graph and related financial news
Part 6
Profile, Curation & Achievements
The profile layer was where the reader's Khabar experience lived permanently. Saved articles and followed sources sat under separate tabs. The Sources & Interests section let users follow major international and Nepali publishers - CNN, Reuters, WSJ, Bloomberg, Kantipur - and search or browse by interest category. Settings covered theme (dark/light), language toggle (Nepali/English), push notifications, and video autoplay. The Achievements system added a lightweight engagement layer - badges like Marathoner, Night Owl, and High Noon - rewarding consistent reading habits without turning the app into a gamified distraction.
- check Saved posts and followed sources under separate profile tabs
- check Source management: follow CNN, Reuters, WSJ, Kantipur, Bloomberg
- check Settings: theme, language toggle, push notifications, video autoplay
- check Achievement badges tied to real reading behaviour: Marathoner, Night Owl, High Noon
lightbulb
What I Learned
Designing Khabar made clear that the hardest part of a content product isn't the content - it's the structure around it. Every personalization feature, widget, and language option only works if the underlying hierarchy makes sense. The biggest design decisions weren't about what to add, but about how to sequence information so that the right thing appeared at the right moment.
"Designing Khabar reinforced that the most impactful work isn't adding features - it's creating structure that makes every feature feel effortless."