Zagrut, meaning beware, is a news reader app that critiques the existing system of online news and gently guides the user against prevalent media bias.

Interactive Prototype v0.9 (work in progress)

Discipline: UX Design, UI Design
Technology: Sketch, Invision Studio, Adobe Suite
Association: Parsons School of Design, MFA Design+Tech Studio, NAB Futures
Work in Progress: UI Iterations, Service Blueprinting, Functional Prototyping


Design Statement

How might I create a trustworthy news reader app that will easily engage users from all sides and gently guide them out of their echo chambers?


Constraints and Success

  • The app must above all be truly partisan agnostic.
  • Short term goal with every use, is to get people thinking about the news story.
  • Users must perceive control of knowledge of the media-politics landscape, instead of control on their feed content.
  • Overall long term goal must evaluate sentiment and not poke at belief or identity.
  • [Work in progress for UI iterations and functional prototyping to then create measurable reactions from users]


The Common Goal: Break Echo Chambers

Zagrut is a news reader with a difference – assisting users to break their echo chambers, gradually with no finger-pointing at each other’s political leanings. It is no magic wand, but an attempt to critique the current systematic bias.

Current snapshots of onboarding experience

Know More


Visual Summary





The Facebook-Cambridge Analytica Data Scandal of March 2018, exposed the nexus between online media and politics. Being someone living in both the USA and India,  this frustrated me! I put my thoughts into free-writing and mind-mapped the connections that emerged. 


Problem: The Smartphone Bubble


“Due to our tendency as humans to believe in things that already support our opinions, it finds readers who then spread it to like-minded individuals using social media.” – Magnus Revang, research director at Gartner.

Smartphones are becoming the primary news source, and while social media was the main factor for it, we can now see its decreasing in influence, possibly because of the scandals of 2018. This behavioral usage has generated a Bias Spectrum.


Smartphones are the main news source. Social Media’s decreasing influence on the news.
Smartphones following us everywhere! 
Research and Survey, Reuters Digital News Report, 2017, 2018


The Bias Spectrum

The Bias Spectrum is a scale of how media sources/organizations are politically aligned to the left or right, along with their audience. The longer one stays biased in the echo chamber, the more extreme they become. Image and definition: Reuters.

“Contrary to conventional wisdom, robots accelerated the spread of true and fake news at the same rate. However, humans – not robots, spread fake news more likely, therefore faster than bots!” M.I.T Research

Know More



Current popular news readers like Google News or Flipboard add to the problem of echo-chambers – the ‘My Feed’ or ‘News for you’ is a biased feed, that only feeds into the news you like, by choice and by the algorithm.

Know More


Possible Solutions


  • Text is the preferred way to consume news, albeit with least prejudice and that’s the good news, no pun intended. Text-only news sites are making a comeback.
  •  Bias Rating can be labeled onto a news source when opinions are polled from an evenly distributed number of people from across the spectrum – increasing trust and participation in the platform.  Ex: (shown below)
  • Intense media concentration on an issue may alter partisans’ evaluations of politicians by changing the balance of headlines.” Collision with Collusion. Media Bias Rating Snapshot

Know More


User Research

Apart from studying reports from Reuters/BBC, I surveyed users personally/over-video to about 40+ users who fulfilled the following user criteria:

  • who were working/studying, from USA/India (almost evenly distributed)
  • are at least aware of the larger narrative between media and politics
  • have at least two news readers/news apps that they use regularly on their phones.


Interface matters to the User

We can see that the UI plays an important part in pitching/marketing this product and making the ‘first-time use’ impactful. However, a good amount of users need the app to ‘understand what they like to read’, which is part of the current systematic problem.

What aspects do you value most when using a news reader app?
View survey for the full context of the question


Right Amount of Notifications


Users feel bombarded with news alerts and need to reduce or control them to ease their experience.
Reuters Digital News Report 2018


Sketching and Prototypes

I imagined the user traversing the news, and I wanted to deliberately create some gentle friction so that the user could pay attention to news elements like headlines, media sources, etc.

Iterations of sketches as per outcomes from research and prototypes

 The sketches helped me iteratively on building paper prototypes.


My main purpose was to present them to users with a brief context of what the product is, and how they assess “the sense and flow” of the product UI.


User Narrations

The paper prototypes, helped me define my user better, from the feedback I received. I requested the user to think out loud as they traversed the prototypes.



I like this headlines judging thing… seems like I’m rating it? It’s interesting to do this, but not sure if I would do it all the time. But I like the ‘scroll-over’ function too.

I would prefer ‘article’ to be called ‘story’. I can see how this product is relevant. I can see myself using this daily… it’s pretty umm… guiding and transparent.

I like how simple, viable and unalarming this is, actually. I’m not sure of these icons here, I don’t understand some of them.



I initially wanted the app to guide extremely biased users. However, the user narrations and interviews made me realize that they may not be the best audience for this app to work, and average-bias users showed much more interest, relatability, and acceptance.



I went through 3-4 iterations until I was satisfied with the direction I was heading to fulfill my design statement. Every iteration kept me focused on the central problem of the Echo Chamber, guided by my constraints – thus creating four main features that work with each other towards the center, no pun intended.



Aesthetics and Branding

I named the app ‘Zagrut’, pronounced za-groot, which means ‘beware’ in my mother tongue, Konkani, from South India. Incidentally, after the first prototype release, Elon Musk had similar intentions.

I chose the brand color to be Purple because it (1) merges red and blue political colors, was incidentally (2) the Pantone Color of 2018 (Ultra Violet) and is known to be (3) calming, spiritually aware and uneasy to discriminate.


Attention to Detail

I wanted to pick out one scenario that is generally not used in this genre of apps and test that on users. Using the paper prototypes and user narrations, I put forth the below question at each user, thus choosing the ‘eye’-con to track/follow a particular news story (only topic, not source), replacing my previous assumption of the ‘footprint’ icon.



Why will people trust Zagrut?

  • Zagrut’s focus is not to say which media source is right or wrong. It’s only trying to gently inform the user of the multiple perspectives around, with no labeling.
  • Everyone trusts a platform that can be contributed/edited by everyone.
    It does this with a design intention of inviting all users from left, right or center. Tech giants like Youtube, Facebook are now using Wikipedia as a flag on their site content, to warn/advice users of probable misinformation. “Don’t Ask Wikipedia To Cure The Internet.
  • Uses bias ratings from trust-established sites like


Algorithm (work in progress)

  • Your feed first starts with news from ‘center’ sources.
  • You will always be shown news from Left, Right, Center.
  • If you read one biased news source, you will be shown another biased news source from the opposite end.
  • The more ‘right’ you read, the more ‘left’ your news feed. Thus encouraging a central point of view.
  • TLDR versions of articles will be shown and this can be toggled in settings.
  • Users will get direct access to the full versions of the original article only from media-sources with a center-rating.


Next Steps

  • Frame and refine all the features in detail with medium fidelity mocks in Balsamiq.
  • User testing in two contexts – USA and India as both countries are headed towards elections.
  • Approaching the UX and storyboarding from the perspective of Notifications
  • Engineering prototyping with JavaScript API’s from various news sites to test feed population algorithm.
  • Logo design and aesthetic refinement.
  • Machine Learning Module.


Machine Learning: Classifying a Headline

Given a headline, what bias on the spectrum (left, center, right) does it hold? This is a project that I have started working on the side for experimentation, but I haven’t considered this as part of the main feature set of the product, yet.

I am trying this with natural language processing algorithms using bag-of-words (the headline) to vectors, then using the n-gram models to create the word-embeddings. This would then be fed into the Text Classification algorithm.
Precedents: and IBM Research has now open-sourced their bias detection tools.


Awards and Exhibitions

  • Zagrut won the Third Place and a $20,000 prize from over 100 projects nationally, at the PILOT Innovation Challenge 2018, organized by the National Association of Broadcasters, USA, Jan 2019.
  • Zagrut was presented and exhibited at NYC Media Lab, The New School, Sep 2018.
  • [Upcoming] Zagrut to be demoed at The NAB Show, Las Vegas, April 2019.





Category :