Iterations on User Interface

  1. The “Bubbles” (discarded)

The first edition of the interface visual style draw inspiration from the ”bubbles”. The news title cards from different countries were visualized inside a ”bubble”. Here the bubble element was to be used as a visual cue, which speaks to our topic: make people be aware of the geo-political bubble filters in the current news platforms.

visual mood board for bubble effect
the bubble-inspired first edition of the UI concept

2. The Material UI Approach (implented)

As we moved on, we realized the most feasible and efficient way of the UI is to use existing UI library and make changes based on it, since we have very limited muscle of coding. We had chosen React for building this interactive web-application and it fits well by many convenient UI libraries, for example, the material UI.

With this in mind, we removed the fancy “bubble” style and decided to go the minimal way.

the minimalist “material UI” library approach 01
the minimalist “material UI” library approach 02


the minimalist “material UI” library approach 03


3. The Word-Cloud (experimenting)

Another interesting idea came in mind when we got the feed from the class – the existing information structure makes people feel confused and don’t why what to expect from the interface. How do we make the information, in this case, the potential geo-political filter bubble in the news content in the most efficient and clear way?

What about this,  after the user set up the country and the topic and hit the “Explore” button, they will see some “news keyword cloud” floating on different locations of the globe, which consists of the keywords from the most popular news piece.

And regarding the visual form of the”news keyword cloud”, could it be in the shape of the cloud, illustrating the idea of  “different parts of the world are under the shadow of different “cloud of news keyword”? Or could it in the shape of the “filter bubble”, which goes back to our original idea of using “bubbles” as visual cue.

possible shape of the “news keyword cloud”: cloud
possible shape of the “news keyword cloud”: bubble



Right now we are in the phase of experimenting with the feasible solution of the word-cloud effect.