Setvi is a b2b software startup based in Philadelphia, PA that enables large sales teams to access and share crucial information. Our goal at Setvi is to make the sales process faster and more effective for everyone from suppliers to customers.

I have been apart of the Setvi design team for close to 3 years now and as with many startups we have always been working at a rapid pace towards ever-approaching deadlines. As the product has recently entered a more stable phase, I felt as though we should use this rare surplus of time to begin building our own design system.

One of our most significant hurdles in the development process is front-end design QA. Very rarely do we receive finished features that resemble my original designs. Shadows, text styles, colors, etc were always a bit off and even different from other similar elements on the same page. Secondarily, I have spent a lot of extra time looking for older designs to make sure I was using the same elements when I am designing new features or retouching existing interfaces.

The goal of the Setvi design system is to create a singular point of reference for all design moving forward. I believe this system will be critical in creating consistency across the Setvi platform as well as improving our workflow. I used the 'atomic design' model created by Brad Frost to build a Setvi Design System for iOS.

Process

The Setvi iPhone app needed some serious updating and was slotted for development earlier this year. I saw this as an opportunity to begin the process of building a design system.

Based on my familiarity with our existing mobile functionality I was able to build an icon library and color palette before I began the actual mobile designs. Text styles required more information from the re-design process in order to finalize their properties. I began to wire frame out screens to get an idea for the different sizes and weights we would need based on headers, subtext, buttons, etc. These processes provided me the 'atoms' of our iPhone design system.

The next step of the process was working through some of the more complete elements such as buttons, switches, and forms. With an initial wave of wire framing done I was able to estimate the necessary elements for all the functionality. I then pushed the designs further in order to include proper text styles, colors, icons, shadows, and other layer styles. This resulted in polished basic elements that utilized my smaller 'atoms'. These are called the 'molecules'.

These basic elements made it easy to craft the final 'organisms'. These are the major components that would be used in Setvi including navigation, menus, pop-ups, line items, tables etc. Building these components went smoothly after I had established such a solid base with the molecules and atoms. It was mostly a process of organizing pre-existing elements into functional components.

The high-fidelity wire frames represent the 'templates' which constitute about 80% of the Setvi iPhone app screens. The other 20% still include many familiar organisms, molecules, and atoms, but require specific consideration that requires us to stray from these basic layouts.

Conclusion

Utilizing the 'atomic design' model made creating our initial design system a tedious but simple exercise. I now have access to a full Setvi Sketch library to use whenever I am working with iPhone. So far I have seen a sizable increase in my productivity when it comes to quickly creating new iPhone screens and have been able to hand over much more consistent designs to developers.

We are now in the process of writing internal documentation for designers and developers alike as well as finding ways to host this information on the web, which will take this from a simple library to a full design system.