Design Process

My Design Process in this  

Observe

Problem Assumption

First, I began with problem assumption about the existing Detik.com . These assumption based on my own testing:

  • Discovery on homepage isn’t clear. This problem may affects to other pages after homepage. I think, this resulted in a high bounce rate.
  • Too much ads. This is always disturbing everytime I reading by using Detik.com
  • Grouping news still confusing. This point belongs to the first point above. There’s no grouping by trending, hot news, etc in the existing apps

Usability Testing

To understand more about the problems, I conduct usability testing to my colleagues. Here is the task:

  • Try to explore news from homepage
  • Find and read news that made they interested

User Interview

After usability test, I do user interview to 35 participants (Offline and Online) from various profession to validate more about the problem, also to find Pain Points, Needs and Goals from every participants. Here is the results:

User interview overview

Here are some key takeaways collected from the interview:

  • Reading time. The average reading time that participants looking for a news is the same as starting from waking up in the morning till before bedtime
  • Need trigger. Mostly participants said that they need a trigger to read a news such as a notification or some trending update
  • News recommendation. All of them said that they need a recommendation because of they’re too lazy to do manual search
  • Bad ads. All of them said, the only one reason they’re lazy to open online news platform is because the ads
  • Available time. On average, they only have 10–20 minutes to read a news every moments (anytime between waking up to the bedtime)

Persona

Based on interview and discussion with some colleagues. I found 3 types of Detik.com users:

  • Milenials or Young parents (Woman & Man)
  • College Student
  • Senior Professional

I decide to focus on designing for Milenials or Young parents because all of the participants I’ve interviewed mostly that type of persona.

Emphaty map

Main Goal

After doing this research stuff I can be sure that the main goal is for users stay up to date on the news by reading everyday. Because some participants don’t want to miss the chat with their colleagues in office. And the main topic mostly the trending topic in Indonesia or any other interesting topic. By revamp Detik.com homepage experience, Hopefully most people triggered to read a trending or recommendation news.

Define

Now I feel confident that the problems are now validated. I also got some feedback from the participants that might be useful for Detik.com apps.

Pain Points 1: The Headline

Detik.com existing homepage
  • Some users want ‘Trending’ news not a ‘Newest’ news. Because the newest isn’t always be a trending news
  • Group tab by using hashtag (ex: #CPNS2018) also confusing for some users
  • Headline on this day also not really outstanding. Some user scroll up to three times to find the headline on this day. They think the ‘Sandiaga’ news isn’t headline/trending because they are on the ‘Terbaru’ tab

Pain Points 2: News Sectioning

Detik.com existing homepage
  • Ads is really disturbing — all of the participants said that!
  • As I mentioned at the pain points 1, group tab confusing. The news is also confusing. There is no sectioning based on curated, recommended, trending, etc
  • Difficult to determine the choice of news

Pain Points 3: Trigger & Reading Time

  • Most of the participants said they need a trigger to read or know a news
  • Some of participants not reading because they have time limit, so they want to know about how long does it take to read every each news

Ideate

Concept Model

To understand more about users can do in Detik.com apps homepage, also to find ideas about the solution to the pain points. I began with the concept model. This step is really helpful.

Concept model for Detik.com apps homepage

Affinity Diagram

To get as many ideas as possible and to priorities ideas from the most important to a minor solutions, I’m using affinity diagram method.

Affinity diagram

Paper Sketch

Exploring ideas and layout by using paper sketch

Paper sketch for Detik.com redesign. Template by Sneakpeekit

UI Design

Detik.com Homepage
Detik.com news

Results & Validate

Results

#Solution 1: Homepage

Detik.com new homepage. Interaction using Protopie
  • Pain point addressed: Headline & News Sectioning
  • Take out the sidebar menu which is redundan in the existing desing
  • Added News sectioning and recommendation on Homepage
  • Add Trending news because most people care about Trending
  • Add reading time
  • Put the ‘Tersimpan’ to the footer menu for more exposure
  • Change default tab to ‘TOP’ because mostly more care about TOP News such as trending, etc.
  • Highlight other favorite category
  • Make ads more seemless

#Solution 2: Reminder

News reminder using push notification
  • Pain point addressed: Trigger & Reading time
  • Send a push notification everytime new trending release
  • Send a push notification to remind that user have a saved news

#Solution 3: Revamp Detail News

Detail news. Interaction using Protopie
  • Make architecture information more clear
  • Make ads more seemless
  • Revamp UI style

Validate

To compare usability and to prove with new design increase reading interest. I do usability to 5 people with choosed persona — Milenials or Young parents.

I do usability test by using Maze.design

Testing with 5 people lets you find almost as many usability problems as you’d find using many more test participants. With same demografi also. — Nielsen

Task 1: Open any other news or trending and Open ‘For You’ news

  • 60% user succes to complete a mission
  • 40% User failed just because my prototype doesn’t cover all news clickable, if clickable they success to complete a mission

Task 2: Save news for later

  • 20% user success to complete a mission
  • 40% Indirect success because they open first the news then save from news detail
  • 40% User failed just because my prototype doesn’t cover all news clickable, if clickable they success to complete a mission

Task 3: See all recommendation for you

  • 80% user success to complete a mission
  • 20% user failed because misunderstanding about the mission description

Feedback

Offline Feedback

I also do quick usability test to my colleagues, here is the feedback:

  • Mostly all participants satisfied with the new design
  • They said “Lihat Rekomendasi” button is really helpful
  • New design is more organized
  • But they still hate the ads section

Conclusion

Detik.com is a one of the many leading news platform in Indonesia. They have gained a lot of trust which is very good, but it will be more more good if this supported with good experiences.

From my research, 34% people in Indonesia prefer any trending news rather than Newest news. So I think, anything viral will be read a lot. And also it’s important to us as a Product Designer to give a choice to users, give them a good discovery such as curated news, recommendation based on reading history, etc.

Overall the concept is working, but still have a lot opportunity to improve. I just make a little improvement.

Leason Learned

It’s always good to practice a design process. I learned that maybe we should give a better choice for users. This is important to build user interest.

Disclaimer: I do not work for Detik.com, nor am I affiliated with. I did this case study as I am a product designer who likes to solve problems and to improve my skills.



Source link https://uxplanet.org/-detik-com-apps-news-list-a-ux-case-study-942f5ec2564f?source=rss—-819cc2aaeee0—4

LEAVE A REPLY

Please enter your comment!
Please enter your name here