Transcript
Page 1: Designing for User Experience (UX) with Atlassian Tools
Page 2: Designing for User Experience (UX) with Atlassian Tools

Design + Development!

2!

Relationship Status: !

Itʼs complicated."

Page 3: Designing for User Experience (UX) with Atlassian Tools

Designing for user experience (UX) with Atlassian Tools!

3!

Tools you already have, repurposed.

Samantha Thebridge!UX Designer, Atlassian!

Hai!!

Page 4: Designing for User Experience (UX) with Atlassian Tools

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!

Page 5: Designing for User Experience (UX) with Atlassian Tools

5!

User Experience is SRS BSNS!

Page 6: Designing for User Experience (UX) with Atlassian Tools

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?

Page 7: Designing for User Experience (UX) with Atlassian Tools

UX Disciplines!

7!

Information !Architect!

HCI &!Cognitive!

Psychology!

User!Research!

& Validation!

Interaction!Design!

Visual!Design!

Page 8: Designing for User Experience (UX) with Atlassian Tools

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!

Page 9: Designing for User Experience (UX) with Atlassian Tools

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!

Page 10: Designing for User Experience (UX) with Atlassian Tools

What are our challenges?!

10!

Hmmm… Comic Sans or

WingDings today?

Page 11: Designing for User Experience (UX) with Atlassian Tools

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!

!=

Page 12: Designing for User Experience (UX) with Atlassian Tools

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!

Page 13: Designing for User Experience (UX) with Atlassian Tools

13!

Page 14: Designing for User Experience (UX) with Atlassian Tools

• 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!

Page 15: Designing for User Experience (UX) with Atlassian Tools

Donʼt let design work separately!!

15!

Desktop!Wireframing!Application!

Online!Request!Tracker!

Online!Collaboration!

Tools!

Online Asset!Management!

Wiki!

Issue!Tracking!

Page 16: Designing for User Experience (UX) with Atlassian Tools

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!

Page 17: Designing for User Experience (UX) with Atlassian Tools

17!

1. From Braindump to Brief!

Page 18: Designing for User Experience (UX) with Atlassian Tools

The JIRA Ignite Story !

• What is Ignite?!•  The problem!•  The challenge!

18!

Page 19: Designing for User Experience (UX) with Atlassian Tools

“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!

Page 20: Designing for User Experience (UX) with Atlassian Tools

20!

Page 21: Designing for User Experience (UX) with Atlassian Tools

21!

Page 22: Designing for User Experience (UX) with Atlassian Tools

22!

Page 23: Designing for User Experience (UX) with Atlassian Tools

23!

Page 24: Designing for User Experience (UX) with Atlassian Tools

24!

Page 25: Designing for User Experience (UX) with Atlassian Tools

Donʼt forget to share!

25!

Page 26: Designing for User Experience (UX) with Atlassian Tools

1. From Braindump to Brief!

•  JIRA.com issue!• Blog post!• Customer Interviews!• Whiteboard scrawl!

26!

Page 27: Designing for User Experience (UX) with Atlassian Tools

27!

2. Brief to Wireframes!

Page 28: Designing for User Experience (UX) with Atlassian Tools

28!

Page 29: Designing for User Experience (UX) with Atlassian Tools

29!

Page 30: Designing for User Experience (UX) with Atlassian Tools

2. From Brief to Wireframes!

• Wireframe straight into Confluence using Balsamiq!

•  Living, breathing documents!• Everyone can edit them!

30!

Page 31: Designing for User Experience (UX) with Atlassian Tools

31!

3. Wireframes to Design!

Page 32: Designing for User Experience (UX) with Atlassian Tools

32!

Page 33: Designing for User Experience (UX) with Atlassian Tools

Atlassian Style Guide!

33!

Page 34: Designing for User Experience (UX) with Atlassian Tools

34!

Page 35: Designing for User Experience (UX) with Atlassian Tools

35!

Page 36: Designing for User Experience (UX) with Atlassian Tools

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!

Page 37: Designing for User Experience (UX) with Atlassian Tools

37!

4. Design to Implementation!

Page 38: Designing for User Experience (UX) with Atlassian Tools

38!

Page 39: Designing for User Experience (UX) with Atlassian Tools

Design during implementation!

39!

Page 40: Designing for User Experience (UX) with Atlassian Tools

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!

Page 41: Designing for User Experience (UX) with Atlassian Tools

Designing within Agile!

41!You are here!Implementation!

Design!Research! Validation!

Design!

Dev!

Maintenance!

Page 42: Designing for User Experience (UX) with Atlassian Tools

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!

Page 43: Designing for User Experience (UX) with Atlassian Tools

43!

Page 44: Designing for User Experience (UX) with Atlassian Tools

4. From Design to Implementation!

•  JIRA as Design ticketing system!

• Design as part of development triage system!

• Project management – design in Agile!

44!

Page 45: Designing for User Experience (UX) with Atlassian Tools

45!

5. Implementation to Validation!

Page 46: Designing for User Experience (UX) with Atlassian Tools

5. Validate!!

•  Internal testing – select random people in the elevator!• Design blitz testing – prepare for a comment deluge!• External Testing and documentation!

46!

Page 47: Designing for User Experience (UX) with Atlassian Tools

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!

Page 48: Designing for User Experience (UX) with Atlassian Tools

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!

Page 49: Designing for User Experience (UX) with Atlassian Tools

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!

Page 50: Designing for User Experience (UX) with Atlassian Tools

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!

Page 51: Designing for User Experience (UX) with Atlassian Tools

Deal with it!

• UI bugs are not personal!• Direct and personal communication is best!• Communicate with honesty!•  Flattery will get you everywhere!

51!

Page 52: Designing for User Experience (UX) with Atlassian Tools

Resources!

•  http://confluence.atlassian.com/display/AUI/!•  http://ux.stackexchange.com/!•  http://programmers.stackexchange.com/questions

/tagged/design!•  http://www.faceyourmanga.com/!

52!

Page 53: Designing for User Experience (UX) with Atlassian Tools
Page 54: Designing for User Experience (UX) with Atlassian Tools

Resources!

•  http://confluence.atlassian.com/display/AUI/!•  http://ux.stackexchange.com/!•  http://programmers.stackexchange.com/questions

/tagged/design!•  http://www.faceyourmanga.com/!

54!


Top Related