Design Library

Objective

I wanted to create a shared library for product design team working on a diverse product portfolio.

The initial goal was to create a Sketch pattern library (in alignment with UI Style Guide) that helps increase designer’s efficiency and creates an overall impact, reducing turnaround time for prototyping.

​

Challenge

The designers had to duplicate UI components from older design documents to create a new design or prototype. It vastly increased the delivery timeline and also had inconsistencies as we sourced it from older files.

Process

Initially, I created symbols for each component from the style guide in a shared Sketch library.

The master symbols were built using various atomic elements available as symbol-overrides.

At a later time, when Invision-Craft was introduced, I exported the symbols into a shared, cloud-based component library.
These symbols also had to be exported to Zeplin for engineering usage.

​

Result

• Helped designers with a drag-drop solution, shortening delivery timelines.

• Gave designers a central location with all components, and a common library to use for their projects.

• Reduced inconsistent UI elements, resulting in lesser number of bugs on design.

• Helped streamlining the codebase, reducing repeated/unwanted UI elements. Developers had a single source for components.

• Gave more visibility to the Product Design team internally.

• I believe it has impacted revenue growth since the prototype creation time got drastically reduced.

​

While I'd be happy to show our component library; I've just shown the screenshot of Sketch Symbols page below.