Project overview

Goals

This project is mainly focused on UI visuals. By refining the visuals, I hope that Kompas.id can increase user engagement, be a more aesthetically pleasing, and competitive app. It is an unofficial project

Design Process

Five steps of the design thinking process. I started by discovering the problems with user research and competitive analysis, define the real problems, ideate the solutions, and building the new revamped Kompas.id prototype to finally test it to the users

Project Results

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

Problem Statement

The problems I focused on are mainly the visuals, such as content hierarchy, element visibility, main screen styling, and so on. The problems are defined from the process of competitive analysis and user research

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

Kompas.id, New York Times and Washington Post mobile ap — direct competitor analysis

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

Kompas.id and kumparan.com mobile app — indirect competitor analysis

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

Kompas.id app store reviews — Kompas.id user reviews on App Store

‍

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

categories of survey findings — Survey findings (filtered)

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:

How might we frameworks for ideating solutions — HMW framework

Prototype

Wireframe

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:

1. 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

2. Carousel content style: higher hierarchy with a medium-sized thumbnail to improve visibility while provides more content inside one category

3. List content style: lower hierarchy with a small-sized thumbnail to support a lot of content inside one category

content hierarchy wireframe — Content hierarchy wireframe

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’

High-fidelity prototype

Finally, I turn them into an interactive prototype that can be accessed here

Kompas.id Revamp mockup — Final prototype

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

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.

End of the line

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

Thank you.

This project is originally posted on Medium

Kompas.id iOS app revamp