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.

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