Kompas.id Mobile App Revamp: A UI/UX Design Case Study
Disclaimer: this case study is an unofficial project (though, the research is real). Instead, it is a made-up project for me to learn to practice the UI/UX Design process.
Despite, this project’s outcome can be taken into consideration for improving Kompas.id mobile app in the future.
Project Overview
Summary
This project is focusing on improving Kompas.id mobile app’s user interface. Understanding real problems from user research, competitive analysis, and designing more aesthetically pleasing and intuitive for users to use.
Note: The apps used for reference in this project are the iOS version. Thus, it is not related to Kompas.id’s Android app.
My Role
As a UI/UX Designer in a one-man project, I started the project by collecting data with research and analyze them. Then, I take the analyzed data as a starting point for me to ideate some solutions for existing Kompas.id mobile app’s problems. I built the wireframe, designed the layout, and applied them to Kompas.id mobile app.
Project Background & Goals
Kompas.id is a platform developed by Harian Kompas, the Indonesian national newspaper company. Harian Kompas's first publication was in 1965 and has been one of the leading news companies in Indonesia. Through the years, Harian Kompas decided to transform its business from mainly paper-based news into a subscription-based digital news platform. Kompas.id is its main digital product that has been running for 4 years (until 2021). Nowadays, people are aware enough about Kompas.id’s platform, and also considering that this platform provides premium quality content, this product will always need to be refined.
This project is mainly focused on UI visuals. By refining the visuals, I hope that it can be a more aesthetically pleasing app. Therefore, It will be more intuitive to use and potentially increase user’s engagement to access Kompas.id’s contents. However, Kompas.id is not the only one who plays the game. There are always competitors in business, thus this project also aims to make Kompas.id more competitive through UI revamp.
Design Process
I applied the 5-steps Design Thinking process for this project, starting with
Empathize
- Foreshadowing Problems
The first step I did was discovering problems based on my experience while using the app. It’s fully based on personal opinions and assumptions. But, it is a nice way to kickstart the thinking process.
Some of the issues I found are: infinite scrolling on the home tab that I found is problematic for me because there is too much information for me when start opening the app; there are no visible categories to filter the news; lack of content hierarchy; thus, these lead the home tab into a boring page without the main content. I assume that these problems will also contribute to low user engagement in accessing Kompas.id’s content
Another problem I found, that is nice to mention, is the side menu which also has no hierarchies and specific functions. It has too many categories that are classified by nothing. I assume this will lead to user confusion for accessing the categories provided in the menu. Also, Kompas.id header is a bit crowded for me. I see the profile icon while there is also one in the side menu.
These problems that I found myself are not yet valid. So, I decided to extend the problem discovery in another way, such as competitive analysis and user research.
- Competitive Analysis
First, I find some well-established platforms that have a similar business model to Kompas.id or so we often called it “direct competitors”. There are The New York Times and The Washington Post. These platforms and Kompas.id are running on the same business model which is subscription-based media. Also, they have succeeded in leading the business with their clean-looking mobile app.
Then, I also find an indirect competitor to maximize the reference for Kompas.id UI revamp. I take kumparan.com for this as I see that this platform is also a news platform, which is not running exactly the same business model as Kompas.id, but has a nice UI.
- User Research
I used two methods in the user research process: looking through user reviews on the App Store, and conducting a survey/usability testing (UT) to get insights about the existing version of the Kompas.id mobile app.
In the App Store user reviews, I found some interesting problems that need to be solved, such as UI issues, function issues, and the subscription limitation.
While the data is not enough, I need to validate my foreshadowed problems with testing to real users. I defined the user persona into my college friends who are students with critical thinking ability, using the internet all the time to solve everyday problems, and part of Gen Z (born around the 2000s) that has flexible yet tight schedules.
For the mechanism, I write some guides for users to use the Kompas.id app, such as opening the app, accessing contents, and testing filter and search features. Then, I asked how they feel when completing each task.
The survey/UT findings are relatively interesting. Concluded, it consists of four main problems: Hierarchy, Free access issues, Content categorization, and Overlay/Side menu issues.
Define
From the research findings combined, I simplified the problem statements into four categories as mentioned above.
Ideate
Through the design process, I use the “How Might We?” frameworks to generate solutions as listed below:
Prototype
I translated these solutions into the final prototype through a wireframe. I built a wireframe where contents being put into hierarchies indicated by their style:
- Banner content style: highest hierarchy content with a full-size thumbnail to make it stand out more than others. It can contain one content only or multiple contents by providing slider interaction.
- Carousel content style: higher hierarchy with a medium-sized thumbnail to improve visibility while provides more content inside one category.
- List content style: lower hierarchy with a small-sized thumbnail to support a lot of content inside one category.
As I am satisfied enough with the wireframe defining process, I started to put contents based on their hierarchy:
the headline on top with banner style;
For business purposes, I put the promo carousel in between the headline and the next carousel-style content (free access for basic users while reader’s favorite for premium users);
then, I put the e-paper in a banner style considering it is a premium feature of Kompas.id (selling point!);
Lastly, I put some lesser hierarchy content, such as most popular news and others, in a list style.
The reason I put the ‘free access’ section at the top is to provide new users to adapt to the Kompas.id subscription-based model. Also, it will reduce the stress of new users facing the subscription paywall too often while reading. It is a kind of free sample to attract more users.
Prior to this, tabs on the top of the home tab is content-based filter that I (and some users) find not too helpful. Then I decided to make it a topic-based filter as kumparan.com does in its app. I also turn the header’s background white, refer to the NY Times and WashPost that I found is more newspaper-like (and a lot cleaner).
I also reorganized the side menu to be more ‘findable’.
Finally, I turn them into an interactive prototype that can be accessed here.
Test
In this final stage, I tested the prototype to the same users in the previous survey/UT to see how my designed prototype works to solve the problems they’ve encountered before. I asked them how it looks like compared to the previous version and how does it feels different.
Result
The redesigned Kompas.id app was having positive feedbacks from users. They found the app was not only more interesting and cleaner but also helped them to differentiate and find the desired content :D
What’s Next?
This revamp project isn’t inevitable from flaws, thus further actions should be done, such as reiterating the design process that focuses on UI improvement which includes typography, and features on another page, such as e-paper and Kompas Buku.
What did I learn from this project?
I finished this one-man project supervised by my senior, Mas Charlie, at Harian Kompas who kindly gave me feedback for the process. I learned to work in a design sprint by collecting data, analyze them, ideate solutions and applied those to Kompas.id prototype in a tight schedule to make sure that I don’t waste any time and more potential improvements can be made in the future. By doing this case study, I understand that real, definitive problems are the key to making decent product improvements.