Affinity
Harnessing machine learning to address political bias online through an integrated web extension

Role
Lead Product / UX Designer

Team
Anita Ilango, Ethan Le, Lucy Huo, Shikha Mody, David Deng, Edward Zhang, Monica Bellare, Raphael San Andres

Scope
8 weeks, Jan — March 2020

What I Did
Product Design, UX Research, Branding

Tools Used
Figma, Invision, Photoshop, Illustrator, After Effects, Keynote

PROTOTYPE

The Project

PROBLEM
In our current political climate, it’s becoming increasingly difficult to identify bias in online news articles.

objective
How might we identify and objectively rate political bias in online news articles?

quantifiable goAL
1k+ downloads in the first month of launch

Spoiler: the combination of the creative & the analytical

Initial Research

Duration — 2 weeks

To understand the situation, I recruited and conducted interviews with 10 participants (two middle-aged adults, two young professionals, two professors, two college students, & two teenagers) and learned about how they interact and relate to online news articles, as well as their feelings on the broader issue of misinformation as a whole.

The goal of my research was to better understand the experience and feelings of people reading news articles online. In my research, I observed and questioned users while they read three different articles (one left-leaning, one moderate, one right-leaning) while asking questions such as “I’d love if you could walk me through your thought process when reading this article.” The primary patterns I identified in the interviews culminated in the following guiding statement:

Users want the bias in the online articles they read identified and contextualized, but don’t have the time or dedication to fact-check articles individually.

User Research Findings & Personas

Duration — 2 weeks

wants + Needs
→ To be able to read articles online without withholding belief
→ To know the context of what they are reading without having to devote significant time researching

PROBLEMS
→ Having to spend time fact-checking online articles
→ Being bombarded by popups while browsing
→ Having neither the time nor patience to deep dive on a complicated subject

goals
→ Feeling in-the-know about current events
→ Ability to form an informed opinion
→ Desire to connect with others on news topics
→ Strive for impact and understanding

Market Analysis

Duration — 0.5 weeks

I. centr
Analyzes text article, unintuitive user interface

II. official media bias fact check icon
Rationale for rating, no text analysis

iii. bias finder

Additional bias metrics, unintuitive user interface

iv. bias barometer

Appealing user interface, no rationale for rating

Solution & Features

Duration — 1 week

Building off of my findings from the initial research, I developed a solution statement for the MVP and used the story mapping prioritization framework to narrow in on the most important features we would be pursuing given our technical and time constraints. In the story mapping process, I quickly identified that features such as account functionality & aggregate publication/author bias scores did not have the highest amount of impact in addressing the goals of the users I identified in my initial research.

solution statement
Users want a quick method to assess the bias of an online article in the interest of reducing misinformation and cognitive load.

User Flow

In developing the user flow, I concept tested the most intuitive way to display Affinity’s features by testing three different paper prototypes on five friends and recorded which order of information they preferred. From those insights, I created a user + error flow that initially included account creation functionality.

However, after referring back to the user’s needs of speed and a lack of cognitive load and conferring with the PM + engineers, I narrowing in on a simplified user + error flow without account creation functionality for the MVP. Due to technical and time constraints, we planned to initially focus on establishing the product’s ability to deliver the desired value to users and then roll out a more fully-featured version of the extension complete with user account features for v2.

Design Execution

Duration — 2 weeks

sketches
Exploring several wireframes that each differed in how they presented the data assessed and verdict conveyed, I then tested 3 more paper prototypes on a small pool of 5 users and iterating on the design to distill the most intuitive features of each.

I utilized my research findings to inform the decision to quantify Affinity’s visual political bias rating on a percentage scale as 100% right and 100% left, making the scale 200% total. While I was initially hesitant to stray from a traditional 100% total scale, my user testing showed that people actually found the 200% scale the most intuitive, and quickly understood the information it was trying to convey.

Prototyping & Design Handoff

Duration — 2 weeks

Diving into prototyping the design solution I arrived at through my testing, I tested the design by observing the usage of 8 users. From those insights, I distilled two key findings and iterated on the design accordingly:

I. Users preferred the popup to occupy a minimal portion of the screen, so as to enable them to view both article and rating simultaneously

II. Users prioritized the article’s information in the following order of importance: title of article, author, publisher

Driving Affinity from concept to product, the front-end engineers and I spent the last three weeks collaborating closely to build Affinity’s extension and website. The final designs evolved slightly to fit within technical limitations and accessibility standards, (simplifying interaction animations & tweaking contrast ratios) which ultimately resulted in a more accessible and efficient product.

The final deliverable for Affinity was the web extension design, web design, design system, & demo day presentation deck.

Web Design & Handoff

Duration — 1 week

Pulling inspiration from my deep-dive into newspaper typography and the rise of digital accessibility, I designed an eye-catching landing page that explains the machine learning that powers the product and tells the story of Affinity.

02  My design tenants

Design System & Branding

Defined throughout January — March

Affinity’s design system was directly inspired by the brand’s tone and positioning as a reputable, unbiased, and streamlined product that is integrated seamlessly into a user’s daily online reading experience. The project’s design and branding focused on the convergence of classic newspaper serifs and digital elegance, utilizing shades of newspaper grey and an eye-catching red to blue gradient to represent the range of political bias.

Presentation

Duration — 1 week

To present our work as part of UCLA’s Demo Day (unfortunately postponed due to COVID-19), I created an animated and dynamic deck in line with Affinity’s design system, showcasing the product’s unbiased and seamless positioning.

Learnings & Challenges

The process of designing Affinity from end-to-end offered me the unique opportunity to gain valuable experience working with an engineering-focused team to build an impactful product. Leading the design process on a tight timeline expanded my skills in research, ideation, and cross-functional collaboration. For me, the key learnings from this project were the value of humility, collaboration, and curiosity.

If I could change anything, I would have invested more time in the beginning stages of the project to better understand the functionality behind the project. Had I developed the interest I found in machine learning’s capabilities at the beginning of the project as opposed to the middle/end, I believe it would have added that much more richness and clarification to the work. I intend to take this learning to heart and allow it to inform my preliminary technical research for future projects.

Impact

Unfortunately due to COVID-19, the planned launch of Affinity as part of UCLA’s Spring demo day has been pushed to the event’s postponed date in Fall 2020. I am looking forward to presenting Affinity’s design process, functionality, and design system as part of our pitch on Demo Day. The team has taken this as an opportunity to refine the accuracy of the machine learning model and possibly develop further features for v2.

I look forward to seeing the impact Affinity has on peoples' online article reading experience, and the outcomes it can create when users are provided with the context they need to inform their stance on contested topics. I will continue to support our 1k+ download goal this Fall 2020.

In the future, I will continue to iterate on the design by referencing metrics such as sign up conversion, time spent on extension and qualitative user feedback to inform the evolution of Affinity.

Thanks for taking the time!

A little background

I'm a product designer with a love for asking big questions and putting myself in other people's shoes. I am drawn to areas of ambiguity and balance a strong creative intuition with a profound love of analysis, decomposition, & linear thinking. Coming from a background in visual storytelling, I found product design to do something previously unfounded for me; it engaged and energized both my creative and analytical brains...simultaneously.

Personal design tenants

Curiosity. Has the problem been met with inquiry & been questioned consistently?

Effectivity. Does the design meet the user's needs in the most easy to understand way?

Flow. Does the experience allow users to be content in their current moment?

Awareness. Does the design promote the best in people?

Design Process

A natural systems thinker, I gravitate towards iterative creativity and IDEO's design thinking principles. I whip out the post-its and spreadsheets whenever I can and thrive in oscillating between big picture thinking and detailed pixel pushing. The combination of research, collaboration, and iteration offers me a sense of purpose and intention.

want to chat more?
drop me a note ↗