Creating a design pattern
library for logistics startup.
I built a robust and adaptive design pattern library that increased prototyping efficiency and facilitated collaboration.
I worked on:
sole UX Intern
Sketch, Lingo, Invision, Axure, Principle
design library implemented, new user-interface launched
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.
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.
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.
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.
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!
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!