NewsBite

Branding and responsive web design for AI news platform NewsBite*. *Product name changed for NDA purposes.


The final deliverables on desktop.

The final deliverables on mobile.

Project Intro

NewsBite is a platform that uses AI to consume articles from as many sources as possible to generate the most neutral, unbiased summary of a certain topic. It aims to provide readers with a neutral point of view, as well as opposing sides, to provide the most comprehensive and trustworthy information about a certain news topic.
The NewsBite team approached us to help 1) define their visual brand and 2) design the responsive web interface.
I worked with a team of 5 other designers to conduct user interviews, do lo-fi and hi-fi prototyping, conduct usability tests, and define their visual brand. I focused specifically on interaction design and visual branding.

The Process

The client provided us with adjectives they thought the brand should embody. We used these as our guiding design principles in studying competitors and in branding and interaction explorations. These were: Solid, Trustworthy, Clean, Neutral, and Authoritative.

USER RESEARCH

To guide our design process even further, we started off by interviewing the client's target users, young intellectual professionals who were somehow engaged in news and the media. We asked questions surrounding their news reading habits, what types of stories they intentionally sought out to read, and what they thought was missing from today's news sources. We then grouped answers in an affinity map to draw out the largest insights.

COMPETITOR RESEARCH

We also took a look at news sources the client named as being very trustworthy and authoritative. We took inspiration in branding colors, layout, and font styles.

Interactions

We were challenged to explore innovative interactions that would allow users to intuitively realize that they are able to read multiple sides to a single story on the platform. We recognized that this was a new concept to most people through our user interviews. We were also visually and technically constrained by designing for responsive web, and not for a native mobile app.

INTERACTION EXPLORATION AND IDEATION

We struggled coming up with solutions that didn't directly label a certain side of the story. Not all stories would have a conservative/liberal point of view or a negative/positive sentiment. We also tried to stay away from colors to prevent associations, such as red and blue (Republican vs. Democrat) or red and green (Bad vs. Good).

Lo-fi mockups of different interaction options on mobile.



We erred on the side of staying as neutral as possible, knowing that there would be many learned interactions, since this was a new concept. We decided to have semi-transparent sides peeking in on the main, neutral story to hint that they can be interacted with, without being intrusive and distracting while reading. We also suggested tabs to help orient the reader and allude more to interacting with the right and left sides of the page. On mobile, we thought that the reader could swipe to see respective sides of the story.

Article page on desktop.

Article page on mobile.


I tackled exploring how to introduce the concept of multiple sides of the story elsewhere on the platform, in places even before the reader arrives at an article page. My decision was to have the opposing headlines slide in when hovered over a story on the home page. On mobile, the sides would appear when a story is scrolled into view and then disappear when scrolling past.

Hover interaction on desktop.

Scroll interaction on mobile.

Visual Branding

BRANDING WORKSHOP

We decided to delve further into what vision the client had for the platform's brand by conducting Cooper's Brand Experience Workshop with them.


We generated a word cloud from our insights and uncovered important indicators. For example, the client wanted to convey authority, but not come off as elitist.

TYPE EXPLORATION

We studied typefaces that were highly legible and aligned with the brand principles. We were careful in picking typefaces that were timeless and legible across different sized screens.


We landed on Charter for the headline typeface and Franklin Gothic for the body.

LOGO AND COLOR EXPLORATION

As a team, we explored logos that alluded to the multiple-sides-of-the-story concept. The client requested a color for the brand that would try to remain trustworthy and neutral, yet also incite a reaction in readers.



After presenting all of our options to the client, we chose the following logo with the color teal. We took concepts from color psychology that stated that teal conveyed communication, trustworthiness, reliability, and clarity of thought. Teal is also not a commonly used color, which we thought could set the NewsBite brand aside from other news platforms.

The Solution

We collaborated with the client all along the design process, receiving constant feedback on our decisions and explorations. We presented to them a visual design language and responsive web interface that both us and the client feel embodies the guiding design principles of Solid, Trustworthy, Clean, Neutral, and Authoritative.
We provided them with the final mockups, interactive Principle prototype, styleguide, CSS export, and research results. I used Javascript libraries to prototype the interactions, which we also handed off to the client. Check out the code here!

The final screens on desktop.

The final screens on mobile.

Thoughts for the Future

This project was incredibly valuable and, at the same time, challenging to work on as we were designing an interface from scratch around a relatively new concept. My main takeaways from working on this project were:

1) How to design for the unknown. We were challenged to design while the client was still fleshing out features on the backend. For example, they wanted to highlight the most controversial topics of a given day. While they were still figuring out how controversy would be measured and labeled, we did our best in user testing and ideating to brainstorm how it would look and make room for it in our designs.

2) How to choose patterns that users are familiar with for a new concept. I feel that my team and I made the most informed decisions and compromises within our constraints. Through usability testing, we found that most users were able to easily use the patterns that we chose to eventually figure out the new concept of navigating between multiple sides of the story.