An iOS/Android app for multi-source news reading

To be properly informed these days is a very tedious task. Plus, all the information is spread across different websites, news sources and blogs. The paper days are gone, so now we have all these devices where we should be getting information easily and without any biased curation.

  • Skills
  • Interface Design
  • UX
  • Prototyping
  • React Native
  • Tools
  • Sketch
  • Principle
  • Invision
  • VSCode
  • React Native
  • Redux
  • Date
  • 6 months ago
  • Client
  • Myself

The problem

Most people read their news from one, maybe two sources. Perhaps they get their daily info from Facebook. In the realm of the social network, it's very easy to fall into that cycle of misinformation we all know. Where you only read from what you think is the truth, never to seek the real information by comparing it from different sources.

This movement of false information spreading, fake news and really bad journalism was fed by the lack of tools to compare news. And, in this era of click-bait articles, the newspapers are also to blame.

People should have access to an easy, free way to read news on their mobile phone, but at the same time, be allowed to choose from a wide variety of news outlets and also search for specific topics in order to see what all parts say about one thing. Sounds democratic, sounds like what the internet was made for.

Yet, it's not that easy. Finding different perspectives on a topic it's a arduous task. We go from site to site, skipping ads, clicking on cookies acceptance terms and the regular pay-to-access forms, only to find that the source of that article is the same.

And I for one can understand why so many people choose to stay with only one or two sources of information: Because it's easier to manage our lives that way. Not the correct one, but easier.

How about acess on all platforms? Why can't someone start to read something on an iPhone and continue to read that on their Firefox browser on their desktop computer at home.

One source of all sources

The News API is a terrific tool. Very underrated, if I may say so.

It provides developers and designers with a huge public API that returns thousands of articles from over 30000 of news outlets around the world, including blogs. All this in dozens of different languages and updated in near real-time.

If information is power, isn't this a powerful tool?

Laying out the foundations

Paperboy is my work-in-progress concept for all this questions that are puzzling me. I wanted (and still want) a solution that fits my needs. Maybe it can also fit others too!

So, perhaps one of the most important goals of the app should be to get as quickly as possible to a place where you could read articles from your favourite news sources, without too much messing around with login forms, passwords and all sorts of permissions.

Apple News is a great way for people to read on their iOS devices, but it is curated by Apple and isn't available to Android devices. Google News is another free tool but, as much as I love lots of things that the giant from Mountain View throws at me, it still lacks that feeling of open-ness and freedom of choice.

I wanted something I could share with others, so that they could use for themselves, without

Removing the Chrome

My main focus with the UI was to let it breathe. The app should suit the content, enlighten it, not throw it under a brand or a sketchy colour scheme. It should follow all best practices from both mobile operating systems (iOS and Android) guidelines, so that users could have the best experience on their personal devices. One that could communicate familiarity and ease of use. To put it in simple terms: the ui should be minimal.

Building something for both platforms

I've tried Swift and Java in the past. Didn't like those. I felt like I removed myself from the visual side of things when programming.

What I like is to write software with good-old web standards: HTML, CSS and Javascript They are powerful, but easy to manage. They are accessible by default and always evolving.

I went with React Native as it seemed like the best choice for this app. I kew React, and React Native didn't seem very different from the way I build web projects. Plus, all the layout is made with CSS-like syntax, there are a lot of cool features to play with.

I'm using React Native with Expo, Native Base and Axios.

One cool feature of doing layouts with the React Native's approach, is the ability to cater for different screen sizes in the most logical way: using media queries (for that I used a library called react-native-extended-stylesheets). Really, it is that easy to build something that looks good on a hand-held device or a tablet.

For navigation i'm using React Navigation 2.0 and for the icons in the bottom bars, I'm using vector icons instead of PNG's. (SVG ftw).

The development is still in progress, but you can check out the source code here.