top of page
Diverge
Screenshot 2021-12-04 at 4.20.04 PM.png

UX DESIGN

Screenshot 2021-12-20 at 11.52.11 PM.png
Group 3566.png
Screenshot 2021-10-16 at 8.30.51 PM.png

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

Screenshot 2021-12-04 at 4.20.04 PM.png

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.

Screenshot_2021-12-03_at_1.39.32_AM 3.png

"Perceptions"

"Opinions"

"Misinformation"

"Info Bubble"

"AI Algorithm"

"Repetitive Content"

GOAL

Screenshot 2021-12-04 at 3.37.41 PM.png

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

Screenshot 2021-12-04 at 4.20.04 PM.png

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. 

Screenshot 2021-12-04 at 6.30.34 PM.png

Country Freedom Index

Democratic to Partly free

World Press Freedom Index

142nd rank out of 180 countries.

Screenshot 2021-12-04 at 4.20.04 PM.png
Screenshot 2021-12-04 at 4.20.04 PM.png

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

Screenshot 2021-12-04 at 9.41.20 PM.png

- Viral News

- Fake News

UNETHICAL METHODS

Screenshot 2021-12-04 at 9.41.20 PM.png

- Click - Bait

- Multiple notifications             to increase engagement

Screenshot 2021-12-09 at 5.01.02 PM.png

NEWS MEDIA

Screenshot 2021-12-04 at 9.41.20 PM.png

- No trustworthy source

- Biasness because of               social media

NO INTERVENTION

Screenshot 2021-12-04 at 9.41.20 PM.png

- Nowhere to check

- No questions raised

Screenshot 2021-12-04 at 4.20.04 PM.png

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.

Screenshot 2021-10-17 at 1.09.29 PM.png
Screenshot 2021-10-17 at 1.09.29 PM.png
Screenshot 2021-10-17 at 1.09.29 PM.png
Screenshot 2021-10-17 at 1.09.29 PM.png
Screenshot 2021-10-17 at 1.09.29 PM.png

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

Screenshot 2021-12-04 at 4.20.04 PM.png

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

Screenshot 2021-12-05 at 3.30.50 PM.png
Screenshot 2021-12-05 at 3.30.50 PM.png
Screenshot 2021-12-05 at 3.30.50 PM.png
Screenshot 2021-12-04 at 4.20.04 PM.png

Qualitative Research - Semi-structured Interviews

No. of Respondents - 8

The process followed in sampling of the users for user interviews were :

Screenshot 2021-12-05 at 4.42.43 PM.png

Convenience Sampling

Selection of Audience on the basis of convenience such as reach availability.

Screenshot 2021-12-05 at 4.42.43 PM.png

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

Screenshot 2021-12-05 at 8.28.22 PM.png

"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

Screenshot 2021-12-04 at 4.20.04 PM.png

AFFINITY MAP

The next step I took was to affinity map the observations made during the User Interviews.

Screenshot 2021-12-06 at 2.10.42 PM.png
Screenshot 2021-12-04 at 4.20.04 PM.png

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.

Screenshot 2021-12-06 at 5.28.06 PM.png

CONTENT

- Not Factual

- Perceptions & Opinions

- Viral Content over Reality

- Local News Pressed Down

- Misinformation

TECHNOLOGY

Screenshot 2021-12-06 at 5.28.06 PM.png

- AI Algorithm

- Infiltration from Bots

- Information Bubble

- No access for illiterate

- Opting Slow Source news

Screenshot 2021-12-06 at 5.28.06 PM.png

NEWS CHECK

- Search engine based on Opinions

- Websites with Propaganda

- Misleading headlines

- Popularity based Results

Screenshot 2021-12-06 at 5.28.06 PM.png

NEWS SOURCE

- Not Trustworthy

- Social Media Biases

- Articles that are Click Bait

- TRP Value given Importance

- Sloppy Journalism

Screenshot 2021-12-06 at 5.28.06 PM.png

Q & A Forums

- Cognitive Overload

- Unorganized Content

- Lost in Perspectives

- IT Cells involvement

Screenshot 2021-12-04 at 4.20.04 PM.png

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

Screenshot 2021-12-10 at 2.59.21 PM.png

Persona Two

Screenshot 2021-12-04 at 4.20.04 PM.png
Screenshot 2021-12-10 at 2.59.10 PM.png
Screenshot 2021-12-04 at 4.20.04 PM.png

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.

Screenshot 2021-12-09 at 12.58.07 PM.png

Daksh looking for a reliable source of information during this era of misinformation.

Screenshot 2021-12-09 at 12.57.56 PM.png

Sushma switching from a Physical medium of news to Digital Medium

Screenshot 2021-12-04 at 4.20.04 PM.png

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. 

Screenshot 2021-12-10 at 2.51.06 PM.png

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.

Screenshot 2021-12-04 at 4.20.04 PM.png

BRIEF EXPLORATIONS

Screenshot 2021-12-09 at 5.13.47 PM.png

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:

Screenshot 2021-12-09 at 5.20.28 PM.png

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.

Screenshot 2021-12-09 at 5.20.28 PM.png

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.

Screenshot 2021-12-09 at 5.20.28 PM.png

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.

Screenshot 2021-12-04 at 4.20.04 PM.png

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

Screenshot 2021-12-10 at 2.51.06 PM.png
Screenshot 2021-12-10 at 2.51.06 PM.png

The digital solution will be ethical, transparent, unbiased and a go to place for users that like to read news.

Screenshot_2021-12-09_at_5.49.15_PM 2.png

The next step was to define the functional requirements of the app. So I listed down a few of the relevant requirements.

Screenshot 2021-12-09 at 5.20.28 PM.png
Screenshot 2021-12-09 at 5.20.28 PM.png

AI Collecting and Sampling

Time & Perspective based compilation

Screenshot 2021-12-09 at 5.20.28 PM.png
Screenshot 2021-12-09 at 5.20.28 PM.png

Collect & Edit Algorithmic Data

VUI based discussion rooms

Screenshot 2021-12-09 at 5.20.28 PM.png

Actors & Factors in news article

Screenshot 2021-12-09 at 5.20.28 PM.png

Personalized Notifications

Screenshot 2021-12-04 at 4.20.04 PM.png

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.

Screenshot 2021-12-10 at 1.17.09 AM.png

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.

Screenshot 2021-12-10 at 1.17.09 AM.png

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.

Screenshot 2021-12-10 at 1.43.02 PM.png

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.

Screenshot 2021-12-04 at 4.20.04 PM.png

PROBLEM 2 : Sushma switching from a Physical medium of news to Digital Medium

Screenshot 2021-12-10 at 1.14.28 AM.png

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

Screenshot 2021-12-10 at 1.14.28 AM.png

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.

Screenshot 2021-12-10 at 2.27.27 PM.png

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.

Screenshot 2021-12-04 at 4.20.04 PM.png

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 : 

Screenshot 2021-12-10 at 6.27.34 PM.png
Screenshot 2021-12-04 at 4.20.04 PM.png

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.

Screenshot 2021-12-10 at 5.01.56 PM.png
Screenshot 2021-12-04 at 4.20.04 PM.png

04

SKELETON

WIREFRAMES

I created low fidelity wireframes in order to understand how the skeleton of the app would look like.

Untitled_Artwork 11.png
Untitled_Artwork 11.png
Untitled_Artwork 11.png
Untitled_Artwork 11.png
Untitled_Artwork 11.png
Untitled_Artwork 11.png
Untitled_Artwork 11.png
Untitled_Artwork 11.png
Untitled_Artwork 11.png
Untitled_Artwork 11.png
Screenshot 2021-12-04 at 4.20.04 PM.png

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 :

Screenshot 2021-10-17 at 10.57.05 PM.png

No. of Respondents - 3

Screenshot 2021-10-17 at 10.57.22 PM.png
Screenshot 2021-12-04 at 4.20.04 PM.png

Pain Points

Screenshot 2021-12-16 at 12.05.16 AM.png
Screenshot 2021-12-16 at 12.05.16 AM.png
Screenshot 2021-12-15 at 11.50.11 PM.png

Text Heavy

Screenshot 2021-12-16 at 12.05.16 AM.png

Cognitive Overload

Screenshot 2021-12-16 at 12.05.16 AM.png
Screenshot 2021-12-16 at 12.05.16 AM.png
Screenshot 2021-12-15 at 11.50.11 PM.png

Confusing

Screenshot 2021-12-16 at 12.05.16 AM.png

Learning Curve

Screenshot 2021-12-16 at 12.05.16 AM.png
Screenshot 2021-12-16 at 12.05.16 AM.png
Screenshot 2021-12-15 at 11.50.11 PM.png

Text Heavy

Screenshot 2021-12-16 at 12.05.16 AM.png

Can be more graphical

Screenshot 2021-12-04 at 4.20.04 PM.png

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.

Screenshot 2021-12-15 at 8.36.26 PM.png
Screenshot 2021-12-15 at 8.36.46 PM.png
Screenshot 2021-12-04 at 4.20.04 PM.png

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.

Screenshot 2021-12-04 at 4.20.04 PM.png

Typography

Screenshot 2021-12-16 at 2.39.44 AM.png
Screenshot 2021-12-04 at 4.20.04 PM.png

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. 

Screenshot 2021-12-16 at 4.04.17 AM.png
Screenshot 2021-12-16 at 4.04.17 AM.png
Screenshot 2021-12-04 at 4.20.04 PM.png

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.

Screenshot 2021-12-16 at 4.12.17 AM.png

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

Screenshot 2021-12-04 at 4.20.04 PM.png

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.

Screenshot 2021-12-04 at 4.20.04 PM.png
Screenshot 2021-12-04 at 4.20.04 PM.png
Screenshot 2021-12-04 at 4.20.04 PM.png
Screenshot 2021-12-04 at 4.20.04 PM.png
Screenshot 2021-12-04 at 4.20.04 PM.png

SPLASH SCREENS

INTRODUCTORY

Screenshot 2021-12-16 at 5.11.23 AM.png

Splash screen was created keeping in mind how various communities and information diverge.

Screen expressing the vibe of the app.

Screenshot 2021-12-04 at 4.20.04 PM.png
Screenshot 2021-12-04 at 4.20.04 PM.png
Screenshot 2021-12-04 at 4.20.04 PM.png
Screenshot 2021-12-04 at 4.20.04 PM.png
Screenshot 2021-12-04 at 4.20.04 PM.png

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

Screenshot 2021-12-04 at 4.20.04 PM.png
Screenshot 2021-12-04 at 4.20.04 PM.png
Screenshot 2021-12-04 at 4.20.04 PM.png
Screenshot 2021-12-04 at 4.20.04 PM.png
Screenshot 2021-12-04 at 4.20.04 PM.png