UX Design Presentation for Undergraduate Students

Based on "The UX Book" by Rex Hartson and Pardha S. Pyla

Slide 1: Title Slide

 Title: Introduction to UX Design

 Subtitle: Based on "The UX Book" by Rex Hartson and Pardha S. Pyla

 Content:

o For Undergraduate Students

o Topics: Design Thinking, Ideation, Sketching, Design Production, Prototyping,

UX Guidelines

 Visual: University-themed background with UX icons (e.g., wireframe, persona).

Slide 2: Agenda

 Title: What We’ll Cover

 Content:

1. Design Thinking, Ideation, and Sketching

2. Design Production

3. Prototyping

4. UX Design Guidelines

5. Key Takeaways & Activity

 Visual: Timeline graphic showing the flow of topics.

Slide 3: Design Thinking - Overview

 Title: Design Thinking: A Human-Centered Approach

 Content:

o Definition: Iterative process focusing on empathy, creativity, and prototyping.

o Core Principles:

 Empathy for users

  Iterative cycles

 Collaborative teams

o Why It Matters: Solves real user problems innovatively.

 Visual: Diagram of Design Thinking stages (Empathize, Define, Ideate, Prototype,

Test).

Slide 4: Design Thinking - Process

 Title: The Design Thinking Process

 Content:

1. Empathize: Research user needs (e.g., interview students).

2. Define: State the problem (e.g., “Students need quick room booking”).

3. Ideate: Brainstorm solutions (e.g., mobile app).

4. Prototype: Build testable models (e.g., paper sketches).

5. Test: Gather feedback and refine.

 Example: Library app designed via student interviews.

 Visual: Flowchart of the 5 stages.

Slide 5: Design Perspectives

 Title: Design Perspectives

 Content:

o Ecological: User’s environment (e.g., noisy campus).

o Interaction: System interactions (e.g., button taps).

o Emotional: User feelings (e.g., reduce frustration).

o Application: Combine for holistic designs.

 Example: Library app with offline mode (ecological) and clear buttons (interaction).

 Visual: Venn diagram of the three perspectives.

Slide 6: User Personas

  Title: User Personas

 Content:

o Definition: Fictional users based on research.

o Components: Name, goals, pain points, behaviors.

o Purpose: Keeps design user-centered.

o Creation: Research → Patterns → 2–4 personas.

 Example: “Jake, 22, needs easy group room booking.”

 Visual: Sample persona card with photo and details.

Slide 7: Ideation - Overview

 Title: Understanding Ideation

 Content:

o Definition: The creative process of generating diverse ideas to solve design

problems.

o Purpose: Explore a wide range of solutions to meet user needs.

o Context in UX: Part of Design Thinking’s “Ideate” phase.

o Why It Matters: Encourages innovation and user-centered solutions.

 Visual: Diagram showing Design Thinking process with “Ideate” highlighted.

Slide 8: Ideation - Key Principles

 Title: Principles for Effective Ideation

 Content:

o Quantity Over Quality: Generate many ideas to increase breakthroughs.

o Defer Judgment: Avoid critiquing ideas during brainstorming.

o Encourage Wild Ideas: Radical ideas can inspire practical solutions.

o Build on Others’ Ideas: Collaborate to refine concepts.

 Example: A team keeps “gamified room booking” idea, leading to a reward feature.

 Visual: Icons for each principle (e.g., lightbulb for wild ideas, team for collaboration).
Slide 9: Ideation Technique 1 - Brainstorming

 Title: Brainstorming

 Content:

o Definition: Group activity for rapid idea generation without critique.

o Process:

1. Gather a diverse team (3–8 people).

2. Set a clear problem (e.g., “Improve campus app usability”).

3. Generate ideas in 10–20 minutes, writing all on a board.

4. Review and cluster similar ideas later.

o Tips:

 Use a facilitator to keep focus.

 Encourage all to contribute.

o Example: Brainstorming yields QR code check-ins for a library app.

 Visual: Photo of a team brainstorming with sticky notes on a whiteboard.

Slide 10: Ideation Technique 2 - Mind Mapping

 Title: Mind Mapping

 Content:

o Definition: Visual tool to organize and connect ideas around a theme.

o Process:

1. Write the problem in the center (e.g., “Campus App Features”).

2. Branch out with related ideas (e.g., “Booking,” “Events”).

3. Add sub-branches (e.g., “Booking” → “Room Selection”).

4. Use colors to enhance creativity.

o Tips:

 Keep it freeform to spark connections.

 Review to identify promising clusters.

 o Example: A mind map links “Booking” to “QR Code Entry.”

 Visual: Sample mind map with colorful branches.

Slide 11: Ideation Technique 3 - SCAMPER

 Title: SCAMPER

 Content:

o Definition: Structured method to spark ideas by modifying concepts.

o Acronym:

 Substitute: Replace elements (e.g., manual booking with QR codes).

 Combine: Merge features (e.g., booking + calendar).

 Adapt: Borrow ideas (e.g., hotel booking style).

 Modify: Change aspects (e.g., simplify steps).

 Put to another use: Repurpose features (e.g., maps for navigation).

 Eliminate: Remove elements (e.g., redundant forms).

 Reverse: Flip perspectives (e.g., book from location).

o Example: SCAMPER eliminates paper-based booking.

 Visual: Table listing SCAMPER prompts with examples.

Slide 12: Ideation Technique 4 - Role-Playing

 Title: Role-Playing

 Content:

o Definition: Acting out user scenarios to generate ideas.

o Process:

1. Define personas (e.g., “Sarah, a busy student”).

2. Assign roles (e.g., user, system).

3. Act out a scenario (e.g., booking a room).

4. Note pain points and ideas during debrief.

o Tips:
  Use props (e.g., a phone for the app).

 Record sessions for analysis.

o Example: Role-playing reveals need for a “quick book” button.

 Visual: Photo of a team role-playing with a mock phone.

Slide 13: Ideation Technique 5 - Analogous Inspiration

 Title: Analogous Inspiration

 Content:

o Definition: Drawing ideas from unrelated domains.

o Process:

1. Identify the problem (e.g., “Simplify room booking”).

2. Choose analogous domains (e.g., restaurant reservations).

3. Analyze their solutions (e.g., OpenTable’s quick booking).

4. Adapt ideas to your context.

o Tips:

 Look for similar user goals.

 Focus on principles, not copying.

o Example: Airline check-in inspires QR code entry.

 Visual: Collage of analogous systems (e.g., OpenTable, airline app).

Slide 14: Combining Ideation Techniques

 Title: Combining Ideation Techniques

 Content:

o Why Combine?: Varied techniques spark diverse ideas.

o Example Workflow:

1. Brainstorm raw ideas.

2. Mind map to organize.

3. Apply SCAMPER to refine.

 4. Role-play to validate.

o Benefits: Comprehensive idea exploration.

o Example: Brainstorm → Map → SCAMPER → Role-play for app features.

 Visual: Flowchart of combined techniques.

Slide 15: Ideation Best Practices

 Title: Best Practices for Ideation

 Content:

o Diverse Teams: Include varied perspectives.

o Clear Problem Statement: Focus ideas.

o Time Limits: Short sessions (15–30 minutes).

o Document Everything: Capture all ideas.

o Iterate: Refine after feedback.

 Example: 20-minute session yields 50+ app ideas.

 Visual: Checklist of best practices with icons.

Slide 16: Ideation Case Study

 Title: Case Study: Ideation for a Campus App

 Content:

o Problem: Students struggle to book study rooms.

o Techniques:

 Brainstorming: QR codes, notifications.

 Mind Mapping: Organized features.

 SCAMPER: Eliminated manual steps.

 Role-Playing: Quick booking need.

o Outcome: App with QR code entry, simple interface.

 Visual: Before-and-after screenshots (problem vs. solution).

Slide 17: Sketching

 Title: Sketching: Visualizing Ideas

 Content:

o Definition: Quick, low-fidelity drawings.

o Benefits: Fast, iterative, feedback-friendly.

o Tips: Focus on concepts, use simple shapes.

o Process: Identify screens → Sketch → Share.

 Example: Sketch of a room booking app’s home screen.

 Visual: Photo of a hand-drawn sketch.

Slide 18: Mental Models & Conceptual Design

 Title: Mental Models & Conceptual Design

 Content:

o Mental Models: Users’ beliefs about systems (e.g., trash can = delete).

o Design Implication: Align with familiar patterns.

o Conceptual Design: High-level system structure.

o Focus: “What” the system does, not “how.”

 Example: Library app flow matches booking expectations.

 Visual: Diagram comparing user mental model and system design.

Slide 19: Storyboards

 Title: Storyboards

 Content:

o Definition: Visual narratives of user interactions.

o Components: Scenes, context, system responses.

o Purpose: Communicates user flows to stakeholders.

o Process: Define scenario → Sketch 4–8 panels → Add captions.

 Example: Student books a room via app storyboard.

  Visual: Sample storyboard panel sequence.

Slide 20: Design Influencing User Behavior

 Title: Influencing User Behavior

 Content:

o Techniques:

 Affordances: Suggest actions (e.g., clickable buttons).

 Feedback: Confirm actions (e.g., checkmark on save).

 Nudging: Guide choices (e.g., default settings).

o Example: Green “Confirm” button encourages booking.

 Visual: Screenshot of a button with feedback animation.

Slide 21: Design Production - Detailed Design

 Title: Detailed Design

 Content:

o Definition: Refining concepts into implementable specs.

o Activities:

 Interaction patterns (e.g., swipe, tap).

 Visual elements (e.g., colors, fonts).

 Edge cases (e.g., error states).

o Goal: Clear blueprint for developers.

 Example: Button specs (48x48px, #007AFF).

 Visual: Style guide snippet (colors, typography).

Slide 22: Wireframes

 Title: Wireframes

 Content:

o Definition: Low-fidelity UI layouts.

 o Components: Placeholders, navigation, annotations.

o Types: Static or interactive.

o Tools: Figma, Sketch, paper.

o Purpose: Test layout before visual design.

 Example: Wireframe of a booking app’s home screen.

 Visual: Sample wireframe with annotations.

Slide 23: UX Goals, Metrics, and Targets

 Title: UX Goals, Metrics, and Targets

 Content:

o UX Goals: Desired outcomes (e.g., efficiency).

o UX Measures: Quantifiable data (e.g., task time).

o Instruments: Surveys, usability tests, analytics.

o Metrics: Success rate, time-on-task, satisfaction.

o Targets: Benchmarks (e.g., 85% success rate).

 Example: “Book room in <60 seconds.”

 Visual: Table of metrics and targets.

Slide 24: Prototyping - Depth & Breadth

 Title: Prototyping: Depth & Breadth

 Content:

o Depth: Functionality level.

 Vertical: Deep, narrow features.

 Horizontal: Broad, shallow features.

o Breadth: Feature scope.

o Choice: Early (broad) vs. late (deep).

 Example: Horizontal prototype of app navigation.

 Visual: Diagram of vertical vs. horizontal prototypes.

Slide 25: Fidelity of Prototypes

 Title: Fidelity of Prototypes

 Content:

o Low-Fidelity: Sketches, wireframes (quick, flexible).

o High-Fidelity: Realistic mockups (detailed, costly).

o Medium-Fidelity: Balanced approach.

o Choice: Early (low) vs. late (high).

 Example: Paper sketch vs. Figma prototype.

 Visual: Side-by-side low- and high-fidelity examples.

Slide 26: Paper Prototypes

 Title: Paper Prototypes

 Content:

o Definition: Hand-drawn, testable interfaces.

o Process: Sketch screens → Simulate → Test.

o Benefits: Rapid, functionality-focused.

o Challenges: Limited interactivity.

 Example: Testing a booking app’s flow.

 Visual: Photo of a paper prototype test.

Slide 27: Connections with Software Engineering

 Title: SE-UX Connections

 Content:

o Foundations:

 Collaboration: Align on goals.

 Shared Artifacts: Wireframes, specs.

 Iterative Feedback: Usability tests.

 o Challenges: Priorities, communication, timing.

o Solutions: Agile, cross-functional teams, tools (Jira).

 Example: Zeplin for sharing specs.

 Visual: Workflow diagram (UX → SE).

Slide 28: UX Design Guidelines - Using Guidelines

 Title: Using Design Guidelines

 Content:

o Definition: Principles for usable designs.

o Sources: Nielsen’s heuristics, platform guidelines.

o Use: Design and evaluate.

o Interpretation: Adapt to context.

 Example: “Visibility of status” → Loading spinner.

 Visual: Nielsen’s heuristics list.

Slide 29: Human Memory Limitations

 Title: Human Memory Limitations

 Content:

o Short-Term: 7 ± 2 items (Miller’s Law).

o Working: Limited by cognitive load.

o Long-Term: Needs recall cues.

o Design: Minimize load, use recognition.

 Example: Limit filters to 6 options.

 Visual: Diagram of memory types.

Slide 30: UX Design Guidelines & Examples

 Title: UX Guidelines & Examples

 Content:
 o Consistency: Uniform elements.

o Feedback: Clear action responses.

o Simplicity: Minimal design.

o Accessibility: Inclusive design.

o Error Prevention: Reduce mistakes.

 Examples: Same buttons, error highlights.

 Visual: Screenshots of guideline applications.

Slide 31: Interaction Cycle

 Title: Interaction Cycle

 Content:

o Planning: User goal (e.g., book room).

o Translation: Interpret actions.

o Physical Action: Perform tasks.

o Outcomes: System response.

o Assessment: Verify goal.

o Overall: Seamless cycle.

 Example: Booking app flow.

 Visual: Cycle diagram with examples.

Slide 32: Key Takeaways

 Title: Key Takeaways

 Content:

o Design Thinking: Empathy-driven iteration.

o Ideation: Creative techniques for solutions.

o Sketching: Visualize ideas quickly.

o Production: Detailed specs, wireframes.

o Prototyping: Test depth, fidelity.

 o Guidelines: Apply principles, respect memory.

o SE-UX: Collaborate iteratively.

o Interaction: Support all cycle stages.

 Visual: Icons for each topic.

Slide 33: Student Activity

 Title: Hands-On Activity

 Content:

o Task: Design a paper prototype for a campus event app.

1. Create a persona.

2. Ideate features using two techniques (e.g., brainstorming, SCAMPER).

3. Sketch 5–7 screens with 3 guidelines.

4. Storyboard interaction cycle.

5. Test with a peer, note feedback.

o Goal: Apply UX concepts practically.

 Visual: Example sketch and storyboard.

Slide 34: Questions & Resources

 Title: Questions & Further Learning

 Content:

o Questions? Ask away!

o Resources:

 “The UX Book” by Hartson & Pyla

 Nielsen Norman Group (nngroup.com)

 Interaction Design Foundation (interaction-design.org)

 IDEO Design Thinking (designthinking.ideo.com)

 Visual: Book cover, website screenshots, IDEO logo.