Hi, I am Danni! I am a User Experience Designer.
I design with Curiosity, Empathy and Attention to Detail.

Re-imagine Read-it-later Experience

In search of the perfect read-it-later app…

I still remember how excited I was when I discovered readability app for the first time in my life. It saved me from the pressure of overwhelming amount of tabs, the fear of closing my browser and helped me be more focused on my work at hand. I loved it and thought it was one of the greatest inventions in the world.

However, as I followed more twitter accounts and subscribed to more mailing lists, I started to hesitate to open my read-it-later app, because there are simply too many articles in my reading list. After trying out several other apps, and experimenting with several other ways to save my articles (e.g. using to-do list), the problem remains.

Maybe it was just me, being too greedy and wanting to know everything without having a clear focus. But… maybe?, I can design a better flow and better read-it-later experience to solve this problem.

 

So what is the real problem behind?

 

1.Overloaded List
When a list of unread articles is the only thing we see when we entered the app, it is easy to think the list as a to-do list. The to do list gets longer and longer as we save more articles, and finally, the un-ending/unachievable task became a heavy burden to us, and it replaced the little joy of finishing reading each article. We start to procrastinate.
2.No Easy Way to Archive
Changing the status of an article from unread-to-read shouldn’t be a stand alone task. However most read-it-later apps require users to remember to find the archive button (sometimes it is even not intuitive to find). The result is a mix of read-and-unread articles in the list, and very few read-articles got archived or deleted.
3.Users Not Motivated to Read
A user’s journey of using the read-it-later app does not end when he/she find and start reading the saved articles. People spend time reading these articles, hoping to learn something. The app should enable them to make good use of their efforts by saving their notes and highlights, and help them find those good articles they have read in the future.

Meet Josh

 

Introducing READ-BO…

screens

Research Process

  1. I started out by sampling some of the articles from my current reading list, and classify them using affinity diagrams. I used blue post-it for the category name, and green post-it for some ideas/ insight related to this category.
    • e.g. I learned that a lot of unread articles in my reading lists are dry and technical articles, which is useful but not necessarily relevant to what I am working on right now.
      Affinity Diagram for Articles
      learn from my unread articles (affinity diagraming)

       

  2. I mapped out current user experience using read-it-later app and compared it with the ideal user flow
  3. User JourneyI analyzed few apps I used to read/save articles online, trying to answer: “why are these apps not able to solve my problem” & “what do they do well”. The analysis is structured by user journey, and organized by questions I asked while I was making the user journey map.
    competitive analysis
    Read the full analysis

I don’t want to design an app just for myself

In order to verify what I have discovered, I designed a short survey, and posted it on some discussion groups online.survey

result

Among “Other”, 6/8 people expressed that they want a better way to organize the article so that they can decide what to read next or find good articles they have already read.

 

Brainstorming

Screenshot 2016-05-23 00.12.51

brainstorming

Flow

After doing a bunch of sketches, I had a rough idea of where I am heading. So I started working in Balsamiq to flesh out the key flows.

FLOW-BALSAMIQ

 

Visual Design

I started to think about visual design while working on flow. This is still a work in progress…

Mood Board

In order to define the color and feel of the app, I created this mood board.

Mood Board

 

Visual Guideline

Based on the mood board, I selected the primary colors and other colors for the app. While searching for good typography, I found Daniel Eden’s Just My Type. The pairing of “Proxima Nova” & “Adelle” delivers a really clean & high-quality feel. And they are super easy to read, which is important for reading apps. For the font size etc., besides Apple’s iOS HIG, I found the two resources below super handy:

Visual Guideline

Next Step (Coming soon…)

  • interactive prototype and feedback from potential users
Protected: Product Design at Microsoft
Microsoft
Graphic Design, Interaction Design, Recent Work, User Research
Protected: Product Design at Microsoft
Framer Experiment
Interaction Design, Recent Work
Framer Experiment
Re-imagine Read-it-later Experience
Graphic Design, Interaction Design, Recent Work, User Research
Re-imagine Read-it-later Experience
Yelp User Profile Page Redesign (ios)
Graphic Design, Interaction Design, Recent Work
Yelp User Profile Page Redesign (ios)
Taxonomy for Starbucks Bakery Products
Taxonomy for Starbucks Bakery Products
TEDxRainier Event Companion App
UW iSchool Capstone Project
Graphic Design, Interaction Design
TEDxRainier Event Companion App
Health Pal: Web Application Design
Interaction Design
Health Pal: Web Application Design
Hello 911… Information Visualization Project
Information Visualization, Interaction Design, User Research
Hello 911… Information Visualization Project
MooDuino: in-class voting app Design
Interaction Design
MooDuino: in-class voting app Design
Exploratory Data Analysis with Tableau
Information Visualization
Exploratory Data Analysis with Tableau
Homeless in Seattle Visualization
Information Visualization Class
Graphic Design, Information Visualization
Homeless in Seattle Visualization