From the designers laptop to the users

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

6. 2002

7. 2012

8. 2012

9. 2012

10. 2017

11. 2017

12. 2017

13. 2017

14. Tension between product
and design system is
healthy.
LEARNING 1

16. 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

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 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

18. Cancelmary
rmative description
Title
An informative description
Title
CancelPrimary 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 laterTry 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
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

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