Designing for User Experience (UX) with Atlassian Tools
7 likes•10,280 views
The document discusses integrating design and development. It outlines 5 steps to solve challenges: 1) braindump to brief, 2) brief to wireframes, 3) wireframes to design, 4) design to implementation, and 5) implementation to validation. Key points include using tools like JIRA and Confluence for collaboration, bringing designs to life with prototypes, and validating designs through internal and external testing.
![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!](https://image.slidesharecdn.com/cl-03-110607084317-phpapp02/85/Designing-for-User-Experience-UX-with-Atlassian-Tools-8-320.jpg)
Designing for User Experience (UX) with Atlassian Tools
- 2. Design + Development! Relationship Status: ! Itʼs complicated." 2!
- 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!
- 5. User Experience is SRS BSNS! 5!
- 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!
- 7. UX Disciplines! Information ! HCI &! User! Interaction! Visual! Architect! Cognitive! Research! Design! Design! Psychology! & Validation! 7!
- 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!
- 13. 13!
- 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!
- 15. Donʼt let design work separately!! Desktop! Online! Wireframing! Request! Wiki! Application! Tracker! Online! Online Asset! Issue! Collaboration! Management! Tracking! Tools! 15!
- 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!
- 17. 1. From Braindump to Brief! 17!
- 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!
- 20. 20!
- 21. 21!
- 22. 22!
- 23. 23!
- 24. 24!
- 25. Donʼt forget to share! 25!
- 26. 1. From Braindump to Brief! • JIRA.com issue! • Blog post! • Customer Interviews! • Whiteboard scrawl! 26!
- 27. 2. Brief to Wireframes! 27!
- 28. 28!
- 29. 29!
- 30. 2. From Brief to Wireframes! • Wireframe straight into Confluence using Balsamiq! • Living, breathing documents! • Everyone can edit them! 30!
- 31. 3. Wireframes to Design! 31!
- 32. 32!
- 33. Atlassian Style Guide! 33!
- 34. 34!
- 35. 35!
- 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!
- 37. 4. Design to Implementation! 37!
- 38. 38!
- 39. Design during implementation! 39!
- 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!
- 43. 43!
- 44. 4. From Design to Implementation! • JIRA as Design ticketing system! • Design as part of development triage system! • Project management – design in Agile! 44!
- 45. 5. Implementation to Validation! 45!
- 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!
- 52. Resources! • http://confluence.atlassian.com/display/AUI/! • http://ux.stackexchange.com/! • http://programmers.stackexchange.com/questions /tagged/design! • http://www.faceyourmanga.com/! 52!
- 54. Resources! • http://confluence.atlassian.com/display/AUI/! • http://ux.stackexchange.com/! • http://programmers.stackexchange.com/questions /tagged/design! • http://www.faceyourmanga.com/! 54!