Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

From the designers laptop to the users

497 views

Published on

From the designers laptop to the users

Published in: Design

From the designers laptop to the users

  1. 1. ALLARD VAN HELBERGEN | SR DESIGNER | @VANHELBERGEN From the designer’s laptop to the user’s And everything in between
  2. 2. Why?
  3. 3. The user
  4. 4. Enable every team to create straight-forward experiences, that our users love. DESIGN SYSTEM MISSION
  5. 5. From the designer’s laptop to the user’s
  6. 6. 2002
  7. 7. 2012
  8. 8. 2012
  9. 9. 2012
  10. 10. 2017
  11. 11. 2017
  12. 12. 2017
  13. 13. 2017
  14. 14. Tension between product and design system is healthy. LEARNING 1
  15. 15. INLINE DIALOG MODAL DIALOG CancelPrimaryHint 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
  16. 16. 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 Skip1/3 Open in JIRAOpen 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 Skip1/3 Open in JIRA Products needed new things Description Concise title CancelPrimary Description Concise title CancelPrimary
  17. 17. Cancelmary rmative description Title An informative description Title CancelPrimary Cancel Primary An informative description Title An info Cancel Products needed new things
  18. 18. We have made some exciting new changes to the navigation and appearance to improve your experience in JIRA. Learn more. Maybe laterTry it out now Experience the new Jira
  19. 19. 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
  20. 20. Look at what’s in product, synthesise, and build forward. LEARNING 2
  21. 21. INLINE DIALOG MODAL DIALOG CancelPrimaryHint 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
  22. 22. 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
  23. 23. It’s about more than components, it’s about experiences. LEARNING 3
  24. 24. Components are still used differently Quickly switch between your most recent projects by selecting the project name and icon. Next
  25. 25. Components are still used differently Quickly switch between your most recent projects by selecting the project name and icon. Next
  26. 26. 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
  27. 27. 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
  28. 28. 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
  29. 29. 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
  30. 30. 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
  31. 31. 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
  32. 32. 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
  33. 33. GUIDELINES AND NEW PATTERNS
  34. 34. Build it like a product. LEARNING 4
  35. 35. 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
  36. 36. 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
  37. 37. 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
  38. 38. 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
  39. 39. Roadmap alignment
  40. 40. Roadmap alignment
  41. 41. Roadmap alignment
  42. 42. Roadmap alignment
  43. 43. Don’t know. WHAT’S NEXT?
  44. 44. Don’t know. Yet. WHAT’S NEXT?
  45. 45. Tension is healthy Synthesise and build forward More than components, it’s about experiences Take aways Build it like a product
  46. 46. Tension is healthy Synthesise and build forward More than components, it’s about experiences Take aways Build it like a product
  47. 47. Tension is healthy Synthesise and build forward More than components, it’s about experiences Take aways Build it like a product
  48. 48. Tension is healthy Synthesise and build forward More than components, it’s about experiences Take aways Build it like a product
  49. 49. The user
  50. 50. ALLARD VAN HELBERGEN | SR DESIGNER | @VANHELBERGEN Thanks atlassian.design atlassian.com/uxpin

×