Design Process at Redkix

While engineering and development toolsets have supported things like the agile development processes for a long time, design toolsets are just becoming mature enough to formulate proper workflows around them. Sketchbooks, whiteboards, text editors and design software have been around for awhile, but only recently have the tools used in designing UI matured enough to support a streamlined process between design teams and developers.

At Redkix, I have tried to embrace a system and process with a proper design repository (recently using Abstract), components (symbol libraries in Sketch), rapid prototyping (mostly Principle), living documentation (Dropbox Paper) and automated speccing (Zeplin) for developer handoff.

While it's not a 100% perfect system, it's obvious that design tools are starting to become mature enough where a real process becomes possible.

 
Sketching.jpg

00 Imagine & Define

Usually features come from either an initiative we have within Redkix, via customer feedback or from data we're seeing in our analytics platform (currently Intercom and Mode Analytics). Features are defined by traditional means (whiteboarding, sketching, meeting etc). 

 
Design System Zeplin.jpg

03 Prototyping

As necessary, if we're designing a feature that requires a non-standard transition, interaction or animation, a lightweight prototype is made and iterated on (usually in Principle or Quartz Composer). We keep the prototypes focused on the single element. Changes discovered here are fed back into the UI Design in the Sketch file before moving onto documentation.

View More Prototypes

Design System Abstract.jpg

01 Design Source REPOSITORY

I recently introduced a design source repository using Abstract. That way our designers can have 1 central source, creating their own branches while working on features. When a feature's UI is "complete" it is reviewed and merged back into the Master branch.

 
Redkix Docuemtation.jpg

04 Documentation

Our documentation outlines the goals of the feature, the requirements, an in-depth overview of the feature with screenshots, animated gifs of the prototype (if there is one), links to the design assets in Zeplin and general acceptance tests for QA. Using Dropbox Paper allows Developers and QA to easily ask questions as the feature is being developed.

View a Sample Document

Design System Sketch Symbols.jpg

02 UI Design System

Within each Sketch file, a Symbol Library is defined. The library is composed of 'custom' Redkix components and styled 'standard' components for each platform. Each platform's library shares a common Redkix aesthetic, while staying true to it's respective platform.

 
Design System Zeplin.jpg

05 Specs & Developer Kickoff

Each of the Redkix apps has it's own project in Zeplin. Our final designs are uploaded into their respective projects where developers can easily get the specs (i.e. redlines) for the designs and any of the assets used in the design.