Cirrus Logic

  • Website, Design System, Style Guide
Visualizing sound with a dynamic redesign

Cirrus Logic is a fabless semiconductor supplier that specializes in audio and voice integrated circuits (ICs) for mobile applications including smartphones, wearables, tablets, as well as other segments such as smart home, consumer, and automotive.

Problem

Cirrus Logic’s old website and identity weren’t living up to the company’s innovative work and culture. They needed a brand refresh and a stronger web presence.

Process

We began with an in-depth research phase, after which we delivered a communication brief to the client.

communication brief

To identify content requirements and hierarchy for each template, we developed page description diagrams and wireframes.

page description diagrams
sketches
Initial sketches — concept not selected.

Solution

The updated brand concept centers on the the idea of visualizing sound.

The brand visualizes sound through representations of the doppler effect used in various ways—buttons, hero treatments, links, and featured modules—throughout the site. In these moments, we use points of focus with rings that emanate off of those focus points.

In addition to visualizing sound, the brand identity also evokes Cirrus Logic’s fun company culture. The bright colors and big, bold, geometric typeface reference underground music magazines. The off kilter positioning and sizing of elements throughout the site feels like musical patterns. All of these elements combined communicate the Cirrus Logic brand personality.

homepage hero animation
small screen views

We designed for small screens at the same time as large to ensure the user experience was seamless, regardless of device being used.

cirrus logic homepage design

cirrus logic product and careers pages

Improving the marketing side of the website helped attract new talent and satisfied investors. But most of the users of the site have historically been engineers. The redesign made dense technical information easier to filter and charts and diagrams easier to browse through, regardless of device. This was achieved through a clear typographic hierarchy and a subtle use of brand elements.

cirrus logic detail pages

cirrus logic webpages

The entire brand language was refreshed during this process, including technical illustrations and diagrams. We also developed a digital style guide to assist in the design and development of future cirrus.com pages and related web projects.

phone illustration
style guide screen shot
Digital style guide

My Role
Design Lead, Information Architecture, QA, Digital style guide
Year Completed
2016
Credits

Designed at Happy Cog.

Design Direction & Design Concept: Michael Johnson
Project Definition & Information Architecture:
Aura Seltzer & Amanda Buck
Design support & illustration: Dana Pavlichko
Front-end Development: Stephen Caver
Project Management: Andréa Pié, Dave DeRuchie

Visit live site