Your SlideShare is downloading. ×
0
Designing for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian Tools
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Designing for User Experience (UX) with Atlassian Tools

4,207

Published on

Published in: Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,207
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
57
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Design + Development! Relationship Status: ! Itʼs complicated." 2!
  • 2. Designing for user experience(UX) with Atlassian Tools!Tools you already have, repurposed. Hai!!Samantha Thebridge!UX Designer, Atlassian! 3!
  • 3. 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!
  • 4. User Experience
 is SRS BSNS! 5!
  • 5. 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!
  • 6. UX Disciplines!Information ! HCI &! User! Interaction! Visual! Architect! Cognitive! Research! Design! Design! Psychology! & Validation! 7!
  • 7. 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!
  • 8. 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!
  • 9. What are our challenges?! Hmmm… Comic Sans or WingDings today? 10!
  • 10. 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!
  • 11. 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!
  • 12. 13!
  • 13. 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!
  • 14. Donʼt let design workseparately!! Desktop! Online! Wireframing! Request! Wiki! Application! Tracker! Online! Online Asset! Issue! Collaboration! Management! Tracking! Tools! 15!
  • 15. 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!
  • 16. 1. From Braindump to Brief! 17!
  • 17. The JIRA Ignite Story !•  What is Ignite?!•  The problem!•  The challenge! 18!
  • 18. JIRA permissions be able to set thesupport the“We would like to schemes should priorityspecific mapping of version and componentof outgoing e-mails. This way we can haverelated permissions sogenerated by JIRAallowthe priority of e-mails that a project can seta product owner to update a priority of to high when the issue has versions withouthaving to be an admin of the project.Critical or Blocker.” 19!
  • 19. 20!
  • 20. 21!
  • 21. 22!
  • 22. 23!
  • 23. 24!
  • 24. Donʼt forget to share! 25!
  • 25. 1. From Braindump to Brief!•  JIRA.com issue!•  Blog post!•  Customer Interviews!•  Whiteboard scrawl! 26!
  • 26. 2. Brief to Wireframes! 27!
  • 27. 28!
  • 28. 29!
  • 29. 2. From Brief to Wireframes!•  Wireframe straight into
 Confluence using Balsamiq!•  Living, breathing documents!•  Everyone can edit them! 30!
  • 30. 3. Wireframes to Design! 31!
  • 31. 32!
  • 32. Atlassian Style Guide! 33!
  • 33. 34!
  • 34. 35!
  • 35. 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!
  • 36. 4. Design to Implementation! 37!
  • 37. 38!
  • 38. Design during implementation! 39!
  • 39. 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!
  • 40. Designing within Agile! Research! Design! Validation! Maintenance!Design! Dev! You are here! Implementation! 41!
  • 41. Design Resource ManagementUsing 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!
  • 42. 43!
  • 43. 4. From Design to Implementation!•  JIRA as Design ticketing 
 system!•  Design as part of development triage system!•  Project management – 
 design in Agile! 44!
  • 44. 5. Implementation to Validation! 45!
  • 45. 5. Validate!!•  Internal testing – select random people in the elevator!•  Design blitz testing – prepare for a comment deluge!•  External Testing and documentation! 46!
  • 46. 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!
  • 47. 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!
  • 48. 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!
  • 49. 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!
  • 50. Deal with it!•  UI bugs are not personal!•  Direct and personal communication is best!•  Communicate with honesty!•  Flattery will get you everywhere! 51!
  • 51. Resources!•  http://confluence.atlassian.com/display/AUI/!•  http://ux.stackexchange.com/!•  http://programmers.stackexchange.com/questions /tagged/design!•  http://www.faceyourmanga.com/! 52!
  • 52. Resources!•  http://confluence.atlassian.com/display/AUI/!•  http://ux.stackexchange.com/!•  http://programmers.stackexchange.com/questions /tagged/design!•  http://www.faceyourmanga.com/! 54!

×