Newsstand, Defining better news experience | UI/UX Case Study
An ultimate guide to UX of news applications for Millennials.
The world around us is changing at a fast pace; it seems like a revolution is in progress and you should be aware of it. You can read a newspaper or can search through the internet or watch televised news to know about the issues that are affecting us and the world around us.
Young people resemble to be distracted and disconnected from the world around them because their eyes seem to be stuck to their mobile screens. Millennials always like to keep moving so they don’t have time to read newspapers or watch televised news. Instead of reading through the long articles, they prefer to get insights from their favorite social media application.
Problem Statement 🔊📣
For many young people, clicking on Instagram to get the latest news is now like second nature as picking up a daily newspaper once was to generations before. For a site that has traditionally been a platform for sharing lifestyle content rather than hard news, this is a shift in millennials and Gen Z, at a time when news updates seem more important than ever.
Our social media environments are still so segmented that some people really do live in different information worlds.
Keeping the above context in mind, I came up with an idea for one of my personal projects, Newsstand, an ultimate guide to lead the new news experience to the younger generation.
I thought to build a product, that can create an engaging experience for our users that will inform them and continually capture their attention and time.
Research 🕵️♂️🧑💻
User research is going to be the lifeblood of the project, so it will help me to lay the foundation of the entire project. I have visited different news sites, ranging from the Times of India, CNN, and Hindustan Times. Primarily, I focused on searching trends across the different apps and then created a list of assumptions based on valuable insights.
- Depends on the social media sites for their news :
- Depending on social media leads to fake news.
- Will not read the entire article if it's too long
- Skip most parts of the article
- Only read news of specific category based on their interest
- Prefer images and videos associated
After having a list of assumptions now this is the time to challenge my assumptions. The most dangerous thing one can do as a designer is not challenging his own assumptions.
So I have formulated a list of questions to better understand how our potential users are interacting with and consuming news and also how they are interacting with social media.
- Which apps or websites do you use to read the news?
- Do you read the news every day? Why or why not?
- In the world of fake news, how do you verify the authenticity of the news?
- Do you get most of the news from social media pages?
- Do you find the relevant news that you want to read, or do you have to struggle for the same? And if you struggle, How do you find relevant news?
- When you open a news article, do you read the complete article? If not, why?
Having loaded with a list of questions, I contacted potential users who fit the millennial age range. I started with the user survey that directly verifies my assumptions and gives me a limited set of points to work on. Surveys question mostly consist of the “what” part of the aspect. There were around 40 responses received.
Here are few compelling replies…
Now after conducting a user survey, I am moving on to “why” and “How”. What’s a better way to connect with the audience than to be in the same room as them? I conducted 4 user interviews or learned more about the pre-decided goals from the users. The questions are open-ended so that I can extract more information and can discuss their attitudes, emotions, and frustrations. While interviewing, I found out that most of the news that millennials get from social media is easy to get unverified and fake news.
Here are the key findings::
- Average time Millennial spends with news is 6–7 minutes.
- Gets most of the news from social media sites.
- They read the same news from various sources to check the validity of the news.
- Content to be organized and relevant to their interests.
- Users want a better description of articles to avoid click-baiting
- Prefer a short insight into the whole article so that they don’t have to read the complete article.
- Visually prefer accurate pictures over video clips.
User persona and empathy map 🙋♂️🙋
Great, so now I have some first data about my potential users, what they need, what they expect, and what are their major pain points. The next step is to summarize those users into their user persona. The purpose of the persona is to create reliable and realistic representations of your key audience segments for reference. I also decided to create an empathy map that helps to visualize user attitudes and behaviors and help me to get a deep understanding of end-users.
We can deepen our understanding by creating a situation in which our potential users likely find themselves in everyday situations. This situation is from the point of view of our persona “Raghav”.
“Anytime when I went to check some news, I want to visit a source that provides relatable articles of my topic of interest and is trustworthy. I want to spend my least of time and effort and stay updated about the world.”
Plan 📝
Now after having enough insights, opportunity areas, and all How might we, I did some analysis and listed my high levels of goals to narrow my focus on users' wants and needs.
- The “For you” section which gives users the opportunity to see personalized news.
- Decrease the effort of users in verifying the news.
- News highlights before the long actual article.
- Allow options for news consumption that gives users the opportunity to spend their time more efficiently.
This is the most challenging part for me as news is the most significant part of human lives. News has existed way before the newspapers, it has existed with humans from the start. There has been constant up gradation in the way of transmission of news from newspapers to television to the internet. But the core meaning of news has always remained constant and its importance is constant too. So, it gets challenging for me to tackle those pain points without affecting the two constants (meaning and importance of news).
One thing that I have learned from Engineering is that if the problem is getting more complex then more the solution lies in the basics. So I went with the basics and started questioning “whys.”
Why do people even need to read the news? Why do they verify one news source from different sources?
Why do they read news from social media even if there are tons of news applications and sites available?
There is a simple one-line answer to all these questions:
“I want to be smart and correct and I want to get news in less time and effort.”
So keeping this simple and meaningful answer as a foundation, I am going to design a solution. These demands become the core of every decision that I have taken from this point.
I need to prioritize and organize the work So, a rich structure is necessary. So, I move on to creating a user story map. It captures the journey a user takes with the product including activities and tasks they perform with the system.
Ideation 💡
Now comes the best part of the whole process, Ideation. I started with my favorite design tool, Pen, and Paper.
“Designing is not something that you just create and start using it. Draw and draft and redraw and redraft, thus creating an unmatched experience.”
The way to think about ideation is that it’s a process of creating a lot of divergent ideas with a goal of creating a large set of concepts from which a high-quality design solution can be generated. And why do I do this?
Well, the main reason is that there is a large body of evidence showing that when we start with a large number of different ideas, we end up generating better final solutions than if we just start with one or two ideas and then refine those ideas over time.
I followed the basic rule of ideation to make ideas cheap. It helped me in generating ideas as quickly as possible and then tried to fill in just enough detail to get a sense of the idea. I have generated both variations of an idea and some completely different ideas. During the whole ideation process, I didn’t worried about idea quality and feasibility. I ended up sketching about 33 ideas based on the above rule.
Here are some sketches::
- It's the headlines that catch the attention of a user. So, I decided to put every headline with some original image of the news to just draw the attention of users. I discarded the ideas of simple textual headlines.
- Feeling of Individuality: Everyone is different from others in every kind. and everyone has their own personal interest. This helps to grabs the attention of an individual for a long time. So, I gave the top priority to the “For you” section which in have the news as per the individual personal interest.
- To ensure the feeling of true news, I have added source names at top of the headline and linked it to their actual sites. And also, I have given an option of different sources to access the same news. This will easily verify the validity of news and also ensures users know the full picture.
- Let not waste the precious time of our users, short highlights of actual news before the full coverage helps the users to make a decision, whether they want to read full coverage or not.
With iterating over different ideas for a long time, this is what my actual solution revolves around.
I have decided to keep two different formats for listing news on the main screen, which helps users to differentiate between the top stories with the regular one. Also, I begin to focus on keeping things simple and limiting how many content users would be shown at a given time.
With the next set of sketches, I tried a variety of methods to give an option for the users to directly validate the authenticity of the news. So, I came up with two methods. One to place the option to read the same news from different sources and second I have decided to give an extra tab of “fact check” in which all the previous fake news will be listed.
After finding my direction, I realized that it’s important to take some inspiration from social media applications and provide some similar attributes. So I went with providing left and right swipe to keep reading news highlights continuously. It will keep users interacting for a longer time. However, I wanted to ensure that the amount of content at any time would be limited, giving our users more selective news articles. It would keep them focused on the articles I want to display, making for easier news consumption. While deciding all features of my foundation to help users feel smart, saving them time, and providing them an option to quickly verify the news, keeps flashing in my mind.
Implementation 🤹🤹♀️
Now it’s time to push some pixels and translate our sketches into digital wireframes. Here are some examples of wireframes.
Feedback
“You’ll never reach perfection because there’s always room for improvement. Yet get along the way to perfection, you’ll learn to get better.”
To get feedback I have decided to do an expert review and task-based testing with some of our potential users. Here are the responses I received:
- Confusion with the left and right swipe. Most of the users didn’t figure out the swipe feature.
- Users confused with the other sources segment present on the short insights page. They tapped other sources to read complete stories. This overshadowed our read full story link.
Design ⚒️⚙️
Now I have finalized the layout and flow of the required interface, the next step is to work on the final graphics. Turn the initial mockups and wireframes into great-looking images with themes and styles applied to them. My goal is to have a bright, young, and trustable personality. Talking about my design philosophy, I have always tried to keep things simple with some uniqueness.
Getting started
I have started with a minimal splash screen, having only an app icon on it, then thereafter, the onboarding which gives the overview and key insights of the app followed by the screen of login and signup which can be skipped. To make the app more personalized and user-specific, I have added a screen, where users can Choose categories of their personal interest, which helps them to access the news of their choice.
Here on the home screen, I have created four sections as Discover, For You, Trending, and Fact check. The “For You” section will be a personalized section based on the categories chosen by the user in the beginning. The “Fact check” section will list the news which goes viral but is fake. This will help the users to correct themselves on some previous viral news. As the name suggests the “Trending” section contains the trending headline. The “Discover” section has a list of categories that users want to explore.
On tapping a particular news headline, it will lead the user to the screen with the short highlights of the particular news. It will be less time consuming, and from that screen, users can decide whether to read the full coverage of the story or not. A reading time of the full coverage will be given to motivate the user to read the full content. I have taken this inspiration from Medium.
Also here comes the swipe to read the next news feature, users can swipe right or left to directly access the next and previous headlines. There is a group of dots and a message “swipe for more headlines” for indicating the same.
Conclusion and Next steps 📈📉
For this part of the project I have completely neglected the advertisement and focused on the user-centric approach. But every product has a business aspect as well, so my next step would be to focus on the placements of ads and experimenting with different methods without affecting the whole user experience. There is always a scope of modification, so I will keep performing usability tests and doing modifications as per the feedback.
So, this is pretty much it.
It was quite an enjoyable learning experience. Keeping my eye focused on simplicity and user needs helps me to build a foundation and this foundation leads me to the complete solution. It helped me to further improve my UX research skills and analyze the data to reach a solution. I have really enjoyed the ideation part and learned a lot about how having a large number of ideas helps to come to a solution iteratively.
Thanks for reading! 😁
Your valuable suggestions will help me to improve. 🙏
To see more of my work, please visit Behance or Dribbble.😃
Let’s connect on LinkedIn 🙃
