Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Design Sprint

2,327 views

Published on

Design Sprint presentation for GDG Asuncion, realized in 9 oct 2015 by Google UI/UX Experts Nelson Vasconcelos & Ana Paula Batista

Published in: Design

Design Sprint

  1. 1. Take a seat and relax! =) We will start soon
  2. 2. Welcome to a Design Sprint
  3. 3. Agenda 09:00 Introduction 09:15 About Design Sprint 09:30 Understand 10:15 Coffee time :) 10:45 Define 12:15 Lunch o/ 13:30 Material Design 14:15 Diverge 15:15 Decide 15:30 Coffee time :) 15:45 Prototype 17:15 Validate 17:45 Closing
  4. 4. Design Sprint?
  5. 5. A design sprint is basically a structured brainstorming, based on Design Thinking and Agile Development
  6. 6. Where it came from? Gamestorming The Gamestorming Book Design Thinking IDEO Stanford d.school Agile Manifesto Scrum, XP, Crystal Clear etc.
  7. 7. Where it came from? Jake Knapp @jakek http://gv.com/sprint Sprint: The Book Em breve
  8. 8. Why? 1 2 3 4 Idea Build Launch Learn In Agile Processes, whe need to build and launch in order to learn It has a high cost and time User feedback frequently comes after launch
  9. 9. Why? 1 2 3 4 Idea Build Launch Learn Shortcut to learning, without having to build and launch. Helps give a route to freezed projects. Engagement with the solution. Knowledge shared between team User focus. Design Sprint
  10. 10. Design is not an individual sport. So, we encourage sprints to include all points of view, and thus align ourselves to a new world together.
  11. 11. Before the sprint • Write a design brief – Define the challenge, timeline to launch • Invite team • Schedule user testing • Schedule lightning talks • Preparate slide deck, rooms
  12. 12. During the sprint • Prepare the space • Facilitate • Resolve conflicts • Document – Daily check-ins, daily summaries • Celebrate! :)
  13. 13. After the design sprint • Update path to launch • Summarize • Organize/Document • Survey team • Reflect • Plan next sprint
  14. 14. What are the steps of a design sprint?
  15. 15. Understanding a bit more 1. Understand: Dive into the user information, technical requirements, competitive analysis… 2. Define: Explore opportunities and define business focus 3. Diverge: Quickly develop the maximum possible solutions 4. Decide: Choose the best idea 5. Prototype: Make a prototype/mockup/presentation of the chosen idea 6. Validate: Test with users and stakeholders the adherence of the solution found
  16. 16. Stage 1 Understand
  17. 17. Before anything Let’s review the challenge
  18. 18. Understand objectives Clarity on the product, user needs, the market, and technical possibilities Let’s give food for thought
  19. 19. What problem are we trying to solve?
  20. 20. Kind of challenges we attack on a sprint What are you missing that you need critically? What is the riskiest decision or hypothesis you want to test with users?
  21. 21. Design challenge • interview key stakeholders • identify or review use cases • Review all relevant user research • review current designs (if any) First steps… • purposeful (key result) • concise and inspiring • Targeted to users • aligned and timely Challenge statement
  22. 22. Example of Challenge Statement “Design a mobile app that helps a visitor plan and find the most relevant, personalized and exciting activities to do in a city if the visitor has one day to for the visit.” Deliverables: Wireframe sketches for ideas to be implemented in Q3 2015.
  23. 23. Example of Challenge Statement “Design a mobile app that helps a visitor plan and find the most relevant, personalized and exciting activities to do in a city if the visitor has one day to for the visit.” Deliverables: Wireframe sketches for ideas to be implemented in Q3 2015. What to deliver? When? Who is the user what they’ll be doing?
  24. 24. Understand Methods • 360º lightning talks • User interviews • Visiting users in the field • Stakeholder map • Competitive overview Don’t forget to summarize all the findings
  25. 25. Take notes of everything
  26. 26. 360º View UX Business Engineering Design and Research What do people need? What is useful and delightful?Business, Sales, Marketing What are the business goals? What is lucrative? Technology What’s possible? What features can be built now or over time?
  27. 27. How to interview a user? TimeIntro Self Intro Project Build Rapport Explore Emotions Thanks & Wrap-up Thanks & Wrap-up Evoke Stories Do with your team a script of questions directed to better understand your users, their needs, desires, expectations 1. Avoid demographic questions 2. Focus on listening. Ask another person from your team to make notes 3. Start with broader questions and then enter the details 4. Encourage stories, but only relevant to your problem 5. Think that the script is a guide, not a rule 6. Try to identify the flow by which the user will pass on your product
  28. 28. Creating a persona John is a ______________________ that needs ________________________________ and wants the experience to be _____________________ because they value ________________________________ Who? What? How? Why?
  29. 29. Stage 2 Define
  30. 30. Define objectives Define a strategy and analyze what’s the best path to actually arrive at the solution
  31. 31. The Golden Path User visit Receive & Love The Golden Path are the key steps that a user takes to find the value they came to find in the first place. Search View product Buy Edit order Browse recommendations
  32. 32. How might we? How assumes solutions may exist Might says we don't have to find a solution, but let's try. We is all about finding creative solutions together with your team.
  33. 33. Zen Voting Use the voting dots to vote on the best ideas
  34. 34. Metrics of success Heart Framework HAPPINESS ENGAGEMENT ADOPTION RETENTION TASK SUCCESS Happiness: User attitude perception metrics. Ex.: NPS Engagement: User involvement level. Ex.: Page views Adption: New users of a product or functionality. Ex.: Amount of saved cards last week Retention: Rate of returning users. Ex.: How many users opens your app for a second or third time? Task success: efficiency, efectivity, error rate. Ex.:People who completed or abandoned a registration process
  35. 35. Design principles Helpful Easy to learn Fun to use Easy What three words would you like users to say about your product? List all possible design principles and reactions your team cares about individually, and select the best ideas as a team.
  36. 36. The first tweet! Imagine it's time to launch your product. What is the first announcing tweet you would send out?
  37. 37. Material Design by @nvasconcelos_
  38. 38. So… what is Material Design?
  39. 39. http://google.com/design/spec
  40. 40. Objective #1
  41. 41. Objective 1 Sintetize the classical principles of design with the innovation and possibilities from science an technology
  42. 42. Objective #2
  43. 43. Objective #2 Create a system that allows an unified experience across platforms and view sizes.
  44. 44. Principles
  45. 45. Principles Material is the metaphor Bold, graphic, intentional Motion provides meaning
  46. 46. Material is the metaphor
  47. 47. “ A material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic."
  48. 48. The paper and ink
  49. 49. The paper has elevation
  50. 50. The ink, not…
  51. 51. Surfaces are intuitive and natural Surfaces and edges provide visual cues that are grounded in our experience of reality. The use of familiar tactile attributes speaks to primal parts of our brains and helps us quickly understand affordances.
  52. 52. Dimensionality affords interaction The fundamentals of light, surface, and movement are key to conveying how objects interact. Realistic lighting shows seams, divides space, and indicates moving parts.
  53. 53. Bold, graphic, intentional
  54. 54. Inspired on graphic design The foundational elements of print-based design — typography, grids, space, scale, color, and use of imagery — guide visual treatments.
  55. 55. Color, surface, and iconography emphasize actions These elements do far more than please the eye. They create hierarchy, meaning, and focus.
  56. 56. Cores
  57. 57. Color in material design is inspired by bold hues juxtaposed with muted environments, deep shadows, and bright highlights.
  58. 58. 50 #FFEBEE 100 #FFCDD2 200 #EF9A9A 300 #E57373 400 #EF5350 500 #F44336 600 #E53935 700 #D32F2F 800 #C62828 900 #B71C1C A100 #FF8A80 A200 #FF5252 A400 #FF1744 A700 #D50000 50 #FCE4EC 100 #F8BBD0 200 #F48FB1 300 #F06292 400 #EC407A 500 #E91E63 600 #D81B60 700 #C2185B 800 #AD1457 900 #880E4F A100 #FF80AB A200 #FF4081 A400 #F50057 A700 #C51162 50 #F3E5F5 100 #E1BEE7 200 #CE93D8 300 #BA68C8 400 #AB47BC 500 #9C27B0 600 #8E24AA 700 #7B1FA2 800 #6A1B9A 900 #4A148C A100 #EA80FC A200 #E040FB A400 #D500F9 A700 #AA00FF 50 #EDE7F6 100 #D1C4E9 200 #B39DDB 300 #9575CD 400 #7E57C2 500 #673AB7 600 #5E35B1 700 #512DA8 800 #4527A0 900 #311B92 A100 #B388FF A200 #7C4DFF A400 #651FFF A700 #6200EA 50 #E8EAF6 100 #C5CAE9 200 #9FA8DA 300 #7986CB 400 #5C6BC0 500 #3F51B5 600 #3949AB 700 #303F9F 800 #283593 900 #1A237E A100 #8C9EFF A200 #536DFE A400 #3D5AFE A700 #304FFE 50 #E3F2FD 100 #BBDEFB 200 #90CAF9 300 #64B5F6 400 #42A5F5 500 #2196F3 600 #1E88E5 700 #1976D2 800 #1565C0 900 #0D47A1 A100 #82B1FF A200 #448AFF A400 #2979FF A700 #2962FF
  59. 59. 0 #FFF8E1 00 #FFECB3 00 #FFE082 00 #FFD54F 00 #FFCA28 00 #FFC107 00 #FFB300 00 #FFA000 00 #FF8F00 00 #FF6F00 100 #FFE57F 200 #FFD740 400 #FFC400 700 #FFAB00 50 #FFF3E0 100 #FFE0B2 200 #FFCC80 300 #FFB74D 400 #FFA726 500 #FF9800 600 #FB8C00 700 #F57C00 800 #EF6C00 900 #E65100 A100 #FFD180 A200 #FFAB40 A400 #FF9100 A700 #FF6D00 50 #FBE9E7 100 #FFCCBC 200 #FFAB91 300 #FF8A65 400 #FF7043 500 #FF5722 600 #F4511E 700 #E64A19 800 #D84315 900 #BF360C A100 #FF9E80 A200 #FF6E40 A400 #FF3D00 A700 #DD2C00 50 #EFEBE9 100 #D7CCC8 200 #BCAAA4 300 #A1887F 400 #8D6E63 500 #795548 600 #6D4C41 700 #5D4037 800 #4E342E 900 #3E2723 50 #FAFAFA 100 #F5F5F5 200 #EEEEEE 300 #E0E0E0 400 #BDBDBD 500 #9E9E9E 600 #757575 700 #616161 800 #424242 900 #212121 50 #ECEFF1 100 #CFD8DC 200 #B0BEC5 300 #90A4AE 400 #78909C 500 #607D8B 600 #546E7A 700 #455A64 800 #37474F 900 #263238
  60. 60. Dark Primary Color #303F9F Primary Color #3F51B5 Light Primary Color #C5CAE9 Text / Icons #FFFFFF Accent Color #FF4081 Primary Text #212121 Secondary Text #727272 Divider Color #B6B6B6
  61. 61. Estrutura
  62. 62. –John Maeda “The organization makes a system of many appear fewer.”
  63. 63. Quando você relaciona os elementos de uma interface de usando proporção e consistência, você reduz a quantidade de informação não essencial e deixa o conteúdo mais claro e objetivo.
  64. 64. Column grid Modular Grid
  65. 65. Module: 8x8 pixels/dps
  66. 66. Tipografia
  67. 67. Iconografia
  68. 68. Moving to Material Design
  69. 69. z
  70. 70. Motion provides meaning
  71. 71. User initiates change In the real world, forces should be applied to make an object start moving.
  72. 72. Animation is choreographed on a shared stage
  73. 73. Stage 3 Diverge
  74. 74. Diverge objectives Let’s unleash our creativity to create as many solutions as possible! :)
  75. 75. Crazy 8’s - 8 ideas in 5 minutes
  76. 76. Stage 4 Decide
  77. 77. Decide objectives Deliberate about the ideas you came up with in Diverge stage, refine, and choose the best one or some combination of the ideas so that way you get a best possible product.
  78. 78. Zen Voting Use os voting dots para votar nas melhores idéias!
  79. 79. Stage 5 Prototype
  80. 80. Prototype objectives You are going to create and build the wireframes, mockups, or the prototype that you’ll actually test with real users.
  81. 81. Stage 6 Validate
  82. 82. Validate objectives Let’s test with real users and get valid feedbacks
  83. 83. That’s it What to do after?
  84. 84. Ana Paula Batista anapaulaazambuja@gmail.com Nelson Vasconcelos nelson@nvasconcelos.com @nvasconcelos_ Gracias :P

×