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!
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!
What are our challenges?! Hmmm… Comic Sans or WingDings today? 10!
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 - Conﬂuence! Tabs - Conﬂuence! 11!
Practical Challenges!• Working within product teams !• In different ﬂoors of different buildings!• Working across time-zones! SYD:"• Working across continents! Breakfast! SFO:" Beer oʼclock! 12!
Methodological Challenges!• Design used to happen watch forlornly to separate the Legacy has to adapt or up-front! methodology makes it difﬁcult as suboptimal interfaces are from the “thinking time” deployed!concept of continuous iteration! 14!
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!
1. From Braindump to Brief! 17!
The JIRA Ignite Story !• What is Ignite?!• The problem!• The challenge! 18!
JIRA permissions be able to set thesupport the“We would like to schemes should priorityspecific mapping of version and componentof outgoing e-mails. This way we can haverelated permissions sogenerated by JIRAallowthe priority of e-mails that a project can seta product owner to update a priority of to high when the issue has versions withouthaving to be an admin of the project.Critical or Blocker.” 19!
Donʼt forget to share! 25!
1. From Braindump to Brief!• JIRA.com issue!• Blog post!• Customer Interviews!• Whiteboard scrawl! 26!
2. Brief to Wireframes! 27!
2. From Brief to Wireframes!• Wireframe straight into Conﬂuence using Balsamiq!• Living, breathing documents!• Everyone can edit them! 30!
3. Wireframes to Design! 31!
Atlassian Style Guide! 33!
3. From Wireframes to Design!• Bring different states of static designs to life using Conﬂuence !• Check in interactive prototypes!• Browse to ﬁles & link html in Conﬂuence!• Store version-controlled raw artwork ﬁles in central repository! 36!
4. Design to Implementation! 37!
Design during implementation! 39!
Beneﬁts 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!• Reﬁnement through evolutionary design! 40!
Designing within Agile! Research! Design! Validation! Maintenance!Design! Dev! You are here! Implementation! 41!
Design Resource ManagementUsing 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!
4. From Design to Implementation!• JIRA as Design ticketing system!• Design as part of development triage system!• Project management – design in Agile! 44!
5. Implementation to Validation! 45!
5. Validate!!• Internal testing – select random people in the elevator!• Design blitz testing – prepare for a comment deluge!• External Testing and documentation! 46!
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!
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!
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!
Communication snags during Implementation!• Developers get excited about code! yay! code!• Designers get excited about pixel-perfect execution!• This conﬂict of interest is omg. pixels! irrelevant to everyone else!! 50!
Deal with it!• UI bugs are not personal!• Direct and personal communication is best!• Communicate with honesty!• Flattery will get you everywhere! 51!