SlideShare une entreprise Scribd logo
1  sur  62
Télécharger pour lire hors ligne
ALLARD VAN HELBERGEN | SR DESIGNER | @VANHELBERGEN
From the designer’s laptop
to the user’s
And everything in between
Why?
The user
Enable every team to create
straight-forward experiences,
that our users love.
DESIGN SYSTEM
MISSION
From the designer’s laptop to the user’s
2002
2012
2012
2012
2017
2017
2017
2017
Tension between product
and design system is
healthy.
LEARNING 1
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
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
Cancelmary
rmative description
Title
An informative description
Title
CancelPrimary Cancel Primary
An informative description
Title
An info
Cancel
Products needed new things
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
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
Look at what’s in product,
synthesise, and build
forward.
LEARNING 2
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
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
It’s about more than
components,
it’s about experiences.
LEARNING 3
Components are still used differently
Quickly switch between your most
recent projects by selecting the
project name and icon.
Next
Components are still used differently
Quickly switch between your most
recent projects by selecting the
project name and icon.
Next
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
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
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
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
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
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
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
GUIDELINES AND NEW PATTERNS
Build it like a product.
LEARNING 4
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
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
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
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
Roadmap alignment
Roadmap alignment
Roadmap alignment
Roadmap alignment
Don’t know.
WHAT’S NEXT?
Don’t know. Yet.
WHAT’S NEXT?
Tension is healthy
Synthesise and build
forward
More than components,
it’s about experiences
Take aways
Build it like a product
Tension is healthy
Synthesise and build
forward
More than components,
it’s about experiences
Take aways
Build it like a product
Tension is healthy
Synthesise and build
forward
More than components,
it’s about experiences
Take aways
Build it like a product
Tension is healthy
Synthesise and build
forward
More than components,
it’s about experiences
Take aways
Build it like a product
The user
ALLARD VAN HELBERGEN | SR DESIGNER | @VANHELBERGEN
Thanks
atlassian.design
atlassian.com/uxpin

Contenu connexe

Tendances

Tendances (20)

Great Agile in a UX World
Great Agile in a UX WorldGreat Agile in a UX World
Great Agile in a UX World
 
Design Systems Operations
Design Systems OperationsDesign Systems Operations
Design Systems Operations
 
UX, DX, DSX: Developers and Data Scientists as Users
UX, DX, DSX: Developers and Data Scientists as UsersUX, DX, DSX: Developers and Data Scientists as Users
UX, DX, DSX: Developers and Data Scientists as Users
 
A design system. A year in review.
A design system. A year in review.A design system. A year in review.
A design system. A year in review.
 
Accessibility in Design Systems by Allison Shaw
Accessibility in Design Systems by Allison ShawAccessibility in Design Systems by Allison Shaw
Accessibility in Design Systems by Allison Shaw
 
Engineering a Design Culture
Engineering a Design CultureEngineering a Design Culture
Engineering a Design Culture
 
Building a Mature Design System
Building a Mature Design SystemBuilding a Mature Design System
Building a Mature Design System
 
UX Research in the Agile Cycle
UX Research in the Agile CycleUX Research in the Agile Cycle
UX Research in the Agile Cycle
 
Agile Prototyping Best Practices
Agile Prototyping Best PracticesAgile Prototyping Best Practices
Agile Prototyping Best Practices
 
Building a Design System: A Practitioner's Case Study
Building a Design System: A Practitioner's Case StudyBuilding a Design System: A Practitioner's Case Study
Building a Design System: A Practitioner's Case Study
 
UX in a Dual Track Agile World
UX in a Dual Track Agile WorldUX in a Dual Track Agile World
UX in a Dual Track Agile World
 
Scalable Design Systems with Sketch
Scalable Design Systems with SketchScalable Design Systems with Sketch
Scalable Design Systems with Sketch
 
Dual Track Agile Or, How I learned to stop worrying and love the scrum
Dual Track Agile Or, How I learned to stop worrying and love the scrumDual Track Agile Or, How I learned to stop worrying and love the scrum
Dual Track Agile Or, How I learned to stop worrying and love the scrum
 
Managing Design System Projects
Managing Design System ProjectsManaging Design System Projects
Managing Design System Projects
 
Prototyping in a Scrum environment
Prototyping in a Scrum environmentPrototyping in a Scrum environment
Prototyping in a Scrum environment
 
Agile UX, Yes We Can!
Agile UX, Yes We Can!Agile UX, Yes We Can!
Agile UX, Yes We Can!
 
Design Systems For Enterprise
Design Systems For EnterpriseDesign Systems For Enterprise
Design Systems For Enterprise
 
Evolving your Design System: People, Product, and Process
Evolving your Design System: People, Product, and ProcessEvolving your Design System: People, Product, and Process
Evolving your Design System: People, Product, and Process
 
Introducing Agile to Product Teams
Introducing Agile to Product TeamsIntroducing Agile to Product Teams
Introducing Agile to Product Teams
 
Redesign design
Redesign designRedesign design
Redesign design
 

Similaire à From the designers laptop to the users

4 D Techniques
4 D Techniques4 D Techniques
4 D Techniques
palani2808
 

Similaire à From the designers laptop to the users (20)

Ultimate Dogfooding: Behind the Scenes of Building the New Jira
Ultimate Dogfooding: Behind the Scenes of Building the New JiraUltimate Dogfooding: Behind the Scenes of Building the New Jira
Ultimate Dogfooding: Behind the Scenes of Building the New Jira
 
An Exploration of Cross-product App Experiences
An Exploration of Cross-product App ExperiencesAn Exploration of Cross-product App Experiences
An Exploration of Cross-product App Experiences
 
10 Tips for Configuring Your Builds with Bamboo Specs
10 Tips for Configuring Your Builds with Bamboo Specs10 Tips for Configuring Your Builds with Bamboo Specs
10 Tips for Configuring Your Builds with Bamboo Specs
 
Rhok 101 for change makers - with an agile flavour
Rhok 101 for change makers - with an agile flavourRhok 101 for change makers - with an agile flavour
Rhok 101 for change makers - with an agile flavour
 
4 D Techniques
4 D Techniques4 D Techniques
4 D Techniques
 
Prototyping & User Testing
Prototyping & User TestingPrototyping & User Testing
Prototyping & User Testing
 
The Junior Developer Survival Guide - GDI Ann Arbor 2/10/15
The Junior Developer Survival Guide -  GDI Ann Arbor 2/10/15The Junior Developer Survival Guide -  GDI Ann Arbor 2/10/15
The Junior Developer Survival Guide - GDI Ann Arbor 2/10/15
 
OSMC 2021 | Contributing to open source with the example of icinga (1)
OSMC 2021 | Contributing to open source with the example of icinga (1)OSMC 2021 | Contributing to open source with the example of icinga (1)
OSMC 2021 | Contributing to open source with the example of icinga (1)
 
Jr devsurvivalguide
Jr devsurvivalguideJr devsurvivalguide
Jr devsurvivalguide
 
Tools and Resources for New Product Development: The Discovery Phase
Tools and Resources for New Product Development: The Discovery PhaseTools and Resources for New Product Development: The Discovery Phase
Tools and Resources for New Product Development: The Discovery Phase
 
Design process
Design processDesign process
Design process
 
Testers in an agile world
Testers in an agile worldTesters in an agile world
Testers in an agile world
 
Industry stories on agile, scrum and kanban
Industry stories on agile, scrum and kanbanIndustry stories on agile, scrum and kanban
Industry stories on agile, scrum and kanban
 
All Method, No Madness: Guiding Agile Teams Through Research
All Method, No Madness: Guiding Agile Teams Through ResearchAll Method, No Madness: Guiding Agile Teams Through Research
All Method, No Madness: Guiding Agile Teams Through Research
 
Design Process | Tool 02: Scenario - Tool 03: Wireframe
Design Process | Tool 02: Scenario - Tool 03: WireframeDesign Process | Tool 02: Scenario - Tool 03: Wireframe
Design Process | Tool 02: Scenario - Tool 03: Wireframe
 
Early Signal Testing: Designing Atlassian’s New Look
Early Signal Testing: Designing Atlassian’s New LookEarly Signal Testing: Designing Atlassian’s New Look
Early Signal Testing: Designing Atlassian’s New Look
 
Scaling Software Delivery.pdf
Scaling Software Delivery.pdfScaling Software Delivery.pdf
Scaling Software Delivery.pdf
 
Enterprise Devops Presentation @ Magentys Seminar London May 15 2014
Enterprise Devops Presentation @ Magentys Seminar London May 15 2014Enterprise Devops Presentation @ Magentys Seminar London May 15 2014
Enterprise Devops Presentation @ Magentys Seminar London May 15 2014
 
Building Beautiful and Highly Usable Products by Simon Vallee
Building Beautiful and Highly Usable Products by Simon ValleeBuilding Beautiful and Highly Usable Products by Simon Vallee
Building Beautiful and Highly Usable Products by Simon Vallee
 
Templates.pptx
Templates.pptxTemplates.pptx
Templates.pptx
 

Plus de uxpin

Plus de uxpin (19)

Creating and maintaining a design system for 130 teams - Bethany Sonefeld
Creating and maintaining a design system for 130 teams - Bethany SonefeldCreating and maintaining a design system for 130 teams - Bethany Sonefeld
Creating and maintaining a design system for 130 teams - Bethany Sonefeld
 
Principles & ux_systems
Principles & ux_systemsPrinciples & ux_systems
Principles & ux_systems
 
Principles & ux_systems
Principles & ux_systemsPrinciples & ux_systems
Principles & ux_systems
 
Initiating and Sustaining Design Systems for the Enterprise
Initiating and Sustaining Design Systems for the EnterpriseInitiating and Sustaining Design Systems for the Enterprise
Initiating and Sustaining Design Systems for the Enterprise
 
Should Designers?
Should Designers?Should Designers?
Should Designers?
 
From the designers laptop to the users
From the designers laptop to the usersFrom the designers laptop to the users
From the designers laptop to the users
 
Sonefeld creating and maintaining a design system for 130 teams
Sonefeld creating and maintaining a design system for 130 teamsSonefeld creating and maintaining a design system for 130 teams
Sonefeld creating and maintaining a design system for 130 teams
 
Consistency vs. Flexibility in Design Systems: A GE Case Study by Ken Skistimas
Consistency vs. Flexibility in Design Systems: A GE Case Study by Ken SkistimasConsistency vs. Flexibility in Design Systems: A GE Case Study by Ken Skistimas
Consistency vs. Flexibility in Design Systems: A GE Case Study by Ken Skistimas
 
Developing UX ROI in Enterprise Land: An ADP Case Study
Developing UX ROI in Enterprise Land: An ADP Case StudyDeveloping UX ROI in Enterprise Land: An ADP Case Study
Developing UX ROI in Enterprise Land: An ADP Case Study
 
Automating Design Processes for Teams: An IDEO Case Study
Automating Design Processes for Teams: An IDEO Case StudyAutomating Design Processes for Teams: An IDEO Case Study
Automating Design Processes for Teams: An IDEO Case Study
 
Calculating the ROI of UX with Standard Financial Models
Calculating the ROI of UX with Standard Financial ModelsCalculating the ROI of UX with Standard Financial Models
Calculating the ROI of UX with Standard Financial Models
 
Building a UX Process at Salesforce that Promotes Focus and Creativity
Building a UX Process at Salesforce that Promotes Focus and CreativityBuilding a UX Process at Salesforce that Promotes Focus and Creativity
Building a UX Process at Salesforce that Promotes Focus and Creativity
 
Designing Multi-Device Experiences
Designing Multi-Device ExperiencesDesigning Multi-Device Experiences
Designing Multi-Device Experiences
 
Creating Consistent Experiences With Design Principles
Creating Consistent Experiences With Design PrinciplesCreating Consistent Experiences With Design Principles
Creating Consistent Experiences With Design Principles
 
Participatory Design: Bringing Users Into Your UX Process
Participatory Design: Bringing Users Into Your UX ProcessParticipatory Design: Bringing Users Into Your UX Process
Participatory Design: Bringing Users Into Your UX Process
 
Great UX in an Agile World
Great UX in an Agile WorldGreat UX in an Agile World
Great UX in an Agile World
 
Collaborative Product Discovery at Fjord: A Case Study
Collaborative Product Discovery at Fjord: A Case StudyCollaborative Product Discovery at Fjord: A Case Study
Collaborative Product Discovery at Fjord: A Case Study
 
Agile and Design Thinking at IBM
Agile and Design Thinking at IBMAgile and Design Thinking at IBM
Agile and Design Thinking at IBM
 
From Product Requirements to Hypotheses
From Product Requirements to HypothesesFrom Product Requirements to Hypotheses
From Product Requirements to Hypotheses
 

Dernier

infant assessment fdbbdbdddinal ppt.pptx
infant assessment fdbbdbdddinal ppt.pptxinfant assessment fdbbdbdddinal ppt.pptx
infant assessment fdbbdbdddinal ppt.pptx
suhanimunjal27
 
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
dollysharma2066
 
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
amitlee9823
 
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
nirzagarg
 
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
home
 
Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...
Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...
Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...
amitlee9823
 
call girls in Dakshinpuri (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️
call girls in Dakshinpuri  (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️call girls in Dakshinpuri  (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️
call girls in Dakshinpuri (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️
9953056974 Low Rate Call Girls In Saket, Delhi NCR
 

Dernier (20)

Chapter 19_DDA_TOD Policy_First Draft 2012.pdf
Chapter 19_DDA_TOD Policy_First Draft 2012.pdfChapter 19_DDA_TOD Policy_First Draft 2012.pdf
Chapter 19_DDA_TOD Policy_First Draft 2012.pdf
 
infant assessment fdbbdbdddinal ppt.pptx
infant assessment fdbbdbdddinal ppt.pptxinfant assessment fdbbdbdddinal ppt.pptx
infant assessment fdbbdbdddinal ppt.pptx
 
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...
 
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Th...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Th...Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Th...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Th...
 
Sector 104, Noida Call girls :8448380779 Model Escorts | 100% verified
Sector 104, Noida Call girls :8448380779 Model Escorts | 100% verifiedSector 104, Noida Call girls :8448380779 Model Escorts | 100% verified
Sector 104, Noida Call girls :8448380779 Model Escorts | 100% verified
 
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
 
Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...
Booking open Available Pune Call Girls Nanded City  6297143586 Call Hot India...Booking open Available Pune Call Girls Nanded City  6297143586 Call Hot India...
Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...
 
❤Personal Whatsapp Number 8617697112 Samba Call Girls 💦✅.
❤Personal Whatsapp Number 8617697112 Samba Call Girls 💦✅.❤Personal Whatsapp Number 8617697112 Samba Call Girls 💦✅.
❤Personal Whatsapp Number 8617697112 Samba Call Girls 💦✅.
 
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdfJordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
 
Q4-W4-SCIENCE-5 power point presentation
Q4-W4-SCIENCE-5 power point presentationQ4-W4-SCIENCE-5 power point presentation
Q4-W4-SCIENCE-5 power point presentation
 
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
 
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
 
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...
 
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
 
call girls in Kaushambi (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
call girls in Kaushambi (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...call girls in Kaushambi (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
call girls in Kaushambi (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
 
Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...
Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...
Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...
 
Case Study of Hotel Taj Vivanta, Pune
Case Study of Hotel Taj Vivanta, PuneCase Study of Hotel Taj Vivanta, Pune
Case Study of Hotel Taj Vivanta, Pune
 
💫✅jodhpur 24×7 BEST GENUINE PERSON LOW PRICE CALL GIRL SERVICE FULL SATISFACT...
💫✅jodhpur 24×7 BEST GENUINE PERSON LOW PRICE CALL GIRL SERVICE FULL SATISFACT...💫✅jodhpur 24×7 BEST GENUINE PERSON LOW PRICE CALL GIRL SERVICE FULL SATISFACT...
💫✅jodhpur 24×7 BEST GENUINE PERSON LOW PRICE CALL GIRL SERVICE FULL SATISFACT...
 
UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...
UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...
UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...
 
call girls in Dakshinpuri (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️
call girls in Dakshinpuri  (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️call girls in Dakshinpuri  (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️
call girls in Dakshinpuri (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️
 

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
  • 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
  • 10. 2017
  • 11. 2017
  • 12. 2017
  • 13. 2017
  • 14. Tension between product and design system is healthy. LEARNING 1
  • 15.
  • 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
  • 19.
  • 20.
  • 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
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 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
  • 42.
  • 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
  • 49.
  • 50.
  • 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
  • 62. ALLARD VAN HELBERGEN | SR DESIGNER | @VANHELBERGEN Thanks atlassian.design atlassian.com/uxpin