[That Conference 2016] Not Just Arts & Crafts: A Developer's Guide to Incorporating Lean UX Practices into the Development Process

Given at That Conference 2016

A good app design is more than just modifying Bootstrap and clever usage of Font Awesome — it starts with a solid understanding of your users. In this session we’ll walk through lightweight and collaborative UX techniques that you can use in your development process to better understand your users and their workflows. We'll demonstrate how user experience goes beyond UI design and discuss real world examples of how knowing your users can put your application ahead of the pack. You’ll leave this session with techniques that you can apply to your current team without the need for complicated software or a complete shift in your corporate culture.

No UX experience? No problem! We’ll introduce you to lean UX practices that you can start using with your teams right away.

Come sit around the (metaphorical) campfire while we sing Kumbaya and learn how to get in touch with your users on an emotional level.

Transcript

3. Not Just Arts & Crafts: 
 A Developer's Guide to Incorporating Lean UX Practices into the Development Process Rachel Krause @rachelbabiak // #ThatConference - Came from a waterfall environment - Didn’t buy in to Lean UX - Saw how hard it was to keep up with all of the deliverables in two weeks - Had to adapt and use what worked for the team
4. - Multiple scrum teams - PO, SM, Dev(s), QA(s), UX - UX consulting - UX coaching - Practice and preach lightweight and collaborative UX
5. UX / UI - UX is more than just a UI or pretty picture - Not just Bootstrap and Font Awesome
6. UX / UI - UX is about the experience a user has when using your application
7. - Personas identifiable through different themes - Many pizza options, how do they differentiate? - Makes waiting for pizza more delightful - Domino’s consistently outpaced Pizza Hut in same store sales from 2011 through 2014
8. - Personas identifiable through different themes - Many pizza options, how do they differentiate? - Makes waiting for pizza more delightful - Domino’s consistently outpaced Pizza Hut in same store sales from 2011 through 2014
9. What about you? - UX embedded on team - UX external from team - No UX
10. Genius Designer http://blog.invisionapp.com/genius-designer-mindset-experimentation - Assumes their work is correct - Work is done up front or outside of development team - Developers are not part of the process - Pixel perfect mockups / comps delivered to developers to implement - Technical constraints / design feedback is irrelevant because the design is the best design possible - Design is not the problem; users are ignorant - This used to be me - http://blog.invisionapp.com/genius-designer-mindset-experimentation
11. Mindset of Experimentation http://blog.invisionapp.com/genius-designer-mindset-experimentation - No matter how brilliant or experienced they are, they accept that they’ll be wrong about something - Figure out what they’re wrong about as quickly as possible - Release early and often - Get feedback from users - Pivot if necessary - http://blog.invisionapp.com/genius-designer-mindset-experimentation
12. Accept failure Reduce waste Collaborate - Jeff Gothelf, Lean UX - Lean UX principles, tactics and techniques for teams - Focused on the experience being designed, not the deliverables - Main principles - Don’t be afraid to fail - Mindset of experimentation - Failure in software in some capacity is guaranteed - Accept this reality and plan for it - Reduce waste - Don’t rely on heavy artifacts - UX activities are not necessarily deliverables - Collaborate - Get everyone on the same page
13. Trying to fit UX into the Agile process: http://uxreactions.com/post/124329440924/trying-to-fit-ux-into-the-agile-process
14. Trying to do design and development in the same sprint: http://uxreactions.com/post/143482973394/trying-to-do-design-and-development-in-the-same
15. Big Design - Not just in waterfall environments - Mockups done before development begins - Cake example - Start with cake, then filling, then decorating, then final cake - If filling doesn’t taste good with cake, then what? - Pivot but then the end result is not what the picture looked like - Stakeholders still have picture in their head as end result - Waste of mockups - Lose-lose situation for stakeholder - High probability that the end result will not look like what was designed - Humidity in kitchen; unexpected things come up
16. Lean UX - Wish list of features - Expectation: priority, features, etc. will change as the product evolves - There is no pretty picture to start off - Can be scary to the team, including UX - People like to think big picture - What if client runs out of money? - Have you waited too long to incorporate UX? (frosting, decoration) - Bake in UX at each step - Create a little, test it, create a little more - Can stop at any stage
17. https://www.nianticlabs.com/blog/e3-2016/ - Many of these refinements are inspired by feedback received from field testers - https://www.nianticlabs.com/blog/e3-2016/
18. June 15, 2016 https://www.nianticlabs.com/blog/e3-2016/ - Many of these refinements are inspired by feedback received from field testers - https://www.nianticlabs.com/blog/e3-2016/
19. Best UIs are designed by the entire team - Sum up theory intro - Everyone has used software before and knows what they like and don’t like - Different roles bring new perspectives to the design process - Everyone is a designer in their own way
20. What We Do Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel tempor justo, eget placerat purus. In ut augue sit amet nisi viverra ullamcorper. How We Do It Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel tempor justo, eget placerat purus. In ut augue sit amet nisi viverra ullamcorper. Our Cool Website This carousel will show you lots of content
 and only give you 5 seconds to read it. COMPANY NAME - Devs can point out high effort - QAs can identify potential pain points - POs can speak for the client
21. What We Do Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel tempor justo, eget placerat purus. In ut augue sit amet nisi viverra ullamcorper. How We Do It Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel tempor justo, eget placerat purus. In ut augue sit amet nisi viverra ullamcorper. Our Cool Website This carousel will show you lots of content
 and only give you 5 seconds to read it. COMPANY NAME What We Do How We Do It Contact - Devs can point out high effort - QAs can identify potential pain points - POs can speak for the client
22. What We Do Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel tempor justo, eget placerat purus. In ut augue sit amet nisi viverra ullamcorper. How We Do It Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel tempor justo, eget placerat purus. In ut augue sit amet nisi viverra ullamcorper. COMPANY NAME What We Do How We Do It Contact We Build for You We create custom software. View our work and get to know us better. View Our Work - Devs can point out high effort - QAs can identify potential pain points - POs can speak for the client
23. What We Do How We Do It COMPANY NAME What We Do How We Do It Contact We Build for You We create custom software. View our work and get to know us better. View Our Work Get in Touch - Devs can point out high effort - QAs can identify potential pain points - POs can speak for the client
24. No complicated software necessary - Whiteboard, sketch preferred - Boxes and arrows are all you need - ”I can’t draw” - Google Slides / PowerPoint / Keynote if more fidelity needed - Something that will be used by the entire team without a large learning curve - No time for high-fidelity mockups and UX deliverables - Don’t think of UX activities as deliverables to clients - Continuous discovery = info has potential to change - More work to keep artifacts up to date if only one person can make changes
25. - Won’t feel attached if not a lot of time has been put in
26. Personas - Traditional personas - Heavily researched representations of the company’s target audience - Validated ahead of project - Packaged nicely and presented to leadership
27. https://xtensio.com/user-persona/
28. Proto-Personas - Proto-personas - Originate from brainstorming sessions - Based on gut feel and domain expertise - Who is using system - What is their motivation - Gives organization a starting point to develop design hypotheses - Do you use personas now? - Roles - Narrow down to main types of users, then define specific people - Can create multiple personas for each role
29. Name & Picture Biographical Information Pain Points & Needs Potential Solutions James • 42 years old • Married, 2 kids • Paid hourly • Been with company for 5+ years • Not tech savvy • Uses iPhone 5S as personal phone • Doesn’t have a lot of time to go on the computer • Needs access to all areas of the warehouse • Keep app restrictions light • Tasks have to be quick and easy • Needs multiple access points into the application - Name & picture - Refer to this person by name - Picture doesn’t need to be pretty - Can envision a specific person or make someone up - Biographical information - Base on user research or assumptions from team - This information can/will change as you meet your actual users - Who is this person? What devices do they use? Where are they coming from? - Pain Points & Needs - User’s needs and frustrations with the current product or situation - Specific pain points your product is trying to solve - Why do they need this application? - What don’t they like about software? - Potential Solutions - Capture features and solution ideas - How can we help? - Solutions to pain points
30. - Get everyone on the same page about who your users are - Help make decisions on backlog and functionality - Creates empathy for users - Prevents team and stakeholders from making decisions that don’t affect the user
31. - Develop as a team and/or with stakeholders - Stakeholders may have an idea in mind but be completely off base - Personas are living and can change as you discover new information - If you can validate with real users, it means your assumptions were correct
32. - Exercise to try out for first time - Create a superhero
33. picture Biography Weaknesses Goals ⚡ From planet krypton ⚡ Alias: Clark Kent ⚡ Works at Daily Planet Newspaper ⚡ Ability to fly ⚡ Kryptonite ⚡ Lex Luther ⚡ Lois Lane ⚡ Help people ⚡ Prevent disasters ⚡ Make his father proud ⚡ Maintain Clark Kent image
34. User Journeys - A user journey is a series of steps which represent a scenario in which a user might interact with the feature you are designing. - A way to understand how users walk through a specific feature - Understand user pain points and mindset
35. [Persona] wants to [action] because [need], but [friction]. James wants to check in an inbound shipment because a railcar just arrived, but he doesn’t have accurate weights yet. - A scenario is a plausible future story about a persona using the feature from start to finish. - Pain point from personas - Looks like a user story; use this in your PBIs
36. Five basic sections - Persona & Scenario - Journey Steps - First step is trigger - Last step is right after user is done using the feature - Everything in between is the user using the feature - Needs, Activities & Expectations - What is the user doing? - What devices are they using? - Where are they? - User’s Emotional State - Scale of delightful (+) and frustrating (-) - Include quotes from actual user interview - Opportunities for Improvement - How can we bring the dot from below the line to above the line? - Come up with solutions to pain points as a group - Compelling solutions can change constraints - Quick wins vs. high effort / high value
37. - Whiteboarding sessions - Goals for session / user needs - Acceptance criteria / feature needs - Drawing / ideas on board - Journey map represented - Can start development from this - Doesn’t need to have all five sections - Apply what works best for your team - If something is too complicated, the team won’t use it
38. - Whiteboarding sessions - Goals for session / user needs - Acceptance criteria / feature needs - Drawing / ideas on board - Journey map represented - Can start development from this - Doesn’t need to have all five sections - Apply what works best for your team - If something is too complicated, the team won’t use it
39. Design Sessions - Get team / stakeholders on the same page when it comes to design direction
41. Jeff Gothelf, Lean UX - Everyone thinks they’re on the same page, but each has a slightly different image in their head - The team can make decisions together to come up with the best solution
42. When? Proto-Personas User Journeys Design Sessions - Proto-personas - Beginning of a project - Anytime you need more info on users - User testing - Continue validating throughout the project - Journey maps & scenarios - Not enough info for acceptance criteria - Not a clear workflow established for users - Design session - Same page about layout - Design and development in same sprint
43. - More meetings = less attendees - Utilize meetings currently on the books
44. Salesforce UX, Making Design Core to the Agile Process by Ian Schoen - Lightning experience, a redesign of their core web-based product - 85 designers, 60 scrum teams - Revisited user goals, pain points and needs (personas) - Collaborating brings out ideas from every perspective - Lightweight design keeps everyone on an even playing field - Product leadership from UX, product management and engineering came together for big picture ideas - Smaller scale teams during brainstorming process, then brought initial ideas to greater product team - Regular UX reviews - Elevated UI-related bugs - Brought developers into design process earlier - Monthly sprint reviews and Friday lunch demos
45. Salesforce UX, Making Design Core to the Agile Process by Ian Schoen “We had to know the right thing to build before we could build the thing right.” - Lightning experience, a redesign of their core web-based product - 85 designers, 60 scrum teams - Revisited user goals, pain points and needs (personas) - Collaborating brings out ideas from every perspective - Lightweight design keeps everyone on an even playing field - Product leadership from UX, product management and engineering came together for big picture ideas - Smaller scale teams during brainstorming process, then brought initial ideas to greater product team - Regular UX reviews - Elevated UI-related bugs - Brought developers into design process earlier - Monthly sprint reviews and Friday lunch demos
46. Salesforce UX, Making Design Core to the Agile Process by Ian Schoen “Designers, developers and product managers each have their own point of view on how to make products successful…” - Lightning experience, a redesign of their core web-based product - 85 designers, 60 scrum teams - Revisited user goals, pain points and needs (personas) - Collaborating brings out ideas from every perspective - Lightweight design keeps everyone on an even playing field - Product leadership from UX, product management and engineering came together for big picture ideas - Smaller scale teams during brainstorming process, then brought initial ideas to greater product team - Regular UX reviews - Elevated UI-related bugs - Brought developers into design process earlier - Monthly sprint reviews and Friday lunch demos
47. Salesforce UX, Making Design Core to the Agile Process by Ian Schoen “The Sharpie proved to be one of the most democratic tools in our process. Anyone could pick one up and put their idea out into the world.” - Lightning experience, a redesign of their core web-based product - 85 designers, 60 scrum teams - Revisited user goals, pain points and needs (personas) - Collaborating brings out ideas from every perspective - Lightweight design keeps everyone on an even playing field - Product leadership from UX, product management and engineering came together for big picture ideas - Smaller scale teams during brainstorming process, then brought initial ideas to greater product team - Regular UX reviews - Elevated UI-related bugs - Brought developers into design process earlier - Monthly sprint reviews and Friday lunch demos
49. @rachelbabiak // #ThatConference linkedin.com/in/rachelkrau speakerdeck.com/rachelkrau Got a story?