View
3.596
Download
8
Embed Size (px)
DESCRIPTION
Citation preview
Design + Development!
2!
Relationship Status: !
Itʼs complicated."
Designing for user experience (UX) with Atlassian Tools!
3!
Tools you already have, repurposed.
Samantha Thebridge!UX Designer, Atlassian!
Hai!!
Integrating Design and Dev!
• What is User Experience Design?!
• What are our challenges?!
• 5 simple steps to solve them!
• Profit, or, what have we learned?!
4!
5!
User Experience is SRS BSNS!
I need it to do all this!
What is User Experience?!
6!But I want it to feel like this
UX is making things simple, easy and pleasurable to use.!
Or even this?
UX Disciplines!
7!
Information !Architect!
HCI &!Cognitive!
Psychology!
User!Research!
& Validation!
Interaction!Design!
Visual!Design!
Interaction design!
• Interaction components comprising atomic elements!• A vast mental library of interaction patterns!• Anticipating user behavior and expectation!• Empower the user to hit [submit] and help them
recover if they did something they didnʼt mean to do!• If itʼs complex make it discoverable, learnable!
8!
Interaction!Design!
Visual design!
• Visual perception: alignment, spacing, dynamics!• Color, fonts, judicious use of iconography !• Gradients, rounded corners and drop shadows –
stuff developers hate!• Invisible design helps make software intuitive,
learnable, simple !
9!
Visual!Design!
What are our challenges?!
10!
Hmmm… Comic Sans or
WingDings today?
Design Challenges!
• The unique nature of our users!
11!
• 5 products with their own visual heritage!• Aiming for visual parity while remaining faithful to the unique aims of each product!
• Rolling visual changes out from one product to the next!
• Ensuring that pattern use is communicated !
Page Chrome - JIRA! Page Chrome - Confluence!Tabs - JIRA! Tabs - Confluence!
!=
Practical Challenges!
• Working within product teams !• In different floors of
different buildings!• Working across time-zones!• Working across continents!
12!
SYD:"Breakfast!
SFO:"Beer oʼclock!
13!
• Design used to happen up-front!
Methodological Challenges!
14!
• Legacy methodology makes it difficult to separate the “thinking time” from the concept of continuous iteration!
• Design has to adapt or watch forlornly as suboptimal interfaces are deployed!
Donʼt let design work separately!!
15!
Desktop!Wireframing!Application!
Online!Request!Tracker!
Online!Collaboration!
Tools!
Online Asset!Management!
Wiki!
Issue!Tracking!
5 Steps to #Winning!
16!
1. Braindump to Brief!2. Brief to Wireframes!3. Wireframes to Design!4. Design to implementation!5. Implementation to validation!
17!
1. From Braindump to Brief!
The JIRA Ignite Story !
• What is Ignite?!• The problem!• The challenge!
18!
“We would like to be able to set the priority of outgoing e-mails. This way we can have the priority of e-mails generated by JIRA set to high when the issue has a priority of Critical or Blocker.”
JIRA permissions schemes should support the specific mapping of version and component related permissions so that a project can allow a product owner to update versions without having to be an admin of the project.
19!
20!
21!
22!
23!
24!
Donʼt forget to share!
25!
1. From Braindump to Brief!
• JIRA.com issue!• Blog post!• Customer Interviews!• Whiteboard scrawl!
26!
27!
2. Brief to Wireframes!
28!
29!
2. From Brief to Wireframes!
• Wireframe straight into Confluence using Balsamiq!
• Living, breathing documents!• Everyone can edit them!
30!
31!
3. Wireframes to Design!
32!
Atlassian Style Guide!
33!
34!
35!
3. From Wireframes to Design!
• Bring different states of static designs to life using Confluence!
• Check in interactive prototypes!• Browse to files & link html
in Confluence!• Store version-controlled raw
artwork files in central repository! 36!
37!
4. Design to Implementation!
38!
Design during implementation!
39!
Benefits of design in Agile!• Faithful to original vision, but with continuous ideation!• Trust your team to think on their feet!
40!
• Responding to evolving needs!• More latitude to change your mind!• Refinement through evolutionary design!
Designing within Agile!
41!You are here!Implementation!
Design!Research! Validation!
Design!
Dev!
Maintenance!
Design Resource Management Using 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!
43!
4. From Design to Implementation!
• JIRA as Design ticketing system!
• Design as part of development triage system!
• Project management – design in Agile!
44!
45!
5. Implementation to Validation!
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!
47!
Tons of unused white space all over.!
+1 Too much whitespace!
we need to break up the space with colors or blocks or backgrounds - something so that its not a whole lot of white!
• Internal and external feedback!
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!
50!
• Designers get excited about pixel-perfect execution!
• This conflict of interest is irrelevant to everyone else!!
yay! code!
omg. pixels!
Deal with it!
• UI bugs are not personal!• Direct and personal communication is best!• Communicate with honesty!• Flattery will get you everywhere!
51!
Resources!
• http://confluence.atlassian.com/display/AUI/!• http://ux.stackexchange.com/!• http://programmers.stackexchange.com/questions
/tagged/design!• http://www.faceyourmanga.com/!
52!
Resources!
• http://confluence.atlassian.com/display/AUI/!• http://ux.stackexchange.com/!• http://programmers.stackexchange.com/questions
/tagged/design!• http://www.faceyourmanga.com/!
54!