AtlasCamp 2014: Designing Add-ons

1,556 views
1,469 views

Published on

Putting the Atlassian Design Guidelines to good use is only half the battle. To design a truly great add-on, you need to think deeply about the full customer experience – not just the styles an add-on uses on the page, but how someone interacts with the Atlassian product and your add-on. How do you lay out elements harmoniously with the rest of the application? How do you design a great on boarding experience? This session will show you how to go from "good code" to "great add-on."

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,556
On SlideShare
0
From Embeds
0
Number of Embeds
299
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

AtlasCamp 2014: Designing Add-ons

  1. 1. June 3-5, 2014 | Berlin, Germany
  2. 2. Pete Fecteau, Senior Designer, Atlassian Designing Add-ons
  3. 3. • Senior UX Designer • 2 Months Old • Formerly Front-end Dev • Rubik’s Cube Artist Who’s this dude? Handsome as fuck
  4. 4. First Two Months…
  5. 5. DESIGN THINKING Run down ADG 2.0 DESIGN TOOLS
  6. 6. DESIGN THINKING Run down ADG 2.0 DESIGN TOOLS
  7. 7. DESIGN THINKING Run down ADG 2.0 DESIGN TOOLS
  8. 8. DESIGN THINKING Run down ADG 2.0 DESIGN TOOLS
  9. 9. DESIGN THINKING Design Thinking ADG 2.0 DESIGN TOOLS
  10. 10. • New & Valuable • Such as… • Software • Add-ons Creativity
  11. 11. FORM vs. CONTEXT
  12. 12. What’s the problem?
  13. 13. Case Study: Rubik’s Cube
  14. 14. Problems3
  15. 15. Case Study: Stash
  16. 16. Reframing the problem
  17. 17. Reframing the problem
  18. 18. Ah Hah!
  19. 19. • Define the problem • Study the context • Augment the context Form vs Context
  20. 20. UNDESIGNING Design Tools ADG 2.0 USER SHORTCUTSDESIGN TOOLS
  21. 21. User Testing
  22. 22. • Remote • Surveys • Video Chat/Record • In-person • Interviews • Prototype Test Kinds of User Testing
  23. 23. User Surveys • Wufoo • Google Forms
  24. 24. Remote Video Testing IShowU HD HipChat with Video
  25. 25. • One facilitator • One note taker • Build a script • Short answer questions • Long answer questions • Small gift In-person Interviews
  26. 26. • Great prototyping tool • Half way finished AUI Sandbox
  27. 27. • Basics • Context based • Define the problem • Time sensitive Good Questions
  28. 28. Personas
  29. 29. User Personas William Harvey Alana Emma
  30. 30. • Archetype of Users • Based on research • Interviews • User testing • Lives and breathes • Mortal Alana the Aware
  31. 31. They’re on ADG
  32. 32. Design Walls
  33. 33. • Personas • Journeys • Alana clicks on… • She searches for… • User quotes • Internet memes What’s on a Design Wall?
  34. 34. • Visualize the problem • Centralized answers • Expose gaps in journeys • Makes you look smart What’s the point?
  35. 35. • User Testing • Personas • Design Walls Design Tools
  36. 36. UNDESIGNING ADG 2.0 ADG 2.0 DESIGN TOOLS ADG 2.0
  37. 37. Notifications
  38. 38. Inline help
  39. 39. Help tips
  40. 40. • Help system • Notifications • Flat buttons • Better form validation and help tips • Error pages (404, etc) • Icon font expansion • Brand guidelines • Logos, type, colors, illustration styles, etc ADG 2 release
  41. 41. Wrap up
  42. 42. • Define the problem • Study the context • Augment the context Design Thinking
  43. 43. • User Testing • Personas • Design Walls Design Tools
  44. 44. ADG 2.0
  45. 45. Questions
  46. 46. Email Me pfecteau@atlassian.com Book time with me at AtlasCamp

×