Designing for User Experience (UX) with Atlassian Tools

Download Designing for User Experience (UX) with Atlassian Tools

Post on 17-Oct-2014




8 download

Embed Size (px)




<p>Design + Development!</p> <p>2!</p> <p>Relationship Status: !</p> <p>Its complicated."</p> <p>Designing for user experience (UX) with Atlassian Tools!</p> <p>3!</p> <p>Tools you already have, repurposed. </p> <p>Samantha Thebridge!UX Designer, Atlassian!</p> <p>Hai!!</p> <p>Integrating Design and Dev! What is User Experience Design?!</p> <p> What are our challenges?!</p> <p> 5 simple steps to solve them!</p> <p> Profit, or, what have we learned?!</p> <p>4!</p> <p>5!</p> <p>User Experience is SRS BSNS!</p> <p>I need it to do all this!</p> <p>What is User Experience?!</p> <p>6!But I want it to feel like this</p> <p>UX is making things simple, easy and pleasurable to use.!</p> <p>Or even this?</p> <p>UX Disciplines!</p> <p>7!</p> <p>Information !Architect!</p> <p>HCI &amp;!Cognitive!</p> <p>Psychology!</p> <p>User!Research!</p> <p>&amp; Validation!</p> <p>Interaction!Design!</p> <p>Visual!Design!</p> <p>Interaction design!</p> <p> 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 </p> <p>recover if they did something they didnt mean to do! If its complex make it discoverable, learnable!</p> <p>8!</p> <p>Interaction!Design!</p> <p>Visual design!</p> <p> Visual perception: alignment, spacing, dynamics! Color, fonts, judicious use of iconography ! Gradients, rounded corners and drop shadows </p> <p>stuff developers hate! Invisible design helps make software intuitive,</p> <p> learnable, simple !</p> <p>9!</p> <p>Visual!Design!</p> <p>What are our challenges?!</p> <p>10!</p> <p>Hmmm Comic Sans or </p> <p>WingDings today? </p> <p>Design Challenges!</p> <p> The unique nature of our users!</p> <p>11!</p> <p> 5 products with their own visual heritage! Aiming for visual parity while remaining faithful to the unique aims of each product!</p> <p> Rolling visual changes out from one product to the next!</p> <p> Ensuring that pattern use is communicated !</p> <p>Page Chrome - JIRA! Page Chrome - Confluence!Tabs - JIRA! Tabs - Confluence!</p> <p>!= </p> <p>Practical Challenges!</p> <p> Working within product teams ! In different floors of </p> <p>different buildings! Working across time-zones! Working across continents!</p> <p>12!</p> <p>SYD:"Breakfast!</p> <p>SFO:"Beer oclock!</p> <p>13!</p> <p> Design used to happen up-front!</p> <p>Methodological Challenges!</p> <p>14!</p> <p> Legacy methodology makes it difficult to separate the thinking time from the concept of continuous iteration!</p> <p> Design has to adapt or watch forlornly as suboptimal interfaces are deployed!</p> <p>Dont let design work separately!!</p> <p>15!</p> <p>Desktop!Wireframing!Application!</p> <p>Online!Request!Tracker!</p> <p>Online!Collaboration!</p> <p>Tools!</p> <p>Online Asset!Management!</p> <p>Wiki!</p> <p>Issue!Tracking!</p> <p>5 Steps to #Winning!</p> <p>16!</p> <p>1. Braindump to Brief!2. Brief to Wireframes!3. Wireframes to Design!4. Design to implementation!5. Implementation to validation!</p> <p>17!</p> <p>1. From Braindump to Brief!</p> <p>The JIRA Ignite Story !</p> <p> What is Ignite?! The problem! The challenge!</p> <p>18!</p> <p>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. </p> <p>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. </p> <p>19!</p> <p>20!</p> <p>21!</p> <p>22!</p> <p>23!</p> <p>24!</p> <p>Dont forget to share!</p> <p>25!</p> <p>1. From Braindump to Brief!</p> <p> issue! Blog post! Customer Interviews! Whiteboard scrawl!</p> <p>26!</p> <p>27!</p> <p>2. Brief to Wireframes!</p> <p>28!</p> <p>29!</p> <p>2. From Brief to Wireframes!</p> <p> Wireframe straight into Confluence using Balsamiq!</p> <p> Living, breathing documents! Everyone can edit them!</p> <p>30!</p> <p>31!</p> <p>3. Wireframes to Design!</p> <p>32!</p> <p>Atlassian Style Guide!</p> <p>33!</p> <p>34!</p> <p>35!</p> <p>3. From Wireframes to Design!</p> <p> Bring different states of static designs to life using Confluence!</p> <p> Check in interactive prototypes! Browse to files &amp; link html </p> <p>in Confluence! Store version-controlled raw</p> <p> artwork files in central repository! 36!</p> <p>37!</p> <p>4. Design to Implementation!</p> <p>38!</p> <p>Design during implementation!</p> <p>39!</p> <p>Benefits of design in Agile! Faithful to original vision, but with continuous ideation! Trust your team to think on their feet!</p> <p>40!</p> <p> Responding to evolving needs! More latitude to change your mind! Refinement through evolutionary design!</p> <p>Designing within Agile!</p> <p>41!You are here!Implementation!</p> <p>Design!Research! Validation!</p> <p>Design!</p> <p>Dev!</p> <p>Maintenance!</p> <p>Design Resource Management Using Greenhopper! Use cards to manage the design backlog!</p> <p> Separate Design Project in JIRA! Design Sub-tasks within Development project!</p> <p> Filters isolate Design from Dev stream! Dont pollute the burndown chart and </p> <p>scare your team lead!</p> <p>42!</p> <p>43!</p> <p>4. From Design to Implementation!</p> <p> JIRA as Design ticketing system!</p> <p> Design as part of development triage system!</p> <p> Project management design in Agile!</p> <p>44!</p> <p>45!</p> <p>5. Implementation to Validation!</p> <p>5. Validate!!</p> <p> Internal testing select random people in the elevator! Design blitz testing prepare for a comment deluge! External Testing and documentation!</p> <p>46!</p> <p>User Validation!</p> <p>47!</p> <p>Tons of unused white space all over.!</p> <p>+1 Too much whitespace!</p> <p>we need to break up the space with colors or blocks or backgrounds - something so that its not a whole lot of white!</p> <p> Internal and external feedback!</p> <p>5 Steps to #Winning!</p> <p>1. Braindump to Brief!2. Brief to Wireframes!3. Wireframes to Design!4. Design to implementation!5. Implementation to validation!</p> <p>48!</p> <p>What have we learned?!</p> <p> You cant 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?!</p> <p>49!</p> <p>Communication snags during Implementation! Developers get excited about code!</p> <p>50!</p> <p> Designers get excited about pixel-perfect execution!</p> <p> This conflict of interest is irrelevant to everyone else!!</p> <p>yay! code!</p> <p>omg. pixels!</p> <p>Deal with it!</p> <p> UI bugs are not personal! Direct and personal communication is best! Communicate with honesty! Flattery will get you everywhere!</p> <p>51!</p> <p>Resources!</p> <p>!!</p> <p>/tagged/design!!</p> <p>52!</p> <p>Resources!</p> <p>!!</p> <p>/tagged/design!!</p> <p>54!</p>