Designing news on Twitter, a student project

Twitter redesign in the context of news consumption, Bachelor thesis at HfG Schwäbisch Gmünd.

Team: Markus Mettenleiter, Marco Pisano; Time: 12 weeks; Tools: Sketch, Protopie, Javascript; Context: Student Project, Bachelor thesis

My role

The whole process was a collaborative effort of the team. Many debates about visuals got us thinking about how we should position our concept in relation to Twitter. In addition to working on micro-interactions, I was primarily responsible for the visual design in order to achieve a consistent look and feel.

How might we redesign Twitter to foster conscious consumption, transparency, and personal control of news content?

Challenge: Growing influence

Recent events show how much influence social media platforms have and which consequences come with it, especially in terms of news consumption. In the era of fake news and information overload, we wondered how we could redesign a social media platform to foster news consumption.

Core Areas

This project is a concept that addresses three core challenges for designing news on the social media platform Twitter. It aims to enhance consciousness when consuming news, as well as to provide value and clearance.

Visual distinction

Overview of current happenings

The news page is a complete and structured overview of current news.

Personalisation of news categories

Users are enabled to create and follow their own interests.

Full coverage and context

The user has access to a full coverage of a specific news topic, sorted by the nature of the tweets.

Personal control

The user can modify the algorithm by changing the parameters, such as expanding the perspectives.

Transparency

This function provides context on why users are seeing certain tweets.

The Process of redesigning news on Twitter

During our research process, we worked in design sprints to get our ideas down on paper as early as possible.

Talking to journalists, data experts and users people

During early research, we had the opportunity to talk to industry experts, like data experts from The Economist and freelance journalists to learn about how social media changed their way of working. We then conducted surveys and interviewed several people to gain insights into how they consume news.

Interviews: The photo was taken during an expert interview with an editor of Business Insider.

We have analysed a variety of news publishers on their sites and social media. We also tracked how they report about the same event over months or even years.

Collecting and analyzing reports

Guiding principles

We had some guiding principles that we developed after summarizing and validating the user research.

Visual distinction
A main problem users face is that it is hard to distinguish between actual news content and a regular tweet. There is no visual distinction among the nature of tweets.

Reducing information overload
From a publisher's site, views and clicks are essential. The algorithm forces them to post the same content several times a day to be visible on the user's timeline. As a result, users see many news tweets about the same topic in their timeline.

Overview
The people we interviewed said that they consume their news mainly on Twitter. They look through their timeline and feel informed, but remain in their bubble and lack a complete overview of current important news.

Personalisation
One of the key insights was that users often see news which doesn't interest them, or they want to be notified about specific topics. We want to enable people to learn more about events of their interest.

Context
Reading news on social media only provides a very limited view on a topic. We aim to give users context on a topic and enable them to explore related content.

Control and transparency
The algorithm is a black box. It leaves the user wonderung why certain tweets are visible or not. We want to empower users to manipulate the algorithm to get better insights and control.

Early brainstorming after evaluating first insights.

As a next step, we got familiar with Twitter's UX and visual design system of both their mobile and desktop apps.

Twitter: Staus quo mobile

I always make sketches before starting a digital version. I would say pen and paper are my favorite tools.

Sketches showing early interface/flow ideas of the mobile app.

Iterating and validating assumptions

After loops of feedback, weekly design sprints, and critiques, we learned that we needed to align the look and feel of our design far more tightly with Twitter's design guidelines in order to provide a coherent experience.

We continued to work a lot with potential end-users. Validating our design solutions through user testing in particular helped us gain confidence in our design decisions.

Navigation architecture
UI Components

Shaping our design decisions based on our HMW explorations

Foster conscious news consumption
• by creating a visual distinction among news content and other tweets.
• by creating a visual distinction among the nature of news tweets (article, breaking, etc.)
• by providing an overview about current happenings.
• by bundling news tweets about the same happening.
• by providing context.
• by enabling the user to explore the news and its related topics.

Provide transparency and personal control
• by enabling the user to manipulate the algorithm.
• by providing insights why certain tweets are displayed.
• by allowing the user to set their own categories based on their interests.

Reflection

What I have learned

• Trust the process!
• Standing behind your values.
• Applying the right methods and asking the right questions.
• Good documentation is key.

Other work ↓