Understand who you are connecting with on Twitter
Illuminate
OVERVIEW
Illuminate is a browser extension that helps Twitter users better understand what accounts they are interacting with on their feeds without disrupting the current Twitter browsing experience. 
The project is currently under implementation.
TEAM
Ann Peng 
Likang Sun
Luca Damasco 
Shen Lu
MY ROLE
User research
Rapid Prototyping
Visual Design
Motion Design
DURATION
8 Weeks
 
 
SOLUTION OVERVIEW

To combat the challenge, we present illuminate, a browser extension designed to take your Twitter feed out of the dark. By automatically parsing through the accounts on a user's Twitter Feed, Illuminate generates tags of potentially unwanted content in order to flag that content to the end user.

Illuminate informs user of potentially unwanted content without disrupting the current Twitter browsing experience.

It is lightweight and customizable, allowing users to choose what topics they want to be alerted to.

 
INITIAL RESEARCH
What cause users to share content that they end up regretting on Twitter?

As we started our initial research, we wanted to understand why people would tweet content that later they feel regretful about or led to undesirable consequences such as losing one's jobs or getting socially ostracized. We used different research methods including literature review, competitive analysis and user interview to understand the problem space.

Insight 1.

'Context Collapse’ on social media makes it hard to evaluate the context and watch self-presentation

During face-to-face communications, people unconsciously assess the context of interaction and act appropriately to present self-image. However, social media collapses multiple audience into one single context, which makes it difficult for people to draw the boundary for how they should act and think thoroughly on their self-presentation. 

In face-to-face communication, we know how to act or speak appropriately depending on the people and the context, e.g. your supervisor, your colleague, or your close friends. 

Context Collapse: on social media, multiple audience is collapses into one single context, it's hard to anticipate how our online behavior will be interpreted differently. 

Insight 2.

Fleeting interaction might lead to tweets being taken at face value - the risk is high when retweeting from unknown accounts 

A modern Twitter feed can be filled with content from users you’ve never heard of before. The act of retweeting happens so easily and promptly that users are often unlikely to consider the far reaching implications or potential consequences of associating themselves with these unknown accounts. At the same time, even when users are motivated to be more cautious about the account before retweeting from it, doing a manual search of the person’s twitter history could be extremely time-consuming, and flat out impractical. 

Insight 3.

Current management tools barely mention any risk factors on social media

Popular Twitter management tools focus on increasing publicity and managing audience, ignoring the risk factors that come with it.

While there are many Twitter management tools available, the majority of them focus on helping users increase public exposure, manage followers and keep track of notifications. Products that take into consideration of the risks of social media barely exist. 

With these initial research insights, we further defined our design goal - 

So how can we inform users in the moment on the potential risks of retweeting from unknown accounts?

 
PROTOTYPING, TESTING 

Guided by the goal of informing user on the risks of retweeting, we wanted to figure out how and where will the in-the-moment intervention be most effective. We did parallel prototyping within the team and came up with multiple low-fi sketches.

 

Using these sketches/prototypes, we conducted rounds of user testing sessions in which users were asked to do think-aloud. 

An overview of all the parallel prototypes we produced. 

These early concepts and exploration allowed us to learn what worked and what did not work, guiding us towards a deeper understanding of users' thought and behaviors.

Ambiguity of definition leads to low trust, users need clearer clarifications. 

Insight 01

One of our prototypes tried to flag accounts to user by showing percentage of sensitive words that the account used compared to average. However, something that we heard time and again during user testing was "what does 'sensitive' mean here?" and "how did the tool know?". We realized that purely flagging an account without providing enough context or concrete evidence would not persuade users at all.

One mockup for the retweeting interface. Users expressed

confusion and low trust towards the definition of 'sensitive words'.

Design implication - 

The message for intervention needs to be provided with enough contexts to build understanding and earn trust from users.

Trying to direct users from retweeting makes them feel like assumptions were being made.

Insight 02

Some of our design ideas aimed at testing people's boundaries on how far the intervention could go by directly blocking the tweet or displaying alert information.

We found out that making the intervention too directive actually backfired  - users felt that assumptions were being made about their attitude. 

Design ideas that were proven to be too directive and pushy.

Design implication - 

The intervention should be informing users to make their own judgements rather than bluntly trying to direct users' behaviors.

Intervention being too intrusive.

Intervention needs to be balanced between being too discreet and too intrusive. 

Insight 03

Users' reactions towards some of our prototypes were completely opposite. For example, in the left prototype below, although covering the retweet button with a red icon did signal the risk to users, it was commented as being too intrusive and intimidating. On the contrary, the design on the right prototype below was too subtle - users often just missed it. 

Intervention being too discreet and subtle.

Design implication - 

The intervention should not impede the current Twitter browsing experience, while still effectively communicating the message and context to user. 

 
FINAL DIRECTION
Tagging Twitter accounts with synthesized data from their past tweets.

Following the feedback we got, we landed on a design solution that would tag twitter accounts on user's twitter feeds with synthesized data from the accounts' past posts.

How does it work?

Why tagging? 

  • It’s self-explanatory - tags themselves provide enough context for user to understand what they mean.

  • It’s neutral - compared to alert information, displaying tags makes user feel being informed instead of being told what to do.

  • It’s less intrusive - tags deliver the important message to users without impeding users' reading experience on Twitter or desire to share

Interaction Flow

 
DESIGN DECISIONS

How did we get to the final design? After we decided on our design direction, the team conducted another round of parallel prototyping to validate our ideas. We interviewed avid Twitter users and from their feedbacks, we further refined our designs as follows.   

Exploration of how tagging accounts works.

Decision 01 

Tag topics instead of concepts 

Problem: what to tag?

When we first came up with the tagging solution, we wanted to label accounts with concepts that users could understand at a glance. For example, an account would be labelled as 'racism' if the algorithms detect words related to racism in its past tweets. However, users found such assertive tags too arbitrary and again, directive in a sense. 

Initial design of tagging concepts were seen as arbitrary labelling by users.

Action:

Our final design tags topics that might be potentially controversial instead of concepts. So instead of tagging an account as 'racism', Illuminate would simply assign the 'race' tag to that account, informing users to look into more information and leaving some space for them to make autonomous decisions.

Final design tag topics instead of concepts.

Decision 02 

Associated tags with accounts, not specific tweets

Problem: where to place the tags?

We also experimented a lot on where to display the tags so that the message could be well delivered to users. However, placing the tags next to the tweet or in the retweet window both made users feel that the tags were related to the specific tweet instead of the account. 

Displaying tags associated with the accounts in a small amount of space was challenging.

Action:

Risky accounts would have the Illuminator icon displayed next to its profile. After the user hovers on the icon, a pop-up window will show up with the tags and more details. It reveals information through progressive disclosure without disrupting the original Twitter browsing experience. 

Final design successfully associated tags with accounts while revealing information in a progressive manner.

Decision 03

Support tags with examples and analysis 

Problem: are people convinced by the tags?

Even if tags themselves were self-explanatory, we found that users still needed more elaboration - they wanted to see specific examples and understand how the tool came up with the tags. 

Only displaying the tags was not convincing, user wanted to know more behind the tags.

Action:

Final design gives rationale for the account that was tagged and offers users the options to view examples of original tweets from that account.

Final design provided a higher degree of details and more justification for the tags.

 
DESIGN SYSTEM

The nature of customizaton and in-the-moment intervention of this browser extension necessitated multiple screens including on-boarding, set-up, short-cut interface and the analysis window. To maintain design consistency and recognizable UI patterns , I created a design system encompassing color, typography and different UI components.

 

Overview of the design guide I created.

REFLECTIONS
A simple solution doesn't come from an easy process

Our hindsight bias might have succeeded in making us feel that our final design looked fairly simple, but the team knew that the process of getting to a simple solution was never easy. As designers, we don't always have the correct answers right in hand, but what is more important is that we are always passionate about finding that right answer even if that means going through hundreds of trials and errors. What worked really well in this project was that we explored as many alternatives as possible and we did not get fixated on our own ideas early. As we progressed through the prototyping, we were excited to learn what worked as well as what didn't work, which helped us come to a better understanding of the problem. 

© 2019 designed by ann peng.