├── 1 Foundations of User Experience Design ├── 1 Introducing user experience design.md ├── 2 Thinking like a UX designer.md ├── 3 Design thinking and design sprints.md └── 4 Integrating research into the design process.md ├── 2 Start the UX Design Process - Empathize, Define, and Ideate ├── 1 Empathising with users and defining pain points.md ├── 2 Creating user stories and user journey maps.md ├── 3 Defining user problems.md └── 4 Ideating design solutions.md ├── 3 Build Wireframes and Low-Fidelity Prototypes ├── 1 Storyboarding and wireframing.md ├── 2 Creating paper and digital wireframes.md └── 3 Building low-fidelity prototypes.md ├── 4 Conduct UX Research and Test Early Concepts ├── 1 Planning UX research studies.md ├── 2 Conducting research with usability studies.md ├── 3 Analysing and synthesizing research results.md └── 4 Sharing research insights for better designs.md ├── 5 Create High-Fidelity Designs and Prototypes in Figma ├── 1 Starting to create mockups.md ├── 2 Applying visual design principles to mockups.md ├── 3 Exploring design systems.md ├── 4 Creating high-fidelity prototypes.md └── 5 Testing and iterating on designs.md ├── 6 Build Dynamic User Interfaces for Websites ├── 1 Plan a responsive website.md ├── 2 Create and test prototypes.md ├── 3 Participating in design critique sessions.md └── 4 Document design work and search for jobs.md ├── 7 Design a User Experience for Social Good and Prepare for Jobs ├── 1 Design for social good and strengthen your portfolio.md ├── 2 Build a professional presence.md └── 3 Finding a UX job.md ├── LICENSE ├── README.md └── files ├── goalstatement.png ├── moderatedstudies.png ├── problem statement.png ├── unmoderatedstudies.png ├── userjourneymap.png ├── uxjobs.svg └── visualprinciples.png /1 Foundations of User Experience Design/1 Introducing user experience design.md: -------------------------------------------------------------------------------- 1 | ## What is UX 2 | 3 | ### Definitions 4 | 5 | - UX Designers: Take technology easier to understand and more enjoyable to use 6 | - User experience: How a person, the user, feels about interacting with or experiencing a product. 7 | - Product: A good, service, or feature. 8 | - Assets: Text, images, font style, spacing, etc. 9 | 10 | A good experience includes: 11 | 12 | - Usable: Design / structure / purpose of the product clear to everyone. 13 | - Equitable: Designs are useful & marketable to diverse audience. 14 | - Enjoyable: Enjoyable to use, create a positive connection. Take user's thoughts & feelings into consideration. 15 | - Useful: Solves a problem. 16 | 17 | ### Roles 18 | 19 | #### Designers 20 | 21 | - Interaction designers: Focus on designing the experience of a product and how it functions. E.g. what happens when this button is pressed, how are the element laid out. 22 | - Visual designers: Focus on how a product or technology looks. E.g. what style should the button be. 23 | - Motion designers: Think about what it feels like for a user to move through a product. E.g. which animation should be used. 24 | - Graphic designers: Create visuals that tell a story or message. 25 | 26 | #### Colleagues 27 | 28 | - UX researchers: Conduct studies or interviews to help learn how people use a product. 29 | - UX writers: Use language to make user experience more intuitive. 30 | - UX engineers: Translate design intent into a functioning experience. 31 | - UX program manager: Managing the project (e.g. goals, project plans). 32 | - Production designers: Bridge between interaction designers and engineers, check the first designs match the final designs, and they're ready to be worked on. 33 | 34 | ### UX tools overview 35 | 36 | Quoted verbatim: 37 | 38 | > **Sketch, Freehand, and Zeplin** 39 | > 40 | > - Work well with very large teams that may struggle to adopt new tools 41 | > - Paired most commonly with another of these tools 42 | > - Do not require WiFi, enabling offline design work 43 | > - Do not afford real-time collaboration, prototyping, or design to development collaborative activities 44 | > 45 | > **Adobe XD** 46 | > 47 | > - Works well with teams that already use Adobe's Suite 48 | > - Rounds out Adobe's suite of products with one that is entirely built for digital and UX design work 49 | > - Syncs to Cloud rather than using actual real-time collaboration and can be used offline 50 | > 51 | > **Figma** 52 | > 53 | > - Is excellent for most designers and contexts 54 | > - Includes FigJam access, a whiteboard for brainstorming, diagramming, and strategizing 55 | > - Requires WiFi connection 56 | > - Is a digital-first, remote-friendly, all-in-one tool, allowing for easier sharing, designing, collaboration, and reviewing in our ever-changing, more virtual workspace 57 | 58 | ### Product development lifecycle 59 | 60 | Process of taking product from idea to reality. 61 | 62 | 1. Brainstorm: Generate ideas about the user, needs, and challenges. Research is key. 63 | 2. Define: Use insights and narrow the focus, so define specific features etc. 64 | 3. Design: Develop ideas, check all is realistic. Includes storyboards, wireframes, prototypes. 65 | 4. Test: Evaluate product design based on feedback from potential users. Includes interactions between devs and designers. 66 | 5. Launch: Actually releasing the product. 67 | 68 | ## Jobs 69 | 70 | ### Responsibilities of entry UX designer 71 | 72 | - Research 73 | - Wireframe 74 | - Prototype 75 | - Create information architecture (how product is organised / structured) 76 | - Communicate effectively 77 | 78 | ### Generalist 79 | 80 | A generalist (e.g. at a smaller company) might end up doing: 81 | 82 | - User research 83 | - Branding 84 | - User flows 85 | - UX writing 86 | - Visual design 87 | - Prototyping 88 | - Production design 89 | - Information architecture 90 | - Usability testing 91 | 92 | ## Feedback 93 | 94 | A reasonable intro! I liked the focus on TYPES of designer, this was all new to me. Similarly, discussing generalist vs specialists is useful. 95 | -------------------------------------------------------------------------------- /1 Foundations of User Experience Design/2 Thinking like a UX designer.md: -------------------------------------------------------------------------------- 1 | ## Universal design 2 | 3 | - Universal design: One product for all users, one-size-fits-all. 4 | - Inclusive design: Solve for one, extend to many. 5 | - Equity-focused design: Designing for groups that have been historically underrepresented. Making sure product is accessible and fair to all genders, races, and abilities. 6 | - Equality: Providing same amount of opportunity & support 7 | - Equity: Providing different levels of opportunity & support to achieve same outcome. 8 | 9 | ## Platforms 10 | 11 | ### Mobile 12 | 13 | Average session is 72 seconds (desktop 150). Users are goal orientated, trying to complete a single task. 14 | 15 | - CTAs front and centre 16 | - Nav menus short and simple, only core functions 17 | - Use tapping, swiping 18 | - Design for landscape or portrait (hmmmm...) 19 | - Reduce visual clutter 20 | 21 | ## User-centred design 22 | 23 | 1. Understand: How user experiences the product (or similar) 24 | 2. Specify: What're their needs? What problem are we solving? 25 | 3. Design: How can we solve that problem? 26 | 4. Evaluate: Does our solution solve the problem? Test with real user! 27 | 28 | ## Assisted Technologies (AT) 29 | 30 | Products / equipments / systems that enhance learning / working / daily living for people with disabilities. 31 | 32 | - Colour modification: High contrast mode, dark mode. 33 | - Voice control / switch devices: A switch is something like eye tracking. 34 | - Screen readers 35 | - Alternative text 36 | 37 | ## Feedback 38 | 39 | The deep dive into pronouns and equity was... strange. Some aspect of it is absolutely needed to ensure all users are considered, but the depth was a little over the top. Perhaps this content is reused elsewhere? Especially jarring as the next topic in the same category was platforms! 40 | 41 | All the non-main-host videos were remote, which unfortunately had a lower audio and video quality. Perhaps this course was created during COVID-19? 42 | 43 | Much shorter than module 1. 44 | -------------------------------------------------------------------------------- /1 Foundations of User Experience Design/3 Design thinking and design sprints.md: -------------------------------------------------------------------------------- 1 | ## Design thinking 2 | 3 | An iterative, user-centred framework. 4 | 5 | 1. Empathize: Learn about the user, step back from assumptions / guesses. 6 | - Questionnaires, surveys, in-person interviews, phone interviews, video interviews. 7 | - Empathy maps can process the data collected, e.g. who are users, what do they say / think about their experiences, and what do they do / feel before, during, after experiences? 8 | - User personas (segments represented by fictional entity). 9 | 2. Define: Analyse findings, determine which user problems are most important. Outcome is a clear statement of what need will be solved by design. 10 | - User story, e.g. "as x, I want to y, so that z". 11 | - User journeys, e.g. the steps the user takes to try and achieve their goal. 12 | - Problem statements: X is a Y who needs Z because ABC. Like user stories, but from designer perspective. 13 | 3. Ideate: Brainstorming, generate solutions. Start making choices about best options to prototype. 14 | - "How might we?" 15 | - "Crazy Eights" / Rapid Sketching: 8 minutes, 1 minute per square / box, propose a solution in each. 16 | - See what competitors do, weaknesses, strengths. 17 | - SCAMPER used to brainstorm ideas and changes: Substitute, Combine, Adapt, Modify, Put to another use, Eliminate, Rearrange. 18 | 4. Prototype: Build a basic model, might be static or on paper. 19 | - Wireframes (paper or digital). 20 | - Low fidelity prototypes: Basic wireframes with interactivity for navigating etc. 21 | - High fidelity prototypes: Realistic content and interactions on top of low-fidelity. 22 | 5. Test: Let users try the prototypes, incorporate their feedback. 23 | - Who will participate? 24 | - What kind of tests? 25 | - When, where, why are tests being conducted? 26 | - Validate ideas / info / decisions 27 | - Uncover usability issues 28 | - How will participants engage? 29 | - How will info be collected? 30 | 31 | ## Design sprints 32 | 33 | Time bound, five phases typically spread over 5x 8hr days. Goal is to solve critical design challenge by designing, prototyping, testing solutions. Different departments can use! 34 | 35 | Benefits: 36 | 37 | - Save time 38 | - Create path to bring product to market 39 | - Prioritize the user 40 | - Test product before launch 41 | - Value every person in the room 42 | - Best designs float to the top 43 | - Lowers risks to launching 44 | - Versatile, can be used at any point in a project 45 | 46 | When to sprint: 47 | 48 | - Many potential solutions to challenge? 49 | - Cross-functional teams needed to weigh in? 50 | - Challenge scope wide enough to justify? 51 | 52 | Stages (each phase takes up to a day): 53 | 54 | 1. Understand: Get a clear picture of the design challenge. Learn from experts, have creative discussions with other departments / industries. 55 | 2. Ideate: Come up with ideas, sketch and present ideas. 56 | 3. Decide: Decide which solutions to build based on goals / challenge. End day by blueprinting prototype. 57 | 4. Prototype: Goal is something realistic enough to test with users. Also finish user test schedule. 58 | 5. Testing: Observe, interview. 59 | 60 | How to plan: 61 | 62 | - User research to identify the actual challenge 63 | - Talk to experts (or colleagues) for during "Understand" 64 | - Find the right space physically, e.g. acoustics, furniture, whiteboard. 65 | - Gather supplies (very literal, paper / pen / snacks) 66 | - Establish sprint rules (e.g. no phones) 67 | - Plan introductions (e.g. icebreakers) 68 | - Post-sprint planning (documenting, next steps) 69 | -------------------------------------------------------------------------------- /1 Foundations of User Experience Design/4 Integrating research into the design process.md: -------------------------------------------------------------------------------- 1 | ## UX Research 2 | 3 | - Understanding user behaviours, needs, and motivations through observation and feedback. 4 | - Can help bridge the gap between what the business thinks a user needs, and what the user actually needs 5 | 6 | ## Types of research 7 | 8 | - Foundational research (AKA strategic or generative) takes place before anything is designed: 9 | - What should we build? 10 | - What are the user problems? 11 | - How can we solve them 12 | - Design research (AKA tactical) takes place during design phase: 13 | - How should we build it? 14 | - Post-launch research takes place after launch: 15 | - How well is feature meeting users' needs? 16 | - Did we succeed? 17 | 18 | ## UX researcher qualities 19 | 20 | - Empathy: Understanding others' feelings and thoughts 21 | - Pragmatism: Practical problem-solving 22 | - Collaboration: Work with range of people / work styles 23 | 24 | ## Methods 25 | 26 | ### Categorising 27 | 28 | Two ways to categorise: 29 | 30 | 1. Who conducts: Primary research (conducted self) or secondary research (info from someone else) 31 | 2. Type of data: Quantitative (countable or measurable) or qualitative (why and how) 32 | 33 | ### Types 34 | 35 | - Secondary research: E.g. looking up stats. 36 | - Saves time and money, immediately accessible, can back up primary research. However, no first-hand experience, might not be directly applicable. 37 | - Interviews: Usually in person, open-ended questions. Use when detailed response required. 38 | - Understand what users think and why, can ask followup questions, but take time and money. 39 | - Surveys: Many people asked same thing, to understand majority opinion. Qualitative AND quantitative. 40 | - Larger sample size, fast, cheap. But, feedback is not in-depth. 41 | - Usability study: Identify pain points by getting users to try a prototype / product. 42 | - First-hand research, challenge our assumptions and get detailed feedback. However, only measure how easy product is to use, and are expensive. Might also be different behaviour IRL vs in lab. 43 | 44 | ## Kinds of bias 45 | 46 | Bias: Favouring or having prejudice against something based on limited information. 47 | 48 | ### Biases and how to counter 49 | 50 | - Confirmation bias: Looking for evidence to prove pre-existing hypothesis. 51 | - Ask open-ended questions 52 | - Actively listen without adding opinions 53 | - Include large sample of users 54 | - False consensus bias: Assumption that others think the same way. 55 | - Identify & articulate own assumptions 56 | - Primacy bias: Remember first participant strongest, because it's a new experience for you. 57 | - Take detailed notes / recording 58 | - Interview each participant the same way 59 | - Recency bias: Easiest to remember latest thing heard / seen 60 | - Take detailed notes / recording 61 | - Implicit / unconscious bias: Subconsciously associating attitudes / stereotypes to people. E.g. interviewing people from similar background, or asking an offensive question accidentally. 62 | - Reflect on own behaviour 63 | - Ask other people to point out your biases 64 | - Sunk cost fallacy: Further in you are, harder to get out (gambler's fallacy!) 65 | - Break into smaller phases 66 | - Have milestones where you can stop if appropriate 67 | 68 | Also: 69 | 70 | - Framing effect: Users make a decision / choice based on the way information is presented. 71 | - Bandwagon effect: Going along with other people's opinion. 72 | - False consensus: Assuming others will think the same way you do. 73 | - Social desirability bias: User answers based on what they think you want to hear. 74 | - Availability bias: Rushing screening and only getting who is available. Issue that affects online polls. 75 | -------------------------------------------------------------------------------- /2 Start the UX Design Process - Empathize, Define, and Ideate/1 Empathising with users and defining pain points.md: -------------------------------------------------------------------------------- 1 | ## Portfolio site 2 | 3 | 3 website builders: 4 | 5 | - Wix: Easy to use, lots of templates. 6 | - Squarespace: More attractive themes? 7 | - Webflow: High customisation, but allows coding? 8 | 9 | Good portfolio: 10 | 11 | - Personal brand: Personality / unique skills / values intersect with public persona. 12 | - Tell a story: Especially for cast studies 13 | - Be concise 14 | - Keep navigation simple & intuitive 15 | - Go beyond the template 16 | - Include diverse projects, 3-6 across different facets 17 | - Feature case studies: Lead through design process from beginning to end 18 | - Make sure site is responsive to screen size 19 | - Test! 20 | 21 | ## Empathising with users 22 | 23 | How to empathise: 24 | 25 | - Ask lots of questions 26 | - Become more observant 27 | - Be an active listener 28 | - Request input 29 | - Have an open mind 30 | - Keep current on UX research 31 | 32 | Empathy maps: 33 | 34 | - Chart that explains everything designer / team has learned about a type of user. 35 | - Everything the user says, does, thinks, feels 36 | - Can be either a single user, or a group of similar users (aggregated) 37 | 38 | ## Interviews 39 | 40 | Screener survey: Detailed list of questions to determine if potential participants meet requirements of study. 41 | 42 | Interview goals (verbatim): 43 | 44 | - What do you want to learn from the interviews? 45 | - Are there certain user problems or pain points that you need to empathize with? 46 | - Are there any characteristics of users you want to interview? 47 | - Why? 48 | - How much information should we have to ensure we get a comprehensive and balanced set of data? 49 | 50 | Good interview questions are: 51 | 52 | - Relevant 53 | - Open-ended 54 | - Clear 55 | - Neutral 56 | - Designed for follow up 57 | 58 | Preparing for interview: 59 | 60 | - Script questions: Should be the same for all users 61 | - Collect supplies: E.g. recording equipment 62 | - Research the users (e.g. job, age, anything relevant) 63 | 64 | Steps in an interview: 65 | 66 | 1. Meet & relax the participant 67 | - Build a good rapport 68 | - Thank them for coming 69 | - Review legal details (e.g. recording) 70 | - Gather basic details: Starting with easy 71 | - Let participant known no correct / incorrect answers 72 | 2. Conduct interview 73 | - Speak clearly and professionally (duh!) 74 | - Ask open-ended questions, e.g. not "do you like x", but "what do you like and dislike about x" 75 | 3. Take notes 76 | - Highlight compelling quotes 77 | - Document observations about participant (e.g. body language) 78 | 4. Wrap up the interview 79 | - Give user a chance to share final thoughts 80 | 81 | ## Pain points 82 | 83 | Types of pain points: 84 | 85 | - Financial: E.g. price 86 | - Product: Often quality issues, or unintuitive 87 | - Process: Struggling with actual process from point A to B 88 | - Support: Customer service help 89 | 90 | ## Personas 91 | 92 | User group: A set of people who have similar interests, goals, or concerns. 93 | 94 | Benefits: 95 | 96 | - Builds empathy: Humanises the users 97 | - Tell stories: Helps you predict a user's needs 98 | - Stress-test designs: Does a change work for all personas? 99 | 100 | ## Feedback 101 | 102 | - Linking to actual case studies was interesting! 103 | - 104 | - 105 | - Timing is WAY more accurate this time. 10m of reading is about 10m. 106 | -------------------------------------------------------------------------------- /2 Start the UX Design Process - Empathize, Define, and Ideate/2 Creating user stories and user journey maps.md: -------------------------------------------------------------------------------- 1 | ## User stories 2 | 3 | AKA scenarios or user cases. Format: As a `type of user` I want to `action`, so that `benefit`. 4 | 5 | Advantages: 6 | 7 | - Prioritise design goals 8 | - Unite the team around a clear goal 9 | - Inspire empathetic design decisions 10 | - Personalize pitches to stakeholders 11 | 12 | Terms: 13 | 14 | - Happy path: A user story with the happy ending. 15 | - Edge case: Rare situation or unexpected problem that interrupts a standard user experience. 16 | 17 | Spotting & resolving edge cases: 18 | 19 | - Create personas and user stories 20 | - Thoroughly review the project before launch 21 | - Use wireframes to visualise the project 22 | 23 | ## User journey (map) 24 | 25 | The series of experiences a user has as they achieve a specific goal. 26 | 27 | Series of stages, each with: 28 | 29 | - Task list 30 | - Feeling (adjectives) 31 | - Improvement opportunities 32 | 33 | Benefits: 34 | 35 | - Helps UX designers create obstacle free paths 36 | - Reduces impact of designer bias 37 | - Highlights new pain points 38 | - Identifies improvement opportunities 39 | 40 | [![](/files/userjourneymap.png)](/files/userjourneymap.png) 41 | 42 | ## Accessibility 43 | 44 | Types: 45 | 46 | - Permanent (e.g. no limb) 47 | - Temporary (e.g. injured limb) 48 | - Situational (e.g. holding something) 49 | 50 | Misc: 51 | 52 | - "Curb-cut effect": A phenomenon that describes how products and policies designed for people with disabilities often end up helping everyone. 53 | -------------------------------------------------------------------------------- /2 Start the UX Design Process - Empathize, Define, and Ideate/3 Defining user problems.md: -------------------------------------------------------------------------------- 1 | ## Statements 2 | 3 | These are all linked. You have a persona, what's their problem statement, what's the related hypothesis statement(s), how does a value proposition apply? 4 | 5 | ### Problem statements 6 | 7 | > [Name of user persona] is a [type of user] who needs [type of user experience] because [benefits of user experience]. 8 | 9 | Covers the who, what, and why of the problem. 10 | 11 | Characteristics: 12 | 13 | - Human-centred 14 | - Broad enough for creative freedom 15 | - Narrow enough that it can be solved by a design solution 16 | 17 | Benefits: 18 | 19 | - Establish goals 20 | - Understand constraints 21 | - Define deliverables 22 | - Create benchmarks for succeed 23 | 24 | ### Hypothesis statement 25 | 26 | > Our best educated guess on what we think the solution to a design problem might be. 27 | 28 | No fixed format, examples: 29 | 30 | - If [action] then [outcome] 31 | - If user X downloads app, they can make a purchase. 32 | - User X needs an app that does x, y, z. 33 | - We believe x for y will z 34 | - We believe that a simplified checkout process for users on the move will allow them to purchase more easily. 35 | 36 | ### Value proposition 37 | 38 | > The reason why a consumer should use a product or service 39 | 40 | 1. What does your product do? Clearly explain the offering that your product provides users. 41 | 2. Why should the user care? Describe how your product addresses users’ pain points. 42 | 43 | ## Human factor 44 | 45 | > The range of variables humans bring to their product interactions 46 | 47 | This claims that before WW2, people were moulded to fit the machine, instead of the inverse? Seems an unlikely anecdote. 48 | 49 | ## Psychological concepts 50 | 51 | - Mental models: Internal maps that allow humans to predict how something will work. 52 | - Feedback loops: The outcome the user gets at the end of a process. Give feedback on good / bad actions. 53 | - Von Restorff effect / isolation effect: The one that differs from the rest will be remembered. 54 | - Serial position effect: More likely to remember first few and last few. 55 | - Hick's Law: More options the user has, longer to decide. 56 | -------------------------------------------------------------------------------- /2 Start the UX Design Process - Empathize, Define, and Ideate/4 Ideating design solutions.md: -------------------------------------------------------------------------------- 1 | ## Ideation 2 | 3 | > the process of generating a broad set of ideas on a given topic with no attempt to judge or evaluate them. 4 | 5 | Done _after_ empathising with the user, and defining the problem. 6 | 7 | ### Process 8 | 9 | - Brainstorm out loud 10 | - Document all ideas 11 | - List of ideas is narrowed down when considering constraints, so gather lots first 12 | - Need to focus on ideas that work for many users, not just you 13 | - You might not be picking the best solution, users are! 14 | - Focus on quantity 15 | - Do not allow evaluation 16 | - Gather a diverse team 17 | - Question the obvious 18 | - Break, then evaluate the ideas 19 | 20 | ### Idea picking 21 | 22 | - Feasible: Technically possible to build? 23 | - Desirable: Best at solving the user problem? 24 | - Viable: Financially beneficial for the business? 25 | 26 | ### Business constraints 27 | 28 | Branding includes voice, and tone. 29 | 30 | ## Goal statement 31 | 32 | The ideal solution for the user: 33 | 34 | - What the product lets users do 35 | - Who the action affects 36 | - Why the action positively affects users 37 | - How the effectiveness of the product is measured 38 | 39 | > Our [product] will let users [perform specific actions] which will affect [describe who the action will affect] by [describe how the action will positively affect them]. We will measure effectiveness by [describe how you will measure the impact]. 40 | 41 | Example transformation of problem statement to goal statement: 42 | 43 | | Problem statement | Goal statement | 44 | | :---------------------------------: | :---------------------------: | 45 | | ![](/files/problem%20statement.png) | ![](/files/goalstatement.png) | 46 | 47 | The following (verbatim) template can also be used: 48 | 49 | > 1. Product: Start with your product. This could be an app, an object, or anything else. 50 | > 2. Action: Describe the specific action your product enables users to perform. 51 | > 3. Audience: Describe who the action will primarily affect. This could be the user themselves. 52 | > 4. Impact: Describe how the action will positively affect that person. 53 | > 5. Criteria: Describe how you’ll measure the action’s effectiveness. 54 | 55 | ## Competitive audit 56 | 57 | What can you learn: 58 | 59 | - Identify key competitors 60 | - Review products competitors offer 61 | - Understand how competitors position themselves in the market 62 | - Examine what competitors do well, and could do better 63 | - How do competitors talk about themselves 64 | 65 | Who is competition: 66 | 67 | - Direct competitors: Similar products, same audience 68 | - Indirect competitors: Only one is the same, so overlap. For example, same industry. 69 | 70 | Benefits: 71 | 72 | - Inform your design process (what presumably works?) 73 | - Solve usability problems 74 | - Reveal market gaps 75 | - Provide reliable evidence(?) 76 | 77 | Limitations: 78 | 79 | - Can stifle creativity (just copying) 80 | - Depends a lot on interpretation of findings 81 | - Not all designs / ideas work for everyone! 82 | - Should be done regularly 83 | 84 | How to conduct: 85 | 86 | 1. Outline goals: Specific, what product aspect to compare, etc. 87 | 2. Create spreadsheet of competitors: 5-10, some direct, some indirect. 88 | 3. Call out specific aspects being compared. 89 | - e.g. first impressions, interaction, visual design, content 90 | 4. Research each company: What works well, their audience, etc. 91 | - e.g. audience 92 | 5. Analyse findings: Trends, themes, similarities. 93 | 6. Summarise findings in a report. 94 | 95 | How to present summary: 96 | 97 | - Get feedback from your team. 98 | - Stick to the highlights. 99 | - Use notes. 100 | - Practice ahead of time. 101 | - Use relevant graphics. 102 | - Keep your biases in check. 103 | - Be able to defend your conclusions. 104 | 105 | ## "How Might We" for ideation 106 | 107 | - How: Explore a bunch of ideas 108 | - Might: Emphasis this is only possible solutions 109 | - We: Collaborative effort 110 | 111 | Ways to create HMW phrases: 112 | 113 | - "Amp up the good": Think of how you might use any positives in the problem as a solution. 114 | - "Explore the opposite": Think of how you’d solve the opposite of the problem you’ve outlined. 115 | - "Change a status quo": Think of ways to completely change the process. 116 | - "Break the point-of-view into pieces": This is especially helpful for long, complex problems. 117 | - "Remove the bad": Think of how to remove the negative part of the problem entirely. 118 | - "Go after the adjective": Take any negative adjectives and try to turn them into positives. 119 | - "Question an assumption": Remove or change any processes that you assume have to be in place. 120 | - "Create an analogy using the established need or context": Think of ways to compare this user experience to another experience. 121 | - "Identify unexpected resourced that can provide assistance": Think of how the problem might be solved by a resource that isn’t mentioned in the problem statement. 122 | 123 | Should be specific in describing needs, but still have space for innovation. 124 | 125 | ## Reminder 126 | 127 | Verbatim, from earlier content: 128 | 129 | > Empathy maps explore users’ four main motivations: what the user says, thinks, does, and feels. The insights gathered from empathy maps help you come up with ideas for solutions that address users’ real problems. 130 | > 131 | > Personas place the users who you’re designing for front and center. By creating detailed user profiles, you can clearly envision potential users that you’d design for. 132 | > 133 | > User stories determine which user needs are the most critical to address with your designs. This direction will help focus your ideation. 134 | > 135 | > User journeys help you come up with ideas for designs that truly support the users’ needs and solve their problems. 136 | > 137 | > A problem statement is a clear description of the user’s need that should be addressed. The problem statement you created in the last course will guide the focus of your ideation. 138 | 139 | ## Feedback 140 | 141 | A new host just... appeared, without any mention? Additionally, she changed appearance drastically (makeup, hair, outfit) between videos! 142 | 143 | A very dense module! 144 | -------------------------------------------------------------------------------- /3 Build Wireframes and Low-Fidelity Prototypes/1 Storyboarding and wireframing.md: -------------------------------------------------------------------------------- 1 | ## User flows 2 | 3 | Path taken by a typical user so they can complete a task from start to finish. 4 | 5 | Shapes (same as typical flow chart): 6 | 7 | - Circle: Action 8 | - Rectangle: Screen 9 | - Diamond: Decision 10 | - Lines: Direction 11 | 12 | ## Storyboard 13 | 14 | A series of panels / frames that visually describe and explore a user's experience with a product. 15 | 16 | 4 elements: 17 | 18 | - Character: The user 19 | - Scene: User's environment 20 | - Plot: Benefit or solution of design 21 | - Narrative: The user's need or problem and how the design solves it 22 | 23 | Two types: 24 | 25 | - Big picture: Focuses on the user experience, how product will be used throughout the day, why it's useful, etc. "How & why". 26 | - Close-up: Focuses on the product itself, what happens on screens, transitions, flow. "What". 27 | 28 | Typically, you want big picture for early on, to get buy in, overall experience. Later on, you'll want close-up to get details within the app. 29 | 30 | ## Wireframes 31 | 32 | Why: 33 | 34 | - Establish basic structure of a page 35 | - Highlight the intended function of the product 36 | 37 | Benefits: 38 | 39 | - Inform the elements that should be included 40 | - Help catch problems early 41 | - Get stakeholders to focus on structure not actual details 42 | - Save time & effort since everyone is roughly in sync from the start 43 | - Can iterate quickly 44 | 45 | Common standards: 46 | 47 | - Text: Horizontal lines 48 | - Images / icons: Circle with x in 49 | - CTA: Rectangle / circle 50 | -------------------------------------------------------------------------------- /3 Build Wireframes and Low-Fidelity Prototypes/2 Creating paper and digital wireframes.md: -------------------------------------------------------------------------------- 1 | ## Information architecture (IA) 2 | 3 | Organizes content to help users understand where they are in a product, and where the information they want is... AKA users can find what they want, quickly and intuitively. 4 | 5 | Why is it important? 6 | 7 | - Organizes & defines overall structure 8 | - Provides high level view of product 9 | - Helps stakeholders review designs 10 | - Helps engineers understand how to architect 11 | 12 | ## 8 principles of IA 13 | 14 | Verbatim: 15 | 16 | 1. Object principle: You should view your content as “living” and as something that changes and grows over time. 17 | 2. Choice principle: People think they want to have many choices, but they actually need fewer choices that are well-organized. 18 | 3. Disclosure principle: Information should not be unexpected or unnecessary. 19 | 4. Exemplar principle: Humans put things into categories and group different concepts together. 20 | 5. Front door principle: The home web page doesn't need to do everything. Users often get to your site through a side entrance. 21 | 6. Multiple classification principle: People have different ways of searching for information. 22 | 7. Focused navigation principle: There must be a strategy and logic behind the way navigation menus are designed. 23 | 8. Growth principle: The amount of content in a design will grow over time. 24 | 25 | Gestalt principles 26 | 27 | - Similarity: Elements that look similar have perceived similar functionality. 28 | - Common region: Elements in the same areas are perceived to be grouped... 29 | - Proximity: Things that are close together are perceived to be related. 30 | -------------------------------------------------------------------------------- /3 Build Wireframes and Low-Fidelity Prototypes/3 Building low-fidelity prototypes.md: -------------------------------------------------------------------------------- 1 | ## Paper prototypes 2 | 3 | Benefits: 4 | 5 | - Inexpensive 6 | - Rapid iteration 7 | - Low commitment 8 | - Encourage honest feedback, as less polished 9 | - Collaborative activity 10 | 11 | Drawbacks: 12 | 13 | - Can be hard to interpret 14 | - Only be tested in person 15 | - Difficult with remote team 16 | 17 | ## Bias recap 18 | 19 | Verbatim: 20 | 21 | Ambiguity effect bias: The tendency to choose options for which the probability of a certain outcome is known, while avoiding options for which the outcome is ambiguous or uncertain. 22 | 23 | Clustering illusion bias: The tendency to find false patterns and trends in random information when no such patterns exist. 24 | 25 | Confirmation bias: The tendency to interpret data in a way that supports your preexisting beliefs. 26 | 27 | Cultural bias: The tendency to interpret words or behaviors according to one’s own cultural norms, instead of considering the words and behaviors within the context of the participants’ own culture. 28 | 29 | False-consensus bias: The tendency to see your own opinions and behaviors as being common, while viewing other opinions and behaviors as being uncommon. 30 | 31 | Framing bias: The tendency to make decisions based on how the information is presented or "framed" instead of the information itself. 32 | 33 | Fundamental attribution bias: The tendency to attribute someone's behavior to their character or personality, while downplaying the influence of situational and environmental factors. 34 | 35 | Hindsight bias: The tendency to believe that past events were more easily predictable than they were. 36 | 37 | Implicit bias: This is a collection of attitudes and stereotypes we associate with people without our conscious knowledge. 38 | 39 | Racial bias: The tendency to believe that people of a specific racial group have distinctive characteristics and behaviors, generally leading to negative emotional reactions and discrimination. 40 | 41 | Serial position bias: The tendency to remember the first and last items in a list better than those in the middle. 42 | 43 | Social desirability bias: The tendency to answer questions in a way that will make you look good to others. 44 | 45 | Sunk-cost bias: The tendency to continue a behavior if you've already invested time, effort, and money into it, even if the current costs outweigh the benefits. 46 | 47 | Survivorship bias: The tendency to focus on successful cases while overlooking the failed ones. 48 | 49 | Transparency bias: The tendency to overestimate how well other people understand your own internal thoughts and feelings, or to overestimate how well you understand other people's thoughts and feelings. 50 | 51 | ## Deceptive patterns 52 | 53 | - Forced continuity: E.g. rolling onto a paid plan without being notified free trial is ending. 54 | - Sneak into basket: Items added by default. 55 | - Hidden costs 56 | - Confirmshaming: Made to feel guilty when opting out. 57 | - Urgency: Limited time sales etc. 58 | - Scarcity: Showing how many are left / in carts. 59 | -------------------------------------------------------------------------------- /4 Conduct UX Research and Test Early Concepts/1 Planning UX research studies.md: -------------------------------------------------------------------------------- 1 | ## Research study 2 | 3 | 1. Plan 4 | - Outline background 5 | - Set goals 6 | - Establish steps 7 | - Select participants 8 | 2. Research 9 | - Gather data (e.g. usability study) 10 | 3. Synthesize 11 | - Find meaning in the data 12 | 4. Share 13 | - E.g. presentation with method, data, conclusion, recommendations 14 | 15 | ## Types of testing 16 | 17 | - UAT: Does it do what it's meant to? 18 | - QA: Any errors / crashes? 19 | - Accessibility: Does it meet accessibility standards? 20 | 21 | ## 1. Plan 22 | 23 | - Project background: What led you to conduct this research? The context. 24 | - Benefits: 25 | - Gets the team on the same page 26 | - Shows you understand why you're doing it 27 | - Promotes confidence in overall quality 28 | - How: 29 | - Identify signals that indicated research was necessary 30 | - Describe previous research 31 | - List insights expected from research 32 | - Research goals: What design problems are we trying to solve? 33 | - Categories: 34 | - Before design: Foundational research (why or if should build) 35 | - During: Design research (how to build) 36 | - After design: Post-launch research (if worked as expected) 37 | - Research questions: What questions are we trying to answer? 38 | - Should be actionable 39 | - Should be specific 40 | - Should not be leading 41 | - KPIs, e.g.: 42 | - Time on task: Time to complete a task 43 | - Use of navigation vs search: # using nav or search. 44 | - User error rates: E.g. clicking wrong icon, highlights unclear bits 45 | - Drop-off rates: How many users give up along the way 46 | - Conversation rate: % of users who complete desired action 47 | - System usability scale: Questionnaire about design 48 | - Methodology: Documenting steps taken to conduct research. 49 | - Participants: Who? What characteristics? 50 | - Script AKA discussion guide: What will actually be asked? 51 | - Same set of questions for all 52 | - Ask open-ended questions 53 | - Encourage elaboration 54 | - Ask the same question from different angles(?) 55 | - Don't mention other users, could bias / privacy violation 56 | - No leading questions of course 57 | -------------------------------------------------------------------------------- /4 Conduct UX Research and Test Early Concepts/2 Conducting research with usability studies.md: -------------------------------------------------------------------------------- 1 | ## Moderated vs unmoderated 2 | 3 | - Moderated: Moderators guides participants through the study in real time. 4 | - Unmoderated: User handles it themselves. 5 | 6 | ## Benefits and drawbacks 7 | 8 | ![](/files/moderatedstudies.png) 9 | 10 | ![](/files/unmoderatedstudies.png) 11 | -------------------------------------------------------------------------------- /4 Conduct UX Research and Test Early Concepts/3 Analysing and synthesizing research results.md: -------------------------------------------------------------------------------- 1 | ## From observations to insights 2 | 3 | - Gather the data in one place 4 | - Organise the data 5 | - Find themes 6 | - Come up with insights 7 | 8 | ## Strong insights 9 | 10 | - Grounded in real data 11 | - Answer the research questions 12 | - Easy to understand 13 | - Increase empathy for the user experience 14 | - Inspire direct action 15 | 16 | ## Feedback 17 | 18 | Very short module! 19 | -------------------------------------------------------------------------------- /4 Conduct UX Research and Test Early Concepts/4 Sharing research insights for better designs.md: -------------------------------------------------------------------------------- 1 | ## Strong presentation 2 | 3 | - Know your audience 4 | - Provide an overview 5 | - Tell a story 6 | - Show data 7 | - Less is more for text 8 | - Provide recommendations for next steps 9 | - Leave time for questions 10 | -------------------------------------------------------------------------------- /5 Create High-Fidelity Designs and Prototypes in Figma/1 Starting to create mockups.md: -------------------------------------------------------------------------------- 1 | ## Typography 2 | 3 | 1. Type classification: General system, e.g. serif & sans-serif 4 | 2. Picking a typeface: Overall style of a letter, e.g. Times New Roman 5 | 3. Choosing a font: Size, thickness, emphasis of letters, e.g. Times New Roman Bold, 18 pt 6 | 7 | Typographic hierarchy: 8 | 9 | > A typographic hierarchy is a method of ordering typefaces and fonts in a layout consistently to help users better navigate a page. 10 | 11 | ## Colour 12 | 13 | Colour can: 14 | 15 | - Add emphasis 16 | - Communicate branding 17 | - Impact accessibility of designs 18 | 19 | 60-30-10 rule: 20 | 21 | - 60% Neutral colour 22 | - 30% Complementary colour 23 | - 10% Accent colour 24 | 25 | ## Iconography 26 | 27 | - Communicate a message without using words 28 | 29 | ## Layouts 30 | 31 | - Basic (uniform) grid: Just divide into small squares 32 | - Layout grid: Divide into columns and alleys, typically used 33 | 34 | Why use a layout grid? 35 | 36 | - Create clarity and consistency 37 | - Quicken the design process 38 | - Make it easier to collaborate on designs 39 | -------------------------------------------------------------------------------- /5 Create High-Fidelity Designs and Prototypes in Figma/2 Applying visual design principles to mockups.md: -------------------------------------------------------------------------------- 1 | ## Emphasis 2 | 3 | How to choose what to emphasise: 4 | 5 | - Where do I want to draw the user's attentions? 6 | - What are the user's goals? 7 | 8 | How to emphasise: 9 | 10 | - Size 11 | - Contrast 12 | - Texture 13 | 14 | ## Scale vs proportion 15 | 16 | > Scale is a concept that’s used to explain the size relationship between a given element and the other elements in the design. Proportion is about the balance or harmony between elements that are scaled. 17 | 18 | ## More Gestalt principles 19 | 20 | - Closure: When we look at incomplete objects, subconsciously complete it. 21 | - Continuity: When we look at elements in a line or curve, they seem related. 22 | 23 | ## Typical mockup escalating scale 24 | 25 | - Detailed view 26 | - Page-level view 27 | - Function-level view 28 | - App-level view 29 | -------------------------------------------------------------------------------- /5 Create High-Fidelity Designs and Prototypes in Figma/3 Exploring design systems.md: -------------------------------------------------------------------------------- 1 | ## Benefits 2 | 3 | - Consistency for designers & users 4 | - Reinforce company's brand identity 5 | - Scalable 6 | - Save time & money by increasing efficiency 7 | - Help designers & developers work together more efficiently 8 | -------------------------------------------------------------------------------- /5 Create High-Fidelity Designs and Prototypes in Figma/4 Creating high-fidelity prototypes.md: -------------------------------------------------------------------------------- 1 | ## Features 2 | 3 | - Visual elements: colours / images / icons / typography 4 | - Navigation 5 | - Interaction: gestures / motion 6 | 7 | ## Steps 8 | 9 | 1. Lay out the mockups 10 | 2. Connect the screens 11 | 3. Add interaction details. 12 | 4. Adjust the animation 13 | 5. Complete for all screens. 14 | 6. Share your work 15 | -------------------------------------------------------------------------------- /5 Create High-Fidelity Designs and Prototypes in Figma/5 Testing and iterating on designs.md: -------------------------------------------------------------------------------- 1 | N/A, repeated from module 4. 2 | -------------------------------------------------------------------------------- /6 Build Dynamic User Interfaces for Websites/1 Plan a responsive website.md: -------------------------------------------------------------------------------- 1 | ## Dedicated mobile apps 2 | 3 | Advantages: 4 | 5 | - No internet needed 6 | - Work well with device's hardware features 7 | - More freedom in design 8 | 9 | Disadvantages: 10 | 11 | - Expensive to build 12 | - One per platform 13 | - Approvals required 14 | 15 | ## Responsive web apps 16 | 17 | Advantages: 18 | 19 | - Faster & cheaper to build 20 | - No download needed 21 | - Responsive 22 | 23 | Disadvantages: 24 | 25 | - Internet required 26 | - Can be hard to find 27 | 28 | ## Common site structures 29 | 30 | - Hierarchical 31 | - Sequential 32 | - Matrix 33 | - Database 34 | 35 | ## Steps to create a sitemap 36 | 37 | 1. Think about commonly found pages on sites 38 | 2. Recall info about users 39 | 3. Decide on site structure 40 | 4. Start with homepage 41 | 5. Name main categories 42 | 6. Add subcategories 43 | 44 | ## Transitioning from paper to digital 45 | 46 | How do you know if you're ready? 47 | 48 | 1. Do you have an idea of the layout you're aiming for? 49 | 2. Have you received feedback from peers / managers on paper wireframes? 50 | 3. Are you ready to consider basic visual cues 51 | -------------------------------------------------------------------------------- /6 Build Dynamic User Interfaces for Websites/2 Create and test prototypes.md: -------------------------------------------------------------------------------- 1 | ## Visual design principles 2 | 3 | ![](/files/visualprinciples.png) 4 | 5 | ## Feedback 6 | 7 | This is mostly a repeat of a previous module, it sounds like this course is also available as a standalone... Some of it is literally IDENTICAL, with my quizzes etc being already answered. 8 | 9 | Previous hosts also come back!? 10 | -------------------------------------------------------------------------------- /6 Build Dynamic User Interfaces for Websites/3 Participating in design critique sessions.md: -------------------------------------------------------------------------------- 1 | Nothing noteable 2 | -------------------------------------------------------------------------------- /6 Build Dynamic User Interfaces for Websites/4 Document design work and search for jobs.md: -------------------------------------------------------------------------------- 1 | ## UX Jobs 2 | 3 | ![](/files/uxjobs.svg) 4 | -------------------------------------------------------------------------------- /7 Design a User Experience for Social Good and Prepare for Jobs/1 Design for social good and strengthen your portfolio.md: -------------------------------------------------------------------------------- 1 | ## Design across devices 2 | 3 | - Consistency: Uniform design 4 | - Continuity: Smooth & uninterrupted when moving between devices 5 | - Context: How the user will use that specific device 6 | - Complementary: How each device can make overall experience better 7 | 8 | ## Feedback 9 | 10 | It repeats... the entire course? 11 | -------------------------------------------------------------------------------- /7 Design a User Experience for Social Good and Prepare for Jobs/2 Build a professional presence.md: -------------------------------------------------------------------------------- 1 | No new content 2 | -------------------------------------------------------------------------------- /7 Design a User Experience for Social Good and Prepare for Jobs/3 Finding a UX job.md: -------------------------------------------------------------------------------- 1 | Mostly repeated from cybersecurity cert. 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Jake Lee 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # UX design notes 2 | 3 | Miscellaneous notes made during study for [Google's UX Design Professional Certificate](https://www.coursera.org/google-certificates/ux-design-certificate). 4 | 5 | ## Notes on notes 6 | 7 | 1. I typically only note things that I suspect I'll forget, or that don't make sense immediately. As such, my notes are only a small subset of the course's full content. 8 | 2. Each folder is a course, containing a `.md` per "module". E.g. my notes on Course 1 Module 1 [are here](/1%20Foundations%20of%20User%20Experience%20Design/1%20Introducing%20user%20experience%20design.md). 9 | 3. Finally, there's informal feedback throughout, these are reminders to myself for an article! 10 | 11 | ## License 12 | 13 | Feel free to use anything in here for anything you want. This excludes any course content included under fair use, e.g. any diagrams or quoted text, all of which was created & is owned by Google / Coursera. 14 | -------------------------------------------------------------------------------- /files/goalstatement.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JakeSteam/uxdesign-certificate-notes/b95d3b304427c35950316fa143082158e35ef132/files/goalstatement.png -------------------------------------------------------------------------------- /files/moderatedstudies.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JakeSteam/uxdesign-certificate-notes/b95d3b304427c35950316fa143082158e35ef132/files/moderatedstudies.png -------------------------------------------------------------------------------- /files/problem statement.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JakeSteam/uxdesign-certificate-notes/b95d3b304427c35950316fa143082158e35ef132/files/problem statement.png -------------------------------------------------------------------------------- /files/unmoderatedstudies.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JakeSteam/uxdesign-certificate-notes/b95d3b304427c35950316fa143082158e35ef132/files/unmoderatedstudies.png -------------------------------------------------------------------------------- /files/userjourneymap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JakeSteam/uxdesign-certificate-notes/b95d3b304427c35950316fa143082158e35ef132/files/userjourneymap.png -------------------------------------------------------------------------------- /files/visualprinciples.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JakeSteam/uxdesign-certificate-notes/b95d3b304427c35950316fa143082158e35ef132/files/visualprinciples.png --------------------------------------------------------------------------------