Upgrade to Pro — share decks privately, control downloads, hide ads and more …

A design-driven approach to product thinking

A design-driven approach to product thinking

Design it | An introduction to design thinking, designing user interfaces and prototyping along with case-studies for a website UI redesign and a service design. Presented at Inflection Point 2021, the BizTech fest of the Indian Institute of Management Lucknow.

866f7d9ba69928e98470377140c2464c?s=128

Prasanta Kr Dutta

March 15, 2021
Tweet

Transcript

  1. Design it A design-driven approach to product thinking Prasanta Kumar

    Dutta Information Designer, Reuters Inflection Point Indian Institute of Management Lucknow
  2. 01 Understanding ”design”

  3. Mindset Skill or

  4. Mindset Skill and • Understanding the real needs • Thinking

    out of the box • Challenging assumptions and solving the actual problems • Communicating ideas effectively • Bridging the gap between ideas and tangible solutions • Solving the problems aesthetically or
  5. None
  6. What is the problem? The head is stuck… What is

    the real problem? The boy is stuck. Need to get the boy out… Solution? Get the head out Solutions? What are the ways to get the boy out? How can I get the boy out with the least effort and discomfort (to the boy)? Can the boy get out by getting further in?
  7. 02 Design thinking

  8. Design thinking is a human-centered approach to innovation that draws

    from the designer’s toolkit to integrate – the needs of people – the possibilities of technology, and – the requirements for business success. Tim brown, Chair of IDEO https://designthinking.ideo.com/
  9. Think broadly about what the real issues underlying a problem

    statement might really be. Consider a wide range of potential solutions, instead of solving just one problem. Iterate and expand. Don Norman, Rethinking Design Thinking https://www.nngroup.com/articles/design-thinking/ A problem-solving method
  10. https://www.forbes.com/sites/forbesfinancecouncil/2017/10/19/ on-building-a-faster-horse-design-thinking-for-disruption/

  11. Design process – revamped Double Diamond The British Design Council’s

    Double Diamond, modified by Dan Nessler https://link.medium.com/gXJrnjr5Ceb
  12. Design process – revamped Double Diamond Discover/Research Define/Synthesis Develop/ Ideation

    Deliver /Implementation Insight into the problem The area to focus upon Potential solutions Solutions that work The British Design Council’s Double Diamond, modified by Dan Nessler https://link.medium.com/gXJrnjr5Ceb
  13. 03 Lets’ talk Prototypes

  14. Communicates basic idea and structure of the product Low-fidelity and

    serves the early stages of product ideation Easy to make and quick to remake/iterate Shows the look, feel and working of the product Medium to High fidelity and serves the early stages of product development Takes longer to make but makes getting feedback easier with the right aesthetics and interactions Sketches/Wireframes Mockups/Prototypes
  15. Prototyping in the stages of design Discover/Research Define/Synthesis Develop/ Ideation

    Deliver /Implementation Insight into the problem The area to focus upon Potential solutions Solutions that work Flowcharts, mindmaps sketches Lo-fi wireframes, Concept tests and sketches Mid/Hi-fi mockups, interactive prototypes WHAT
  16. Prototyping in the stages of design Discover/Research Define/Synthesis Develop/ Ideation

    Deliver /Implementation Insight into the problem The area to focus upon Potential solutions Solutions that work Flowcharts, mindmaps sketches Lo-fi wireframes, Concept tests and sketches Mid/Hi-fi mockups, interactive prototypes WHAT WHY Conversations between Product managers and Designers can go beyond text documents, giving a better understanding of user needs and business requirements. Easier to test potential solutions before actually building them. Helps balance desirability, feasibility and viability. Feel the actual product before it’s built. Makes design hand-off to developers easy enough so that things don’t get lost in translation.
  17. Prototyping in the stages of design Discover/Research Define/Synthesis Develop/ Ideation

    Deliver /Implementation Insight into the problem The area to focus upon Potential solutions Solutions that work Flowcharts, mindmaps sketches Lo-fi wireframes, Concept tests and sketches Mid/Hi-fi mockups, interactive prototypes WHAT WHY HOW Conversations between Product managers and Designers can go beyond text documents, giving a better understanding of user needs and business requirements. Easier to test potential solutions before actually building them. Helps balance desirability, feasibility and viability. Feel the actual product before it’s built. Makes design hand-off to developers easy enough so that things don’t get lost in translation. • Pen and paper • Sticky notes • Whiteboards • Simple tools like PowerPoint, Keynote • Pen and paper • PowerPoint, Keynote • Miro, Balsamiq, Mocqups… • Drawing tools like Adobe Photoshop, Illustrator, Sketch • Figma, Adobe XD • Invision, Axure, JustInMind
  18. • Visualise product/feature ideas quickly • Present multiple concepts on

    the table to help make informed decisions • Communicate choices and design decisions with less friction across teams • Test ideas/concepts along the design process • Iterate on designs rather than on a half-baked products to make sure they are usable and useful to end-users Prototypes help you “fail early and learn fast”
  19. 04 Elements of User Experience design

  20. The practice of creating engaging, efficient user experiences is called

    user-centered design. The concept of user-centered design is very simple: Take the user into account every step of the way as you develop your product. The implications of this simple concept, however, are surprisingly complex. Everything the user experiences should be the result of a conscious decision on your part. Jesse James Garrett, The Elements of User Experience: User-Centered Design for the Web and Beyond
  21. None
  22. Jesse James Garrett, The Elements of User Experience: User-Centered Design

    for the Web and Beyond Five elements of UX What do the creators want? What do the users need/want? What are the features and functions? How do users find information and accomplish a task in the app? Structure and layout of the building blocks What the users will see and interact with
  23. Jesse James Garrett, The Elements of User Experience: User-Centered Design

    for the Web and Beyond Five elements of UX Sketches, diagrams and wireframes Low/Medium fidelity Mockups High-fidelity interactive prototypes
  24. • Invisible • Intuitive • Delightful Good design is https://uxdesign.cc/10-usability-heuristics-every-designer-should-know-129b9779ac53

    Jakob Nielsen, 10 Usability Heuristics for User Interface Design
  25. Common User Interface Elements https://www.uxpin.com/studio/blog/user-interface-elements-every-designer-should-know/ Elements of user interface Google’s

    Material Design https://material.io/design Apple’s Human Interface Guidelines https://developer.apple.com/design/human-interface-guidelines/ Figma publication for design systems https://www.designsystems.com/sections/getting-started/ Microsoft’s Fluent UI https://developer.microsoft.com/en-us/fluentui - /styles
  26. Redesigning a comic book website https://www.behance.net/gallery/46120627/Amar-Chitra-Katha-Website-UX-re-design Case study 01 –

    UX/UI design Designing a death-care service http://prasantakrdutta.com/projects/soulace/ Case study 02 – Service/Product design
  27. 05 Let’s create some UI Prototypes!

  28. Miro – A whiteboarding tool that helps ideation, collaboration and

    simple wireframing Figma – A UI prototyping tool across levels of fidelity. Easy collaboration and design hand-off for development. A ton of resources including UI kits to get started Tools
  29. Carpool App – Share your ride with others headed in

    the same direction. Design a mobile app screen flow showing how an user gets started on the platform and then starts pooling the rides with others. Scenario
  30. Thank you! Prasanta Kumar Dutta @Da_Pacific http://prasantakrdutta.com/ Inflection Point Indian

    Institute of Management Lucknow