Text-Styles.png

Creating a Design System

Text-Styles.png
 

Lead Designer | Creating a Design System

WebLinc is a software company that built two cloud based software products - Orderbot, an order management system and Workarea. a commerce, analytics and content management platform.

As a Visual Designer on the marketing team, I worked under the direction and guidance of the Marketing Program Manager; and VP of Marketing to create a design system in Sketch. This design system gave us a strong foundation to wireframe, build. and iterate as we set out delivering a great user experience to our customers with the launch of our new website. 

During this website redesign process my team conducted user and stakeholder interviews, gathered requirements, surveyed employees, developed persona's, and completed a competitive analysis that allowed us to gain insight into our customer's unique needs and a better understanding of our competitive landscape.  

CA80DE74-C49B-4A64-866C-BA95F715C421.JPG

Setting up this design system required a strong sense of layout design, and thorough knowledge of page composition, responsive design and typography. I began by defining the color palette, setting up typography styles, then moved on to building components based on an 8 px Grid System ( Shoutout to Nudg.it ).

I used Nested Symbols within a Symbol Library so that design updates could be made in real-time without derailing our team's ability to move forward in content creation. Making one change in our branding library would populate across all components. This design system improved team collaboration and sped up our daily team workflow. It helped the team maintain visual consistency across multiple viewports, while also facilitating collaboration with all stakeholders.

Sketch Plugin's I used for Managing and extending this Design System