audible_intro_img.jpg

BrickCity System

 
 

Introducing Brick City

Audible's Visual Design System

 
 

Brick City is defined by a set of shared principles that unify our interaction, visual and motion patterns. This partnership
across Web, Apps and Engineering will provide the building blocks to drive a consistent experience for our customers
across surfaces with a library of reusable patterns and components.

My Role: As a UI designer, I was part of an extremely talented Visual / UI design team.

 
 
 

 
 
 

Principles
 

Consistent

We improve usability by establishing universal patterns and communicating through a singular visual language. Customers can interact with us on any device with a sense of confidence and familiarity.

Clear

We eliminate ambiguity to enable our customers to see, understand, and act. Our design emphasizes content, communicates hierarchy, and facilitates interaction it never gets in the way.

Human

We understand the nuances of how people process information. Our design is honest and customer-centric. It compliments our immersive listening experience in a way that is thoughtful and empathetic.

Aware

We are mindful of time, environment, and activity and understand their impact. Our experience fits seamlessly into the lives of our customers because we present and prioritize information when it matters most.

Crafted

We strive for a high level of craftsmanship by prioritizing both visual detail and usability. We obsess over every pattern and interaction until we’re confident it best serves our global community.

 
 
 

Design Elements

The following elements provide the foundation for all visual design within the Audible experience. This single underlying system allows for a unified experience across platforms and device sizes.

 

 
 
 
 

iOS Components

 

The following section provides examples and usage guidelines for primary components used throughout our iOS mobile experience.

 

 
 
 
 
 

android components

The following section provides examples and usage guidelines for primary components used throughout our Android mobile experience.

 

 
 
 
 

Applying brick city

 

Brick City is Audible's system which is a library of elements and patterns that are defined by shared principles across design, product and engineering bringing cohesion and consistency to our customer experience across devices.

Brick City UI Components can be understood as Lego pieces that create Audible layouts. These Lego pieces are what we used to create these key screens (Home, Library, Discover, and Player) you see below.

 
 

iOS Key Screens

 
 
 

Android Key Screens

 
 

 

More Audible Work

 

 
PDP Case Study

PDP Case Study

Home Case Study

Home Case Study