atlascamp 2014: designing add-ons
DESCRIPTION
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."TRANSCRIPT
June 3-5, 2014 | Berlin, Germany
Pete Fecteau, Senior Designer, Atlassian
Designing Add-ons
• Senior UX Designer
• 2 Months Old
• Formerly Front-end Dev
• Rubik’s Cube Artist
Who’s this dude?
Handsome as fuck
First Two Months…
DESIGN THINKING
Run down
ADG 2.0
DESIGN TOOLS
DESIGN THINKING
Run down
ADG 2.0
DESIGN TOOLS
DESIGN THINKING
Run down
ADG 2.0
DESIGN TOOLS
DESIGN THINKING
Run down
ADG 2.0
DESIGN TOOLS
DESIGN THINKING
Design Thinking
ADG 2.0
DESIGN TOOLS
• New & Valuable
• Such as…
• Software
• Add-ons
Creativity
FORM vs. CONTEXT
What’s the problem?
Case Study: Rubik’s Cube
Problems3
Case Study: Stash
Reframing the problem
Reframing the problem
Ah Hah!
• Define the problem
• Study the context
• Augment the context
Form vs Context
UNDESIGNING
Design Tools
ADG 2.0
USER SHORTCUTSDESIGN TOOLS
User Testing
• Remote
• Surveys
• Video Chat/Record
• In-person
• Interviews
• Prototype Test
Kinds of User Testing
User Surveys• Wufoo • Google Forms
Remote Video Testing
IShowU HD
HipChat with Video
• One facilitator
• One note taker
• Build a script
• Short answer questions
• Long answer questions
• Small gift
In-person Interviews
• Great prototyping tool
• Half way finished
AUI Sandbox
• Basics
• Context based
• Define the problem
• Time sensitive
Good Questions
Personas
User Personas
William
Harvey
Alana
Emma
• Archetype of Users
• Based on research
• Interviews
• User testing
• Lives and breathes
• Mortal
Alana the Aware
They’re on ADG
Design Walls
• Personas
• Journeys
• Alana clicks on…
• She searches for…
• User quotes
• Internet memes
What’s on a Design Wall?
• Visualize the problem
• Centralized answers
• Expose gaps in journeys
• Makes you look smart
What’s the point?
• User Testing
• Personas
• Design Walls
Design Tools
UNDESIGNING
ADG 2.0
ADG 2.0
DESIGN TOOLS
ADG 2.0
Notifications
Inline help
Help tips
• 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
Wrap up
• Define the problem
• Study the context
• Augment the context
Design Thinking
• User Testing
• Personas
• Design Walls
Design Tools
ADG 2.0
Questions
