UX DESIGN
DIVERGE
NEWS YOU CAN RELY ON
Diverge is a mobile app that aims at delivering transparent news. It enables the user to form their own opinions by showing same news article through multiple perspectives. It helps them follow a thread of news and its progress and empowers them to modify the type of content they consume and their consumption time.
NEWS APP
TRANSPARENT
ETHICAL
INDIVIDUAL
ACADEMIC
6 WEEKS
WHY?
These days the news is not factual, instead have become more about perceptions and opinions. There is scarcity of sources for unbiased news. Most of the apps work on AI algorithms, so the recommendation a user receives is within a bubble.
CONTEXT
The platform caters to the individuals who wants news from multiple perspectives.
It gives a seamless view of news articles, it's timestamp and enables discussions in audio rooms
An ethical app sending notifications based on the user's preference. User can read beyond the info bubble they live in.
The user will be able to view any news from its start to end.
"Perceptions"
"Opinions"
"Misinformation"
"Info Bubble"
"AI Algorithm"
"Repetitive Content"
GOAL
DESIGN
PROCESS
Understanding the problem
Secondary Research
Market Research
Primary Research
Affinity Mapping
Research Insights
Personas
Iceberg Analysis
Needs & Requirements
Brief Exploration
Final Design Brief
Visual Design
UI screens
Final Prototype
Key Learnings
Wireframes
User Testing
High Fidelity Wireframe
Concept Storyboarding
Information Architecture
User Flow
01
STRATEGY
UNDERSTANDING THE PROBLEM
There is a steep rise in the number of (Debunked) Misinformation is media these days. The relevance of news has stooped down a lot and Indian press has lost its credibility.
Country Freedom Index
Democratic to Partly free
World Press Freedom Index
142nd rank out of 180 countries.
SECONDARY RESEARCH
This chart represents the no of increase in the no. of information of misinformation in days of Jan to April. The increase in numbers were alarming.
I further researched via multiple websites, news agencies forums and social media channels and found some problems.
These are the categories of problems found in news products :
IRRELEVANT INFO
- Viral News
- Fake News
UNETHICAL METHODS
- Click - Bait
- Multiple notifications to increase engagement
NEWS MEDIA
- No trustworthy source
- Biasness because of social media
NO INTERVENTION
- Nowhere to check
- No questions raised
MARKET RESEARCH
Market research primarily involves getting the broad picture, uncovering high-level information regarding the industry. I therefore looked into various sources of news in India and identified the problems in them.
SOCIAL MEDIA
NEWS APPLICATIONS
- Clickbait
- Unethical Push Notifications
- Data based personalization
- Sloppy Journalism
VIDEO STREAMS
SEARCH ENGINES
- Slow source
- Biased Opinions
- Satire/Parody
- Information Bubble
- Algorithmic Data
- Misleading Headings
Q & A PLATFORM
- Cognitive Overload
- Lost in Opinions
- Viral News
- Propaganda
- Biased/Slanted
- Misinformation
Primary research guarantees that the information collected is up-to-date and relevant, enabling accurate trends to be revealed. The process followed in primary research was starting with quantitative research via survey and then qualitative research via semi structured interviews. Post that the insights on the same were collected.
Quantitative Research - Survey
No. of Respondents - 86
Qualitative Research - Semi-structured Interviews
No. of Respondents - 8
The process followed in sampling of the users for user interviews were :
Convenience Sampling
Selection of Audience on the basis of convenience such as reach availability.
Snowball Sampling
Initial respondents referred to the next respondents
Domains of Questions asked in User Interviews
NEWS CONSUMPTION
SOURCE OF NEWS
TRUST
RELIABILITY
CHECK THEIR NEWS?
KNOWLEDGE ABOUT AI ALGORITHMS
TECHNOLOGICAL AWARENESS
VIEWS ON VIRAL CONTENT
IRRITATIONS
FEARS
Some Responses
"I am an active news reader, I spend time on articles of my interest. I wait for youtube channels or read through discussion on reddit because I understand the biasness."
"I am not a regular reader of any kind of news. I feel that I get into fights with my friends more because of different opinions so I stopped."
"I spend time reading articles on facebook, i feel sometimes the whatsapp forwards are true. I have even installed inshorts because it give me news in few sentences. "
"I read articles online, I donot feel that there are a lot of differences in opinions. I get to see what I want in an article. I used web apps like dailyhunt."
Abhilash , Student
Anvita, Working Professional
Chandigarh
Lucknow
Sujata, Homemaker
Mumbai
Anshul, Working Professional
Bengaluru
AFFINITY MAP
The next step I took was to affinity map the observations made during the User Interviews.
RESEARCH INSIGHTS
These insights gives us a collective view on all data that came out during the research. I have listed down some key observation with respect to the themes and patterns that emerged out.
CONTENT
- Not Factual
- Perceptions & Opinions
- Viral Content over Reality
- Local News Pressed Down
- Misinformation
TECHNOLOGY
- AI Algorithm
- Infiltration from Bots
- Information Bubble
- No access for illiterate
- Opting Slow Source news
NEWS CHECK
- Search engine based on Opinions
- Websites with Propaganda
- Misleading headlines
- Popularity based Results
NEWS SOURCE
- Not Trustworthy
- Social Media Biases
- Articles that are Click Bait
- TRP Value given Importance
- Sloppy Journalism
Q & A Forums
- Cognitive Overload
- Unorganized Content
- Lost in Perspectives
- IT Cells involvement
02
SCOPE
USER PERSONAS
The next step in the process was creating personas. It helps me understand the user's needs, experiences, behaviors and goals.
Persona One
Persona Two
ICEBERG MODEL
The scenarios helped in understanding major problems but to identify the root causes, underlying structures and mental models that trigger problematic events, I worked on the Iceberg Model for event of the personas.
Daksh looking for a reliable source of information during this era of misinformation.
Sushma switching from a Physical medium of news to Digital Medium
NEEDS AND REQUIREMENTS
After exploring the Iceberg Model, I was able to understand the patterns and mental models of the users while understanding the structure of the products that are already into places. This helped me find out the needs and requirements that the product could evolve around.
There should be a medium of news that is transparent, without any opinions
These mediums should indicate the demographic / religious / any other biases
The same topic prompts that lets user follow the same thread of news with changing opinions should be provided
The search engines should have option to look beyond the algorithmic data that it has collected.
BRIEF EXPLORATIONS
After identifying the problems and exploring the opportunity areas, the next step was to understand the different possibilities and concepts. I started brainstorming various ideas.
Based on these brainstorming, I mapped out basic design brief ideas using three different approaches which is shown below:
DEDUCTIVE APPROACH
WHAT? + HOW?
To design a digital solution in form of app/webapp that gives
1. Importance to transparent news.
2. Customized reminder options.
3. A way to follow a thread of info & how it has changed with time.
WHAT? + WHY?
INDUCTIVE APPROACH
To design a plugin or microapp that makes the user check the news or information that they receive.
It will ensure that the information is correct, trustworthy, honest, safe, reliable & transparent in nature.
WHY? + HOW?
ABDUCTIVE APPROACH
To create a forum based product that lets the users post independent news first hand.
The user gets an alternate source
which checks validity of news & involvement of bots in the product.
FINAL DESIGN BRIEF
To design a digital solution in form of app that
Gives importance to transparents news.
Has multiple perspectives of the same news articles.
Has customized reminder options that could be changed by the users.
Indicates the bubbles of info a user is in while consuming information.
Lets the Users follow a thread of information and how it has changed with time.
Have a discussion on the same to see varied opinions
The digital solution will be ethical, transparent, unbiased and a go to place for users that like to read news.
The next step was to define the functional requirements of the app. So I listed down a few of the relevant requirements.
AI Collecting and Sampling
Time & Perspective based compilation
Collect & Edit Algorithmic Data
VUI based discussion rooms
Actors & Factors in news article
Personalized Notifications
03
STRUCTURE
CONCEPT STORYBOARDING
The concept storyboard helps visually predict and explore the user experience with a product. It visualizes how people would interact with a service or app. I started with some scenarios, the problem and solution if this app was implemented.
PROBLEM 1 : Daksh unable to find a reliable source of information during this era of misinformation.
Daksh tries to find a website or a Q & A forum to get hands on latest discussion.
He finds himself lost in the endless scrolls of comments & discussions.
He gets very frustrated and loses it.
Daksh then tried his hand on news app then.
He was able to locate the article, but unable to see multiple views or have discussion on same .
He gets some information, but his confusion could not be cleared.
SOLUTION : Daksh gets to the DIVERGE app, and find solutions to all his problems at one place.
Daksh downloads DIVERGE app. He scrolls through articles with multiple perspectives.
He starts reading article from start to the end. He discussed with fellow readers.
He felt relieved of being able to form his own opinions and not a biased one.
PROBLEM 2 : Sushma switching from a Physical medium of news to Digital Medium
Sushma had the comfort of reading newspaper from her home.
Because of Covid the newspapers' delivery was banned.
She switched from newspaper to digital mediums
She was reading everything from multiple social media channels and apps
She got tired of getting notifications all the time, sleeping eating,
She shared what she read to her friend & realized it was fake. She was embarrassed.
SOLUTION : Sushma downloads the DIVERGE app, and found the comfort of digital news.
Sushma downloads DIVERGE app. She read pieces in easy story format.
She started understanding biases that comes in news and was able to figure out fake news.
She got an app she could trust and rely on.
INFORMATION ARCHITECTURE
Information architecture is a blueprint of the design structure, this can later be generated into wireframes and sitemaps of the project. I took up the task of making one next, here is the outcome :
USER FLOW
After making the information architecture, I understood the basic structure of the app, I moved on to making the User flow is. It lays out the user's movement through the product, mapping out each and every step the user takes—from entry point right through to the final interaction.
04
SKELETON
WIREFRAMES
I created low fidelity wireframes in order to understand how the skeleton of the app would look like.
USER TESTING
In order to understand the product better and find the pain points, I uses the method of paper prototyping and asked some of the users to test it. I recorded the process, their expressions & behaviours in order to understand what can be refined. Some images of the same are below :
No. of Respondents - 3
Pain Points
Text Heavy
Cognitive Overload
Confusing
Learning Curve
Text Heavy
Can be more graphical
HIGH FIDELITY WIREFRAMES
The next step was making high fidelity wireframes, it ensured that the design decisions I made were apt and the target users are accounted for.
05
SURFACE
VISUAL DESIGN
Visual design is about implementing text, colors, and images in a way that enhances a design or interaction. It improves the usability and therefore adds to the user experience.I started with branding first.
Branding
I wanted the product to feel that it conveyed multiple sides of the same news articles so I named it DIVERGE.
The meaning of the word, " separate from another route and go in a different direction" expressing how the news can be separated based on multiple opinions.
The animation of the logo has also tried to show the same. The style that I used in the logo is Minimal giving context to the minimalist and the necessity aspect of this app.
Typography
Colour Palette
Color creates ideas, expresses messages, spark interest, and generate certain emotions. The idea behind this colour palette was to create a trust worthyvibe that matches with the app.
Iconography
Icons are meant to be simple, visual elements that are recognized and understood immediately. I tried to use the standard icons for the app so that it is easily recognizable.
Selected State
Unselected State
UX Writing
The content style in an app can help establish a product's personality. I worked around the Voice, tone and style of the app emphasizing on the same, it was :
- Clear and Short : The audience of app is here for the information therefore the text should be clear and short
- Reliable : The text is truthful
- Friendly : App should appear user friendly
UI DESIGN
An app's user interface is everything that the user can see and interact with. It was very important for me to come up with a User Interface that makes the user's experience easy and intuitive, requiring minimum effort on the user's part.
SPLASH SCREENS
INTRODUCTORY
Splash screen was created keeping in mind how various communities and information diverge.
Screen expressing the vibe of the app.
ONBOARDING
STORIES
Easy and Simple onboarding where the users can choose their interests. It gives them a Personalized Home Screen showing Various Perspective in one view.
Quick view of news articles in stories format
NEWS ARTICLE AND DISCUSSION ROOMS
INFOBUBBLE
An article, its actors and factors, also shows article from different perspectives. It additionally has Polls and Discussion Rooms (Audio Based) for Users to help them form their own opinions.
Tired of viewing same thing? The Users can now Edit it out and Add choices of their interests accordingly.
TIMESTAMPS
It will have articles from its start to end, their timelines and its progress.
SEARCH
Optimised Search engine with Filters and Trending Content for a better view.
MY PROFILE
SETTINGS
The user can change their Mode Settings as well as receive notifications of what they want, whenever they want.
It will show profile info as well as liked and saved post, viewing history, settings and more.
KEY LEARNINGS
Empathy : I tried putting the users in front of everything else. Personas and empathy maps were my way to deeply understand user needs.
Alignment : I also tried aligning my thought process towards the users and their pain points, and considered them while making any decisions.
Iteration : Anything that is developed from scratch will be an assumption. I tried multiple iterations to improve the product.
Seeking feedback : I asked my colleagues & my faculties for feedbacks at various stages which helped me to understand my problem statement.
User Testing : When conducting user testing, I tried to focus on the areas of improvement rather than seeking compliments.
Visual Design : I learnt how to use color and weight to establish hierarchy.
SECONDARY RESEARCH
This chart represents the no of increase in the no. of information of misinformation in days of Jan to April. The increase in numbers were alarming.
I further researched via multiple websites, news agencies forums and social media channels and found some problems.
These are the categories of problems found in news products :
IRRELEVANT INFO
- Viral News
- Fake News
UNETHICAL METHODS
- Click - Bait
- Multiple notifications to increase engagement
NEWS MEDIA
- No trustworthy source
- Biasness because of social media
NO INTERVENTION
- Nowhere to check
- No questions raised
MARKET RESEARCH
Market research primarily involves getting the broad picture, uncovering high-level information regarding the industry. I therefore looked into various sources of news in India and identified the problems in them.
SOCIAL MEDIA
NEWS APPLICATIONS
- Clickbait
- Unethical Push Notifications
- Data based personalization
- Sloppy Journalism
VIDEO STREAMS
SEARCH ENGINES
- Slow source
- Biased Opinions
- Satire/Parody
- Information Bubble
- Algorithmic Data
- Misleading Headings
Q & A PLATFORM
- Cognitive Overload
- Lost in Opinions
- Viral News
- Propaganda
- Biased/Slanted
- Misinformation
PRIMARY RESEARCH
Primary research guarantees that the information collected is up-to-date and relevant, enabling accurate trends to be revealed. The process followed in primary research was starting with quantitative research via survey and then qualitative research via semi structured interviews. Post that the insights on the same were collected.
Quantitative Research - Survey
No. of Respondents - 86
Qualitative Research - Semi-structured Interviews
No. of Respondents - 8
The process followed in sampling of the users for user interviews were :
Convenience Sampling
Selection of Audience on the basis of convenience such as reach availability.
Snowball Sampling
Initial respondents referred to the next respondents
Domains of Questions asked in User Interviews
NEWS CONSUMPTION
SOURCE OF NEWS
TRUST
RELIABILITY
CHECK THEIR NEWS?
KNOWLEDGE ABOUT AI ALGORITHMS
TECHNOLOGICAL AWARENESS
VIEWS ON VIRAL CONTENT
IRRITATIONS
FEARS
Some Responses
"I am an active news reader, I spend time on articles of my interest. I wait for youtube channels or read through discussion on reddit because I understand the biasness."
"I am not a regular reader of any kind of news. I feel that I get into fights with my friends more because of different opinions so I stopped."
"I spend time reading articles on facebook, i feel sometimes the whatsapp forwards are true. I have even installed inshorts because it give me news in few sentences. "
"I read articles online, I donot feel that there are a lot of differences in opinions. I get to see what I want in an article. I used web apps like dailyhunt."
Abhilash , Student
Anvita, Working Professional
Chandigarh
Lucknow
Sujata, Homemaker
Mumbai
Anshul, Working Professional
Bengaluru
AFFINITY MAP
The next step I took was to affinity map the observations made during the User Interviews.
RESEARCH INSIGHTS
These insights gives us a collective view on all data that came out during the research. I have listed down some key observation with respect to the themes and patterns that emerged out.
CONTENT
- Not Factual
- Perceptions & Opinions
- Viral Content over Reality
- Local News Pressed Down
- Misinformation
TECHNOLOGY
- AI Algorithm
- Infiltration from Bots
- Information Bubble
- No access for illiterate
- Opting Slow Source news
NEWS CHECK
- Search engine based on Opinions
- Websites with Propaganda
- Misleading headlines
- Popularity based Results
NEWS SOURCE
- Not Trustworthy
- Social Media Biases
- Articles that are Click Bait
- TRP Value given Importance
- Sloppy Journalism
Q & A Forums
- Cognitive Overload
- Unorganized Content
- Lost in Perspectives
- IT Cells involvement
02
SCOPE
USER PERSONAS
The next step in the process was creating personas. It helps me understand the user's needs, experiences, behaviors and goals.
Persona One
Persona Two
ICEBERG MODEL
The scenarios helped in understanding major problems but to identify the root causes, underlying structures and mental models that trigger problematic events, I worked on the Iceberg Model for event of the personas.
Daksh looking for a reliable source of information during this era of misinformation.
Sushma switching from a Physical medium of news to Digital Medium
NEEDS AND REQUIREMENTS
After exploring the Iceberg Model, I was able to understand the patterns and mental models of the users while understanding the structure of the products that are already into places. This helped me find out the needs and requirements that the product could evolve around.
There should be a medium of news that is transparent, without any opinions
These mediums should indicate the demographic / religious / any other biases
The same topic prompts that lets user follow the same thread of news with changing opinions should be provided
The search engines should have option to look beyond the algorithmic data that it has collected.
BRIEF EXPLORATIONS
After identifying the problems and exploring the opportunity areas, the next step was to understand the different possibilities and concepts. I started brainstorming various ideas.
Based on these brainstorming, I mapped out basic design brief ideas using three different approaches which is shown below:
DEDUCTIVE APPROACH
WHAT? + HOW?
To design a digital solution in form of app/webapp that gives
1. Importance to transparent news.
2. Customized reminder options.
3. A way to follow a thread of info & how it has changed with time.
WHAT? + WHY?
INDUCTIVE APPROACH
To design a plugin or microapp that makes the user check the news or information that they receive.
It will ensure that the information is correct, trustworthy, honest, safe, reliable & transparent in nature.
WHY? + HOW?
ABDUCTIVE APPROACH
To create a forum based product that lets the users post independent news first hand.
The user gets an alternate source
which checks validity of news & involvement of bots in the product.
FINAL DESIGN BRIEF
To design a digital solution in form of app that
Gives importance to transparents news.
Has multiple perspectives of the same news articles.
Has customized reminder options that could be changed by the users.
Indicates the bubbles of info a user is in while consuming information.
Lets the Users follow a thread of information and how it has changed with time.
Have a discussion on the same to see varied opinions
The digital solution will be ethical, transparent, unbiased and a go to place for users that like to read news.
The next step was to define the functional requirements of the app. So I listed down a few of the relevant requirements.
AI Collecting and Sampling
Time & Perspective based compilation
Collect & Edit Algorithmic Data
VUI based discussion rooms
Actors & Factors in news article
Personalized Notifications
03
STRUCTURE
CONCEPT STORYBOARDING
The concept storyboard helps visually predict and explore the user experience with a product. It visualizes how people would interact with a service or app. I started with some scenarios, the problem and solution if this app was implemented.
PROBLEM 1 : Daksh unable to find a reliable source of information during this era of misinformation.
Daksh tries to find a website or a Q & A forum to get hands on latest discussion.
He finds himself lost in the endless scrolls of comments & discussions.
He gets very frustrated and loses it.
Daksh then tried his hand on news app then.
He was able to locate the article, but unable to see multiple views or have discussion on same .
He gets some information, but his confusion could not be cleared.
SOLUTION : Daksh gets to the DIVERGE app, and find solutions to all his problems at one place.
Daksh downloads DIVERGE app. He scrolls through articles with multiple perspectives.
He starts reading article from start to the end. He discussed with fellow readers.
He felt relieved of being able to form his own opinions and not a biased one.
PROBLEM 2 : Sushma switching from a Physical medium of news to Digital Medium
Sushma had the comfort of reading newspaper from her home.
Because of Covid the newspapers' delivery was banned.
She switched from newspaper to digital mediums
She was reading everything from multiple social media channels and apps
She got tired of getting notifications all the time, sleeping eating,
She shared what she read to her friend & realized it was fake. She was embarrassed.
SOLUTION : Sushma downloads the DIVERGE app, and found the comfort of digital news.
Sushma downloads DIVERGE app. She read pieces in easy story format.
She started understanding biases that comes in news and was able to figure out fake news.
She got an app she could trust and rely on.
INFORMATION ARCHITECTURE
Information architecture is a blueprint of the design structure, this can later be generated into wireframes and sitemaps of the project. I took up the task of making one next, here is the outcome :
USER FLOW
After making the information architecture, I understood the basic structure of the app, I moved on to making the User flow is. It lays out the user's movement through the product, mapping out each and every step the user takes—from entry point right through to the final interaction.
04
SKELETON
WIREFRAMES
I created low fidelity wireframes in order to understand how the skeleton of the app would look like.
USER TESTING
In order to understand the product better and find the pain points, I uses the method of paper prototyping and asked some of the users to test it. I recorded the process, their expressions & behaviours in order to understand what can be refined. Some images of the same are below :
No. of Respondents - 3
Pain Points
Text Heavy
Cognitive Overload
Confusing
Learning Curve
Text Heavy
Can be more graphical
HIGH FIDELITY WIREFRAMES
The next step was making high fidelity wireframes, it ensured that the design decisions I made were apt and the target users are accounted for.
05
SURFACE
VISUAL DESIGN
Visual design is about implementing text, colors, and images in a way that enhances a design or interaction. It improves the usability and therefore adds to the user experience.I started with branding first.
Branding
I wanted the product to feel that it conveyed multiple sides of the same news articles so I named it DIVERGE.
The meaning of the word, " separate from another route and go in a different direction" expressing how the news can be separated based on multiple opinions.
The animation of the logo has also tried to show the same. The style that I used in the logo is Minimal giving context to the minimalist and the necessity aspect of this app.
Typography
Colour Palette
Color creates ideas, expresses messages, spark interest, and generate certain emotions. The idea behind this colour palette was to create a trust worthyvibe that matches with the app.
Iconography
Icons are meant to be simple, visual elements that are recognized and understood immediately. I tried to use the standard icons for the app so that it is easily recognizable.
Unselected State
Selected State
UX Writing
The content style in an app can help establish a product's personality. I worked around the Voice, tone and style of the app emphasizing on the same, it was :
- Clear and Short : The audience of app is here for the information therefore the text should be clear and short
- Reliable : The text is truthful
- Friendly : App should appear user friendly
UI DESIGN
An app's user interface is everything that the user can see and interact with. It was very important for me to come up with a User Interface that makes the user's experience easy and intuitive, requiring minimum effort on the user's part.
SPLASH SCREENS
INTRODUCTORY
Splash screen was created keeping in mind how various communities and information diverge.
Screen expressing the vibe of the app.
ONBOARDING
STORIES
Easy and Simple onboarding where the users can choose their interests. It gives them a Personalized Home Screen showing Various Perspective in one view.
Quick view of news articles in stories format
NEWS ARTICLE AND DISCUSSION ROOMS
INFOBUBBLE
An article, its actors and factors, also shows article from different perspectives. It additionally has Polls and Discussion Rooms (Audio Based) for Users to help them form their own opinions.
Tired of viewing same thing? The Users can now Edit it out and Add choices of their interests accordingly.
TIMESTAMPS
It will have articles from its start to end, their timelines and its progress.
SEARCH
Optimised Search engine with Filters and Trending Content for a better view.
MY PROFILE
SETTINGS
The user can change their Mode Settings as well as receive notifications of what they want, whenever they want.
It will show profile info as well as liked and saved post, viewing history, settings and more.
CLICKABLE PROTOTYPE
KEY LEARNINGS
Empathy : I tried putting the users in front of everything else. Personas and empathy maps were my way to deeply understand user needs.
Alignment : I also tried aligning my thought process towards the users and their pain points, and considered them while making any decisions.
Iteration : Anything that is developed from scratch will be an assumption. I tried multiple iterations to improve the product.
Seeking feedback : I asked my colleagues & my faculties for feedbacks at various stages which helped me to understand my problem statement.
User Testing : When conducting user testing, I tried to focus on the areas of improvement rather than seeking compliments.
Visual Design : I learnt how to use color and weight to establish hierarchy.