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 Thinking

81 views

Published on

Talk about design thinking and demystifying UI and UX on Web Designer Bersidai event at Laman 7, Shah Alam on 15 February 2020

Published in: Design
  • Be the first to comment

  • Be the first to like this

Design Thinking

  1. 1. Design Thinking Using Design Thinking to create Human-Centric website, and providing more value to clients Syahmi Ibrahim Web Designer Bersidai 15 February 2020
  2. 2. Hi there! I'm Syahmi Syahmi D Ibrahim
  3. 3. Table of Content Demystifying UI and UX Syahmi IbrahimWeb Designer Bersidai, Design Thinking
  4. 4. Demystifying UI and UX
  5. 5. UX != UI Syahmi IbrahimWeb Designer Bersidai
  6. 6. UI design is how the interface looks and makes it beautiful Syahmi IbrahimWeb Designer Bersidai UX design is how things work and make it useful
  7. 7. UI Design Is a process of designing the look and feel, and visually guiding the user through a product’s interface. It's mainly focused on the presentation and interactivity of a product. Syahmi IbrahimWeb Designer Bersidai
  8. 8. UI Designer Competencies Principle of Design Colors Syahmi IbrahimWeb Designer Bersidai
  9. 9. WhitespaceTypography UI Designer Competencies Syahmi IbrahimWeb Designer Bersidai
  10. 10. Syahmi Ibrahim LayoutGrid UI Designer Competencies Syahmi IbrahimWeb Designer Bersidai
  11. 11. Syahmi IbrahimWeb Designer Bersidai Usability UI Designer Competencies Content
  12. 12. UX Design Is the overall experience of a person using a product. It focused on providing meaningful and relevant experiences to users. Syahmi IbrahimWeb Designer Bersidai
  13. 13. UX connects the technology, business and users. It’s the center point that brings all the priorities together and makes our product feasible, viable and desirable. Syahmi IbrahimWeb Designer Bersidai UX Sweet Spot
  14. 14. UX connects the technology, business and users. It’s the center point that brings all the priorities together and makes our product feasible, viable and desirable. Syahmi IbrahimWeb Designer Bersidai UX Sweet Spot Bani Speed Bani Convert Bani User Bani-bani?
  15. 15. We design the homepage like this because it's the new trends with UX in mind. Syahmi IbrahimWeb Designer Bersidai Commonly Heard..
  16. 16. Syahmi IbrahimWeb Designer Bersidai
  17. 17. Syahmi IbrahimWeb Designer Bersidai Strategy Blueprint Workshop Roadmap Customer Journey Map User Stories Jobs To Be Done User Personas Ecosystem Map Competitive Audit/Analysis Stakeholders Interviews UX Design Method AnalysisResearch User Interview Ethnography Study Focus Group Contextual Interviews Quantitative Survey Questionnaires Affinity Diagram Scenarios Mental Models Card Sorting UI/UX Audit Content Audit Heuristic Analysis Information Architecture Sitemap Features Roadmap Use Cases and Scenarios Metrics Analysis Research
  18. 18. Syahmi IbrahimWeb Designer Bersidai Design Ideation Rounds Mood boards Storyboards User Flow Task Analysis Taxonomies Interaction Design Tone & Voice Validation UX Design Method Research Sketches Wireframes Prototypes Pattern Library Paper Prototype UX Writing Microcopy Usability Testing A/B Testing Heatmap Eyetracking Accessibility Analysis Remote Testing Unmoderated Testing Moderated Testing Guerilla Testing Production
  19. 19. Syahmi IbrahimWeb Designer Bersidai
  20. 20. 5 Plane of UX Is one of the framework used to build successful website. “The Elements of User Experience” by Jesse James Garrett Syahmi IbrahimWeb Designer Bersidai
  21. 21. Syahmi Ibrahim Web Designer Bersidai
  22. 22. UX is... 1. Overall experience of a person using a product, especially in terms of how easy or pleasing it is to use. 2. Done first. 3. Identifies users needs and accomplishes goals. 4. Makes interfaces useful. 5. Includes products, interfaces and services (Tangible + Intangible) UI is... 1. Is what a user is able to digest from a digital product based on what they see. 2. Done second. 3. Makes emotional connections. 4. Makes interfaces beautiful and meet objective. 5. Only pertains to interfaces. (Tangible Only)
  23. 23. Design Thinking
  24. 24. Syahmi IbrahimWeb Designer Bersidai
  25. 25. Syahmi IbrahimWeb Designer Bersidai
  26. 26. Design Thinking Is a foundation, a philosophy and a toolkit to drive innovation. Syahmi IbrahimWeb Designer Bersidai
  27. 27. Design Thinking It is a framework or process to develop innovative solution that is desirable, feasible and viable. Syahmi IbrahimWeb Designer Bersidai
  28. 28. Design Thinking It is a iterative process in which we seek to understand the user, challenge assumptions, and redefine problems in an attempt to identify alternative strategies and solutions that might differ from our initial understanding. Syahmi IbrahimWeb Designer Bersidai
  29. 29. Why Design Thinking? Syahmi IbrahimWeb Designer Bersidai
  30. 30. Design Thinking enable us to craft service, product or experience that people want (desirable), has a potential and bring benefit to business (viable) and convenient to be build (feasible) Syahmi IbrahimWeb Designer Bersidai Innovation Sweet Spot
  31. 31. Syahmi IbrahimWeb Designer Bersidai Design Thinking turns chaos to into clarity
  32. 32. Syahmi IbrahimWeb Designer Bersidai The cost of correcting a problem at definition 1x The 1:10:100 Rule
  33. 33. Syahmi IbrahimWeb Designer Bersidai The cost of correcting a problem at definition 1x at design 10x The 1:10:100 Rule
  34. 34. Syahmi IbrahimWeb Designer Bersidai The cost of correcting a problem at definition 1x at design 10x at development 100x The 1:10:100 Rule
  35. 35. Syahmi IbrahimWeb Designer Bersidai Design Thinking Process
  36. 36. Syahmi IbrahimWeb Designer Bersidai Design Thinking Process
  37. 37. Empathize Syahmi IbrahimWeb Designer Bersidai Understand the experience, situation and emotion of the person who you are working for. By putting yourself in their shoes, you will better understand the problem you are trying to solve and discover creative solutions.
  38. 38. Syahmi IbrahimWeb Designer Bersidai Empathize Empathize is primarily a research phase. It helps us focus on actual user problems/challenges. It gives us a change to learn from business stakeholders, the technical environment, and users, then clearly define the problems we are going to attempt to solve.
  39. 39. Syahmi IbrahimWeb Designer Bersidai Empathize Method Stakeholder Interview Talking with stakeholders to gain deeper insights on pain points, vision, constraints and strategy. User Interviews Talking with users to gain deeper insights on pain points, vision, constraints and strategy. User Persona Create a composite characteristic profile that focuses our attention on relevant and important user groups. Empathy Map Identify users’ needs and insights by grouping information and notes from user interviews. Ethnographic Research Observe users’ behaviors as they happen in real life over long periods of time. As Is Journey (Pain Point) Identify users’ current journey through a product or situation and point out pain point during the journey.
  40. 40. Define Syahmi IbrahimWeb Designer Bersidai Process and synthesis the findings in order to form a user point of view that you will address. This is where we define the problem that we want to solve (Problem Statement).
  41. 41. Define Syahmi IbrahimWeb Designer Bersidai The Define stage will help the team gather great ideas to establish features, functions, and any other elements that will allow them to solve the problems or, at the very least, allow users to resolve issues themselves with the minimum of difficulty.
  42. 42. Define Method Syahmi IbrahimWeb Designer Bersidai 5 Whys Identify the root cause behind users problems/challenges through asking successive “whys”. Journey Map Break down important steps of the user's journey that includes what they’re thinking, feeling, and doing for each step of their journey. How Might We Flip pain point that are identified during Empathize phase into opportunity that the team can solve. What If Identify risk, loophole or bottleneck that might occurs when user use the product Synthesize Synthesize and cluster data based on research conducted during Empathize phase Prioritize Prioritize which problem, steps in journey map that we want to focused on during the cycle
  43. 43. Ideate Syahmi IbrahimWeb Designer Bersidai Focus on idea generation. This is where you translate problems into solutions. Brainstorm, spark your creativity and explore a wide variety of ideas to solve the problem. Then prioritize which ideas to proceed to the next phase.
  44. 44. Ideate Method Syahmi IbrahimWeb Designer Bersidai Brainstorming Generate related ideas from a central idea, typically starting with a problem statement, point of view, and desired outcomes. Crazy 8 Quick generate ideas in an extremely short amount of time and select the best ideas democratically. Card Sorting Clarify and define meaningful categorization of content with the help of the users. Mindmapping Start with an idea as a central node and make as many connections that come to mind. Meal Time Identify various features that make up a solution and prioritize them based on veggies, meats, and desserts. Prioritize Prioritize which ideas and solution that we want to proceed to the next phase
  45. 45. Prototype Syahmi IbrahimWeb Designer Bersidai Once we go through series of prioritization exercise, develop basic prototypes that can then be used to validate our initial assumptions for each solution. Build a simple, cheap and fastest way to shape the ideas so you can testing it with the user quickly.
  46. 46. Prototype Method Syahmi IbrahimWeb Designer Bersidai Sketching Create very loose illustrations of the prototype. Typically done quickly on a whiteboard or on paper. Paper Prototype Sketch the solution on a piece of paper or rectangle sticky notes. One paper shall only fits one screen at a time Wireframe Create more structured screens through some sort of wire framing tool. Interactive Prototype Take sketches or wireframes and put them into an online tool that allows users to click or tap through your experience. Storyboarding Identify how many screen needed that match with Journey Map, panel by panel.
  47. 47. Test Syahmi IbrahimWeb Designer Bersidai We’ve made assumptions based on which prototypes we believe will accurately solve our users’ problems. Now, validate your assumption by asking for feedback on your prototype. Learn about your user, reframe your view, refine your prototype and iterate.
  48. 48. Test Method Syahmi IbrahimWeb Designer Bersidai Usability Testing Moderating testing around unique scenarios or tasks. A/B Testing Using two versions of a similar design to understand which one performs better under similar scenarios. Focus Group Testing a product or service with small groups typically accompanied by a questionnaire.
  49. 49. Syahmi IbrahimWeb Designer Bersidai Design Thinking Process Recap
  50. 50. How Good UX & Design Thinking Bring Value To Your Organization/Agency? Syahmi IbrahimWeb Designer Bersidai
  51. 51. Syahmi IbrahimWeb Designer Bersidai INCREASES Adoption Conversion rates Productivity Ease of use Ease of learning Satisfaction SAVES Development costs Development time Redesign & revamp costs REDUCES Maintenance costs User errors and bugs Support costs Training costs INCREASES Adoption Transaction Product Sales Traffic Retention Conversion Market share Brand equity Satisfaction Improved ROI (Business) Reduce Dev Costs (Technical Team) Efficient Design (Design Team) Benefit of UX & Design Thinking Reduce Dev Costs (Dev team) Reduce Dev Costs (Technical Team) Efficient Design (Design Team)
  52. 52. How Can I implement Design Thinking on Client Project? Syahmi IbrahimWeb Designer Bersidai
  53. 53. Conduct workshop, discovery session at the early phase of the project. Syahmi IbrahimWeb Designer Bersidai 1. Include Stakeholders, important person in the organization during the workshop (Get buy in) 2. It can be 1-Day workshop or 1 full week (Google Design Sprint)
  54. 54. Recap Syahmi IbrahimWeb Designer Bersidai
  55. 55. 1. UX != UI 2. Traits need to become a great UI designer 3. UX connect the technology, business and users 4. Different types of UX Method 5. Why Design Thinking? 6. Design Thinking process and method used Syahmi IbrahimWeb Designer Bersidai
  56. 56. Thank You! Syahmi D Ibrahim Syahmi Ibrahim Please come and join UI/UX Malaysia telegram group: t.me/uiuxmy

×