https://uxdc.us/sketch/design-system

1. Beyond Stellar
October, 2019
Learnings from building Social Tables Design System

2. How we started
● Multiple products, growing design team, no standard
● Improve design and development workflow
● Vision to build a seamless platform experience

3. What we achieved

4. Learnings

5. 1. Set a clear scope
● Decide the type of design system you need as a team
● Your design system serves your products
● Social Tables Stellar:
○ Web-base
○ Optimized for desktop
○ Flexible for compact interface

6. 2. A dedicated team (ideally)
● Design team
● Design System Committee
● Contributors

7. 3. Anatomy of components
● Understand each part and know how to use it
● Design need to be in a good shape before building
● Clarify how to engineer a component

8. 4. Documentation & Education
● Design guidelines
● Best practices
● Process
● Updates

9. 5. Context over consistency
● It’s not a static set of rules
● Account for flexibility
● Focus on the essential goal - solving problems

10. Resources
Atomic Design
https://bradfrost.com/blog/post/atomic-web-design/#atoms
Design Systems Examples
IBM Carbon: https://www.carbondesignsystem.com/
Shopify Polaris: https://polaris.shopify.com/
Mailchimp: https://ux.mailchimp.com/patterns/color

11. Thank You!
Siqi Wei
Senior Product Designer, Social Tables
@siqiwei47
@weisq