Carolina Barbosa
A product designer in New York.
styleguide-cover2.png

Kargo Styleguide

A styleguide for Kargo products.

 
 
 
 

Context

Kargo is a mobile advertising and technology company based in New York City that serves high-quality ads in premium digital publications.

Kargo's product team has been developing internal and external tools to better serve its clients. From campaign management and tracking to building ads, its variety of platforms have adopted shared styles for one cohesive Kargo experience. With Kargo's design style becoming solidified and maturing, a living documentation of its foundation, components and guidelines is necessary.

 
 
How do we create a living Styleguide for Kargo’s product team that documents their visual language, and is useful for both designers and engineers?
 
 

Research & Brainstorm

 
 Auditing components across existing products

Auditing components across existing products

 

Even with a small team of 3-4 designers, each working in their own product, it's easy to loose track of who did what, why they did that, and how things were implemented. On the design team's end, we've improved communication regarding new components, changes to old components, and created a symbol library for Sketch where we store our 'absolute' truths regarding design.

 Sketch Symbol Library

Sketch Symbol Library

 A wide snapshot of our elaborate Sketch Symbol Library

A wide snapshot of our elaborate Sketch Symbol Library

However, there's many things that can't be translated into Sketch symbols. More importantly, how do we translate this library of symbols into a repository of components for developers? With different teams all working in different products at the same time but not necessarily communicating, you have same or similar components being built more than once in different ways, and the small inconsistencies that at first didn't seem like a big deal just create more and more discrepancy. The Styleguide needed to be a resource not just for the design team, but for developers as well.

     

    Explorations

     

    Sketching out ideas for how to organize components in the Styleguide

     

    Because of lack of resources in both design and engineering teams, the Styleguide has acted as more of a side project. We started with laying out the foundation of our visual language, and the general layout of the styleguide. We also asked developers what kind of things they need to see, and looked into creating toggles to display HTML, CSS and JS.

    Each component has a live preview, with its different states and HTML/CSS/JS toggles for developers

     
     
     

    Result

     
     

    We laid out the foundational elements of our products for our first version of the Kargo Living Styleguide. It includes our colors, grid, typography, buttons, icons and form elements.

     

    Responsive Design

     
     

    Although Kargo's platforms are desktop only, we wanted to create a responsive living styleguide so it could be a reference to its users from any device, as well as lay out a foundation for when Kargo might need responsive tools in the future.

     

    Prototyping Styleguide

     

    Zeplin view of our Styleguide for prototyping

     

    While the Living Styleguide's development has been halted due to a lack of dev resources, the demand for clear guidelines has only grown. To satisfy this demand, designers have created a Zeplin version of a Styleguide that developers can view, and use as reference while creating new product prototypes, as well as for training of new engineers into Kargo's product visual language.

     

    Closing Remarks

    The Kargo Styleguide is still in its early stages, but we have a solid foundation to continue onward into the more complex parts of its ever-growing visual language and best practices. The development of the living styleguide has been paused due to lack of dev resources at the moment, but we are working towards pushing for a design system.

     
     
     

    Team
    Product Designers: Carolina Barbosa, Eva Plaisted, Jeesun Suh, Young Park
    Developers: Corbin Sykes, Christian Tate, Alex Chaparro, Wade Hampton