From the designer's laptop to the user's – and everything inbetween

Recording: https://www.youtube.com/watch?v=h6fZpNvHy1I
Article: https://www.uxpin.com/studio/blog/virtual-summit-recap-atlassian-shares-4-pointers-design-systems/

When building a suite of products your design system becomes crucial to building good products efficiently. Design systems enable a consistent user experience and allow you to express your brand and message even when dealing with a myriad of products and teams. So how do you manage that? Allard, Senior Designer for the Design System at Atlassian, will take you on the journey of a ux-pattern and the stages it goes through from the designer's screen, to the design system, into the product and ultimately to the user's screen.

You'll learn how to build and manage a design system effectively across a large product suite. We will discuss how you can empower your product's end-users embedding iterative research and validation into the process. Lastly, you will come away with learnings on a contribution model, which helps your product teams to collaborate with your design system teams and contribute to the design system themselves.

You will learn:

How Atlassian builds and manages their design system across their product suite
How the Design System team empowers users by iterating with research and testing
How design and engineering cooperate to be efficient and productive

=======================

Presented at Design Systems Virtual Summit '18 by UXPin, 14th February 2018
https://www.uxpin.com/design-systems-virtual-summit-2018/

www.vanhelbergen.com
www.twitter.com/vanhelbergen

Atlassian Design sites
Design System: http://design.atlassian.com
Twitter: https://twitter.com/atlassiandesign
Medium: https://medium.com/designing-atlassian/
Hiring: https://www.atlassian.com/company/careers

Transcript

1. ALLARD VAN HELBERGEN | SR DESIGNER | @VANHELBERGEN From the designer’s laptop to the user’s And everything in between
2. Why?
3. The user
4. Enable every team to create straight-forward experiences, that our users love. DESIGN SYSTEM MISSION
5. From the designer’s laptop to the user’s
14. Tension between product and design system is healthy. LEARNING 1
16. INLINE DIALOG MODAL DIALOG Cancel Primary Hint text This is place holder text. The basic dialog for modals should contain only valuable and relevant information. Simplify dialogs by removing unnecessary elements or content that does not support user tasks. If you find that the number of required elements for your design are making the dialog excessively large, then try a different design solution. This is place holder text. The basic dialog for modals should contain only valuable and relevant information. Simplify dialogs by removing unnecessary elements or content that does not support user tasks. If you find that the number of required elements for your design are making the dialog excessively large, then try a different design solution. This is place holder text. The basic dialog for modals should contain only valuable and relevant information. Simplify dialogs by removing unnecessary elements or content that does not support user tasks. If you find that the number of required elements for your design are making the dialog excessively large, then try a different design solution. This is place Title Optional Inline dialogs are pop-up containers for small amounts information and/ or controls. More info? Subtle link Title
17. McDonalds man, McDonalds man, I know them French fries had a plan. I know them French fries had a plan. The cheeseburger and the shakes formed a band. To over throw the French fries plan, I always knew them French fries was evil man. Getting started Next step Skip 1/3 Open in JIRA Open in JIRA McDonalds man, McDonalds man, I know them French fries had a plan. I know them French fries had a plan. The cheeseburger and the shakes formed a band. To over throw the French fries plan, I always knew them French fries was evil man. Getting started Next step Skip 1/3 Open in JIRA Products needed new things Description Concise title Cancel Primary Description Concise title Cancel Primary
18. Cancel mary rmative description Title An informative description Title Cancel Primary Cancel Primary An informative description Title An info Cancel Products needed new things
21. We have made some exciting new changes to the navigation and appearance to improve your experience in JIRA. Learn more. Maybe later Try it out now Experience the new Jira
22. Projects Projects Dashboard Issues Add-on Settings Recently viewed In your profile Vanilla business Business project Alpha app Software project 4 boards Nucleus Software project Choco software Software project 3 boards 20% time Scrum board Name Key Type Owner Category URL Choco software 3 boards CHOC Software Administrator — — Strawberry service STRAW Service Desk Josie Lambert — — Nucleus NUC Software Gene Castillo — — NUC Software Gene Castillo — — Hooli NUC Software Gene Castillo — — Vanilla business VAN Business Susan Gonzales — — Alpha app 4 boards Type Create project View all Access all your recently viewed issues, boards, projects and filters from the search panel. Click on search or press / key to activate Search. Get back to where you were earlier
23. Look at what’s in product, synthesise, and build forward. LEARNING 2
30. INLINE DIALOG MODAL DIALOG Cancel Primary Hint text This is place holder text. The basic dialog for modals should contain only valuable and relevant information. Simplify dialogs by removing unnecessary elements or content that does not support user tasks. If you find that the number of required elements for your design are making the dialog excessively large, then try a different design solution. This is place holder text. The basic dialog for modals should contain only valuable and relevant information. Simplify dialogs by removing unnecessary elements or content that does not support user tasks. If you find that the number of required elements for your design are making the dialog excessively large, then try a different design solution. This is place holder text. The basic dialog for modals should contain only valuable and relevant information. Simplify dialogs by removing unnecessary elements or content that does not support user tasks. If you find that the number of required elements for your design are making the dialog excessively large, then try a different design solution. This is place Title Optional Inline dialogs are pop-up containers for small amounts information and/ or controls. More info? Subtle link Title
31. SPOTLIGHT USER BENEFIT MODAL Quickly switch between your most recent projects by selecting the project name and icon. Next Quickly switch between your most recent projects by selecting the project name and icon. Got it We simplified the way you organize projects. Now, your boards belong to a project or a person. We'll show you some of the other changes as you explore. This is your Jira experience Show me the new navigation
32. It’s about more than components, it’s about experiences. LEARNING 3
33. Components are still used differently Quickly switch between your most recent projects by selecting the project name and icon. Next
34. Components are still used differently Quickly switch between your most recent projects by selecting the project name and icon. Next
35. Components are still used differently Quickly switch between your most recent projects by selecting the project name and icon. Next We simplified the way you organize projects. Now, your boards belong to a project or a person. We'll show you some of the other changes as you explore. This is your Jira experience Show me the new navigation
36. Components are still used differently Quickly switch between your most recent projects by selecting the project name and icon. Next We simplified the way you organize projects. Now, your boards belong to a project or a person. We'll show you some of the other changes as you explore. This is your Jira experience Show me the new navigation Quickly switch between your most recent projects by selecting the project name and icon. Next We simplified the way you organize projects. Now, your boards belong to a project or a person. We'll show you some of the other changes as you explore. This is your Jira experience Show me the new navigation
37. Usecases Defined use cases products weren’t aware of Prototypes Baselined, experimented and validated Iteration Continued until validation showed success Feeling End state was an empowered user Onboarding working group
38. Usecases Defined use cases products weren’t aware of Prototypes Baselined, experimented and validated Iteration Continued until validation showed success Feeling End state was an empowered user Onboarding working group
39. Usecases Defined use cases products weren’t aware of Prototypes Baselined, experimented and validated Iteration Continued until validation showed success Feeling End state was an empowered user Onboarding working group
40. Usecases Defined use cases products weren’t aware of Prototypes Baselined, experimented and validated Iteration Continued until validation showed success Feeling End state was an empowered user Onboarding working group
41. Usecases Defined use cases products weren’t aware of Prototypes Baselined, experimented and validated Iteration Continued until validation showed success Feeling End state was an empowered user Onboarding working group
43. GUIDELINES AND NEW PATTERNS
44. Build it like a product. LEARNING 4
45. We build it Design System builds it based off of collective research Contribution model We build it together A workgroup or cross- product effort You build it Products build something and Design System shepherds it
46. We build it Design System builds it based off of collective research Contribution model We build it together A workgroup or cross- product effort You build it Products build something and Design System shepherds it
47. We build it Design System builds it based off of collective research Contribution model We build it together A workgroup or cross- product effort You build it Products build something and Design System shepherds it
48. We build it Design System builds it based off of collective research Contribution model We build it together A workgroup or cross- product effort You build it Products build something and Design System shepherds it
51. Roadmap alignment
52. Roadmap alignment
53. Roadmap alignment
54. Roadmap alignment
55. Don’t know. WHAT’S NEXT?
56. Don’t know. Yet. WHAT’S NEXT?
57. Tension is healthy Synthesise and build forward More than components, it’s about experiences Take aways Build it like a product
58. Tension is healthy Synthesise and build forward More than components, it’s about experiences Take aways Build it like a product
59. Tension is healthy Synthesise and build forward More than components, it’s about experiences Take aways Build it like a product
60. Tension is healthy Synthesise and build forward More than components, it’s about experiences Take aways Build it like a product
61. The user
62. ALLARD VAN HELBERGEN | SR DESIGNER | @VANHELBERGEN Thanks atlassian.design atlassian.com/uxpin