Web & Brand

Houndify Site Rebrand

SoundHound Inc’s product Houndify is a voice AI platform that allows anyone to add smart, conversational interfaces to products and services. I was tasked with my team to created a new website for this B2B service. To be sure this website would scale for the future, my teammate and I took on the arduous and exciting task of creating a brand system for Houndify. This spanned from establishing grid systems, color palettes, typography, iconography, illustrations, UI elements, and a modular web library for both desktop and mobile.

Client SoundHound Inc
Role Brand Design / Web Design / Visual Design
Additional Design Beau Parent

Houndify Website

Grid System

We referenced the grid system of Google’s Material Design, researching best practices for web. For a responsive design, the 12 column grid was used for Desktop while the 4 column for mobile. Many elements such as margins and padding have been adjusted for the Houndify website to better contain text in certain alignments and length.

Font Family

The font family Montserrat was chosen as the primary font for Houndify. It is a clean font that is not only legibly accessible, but also versatile with a variety of weights.

Color System

The Houndify brand colors are developed to focus on the Hero Blue, which represents the AI platform. Enablement and function are represented with Cyan and Purple. Going down the palette, the cool colors are used in areas of technology or business, and the warm colors to be used in organic elements such as people and food. All colors are utilized in creating icons, illustrations, and web layouts.

Iconography

When we thought through the iconography for the brand, we needed something a style that would work as a small and large sized visual. Thus we created the Level One and Level Two icon system. Level One icons are used in larger spaced areas. These are more detailed elements, veering towards an illustrated look. Level Two icons are a simpler, outlined version of the larger Level Ones. These smaller elements are used mainly in web layouts, presentation decks and social postings. For consistent creation, both are developed on a grid system with rulesets.

Illustration

When creating these illustrations, I decided I would always build off of basic shapes. This helps keep the element straightforward in development as well as outcome. Minimal style helps the brand identity become a recognizable yet dynamic visual.