Redesign reading experience

A feature where it could help readers to stay up-to-date with news without spending too much time reading and saving reader’s time. Also, to provide articles that are catered for specific readers based on their personal preferences.

ServicesArt Direction, DesignYear2015


This is an entry in a series of Product Design Exercises.
Disclaimer: As much as I love to write and share all the thought process in details, but heck I value more of your time like I valued mine. Below is the summary of my study on this topic.

A. Background

Choose a mobile app that you are familiar with and would love to improve. Imagine you’re just been hired as a designer for the company and for your first project, you are to freely redesign any part of the app.

Part 1: Propose your redesign project
Consider, what would you redesign? Why did you choose this? How would you go about it?

Part 2: Redesign one part of what you proposed
Choose one component in your redesign project and explore a wide range of design solutions. Then, mock-up your final designs.

B. Problem

Studies done by Nielsen Normal Group says that “In research on how people read content and we found that 79 percent of our test users always scanned any new page they came across; only 16 percent read word-by-word.

  1. Article is too long.
  2. Poor typography hierarchy.
  3. Too many paragraph
  4. Irrelevant related content.

C. Goal

A feature where it could help readers to stay up-to-date with news without spending too much time reading and saving reader’s time. Also, to provide articles that are catered for specific readers based on their personal preferences.

  1. To lead more lasting habits for readers to read news.
  2. To embrace latest interaction patterns created by social media apps. Ex: User stories from Snapchat/ Instagram/ Facebook.
  3. To help readers to only read important points of news.
  4. To make readers to understand what happened around the globe by just spending a short time on the app.

 

D. Redesign Proposals

I gathered around 4 of my dear friends to collect some insights and inputs from them to learn deeper what are the main pain points. Below are some of the highlighted key quotes from them:

Key quotes from user

“If I could only read few lines to get up-to-date with what happened around the globe, that’d be ideal.”

“I have only small minutes to spend with what’s happening everyday, yet so many news to read. Ended up just reading the title.”

“Long article makes me sleepy. I’m better with highlighted points- short and straightforward.”

“I love the concept on Instagram where they have User Stories. Kinda cool if that interaction is being implemented on news app as well.”

E. Exploring the solution

1. Provide a “Pick your time” features

Pick your time

2. Highlights only important piece of news

F. Prototype

You might want to experience the prototype that I’ve created. Click on the image below to test drive the prototype.

G. High Fidelity Designs

For this project, I want to focus solely on improving reading experience rather than touching the visual design.

 

1. Pick your time flow

The idea behind this was adopted from the famous Instagram user stories. Wouldn’t it be great if we could apply the same thing to reading experience as well?

 

2. Read only important piece of news by highligthing sentence

It’s challenging for readers in today’s world to be updated with world news when they have limited time to spend on reading. With hectic and packed work schedule, most readers spend their reading time while commuting to work or having a lunch break. It would be great if there’s a way where they could choose their preferred article that its main points have also been highlighted for their easy reading. Now readers who’s on the roll don’t have to spend more than 10 minutes to understand the full story of one article.

What can I do better?

  • Deeper research about other possible solutions.
  • Select participants from different categories.
  • Focus more on design direction.

Thanks for your attention. You are the best!

If you enjoyed this article please Like & Share. Also, leave your valuable feedback for me to improve myself.


Time spend

Over the weekends

Tools

SketchApp for interface, InvisionApp for prototyping, Adobe Photoshop for hero banner.

Credits

Iconography: https://thenounproject.com/ ; Typeface: https://lineto.com/The+Fonts/Font+Categories/Text+Fonts/Circular/

Bonus

I know some of you guys love to watch how does one designer design their work and/or crafting their pixels. So here you go! Below is a sneak peek of how I design the big ass banner at the top of this page. Enjoice!