PressHound

UI UX Designer

PressHound, a tech start-up that uses machine learning to analyze bias in digital news media approached me to assist in improving on existing branding while establishing style guidelines where they were lacking. Then later extending those guidelines into a landing page.

Goal: Create visual design materials, animations, wireframes, and mockups to help give the company branding and establishing an online presence.

Problem: Limited existing materials or guidelines to act as a base for the designs while reconciling the given visual reference and style.

Solution: Underwent several rounds of iteration changing from an aesthetic lead by the imagery of propaganda to one more evoking machine learning & technology for the site's final design.

Explore the site
Reference

Project Evaluation

The COO, acting as project manager and developer, required a logo that would be used wherever the users interacted with the browser extension and requested a long-form home page to maximize the likelihood of users downloading the browser extension. For the marketing aspect, the COO wanted an illustration style that blended 1940’s era constructivism with modern vector graphics— two very distinct looks.

Wireframes

Page Layout

Based on project requirements, I created wireframes of the long-form landing page in Figma to establish a layout for the illustrations.

Colors

#1b1464
#4061d5
#aeceff
#FFFFFF

Fonts

Roboto

abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890
DESIGN ELEMENTS

Style Guide

I created a UI style guide to define the visual design of the site and a color-palette for the illustrations.

ILLUSTRATIONS

Web Graphics

PressHound deals with discovering bias in media through their web app. Helping to highlight the opinions & propaganda that underlays our day-to-day media. For this, we worked to capture elements & styles found in propaganda imagery and to help impart their theme.

Layout

Visual Design

I incorporated the UI style-guide and illustrations into the site layout. Taking what was successful in previous designs & iterating on them - gradually.

Prototype

Ideas in Motion

A prototype was created to test usability and validate the design of the site before launch.

Web Prototype
Redlines

Hand-offs

provided redlines and prototype site code - including the CSS styles, for the COO to implement the design.