Design Systems at Redkix

When designing a product as robust as Redkix, developing and maintaining a design system is critical to keeping the users experience consistent across clients while also allowing the design team to quickly iterate on ideas and build out features. Over the past 3 years, we've built out a robust, good looking design system at Redkix.

Redkix Symbol Library in SKetch

Redkix Symbol Library in SKetch

Sketch Symbols

Pretty much the Holy Grail after developing the product from scratch. We have a very robust, flexible symbol library of all Redkix UI components in Sketch that allows us to quickly build features, and flexible enough that it allows for exploration. Below, you'll find out how we got here.

A small sample of the Redkix Brand Guidelines

Branding Influence

Leading the Product Design team at Redkix, I wanted to have a direct impact on the branding that would help influence the Product Design. We worked directly with a world class Marketing Designer to develop the overall Redkix brand into something that was BIG, BOLD and aspirational. This would help influence the look and feel of our design system.

Typography & Color Overview

Product Design vs Marketing Design

While the branding was going to be used for obvious marketing purposes, Product Design has much different requirements from the design. Developing a product that people are going to be spending hours a day using, things like typography, colors and icons need to meet those requirements. We heavily influenced the product design from the marketing design, but didn't sacrifice usability and legibility of the product's UI.

Redkix "Action" Icon Set

Icon System

The Redkix Design System uses several types of icons. Navigational Icons that take the user into different areas of the app, Informational Icons that convey a tiny bit of information about something on screen and lastly Action Icons that allow the user to perform an action on something.

The Basic Structure and Layout of Redkix

Navigation Structure

The Navigation Structure of the app influences when and where the components of the design system are going to be used. The base structure of Redkix is a left to right hirarchy of navigation. The left most column contains the top level objects (Inbox, Groups, Direct Messages and Settings), the middle column contains secondary items (conversations within the primary objects), and the third column are the messages inside those conversations. 

Each of these columns also has structure within itself. The conversation column contains things like conversation level actions the user can take, messages inside the conversation itself and a reply level that allows the user to insert things into the conversation.

Some of the Conversation List Components

Some of the Menu & Popover Components

The Design System

A combination of brand design, typography, an icon system and many many flexible components give us the Redkix Design System. This allows us to quickly build out features and keep the experiences consistent. It also gives us the flexibility to quickly update and iterate on the overall design of the product.

Design Components In Action