Loading

tldr; The news app for a quick read

Project Background

Background:

People are always in a rush — not everyone has time to sit down and read a few lengthy articles on today's topics or news. If they do have time, they surely want to use it to relax and unwind rather than continue to read articles they may not have an interest in.

Function:

tldr; serves those that don't have the time or patience to sit down and read an article from start to finish — especially not knowing how long it'll take them to finish it. The mobile app provides users with a shortened, summarized version of the article with the most relevant and important information first. If the user likes what they read, they can get the entire article or have it played to them using voice audio.

Relevance:

tldr; is relevant in today's society where everyone is either lazy or not focused into reading what's important or trending. tldr; takes out the boring parts of the articles that throw users off and gives them the facts, and only the facts. So users know they'll only be getting the best content first.

Design Problem/Oppurtunity

News apps are one of the most information dense apps out there — any news app is riddled with lots of information such as different topics, headlines, and the articles themselves. In news apps, the information is endless, you can always find another article, but with all of that information you need time to read. Current apps struggle to give the most important information first so I don't have to scan the entire article just to get the gist of it. I never have time to read a whole article and more importantly — I'm blinded by the fact I don't know how long of a read this article will be.

What tldr; will fix is giving the user the most important information they need and came to get right away. The user will find an interesting article on a topic he/she likes, get the facts in a few sentences — and then if they are interested in getting the whole scoop, be given an option to read the entire article with approximate time it would take for that article. This allows users to constantly get the information they want right away without having to scan around and waste their time on an article they aren't interested in.

Goals

With this project, I hope to give back the most valuable thing in the world — time. I believe it'll give users more information in less time because of the quick summaries they are looking for in an article — especially if the article isn't as important to them as another article may be. I hope my audience gets to read more, or know more and not have to worry about sitting down and getting the information they came looking for.

Strategy

As someone who enjoys doing mobile app design in my free time — I believe I will be able to get this project done without any issues. When I set my mind to do something that interests me, such as this project, then I don't back down from it until its fully complete. I will make deadlines for certain tasks that have to be completed with this project and get them done in a reasonable amount of time so I'm always on task, focused and my goals are always aligned.

Project Background

I've always had this idea and constantly wanted to design and build it out, but never had the time to sit down and do it. With this class, it gave me a perfect reason to finally start it and envision what I want this product to look and feel like at the end.

I am someone who likes reading articles and news, but never has the time to read more than an article or two, and tend to lose focus on some articles rather quickly. I like how Medium gives users the ability to see how long an article is and that merits whether or not I read the article most times. So with this project, I want to combine all of this to create a solution that gives users the summary of articles and how long the actual article is if they want to read it. This way, I'll be up to date with current news and get more articles in a shorter time.

Suggested Design Overview

My proposed design solution involves two things: getting the most important information first to the user and knowing my users likes and dislikes. Both of these are fundamental in creating an app that serves my user best and makes he/she happy and satisfied with the product. I want my user to be able to scan maximal amount of information in a short period of time.

USER PROFILES, PERSONAS & SCENARIOS

Three profiles: Retired and/or older people, middle-aged businessmen and women, college students

PRIMARY TARGETS: Busy young adults and adults who read, listen or watch the news often

PROBLEM SCENARIO

TODD - 35 YEAR OLD MALE - WIFE & TWO YOUNG KIDS

JAMIE - 28 YEAR OLD FEMALE - COWORKER OF TODD

TODD: *Frustrated* I never have time to do what I want..I'm always busy with the kids or working on this project at work, I don't even have time to keep up with the news like I used to.

JAMIE: *Overhearing Todd's frustration he is spilling out to another coworker*

TODD: I just like to hang out with my friends and talk sports or politics, but I've been so out of the loop with it with no time, sometimes I can read, at most, one article per day.

JAMIE: Todd, hey, I overheard you and I couldn't help but hear that you had a similar issue to me. I never had time to do things I wanted to and I'm an avid news listener and reader. I stumbled on this app called tldr; and I think you could really use something like it.

TODD: No way! What does it do?

JAMIE: It's like any other news app, but it summarizes all articles for you so you can find topics you like, headlines that interest you, and read a short 1-3 sentence summary. If you have time or want to read more details, you can expand the article and read the full thing! I haven't used another news app since.

TODD: Neat! I'll try it out..thanks Jamie!

Initial Prototype

REVISED PROTOTYPE

Initial: When designing my initial prototype — looks wasn't the end goal. The end goal was making sure my navigation, accessibility, and basic user understanding of the app were inline so that the it would be easy for the user to use. So I created the most basic outlined screens that would show basic navigation and what each screen was responsible for and contained within the application.

Feedback: What was received was lots of confusion how the application was supposed to function and the overall purpose of the app. Now even though its just prototype — it was key here to understand the confusion behind my user and what they didn't understand and how I could fix it. They didn't know how one screen communicated with another, they didn't know where they would be able to view an article or let alone find it. All of this went past my mind when first designing it...I needed to make it feel more real for all my users so that they could experience the most basic app without actually having their phone.

Revised: The revision allowed me to redefine my scope, how to show the user the purpose of the app, and see if they would be able to understand it once again. I re-outlined the entire app, added some more screens, and put in basic helpers on the paper so at least the user could have signifiers in there to understand what is clickable and/or scrollable throughout the application. I added titles to each screen, made it feel more personalized to the user, and added statistics that could make it stand out amongst other applications. Overall the feel and look of it became more adopted and a lot more user friendly.

5 Recommendations

Feedback: I chose to feedback as a primary recommendation because the app requires great feedback for a user when they are scrolling over articles and reading them. Being able to hold down on an article and read a quick summary is vital with feedback so it sends a response back to the user that a pop up is being presented through haptic feedback. Currently — I do not believe it is fully being reflected within my design, but through iterations and more visual prototypes, the feedback will be shown to the user.

http://www.csun.edu/science/courses/671/bibliography/preece.html

Consistency & Standard: I believe this is one of the most important recommendations in my design process due to the fact the iOS application has to conform to many of Apple's Human Interface Guidelines on how the application is used and the actions the user may take in it. My application should be consistent in all the main processes such as finding, scrolling and viewing different articles throughout the application. The scrolling of articles will always be consistent — whether it is horizontally to left or vertically down. The current design process currently illustrates this pattern very well and displays on paper how a user interacts with scrolling in the application and clicking on articles to display information like many other applications do.

https://www.interaction-design.org/literature/article/shneiderman-s-eight-golden-rules-will-help-you-design-better-interfaces

Offer Simple Error Handling: This will be especially useful for this application as it relies on internet/wifi access to retrieve and display news articles for users. When they are cut from the internet, the users need to be shown a message that displays why they aren't getting the information they want. In this case, error messages that they do not have connection or loading is taking to long. Currently, the design of my application does not account for errors and does not display that to users — in my next design iteration, I plan on displaying these errors in the application.

https://www.interaction-design.org/literature/article/shneiderman-s-eight-golden-rules-will-help-you-design-better-interfaces

Aesthetic and minimalist design: The mobile application will have a consistent, minimalist, aesthetic look and function to it. The entire application and all its different pages will have a clean look that display minimal information other than what the user needs to see such as articles, titles, and topics and where they currently are in the application. This is relevant to my current design because of the overload of information that could be presented such as thousands of articles that need to be organized in a good way so that the user can view every relevant article. In my current design, I feel like I illustrate this well as all of the design is organized in a simple manner and is easy to read, understand and navigate around. The main pages are organized in a tab bar on the bottom that shows consistency across Apple's human guidelines and the other information is organized across the rest of the screen.

https://www.designprinciplesftw.com/collections/10-usability-heuristics-for-user-interface-design

Recognition rather than recall: I used this recommendation because it applies to my application design process using many icons and pictures. Due to the fact that this application is heavily content based with words — there needs to be a break with icons and pictures to reduce the amount of words always on the screen. The tab bar shows icons that correlate with their actions that a user can easily recognize. Along with that, topics will include picture backdrop, and articles will always display pictures on the main screen. Doing all of this will help ease the user with the amount of information displaying to them at one time. Currently, my design somewhat illustrates this with the tab bar, but the topics and articles do not fully show the pictures that will be used, this will be seen in the next iteration however.

https://www.designprinciplesftw.com/collections/10-usability-heuristics-for-user-interface-design

High Fidelity Prototype

Basic prototype available: https://sketch.cloud/s/MlGOW/L5o2nW/play

https://sketch.cloud/s/MlGOW

*Spark quality for photos doesn't represent actual quality of the mockups*

Building this project out — I used a variety of tools to help me accomplish my goal of a high fidelity mockup for my application tldr;. I used Sketch, Invision App, The Noun Project, Unsplash, and Dribbble for some inspiration. All of these tools allowed me to build out my high fidelity mockup by combining different sites, apps and resources to build out my full wireframe and how it would act to a user.

Sketch is my favorite design tool, which is only available for Mac users, and has a free store of resources and plugins that you could add to the application to make designing easier and more fluid. There is a small learning curve with Sketch, but once you learn it, the possibilities are endless and you can create amazing mockups.

Invision App is great for prototyping, it can easily be integrated with Sketch through a tool called Craft Manager and allows you to easily upload your art boards to the website. Once in the website you can create prototypes with your mockup designs by connecting different parts of the screen to other art boards to make it feel realistic as if you were really using the application. Unfortunately, I already used my free prototype trial for Invision and couldn't go through with the prototyping tool, but nonetheless, still uploaded my designs to my projects page. So instead, I chose to go with Sketch's minimal prototyping tool that just allows you to connect art boards and do basic transitions without anything to realistic.

The Noun Project is one of my favorite websites when I'm designing because of the millions of icons that are available for someone's use — any icon you want you can probably find on this website and they're all beautifully made. If you don't want to credit the author of the icon, you can pay per icon or pay a membership to use all icons per month, which is what I have been doing for a few months now. It makes searching and using icons a breeze and not having to worry about scavenging the internet for the perfect icon that is free and can be used with crediting the author.

Unsplash is a website that has free stock photos that are high quality to use within your application.

Dribbble is my go to website to get some inspiration when I have a design block and can't imagine how I want my application to look and act. I look at other designers work for inspiration and how I can learn from there techniques in order to build the best app possible that has great design and experience for a user.

The only trouble I ran into during this process was not paying for Invision App so I couldn't use their nice prototyping tool and instead had to use Sketch prototyping tool.

Lastly, I build out each "app page" with multiple iterations to see how I like it with different looks and feels and once the entire mockup is done I go through and see how the entire application flows and which iteration works best for the design of the app.

USABILITY TESTING

Iterating Design through Usability Testing and Heuristic Evaluation

Predictions:

The prediction throughout this entire run was that the task should take about one minute and four seconds total from time of sign up, to the onboarding process, to viewing and selecting an article. Due to the fact that no function within my prototype application would take at least 45 seconds, I had to combine the three tasks together in order to complete this usability testing. Users that tested this application all fell in a range close to this one, some falling below, some above.

Recruitment Process:

During the recruitment process I found volunteers by asking friends and family who I know would participate in this fun study. Though I could ask lots of different people I knew, I narrowed it down by asking two simple questions:

Do you read news on a daily/weekly basis? How long do you read the news for?

Doing this allowed me to get the right users for my app because I didn't want people that were unfamiliar with news apps and who weren't interested in reading the news — those types of users wouldn't help me.

Then, using a script I created ask them questions pertaining to the use of my app and how to navigate it.

Script

Start:

1. Open app

2. Sign up

3. Select sources/topics relevant to you after sign up

a. Are any relevant or interesting?

Browsing an article of interest:

1. Browse articles

2. If any are of interest

a. Select article and read summary

b. Expand if you want to read more

3. Return back to articles and keep browsing

Browse “For You” Personal Tab:

1. Select the for you tab

2. Browse the selected tab to see if your relevant sources/types of articles interest you

3. Select article to read

4. If not relevant

a. Go to settings

b. Undo the selected source/topic

The table below outlines all the user data when doing this experiment, as well as averages for both the regular task and the modified and each users average overall.

The predicted time was originally calculated by the number of clicks per page in the application and the time it would take to complete each mini task. That time together came out to one minute and four seconds. As you can see above, all subjects scored within a similar range to that number and the total average was about four seconds shy of that number, which means my users were faster and more adept than I thought originally.

The predicted time and actual time were both very similar and there was no direct relationship after the subjects used the modified version. One reason I believe that happened was because of the fonts used for the regular and modified version which were San Francisco and Helvetica Neue. San Francisco is the standard font for Apple products that should be used due to its easy readability and lettering, but same with Helvetica. What I didn't realize and only found out after my times didn't have a correlation was that San Francisco comes from and is inspired by Helvetica Neue, but with some minor changes. This was extremely interesting to find out because Apple took a famous font and changed it up to make it better and easier for their users, something I was also trying to accomplish.

The task they were trying to accomplish in both cases was signing up, onboarding, and selecting and reading an article. Some users constantly asked questions, but as an observer I had to refrain from answering and instead just watch and see what they did. Some users didn't do the tasks correctly, or wandered around the application out of pure curiosity, but others followed through an accomplished the goal in a timely manner.

New Changes to the high fidelity prototype

New changes: Redid the experience and look of the main news page where you can browse articles, redesigned the trending articles to have more recognition rather than recall with more of an image and less boxy, added a settings page for changing information and changing sources and topics you like.

These changes were all reflected and made by user data and feedback given.

New Heuristics used:

Reduce short-term memory load, strive for consistency, permit easy reversal of actions

The changes made above reflect the new look and feel of some of the functionality behind the prototype. For example, now there is a setting page just in case the user feels like they want different news sources or topics — that way they never get bored of the content because they can always switch it up. Along with that, now the user doesn't see trending or recent, he sees the topics he/she is interested in and view all the news based on those topics. Lastly, the trending articles is now shown at the top with a big, blown up image and the headliner so that is the first thing the user sees and may click on.

Final Prototype

https://sketch.cloud/s/MlGOW/4aVQkaZ/play

Credits:

Created with images by David Švihovec - "untitled image" • Ali Shah Lakhani - "untitled image" • rawpixel - "untitled image" • StartupStockPhotos - "library books tv multimedia room modern interior"

Report Abuse

If you feel that this video content violates the Adobe Terms of Use, you may report this content by filling out this quick form.

To report a Copyright Violation, please follow Section 17 in the Terms of Use.