NewsBit

Responsive Web Design

About NewsBit

NewsBit is an AI generated news platform with a mission to provide a balanced source of record on every news event. Each news story would display articles with neutral, positive, and negative sentiments, with all supporting sources clearly cited for each side of the story.

Scope

Design a responsive web platform from scratch that intuitively presents neutral and opposing sides of news stories, as well as establish a visual brand and style guide

Role

Product designer, highly involved in all phases of design (user research, wireframing, branding workshop, visual style guide, high-fidelity mockups, prototyping, usability testing)

Summary

The NewsBit team had the data, technology, and vision for an AI generated news platform, but did not have a clear idea of how the interface would look. To get a deeper understanding of their vision, we first conducted Cooper’s Branding Workshop to distill their design principles and make sure that all team members were aligned on the vision for the product. We then used these design principles to guide our explorations of color palettes, logos, and typography.

After conducting competitive research to get an idea of the different layouts and interactions of existing news platforms, we sketched out ideas in a Lean UX Design Studio. Using the best ideas from design studio, we then created wireframes of the desktop and mobile interfaces. After testing the lo-fi wireframes in clickable prototypes, we dove into high-fidelity mockups to incorporate the visual branding we had developed.

The feature set included:

Empathize

Jobs To Be Done

We then created job stories using the Jobs to be Done framework to map out the situations and motivations that users would have when using the product.

Sketching and Wireframing

Design Studio

Using the Lean UX Design Studio method, we each sketched a high volume of ideas on paper and did multiple rounds of critique with the team. After voting the best ideas, we sketched the UI for the different screens on the whiteboard.

Wireframing

We explored several different layouts for the homepage and article pages (for both desktop and mobile):

Visual Branding

Branding workshop

We used Cooper's Brand Experience Workshop to get a better understanding of the client's vision for the product. During the branding workshop, the key stakeholders use colored stickers to vote on a collection of images (green stickers for images that they felt represented the NewsBit brand, and red stickers for images they felt were not aligned with the NewsBit brand).

After they completed voting on images, we had an in-depth discussion about the images and why each person had voted green or red. During the discussion, one of the designers took notes to capture all key adjectives that the stakeholders mentioned - these notes were used to generate word clouds that clearly showed the creative direction that the founders wanted for the product.

Logo, Color, and Typography exploration

After defining the design principles, we did explorations for color palettes, logo, and font pairings that embodied the design principles.

Style Guide

Below is the final style guide:

High-Fidelity Mockups

Using the style guide, we created high-fidelity mockups for all desktop and mobile screens - below are some select examples:

Desktop Screens

Mobile Screens

Takeaways