Creating a design pattern

library for logistics startup.

I built a robust and adaptive design pattern library that increased prototyping efficiency and facilitated collaboration.

company:

team:

I worked on:

success:

FourKites

sole UX Intern

Sketch, Lingo, Invision, Axure, Principle

design library implemented, new user-interface launched

Design Library

As the sole UX Intern at FourKites, a real-time shipment tracking startup serving Fortune 500 companies, I was tasked with creating a design library. The UX Director was looking to consolidate all existing design elements into one place that was organized and easy to work with. I was given complete freedom (woo!) over how to create this library with the only requirement being that it worked with Sketch.

MVP

For the MVP version of the design system, I moved all elements used in any of the FourKites products into one Sketch file. With everything in the same place, I updated the UI of all elements to be consistent and to feel more polished, clean, and minimalistic. The FourKites tracking platform is naturally data heavy and visually crowded which inspired this new user-interface that was then launched to customers during my internship.

Responsive Elements

As a pair of fresh design eyes, I noticed that a lot of prototyping time was spent on manual element adjustment (centering the text on buttons, adding an icon to a text field, etc). I was determined to take the design library one step further and find a way to optimize the tedious parts of prototyping. 

 

Surfing the internet, I learned everything I could about Sketch and its plugins and became proficient in using the tool. By creating nested symbols and using the Sketch plugin Autolayout, I was able to make all elements responsive and remove manual adjustment from everyday prototyping!

Frequently Used Elements

Buttons, form inputs, and data tables are the three most commonly used element categories on the platform. To further optimize the design system, I expanded the collection of elements for these categories based on potential use cases and implemented Sketch plugins when applicable. 

Buttons

Form Inputs

Data Tables

The Github of Design

In my past life as a developer, I frequently used Github, a version control tool that allows multiple people to seamlessly work on code for the same project. Halfway through my internship, I came across Lingo (essentially the Github of design) and incorporated the tool in the design library system. This allows all styleguide elements to exist online rather than a local Sketch file which facilitates collaboration within the design team by ensuring that people always use the latest versions of elements.

Finishing Touches

Taking this design library system one step further, I found a way to make prototyping different screen sizes as easy as a click of a button. Due to the responsive elements, a designer can create a fully prototyped screen and then adapt it to a different screen size with one click of a button using the percentage tool in Sketch. All I had to do was figure out the correct screen percentage for an ipad, laptop, desktop and voila!

End Result

The prototyping process before the creation of the design library system was slow and tedious but now creating pages is efficient and enjoyable, as it should be!

© 2018 by Nadia Jamrozik.