Bringing Design System Thinking to Layer

Last year, we launched the Messaging Design Kit – an effort to help designers, developers and product managers imagine their ideal messaging experience. With over 10,000 downloads and 900 upvotes on Product Hunt, the Design Kit v1 was a great way for us to move the discipline of conversation design forward.

We’ve learned a lot since then. We’ve watched our customers build robust agent-side interfaces, beautiful interactive e-commerce cards, powerful integrations with artificial intelligence engines, and multi-modal voice and video interfaces inside their conversational experiences. And and as we’ve iterated on our UI components and worked with new customers to imagine and design their ideal conversation experiences, we found ourselves needing something more robust to manage our body of conversation design knowledge.

To create a robust, scalable and flexible approach to designing conversations – for ourselves, customers and partners – we turned to a systems-thinking approach to conversation design inspired by Brad Frost’s practice of Atomic Design. By leveraging the Atomic Design principles of composable, reusable and modular design elements, as well as the powerful symbols functionality in Sketch, we were able to take the Design Kit and create a true Conversation Design System.

A Complete Toolkit for Crafting Customer Conversations

An evolution of Layer’s popular Design Kit, broadened to support a full range of platforms and devices, the Conversation Design System is a sketch file that gives tools, assets and best practices for rapidly designing interface components like rich interactive cards for everything from location to VoIP calling, conversation views with all of the fit and finish of the most well used messaging apps, plus fundamental components like presence and typing indicators.

The System is a powerful Sketch file, consisting of dozens of symbols for creating the exact conversation experience that works for your brand. We use it internally to create our customizable Layer UI Components, so when you imagine and design something using the Conversation Design System, you are able to implement it easily in code using our SDKs and UI Components.

The System lets you design rich conversational experiences across user personas on desktop web, tablet and mobile, and we are constantly iterating and adding components to the System. We have partnered with Abstract to give access to customers and partners, manage additions and changes to the System, and allow customers to fork the System and create their own, custom branch of it.

From Concept to Implementation

The Conversation Design System makes it possible to design branded, pixel-perfect conversational experiences in just minutes, which until now could take days or weeks and was only possible with an expert designer. From conceptual mockups and prototyping all the way up to engineering-ready specifications, the System gives product teams everything they need to craft their perfect Layer-powered conversations.

We’re confident that as messaging has proven the consumer’s favored interaction with brands, the Conversation Design Kit will drive greater velocity in customer acquisition, increase conversions and create longer lasting customer relationships.

The System is available now in Preview to Layer customers. If you’d like to learn more about what’s possible with the Conversation Design System, we are hosting a joint webinar with Abstract CEO Josh Brewer on Thursday, July 27th at 1pm PST and you can sign up here.