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."

1. June 3-5, 2014 | Berlin, Germany

2. Pete Fecteau, Senior Designer, Atlassian
Designing Add-ons

3. • Senior UX Designer
• 2 Months Old
• Formerly Front-end Dev
• Rubik’s Cube Artist
Who’s this dude?
Handsome as fuck

4. First Two Months…

5. DESIGN THINKING
Run down
ADG 2.0
DESIGN TOOLS

6. DESIGN THINKING
Run down
ADG 2.0
DESIGN TOOLS

7. DESIGN THINKING
Run down
ADG 2.0
DESIGN TOOLS

8. DESIGN THINKING
Run down
ADG 2.0
DESIGN TOOLS

9. DESIGN THINKING
Design Thinking
ADG 2.0
DESIGN TOOLS

10. • New & Valuable
• Such as…
• Software
• Add-ons
Creativity

11. FORM vs. CONTEXT

13. What’s the problem?

15. Case Study:
Rubik’s Cube

16. Problems3

20. Case Study:
Stash

21. Reframing the problem

22. Reframing the problem

23. Ah Hah!

24. • Define the problem
• Study the context
• Augment the context
Form vs Context

25. UNDESIGNING
Design Tools
ADG 2.0
USER SHORTCUTSDESIGN TOOLS

26. User Testing

27. • Remote
• Surveys
• Video Chat/Record
• In-person
• Interviews
• Prototype Test
Kinds of User Testing

28. User Surveys
• Wufoo
• Google Forms

29. Remote Video Testing
IShowU HD
HipChat with Video

30. • One facilitator
• One note taker
• Build a script
• Short answer questions
• Long answer questions
• Small gift
In-person Interviews

31. • Great prototyping tool
• Half way finished
AUI Sandbox

32. • Basics
• Context based
• Define the problem
• Time sensitive
Good Questions

33. Personas

34. User Personas
William
Harvey
Alana
Emma

35. • Archetype of Users
• Based on research
• Interviews
• User testing
• Lives and breathes
• Mortal
Alana the Aware

36. They’re on ADG

37. Design Walls

38. • Personas
• Journeys
• Alana clicks on…
• She searches for…
• User quotes
• Internet memes
What’s on a Design Wall?

39. • Visualize the problem
• Centralized answers
• Expose gaps in journeys
• Makes you look smart
What’s the point?

40. • User Testing
• Personas
• Design Walls
Design Tools

41. UNDESIGNING
ADG 2.0
ADG 2.0
DESIGN TOOLS
ADG 2.0

42. Notifications

43. Inline help

44. Help tips

45. • 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

46. Wrap up

47. • Define the problem
• Study the context
• Augment the context
Design Thinking

48. • User Testing
• Personas
• Design Walls
Design Tools

49. ADG 2.0

50. Questions

51. Email Me
pfecteau@atlassian.com
Book time with me at AtlasCamp