3. Designing for user experience
(UX) with Atlassian Tools!
Tools you already have, repurposed.
Hai!!
Samantha Thebridge!
UX Designer, Atlassian!
3!
4. Integrating Design and Dev!
• What is User Experience Design?!
• What are our challenges?!
• 5 simple steps to solve them!
• Profit, or, what have we learned?!
4!
6. What is User Experience?!
UX is making things simple, easy
and pleasurable to use.!
ButI Ineed iteven this?
this
want it to do all this!
Or to feel like
6!
8. Interaction design!
• Interaction components comprising atomic elements!
• A vast mental library of interaction patterns!
• Anticipating user behavior and expectation! Interaction!
• Empower the user to hit [submit] and help them Design!
recover if they did something they didnʼt mean to do!
• If itʼs complex make it discoverable, learnable!
8!
9. Visual design!
• Visual perception: alignment, spacing, dynamics!
• Color, fonts, judicious use of iconography !
• Gradients, rounded corners and drop shadows – Visual!
stuff developers hate! Design!
• Invisible design helps make software intuitive,
learnable, simple !
9!
10. What are our challenges?!
Hmmm…
Comic Sans or
WingDings today?
10!
11. Design Challenges!
• The uniquewith their own users! heritage! !
Ensuring that pattern use from
Rolling visual changes while remaining faithful
Aiming for nature of our visual one product
5 products visual parity outis communicated
to the unique aims of each product!
next!
!=
Page Chrome - JIRA!
Tabs - JIRA! Page Chrome - Confluence!
Tabs - Confluence!
11!
12. Practical Challenges!
• Working within product teams !
• In different floors of
different buildings!
• Working across time-zones!
SYD:"
• Working across continents! Breakfast!
SFO:"
Beer oʼclock!
12!
14. Methodological Challenges!
• Design used to happen watch forlornly to separate the
Legacy has to adapt or up-front!
methodology makes it difficult as suboptimal
interfaces are from the
“thinking time” deployed!concept of continuous
iteration!
14!
16. 5 Steps to #Winning!
1. Braindump to Brief!
2. Brief to Wireframes!
3. Wireframes to Design!
4. Design to implementation!
5. Implementation to validation!
16!
18. The JIRA Ignite Story !
• What is Ignite?!
• The problem!
• The challenge!
18!
19. JIRA permissions be able to set thesupport the
“We would like to schemes should priority
specific mapping of version and component
of outgoing e-mails. This way we can have
related permissions sogenerated by JIRAallow
the priority of e-mails that a project can set
a product owner to update a priority of
to high when the issue has versions without
having to be an admin of the project.
Critical or Blocker.”
19!
36. 3. From Wireframes to Design!
• Bring different states of static
designs to life using Confluence !
• Check in interactive prototypes!
• Browse to files & link html
in Confluence!
• Store version-controlled raw
artwork files in central
repository! 36!
40. Benefits of design in Agile!
• Faithful to original vision, but with continuous ideation!
Responding to evolving needs!
• Trust your team change your mind!
More latitude to to think on their feet!
• Refinement through evolutionary design!
40!
41. Designing within Agile!
Research! Design! Validation! Maintenance!
Design!
Dev!
You are here!
Implementation!
41!
42. Design Resource Management
Using Greenhopper!
• Use cards to manage the design backlog!
• Separate “Design” Project in JIRA!
• Design Sub-tasks within Development project!
• Filters isolate Design from Dev stream!
• Donʼt pollute the burndown chart and
scare your team lead!
42!
44. 4. From Design to Implementation!
• JIRA as Design ticketing
system!
• Design as part of
development triage system!
• Project management –
design in Agile!
44!
46. 5. Validate!!
• Internal testing – select random people in the elevator!
• Design blitz testing – prepare for a comment deluge!
• External Testing and documentation!
46!
47. User Validation!
Tons of unused
• Internal and external feedback! we need to break up the
white space
space with colors or blocks
all over.! or backgrounds -
something so that its not a
whole lot of white!
+1 Too much
whitespace!
47!
48. 5 Steps to #Winning!
1. Braindump to Brief!
2. Brief to Wireframes!
3. Wireframes to Design!
4. Design to implementation!
5. Implementation to validation!
48!
49. What have we learned?!
• You canʼt plan for everything!
• User feedback can often lead to to changes!
• Shifting priorities, and scope creep!
• Did we miss something?!
• What parts are technically unfeasible?!
49!
50. Communication snags
during Implementation!
• Developers get excited about code! yay! code!
• Designers get excited about
pixel-perfect execution!
• This conflict of interest is
omg. pixels!
irrelevant to everyone else!!
50!
51. Deal with it!
• UI bugs are not personal!
• Direct and personal communication is best!
• Communicate with honesty!
• Flattery will get you everywhere!
51!
