Kompas.id App Redesign

Year           2021
Role           UI & UX design, Prototyping
Agency     Personal Project


Kompas.id is a paid subscription news website/app owned by Kompas Gramedia (KG). Kompas.id contains news that published in Kompas Daily newspaper, updated news and additional contents (research, visual/interactive speech, behind the news, etc). Kompas.id can be accessed through the website & app (Android & iOS).

Problem
The current design of Kompas.id app is not efficient & there is still a lot of room for improvement especially on UI/UX design aspects

Solution
Redesign the Kompas.id app to make user easier and more convenient accessing the news

1. News Card

Problem
Every news card takes up quite a lot of space, so to browse some news titles user has to scroll a lot

Solution
Make the news card more compact so users can explore more news titles in one scroll

2. News Filter

Problem
Too many News Filters displayed in one row, including:

  • "Latest News"
  • "Recommended News"
  • "Free Access News"
  • "My Picks"
  • "Most Popular News"
  • "Printed News"

Solution
Redesign the News Filter from tabs on a single row to integrated content on related pages:

  • "Latest News": all news on Kompas.id is displayed in chronological order, except for the "Most Popular News" & "Focus News" (editorial recommendation
  • "My Picks": created a separate page (new menu) called "For You" to display news according to the preferences of the topics that selected by the user
  • "Free Access News": user can access "Free Access News" by clicking the "Free Access" tag
  • "Editorial Recommendation": at the top of the "Home" page there are editorial recommendation news section called "Focus". In this section the editor can display their selected news, for example: a news collection of "Tokyo Olympics 2020"
  • "Most popular": 5 most popular news will be displayed in the "Most Popular" section (carousel)
  • "Printed News": The printed Kompas Daily contents can be accessed in the "ePaper" menu which can be read in Mobile View Mode and Classic PDF Mode

3. Information Architecture

Problem
The information architecture & features placement on the app are not efficient

Solution
Improving Kompas.id app information architecture & reorganize features placement to make it more efficient. I changed main menus/features from "Kompas.id", "ePaper" & "Books" to "Home" (Kompas.id), "For You", Topics" & "ePaper".

Note: menu name translation from Bahasa Indonesia/Indonesian Language to English

  • "Home" = "Beranda"
  • "For You" = "Pilihanku"
  • "Topics" = "Rubrik"
  • "Books" = "Buku"

Problem
"ePaper" (Kompas Daily newspaper reader) still uses Classic PDF format so not convenient for user when reading it from a smartphone because user has to zoom in & zoom out the PDF to browse & read articles

Solution
Redesign "ePaper" to become more mobile friendly. Each title/photo/article on the ePaper can be clicked & then will bring user to mobile page version of the article. So users can easier to read the articles.

Problem
"Search" feature is not efficient because every time you want to do a search you have to choose one of the results tabs ("Kompas.id", "Books" or "ePaper" tab)

Solution
Rearranged the "Search" feature placement & changed a bit the algorithm scenario. The "Search" feature on the "Home" & "Topics" pages will display search results across all Kompas.id contents (ePaper, updated news & additional contents). While the "Search" feature on "ePaper" page will only display search results of ePaper contents.

Problem
"Books" (e-book readers) are not well integrated & a bit confusing for user because user only can buys/adds new digital books through Kompas.id e-commerce website but there is no such feature in Kompas.id app

Solution
I was confused when first time accessing the "Books" page menu (e-book reader). There are 2 pre-downloaded books on the app but I can't find any menu to add/buy another books to the collection.I asked a friend who had worked at Kompas.id. According to him, to add a book to "Books" collection user must purchase it through Kompas.id e-commerce website (Gerai Kompas.id). This flow is quite weird because user can read digital books on Kompas.id app but they can't purchase a book through the app.Currently, the Kompas.id e-commerce website (Gerai Kompas.id) not only provides digital books but also printed Kompas Daily newspapers subscription, printed magazines, printed books, souvenirs (board games, t-shirts, post cards), tickets & Kompas.id subscription. So to make product development more focused and does not confuse users, it's better for Kompas to make separate apps between Kompas.id News app (Kompas.id app) and Kompas.id E-commerce app (Gerai Kompas.id app).On my current design I removed the "Books" feature (e-book reader) from the Kompas.id app.

Check the prototype on this link → Figma Prototype

Kompas App Mockup_All PagesKompas App Mockup_All Pages