SIP

Component Library
Project Overview
Studio Interface Patterns, or SIP, is the internal name of the collection of reusable user interface components designed specifically to support ShootProof's studio application. Members of the product design team use this component library to quickly reference the system's UI building blocks and build out new features and pages. Like many UI kits, SIP was founded on the principles of Atomic Design. The components are grouped and arranged as atoms, molecules, and organisms, and templates were established based on recurring patterns and themes.
My Contributions
I was fortunate enough to have many of these components at my disposal when I originally joined ShootProof's design team. As time passed and many of the original design team members left the company, I eventually became the owner and custodian of the component library. It was my responsibility to maintain and update the components and to help new team members get up-and-running with the system. I ultimately made the decision to migrate SIP from Sketch to Figma, and I created a backlog of tasks to accomplish this effort.
Atoms are the basic building blocks for all UI components. In SIP, the atoms consist of color styles, text styles, buttons, glyphs, icons, logos, banners, tags, and other miscellaneous tools like cursor pointers and scroll bars.

The hexadecimal color values were created using SASS lighten and darken functions. To see how they were generated, check out this CodePen: http://cdpn.io/e/NWPerXp.

To see the buttons live in action, check out this CodePen: http://cdpn.io/e/rPQjyq.
1. Atoms
Figure 1.0 - Text and color styles
Figure 1.1 - Button components
Figure 1.2 - Logos and iconography (icon illustrations by Kristie Feltner)
Figure 1.3 - Banner components
Molecules are groups of atoms bonded together. They serve as the backbone of the user interface. Form elements represent a healthy majority of the SIP molecules. Things like inputs, date pickers, pagination, selects, textareas, checkboxes, radio buttons, segmented button groups, and tabbed button groups are classified as molecules.
2. Molecules
Figure 2.0 - Input components
Figure 2.1 - Select components
Figure 2.2 - Textarea components
Figure 2.3 - Radio and checkbox components
Figure 2.4 - Segmented and tabbed button group components
Organisms are groups of molecules joined together to form a relatively complex, distinct section of the studio application interface. Examples of organisms include navigation bars, title bars, tables, modals, side panels, and toast notifications.
3. Organisms
Figure 3.0 - Navbar and title bar components
Figure 3.1 - Modal components
Templates are groups of organisms stitched together to form pages. The blank page template can serve as a starting point for any new project. Additional templates were made for pages containing common interaction patterns such as empty states, tabbed button groups, modals, side panels, and toast notifications.
4. Templates
Figure 4.0 - Blank and empty state templates
Figure 4.1 - Modal templates
The creation of this component library was a complete team effort that spanned multiple generations of design and development teams, and it would not have been possible without the early input and contributions from the following people:

Director of UX - Terry Allen
UI Designer - Matt Pence
UI Designer - Chad Bercea
UX Architect - Terris Johnson
UX Architect - Dominic Distretti
Visual Designer - Kristie Feltner
Front-End Engineer - Kevin Bandy
Front-End Engineer - David Posey
Front-End Engineer - Mary Gezo
Front-End Engineer - Scott Trinh
QA Engineer - Matt Nicholson
5. Credits
© 2020 Jordan Jung
TwitterInstagramDribbbleVSCOEllo