AtlasCamp 2014: Designing Add-ons
-
Upload
atlassian -
Category
Technology
-
view
1.255 -
download
4
description
Transcript of AtlasCamp 2014: Designing Add-ons
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