UX Designer Exam extra 3

Low-Fidelity Prototyping in Salesforce UX

• Low-fidelity prototypes are crucial for ideation and concept testing in the early UX stages.
• Salesforce UX designers use low-fidelity prototypes to iterate quickly on ideas before creating higher fidelity prototypes.
• These prototypes help gather early feedback from stakeholders and users.
• Paper, digital sketches, Lego prototypes are commonly used for low-fidelity prototyping.
• Low-fidelity prototypes aid accessibility considerations, such as keyboard navigation and screen reader compatibility, aligning with WCAG guidelines.
• These prototypes define layout, user flows, and interactions before implementing SLDS components.
• Early concept testing helps designers explore ideas quickly.
• Gathering stakeholder and user feedback ensures usability before investing in detailed designs.
• Accessibility considerations involve validating keyboard navigation, screen reader compatibility, and adherence to WCAG guidelines.
• Defining layouts and user flows establishes foundational interactions before implementing Salesforce Lightning Design System (SLDS) components.
• Cross-browser testing ensures functionality across different browsers.
• Keyboard/Screen reader tools are used for testing accessibility.
• Surveys gather user feedback.
• Design systems provide reusable components and patterns for consistent design.

Prototype Fidelity

• Low-fidelity prototypes are ideal for answering ideation-level questions.
• Medium-fidelity prototypes are perfect for exploration-level concepts.
• Mockups and 3D-printed models are examples of medium-fidelity prototypes.
• HTML code represents a high-fidelity prototype.

Prototype Stages

• Low-Fidelity (Ideation Stage): Used for early-stage brainstorming and concept validation, such as paper sketches, wireframes, Lego models, and Wizard of Oz simulations.
• Medium-Fidelity (Exploration Stage): Refines ideas and tests key interactions with digital wireframes, interactive mockups, and 3D-printed models.
• High-Fidelity (Validation & Development Stage): Fully interactive and visually polished, closely resembling the final product, like clickable prototypes, coded HTML/CSS interfaces, and SLDS-based components.

Common Low-Fidelity Prototype Formats

• Sketches: Quick, hand-drawn visuals for rapid brainstorming.
• Paper Wireframes: Printed or drawn layouts to simulate user flows.
• Lego Prototypes: Physical models represent spatial or product design.
• Digital Wireframes: Created using tools like Balsamiq, Figma, or Adobe XD for more structured ideation.
• Wizard of Oz Testing: Manually simulating system responses to validate functionality before actual development.
• Paper prototypes are used for quick, low-cost ideation and feedback gathering.
• Digital prototypes can be more interactive than paper or physical prototypes for exploring user flows extensively.

Tools for Prototyping

• Figma, XD, Sketch: Used for digital wireframes, prototypes, and UI design.
• Balsamiq: For quick and effective low-fidelity wireframing.
• Salesforce Lightning Design System (SLDS): Offers pre-built UI components for high-fidelity designs.
• Miro, Mural: Used for brainstorming, customer journey mapping, and UX flow design.
• Axure RP: For interactive and clickable prototypes for Salesforce applications.
• Figma (or similar design tool): Used for building interactive prototypes based on digital designs.

Case Studies

• Experience Cloud Redesign: Low-fidelity sketches and digital prototypes were used to enhance navigation and component placement.
• Service Cloud Console Enhancements: Paper prototypes tested case management workflows to refine tab layouts and interaction flows.
• Lightning App Builder Improvements: Wizard of Oz testing validated a new drag-and-drop interface, later refined with digital prototypes in Figma for A/B testing.

Prototyping Application

• Start with low-fidelity sketches to map out concepts.
• Gather early feedback from stakeholders and users through usability testing (e.g., paper prototypes).
• Refine layouts using digital wireframes (e.g., Figma, Balsamiq).
• Integrate Salesforce-specific components using SLDS guidelines.
• Validate final interactions with usability tests (e.g., Wizard of Oz).
• Feedback from stakeholders and users is important at all steps.
• Design systems principles and patterns provide a structural basis.

Constraints

• Business Constraints: Time, budget, and resource limitations.
• Technical Constraints: Performance, system integrations, and scalability.
• Design Constraints: Branding guidelines, governance, and accessibility requirements.
• Time and budget constraints dictate the stages of prototypes required.
• Design systems play a role by providing consistent visual language and structure.

Research Methods

• Focus Groups: Gathering qualitative insights through customer discussions.
• Tree Testing: Evaluating the effectiveness of content organization and navigation.
• Eyetracking: Measuring user attention patterns to optimize layout and information hierarchy.
• Testing throughout the design process is important.

Salesforce Personas

• Community Manager: Manages external site components and engagement.
• Site Admin/Builder: Handles backend configurations and internal site management.
• Site User: An external customer or partner accessing the platform.

UX Design Framework

• Hero (User Persona): Define the primary user (e.g., Alex, a customer support agent).
• Relatability: Ensure the persona reflects real challenges faced by users.
• Challenge: Identify key pain points (e.g., high case volume, inefficient workflows).
• Helper (Solution): Introduce the proposed feature (e.g., AI-powered case prioritization).
• Victory: Measure success (e.g., 40% faster resolution time).
• The Hero's Journey framework helps identify actionable problems and solutions from the user's perspective.

Core Design Principles

• Voice and Tone: Align messaging with brand values and audience expectations.
• Customer-Centricity: Focus on user needs throughout the design process.
• Accessibility: Ensure compliance with ARIA, contrast ratios, and keyboard navigation standards.
• Responsive Design: Design for optimal experiences across devices (mobile-first).
• Relationship Design: Prioritize inclusivity, sustainability, and ethical considerations.
• Service Design: Deliver a seamless end-to-end user experience.
• Inclusive Design: Proactively address accessibility challenges to accommodate all users.
• Good design is a balancing act between different needs.
• Testing throughout the process is critical.

Development Considerations

• Mobile-First Approach: Prioritize mobile experiences before expanding to larger screens.
• Optimized Page Layouts: Simplify UI to improve usability and reduce cognitive load.
• Customizable Portals: Provide declarative and programmatic customization options.
• Enhanced Data Tables: Use Lightning Web Components (LWC) to display structured data efficiently.
• Automation with Macros: Enable task automation via Assignment and Validation Rules.
• Affordances in UI: Ensure visual clarity for interactive elements (e.g., using icons to signal functions).
• Wire Adapters in LWC: Efficiently fetch data from Salesforce servers to improve UI performance.
• Tools and techniques aid in efficient and fast development.
• Speed is not the sole metric for deciding the best practice.

Key Terms

• Accessible Rich Internet Applications (ARIA): HTML enhancements improving accessibility for users with disabilities.
• Lightning Web Components (LWC): A modern JavaScript-based framework for building high-performance UI components in Salesforce.
• Wizard-of-Oz: A technique used to simulate system functionality before actual development.
• WCAG Guidelines: Web Content Accessibility Guidelines, for accessibility standards.
• SLDS: Salesforce Lightning Design System for styling and component library.