2019-06-12

Starting our day having coffee and chomping on brekkie at Breakfast Club.

The focus of today's workshop is the Nucleus Design System documentation.

Nucleus Design System

Here, I have taken notes throughout the day.

Documentation

This medium article from Nathan Curtis details 7 steps to Documenting Components

https://medium.com/eightshapes-llc/documenting-components-9fe59b80c015

WHY, but Why?

• Peeps understand how to use

• Not repeating ourselves

• When we're no longer there

• New joiners on-boarding

• Self serving

• Defining decisions we make

• This is the Design System

Who's going to use is?

• Devs

• Designers

• Product Owners

• Brand

• QA

• CMS

• Content

• New joiners

How / When will they use it?

• Given a link by us

• They already started working on something

• Source of truth

• New joiners - spend time reading

• Decision backup

How do we measure success

• Less questions we receive from community members

• We are documenting all the time, it's part of the process

• More Nucleus on BG Website

Feedback

• Currently our documentation is lengthy

Team task

• Find 2 examples within our documentation that are good

• Find 2 examples within our documentation that are bad

Phased out, not Faced out Text heavy Brand alignment Panel Component is misleading - nothing about the layout - names are inconsistent Dialling our creative principles - things that don't exist any more Frontify - is a poor experience Inconsistent naming - typography More than one source of truth - colours Lockup Component - nonexistent Where does Nucleus being and end? Brand guidelines - Designer playbook - check atlassian.design Blanding page Levels of information are inconsistent - high level, practical, rational, details The Design System does not reflect us as a team

Explaining ourselves The "quotes are nice to skim read Creating Illustrations - prescriptive - tools - no waffle - explain - thoughtful Accordion Component - easy to understand - real examples within documentation The content around the principles The Landmark section especially the Specification table Do's and Don't - real good to consume Becoming Nucleus The use of active verbs on our Homepage CTAs Events section - projecting a timeline of our history - about our community

Wish list

Note down anything that you'd like to see form part of the Design System

Post-its of our documentation wishes

Mr Bond

• Do's & Don'ts

• Embedded research insights - e.g. Bulb

• Using Nucleus - practical case studies

• Recruitment channel - bait for prospective hires

• More Action - success, fails, event write-ups, release notes

• More Nucleus identity - e.g. MS Fluent

• Team Faces - more personality

• Not to be tethered to Brand - if we can help it

• Terminology, vocabulary, language guidance - e.g. Shopify Polaris

• Design how-to - validation + approval process

• Component filter - Web, iOS, etc - e.g. Skyscanner Backpack

• Smoother Sketch Workflow + Guidance, e.g. create short videos

• Experiments - for transparency and to elicit live feedback

Mr Bruzon

• Do's & Don'ts

• Images

• Videos

• Gifs

• Emojis

• Photos

• Examples of real world usage

• Quick links

• Useful links - to articles of interest

• Code snippets

• Tools + Downloads

• TL;DR

• Chunking - bitesize digestable information

Miss Wassershtrom

• Success stories - collaboration, pages

• Blog

• Nucleus Session recap

• FAQs

• Myths about Nucleus

• Nucleus Press Pack

• On our radar - roadmap

Mr Jones

• Planning for each publication

• Consistent tone of voice

• Editorial experience

• More engagement - concise, precise, fun

• API style tables for Specifications

• Source control on Github for our documentation

• Portable format - use markdown

• Diagrams - to explain flows and wireframes

• Videos for demonstrations

Mr Holt

• Property details - name, type, default, choices

• Usage examples - Ember, CMS, App

• From the code - based on what is in production

• Links to GitHub - bugs, quickly create an issue

• Can we search PDFs for related content

Mr Peasant

• Example page layouts

• A what's new section

• Image template size guidelines

• A clear purpose

• A smart, sweet, engaging introduction

• Lots of links to Storybook

• Process map of publications

Component page

• What is it for

• Explain what is it

• How to use it

• Why would you use it