User Experience Basics

Learn About User Experience Design

• User Experience Design Overview
  • Frustrating, confusing experiences with web applications or sites are common. Example:
    • Load page and four different videos auto-play at once
  • Experiences like this leave a lasting impression and negatively impact product
  • User Experience (UX) Design is the practice of examining people’s needs and motivations to inform the design of the overall experience with a product or service
    • Informed by a user-centered approach to design that includes observing behavior, listening to feedback, and reviewing prototypes with the people who will use the product or service
  • This bad provides a basic understanding of UX design and the design process
    • Beauty takes a backseat to clarity
    • In the Lightning Design System, all user interface elements are already designed, which takes care of all visual design decisions like color, typography, and shape for you
• Design Process
  • UX design sits at the intersection of business, technology, and people
    • Business needs and technology define the constraints
    • People inform the design
  • Many UX design processes generally follow the same overall framework:
    1. Empathize: Learn about the audience you’re designing for by observation and interview techniques
    2. Define: Create a point of view based on your users' needs and insights
    3. Ideate: Brainstorm as many creative solutions as possible to solve problem in previous stage
    4. Prototype and Test: Build and share representation(s) of one or more of the ideas. Test a rough draft on others.
    5. Iterate: Refine, and test again (returning to steps above as appropriate).
• UX Frameworks
  • UX Frameworks are a set of specific practices and the order in which you apply those practices within your design process. These help you focus on the right amount of effort on your project depending on its scope of work. Examples:
    • Double Diamond, by Design Council
    • Design Sprints, by Google Ventures
    • Laseau’s Funnel, by Paul Laseau
    • Design Thinking, by Stanford d.school
• UX Principles
  • UX Principles provide a foundation of best practices to follow when you’re designing. They are based on heuristics and psychological research. Fifteen UX Principles:
    • Clarity: Eliminate ambiguity
    • Common Region: Elements within the same area are perceived as related
    • Doherty Threshold: Productivity soars when a computer and its users interact at a pace faster than 400ms, which ensures that neither has to wait for the other
    • Efficiency: Anticipate needs to help people work better, smarter, and faster
    • Fitts’s Law: The longer it takes to move to a target, and the smaller the size of the target, the greater the error rate
    • Goal-Gradient Hypothesis: The closer people are to completing a task, the faster they work toward completion
    • Hick’s Law: The more options and complexities, the longer it takes to make a decision
    • Jakob’s Law: People spend more time on other websites than yours, so they expect your website to work similarly to the rest of the web
    • Occam’s Razor: The simplest solution is almost always the best solution
    • Pareto Principle: The 80/20 rule; 80% of consequences come from 20% of the causes
    • Parkinson’s Law: Work expands to fill the time available for its completion
    • Proximity: Objects that are closer together are perceived as more related than objects that are further apart
    • Robustness Principle: Be conservative in what you send, be liberal in what you accept
    • Similarity: Elements that share similar characteristics are perceived as more related than elements that don’t share those characteristics
    • Tesler’s Law: Every system has a certain amount of complexity that cannot be removed

Define Project Scope and Requirements

• Design Brief
  • A design brief is the heart of a UX design project. It is a living document that defines the critical information and plan for the work.
    • Tool to align with project stakeholders, partners, and peers on the goals of your project
    • Should help create understanding of:
      • Who you’re designing for
      • What they want to accomplish
      • What obstacles are in the way
      • Who the stakeholders are
• Personas
  • Personas describe a fictional person who represents someone who will use the product or service you’re designing
    • Includes shared behaviors, motivations, goals, and demographics from the group of users involved with the solution you’re designing
    • Meaningful personas are informed by qualitative and quantitative user research
    • More info in the UX Personas for Salesforce module
  • Example Persona: Maria Jimenez
    • Maria is a Salesforce admin with 2 years of admin experience
    • Works for a medium-sized business and is tasked with running its CRM instance
    • Wants to learn more about building Salesforce applications
    • Makes the comment “Salesforce is a Porsche, but we drive it like a moped.”
• Jobs to Be Done
  • Jobs to be Done, or JTBD for short, is a framework designed to help define success from a customer perspective
    • Starts with deeper question: “What jobs are customers hiring your product or service to do?”
      • “People don’t want to buy a quarter-inch drill, they want a quarter-inch hole.” - Theodore Levitt
    • Form of Jobs to Be Done varies, but it frames a persona’s desires and reasons for them:
      • When [situation], I want to [motivation] so I can [expected outcome].
      • Example from Maria persona: “When I’m learning on Trailhead, I want to discover new badges so I can understand the latest CRM administration best practices.”
• Constraints
  • Constraints are factors that limit the possibilities of your design solution
    • Sound negative, but are actually helpful in that they enable you to eliminate possibilities and narrow the scope of your design options
  • Three types: technical constraints, business constraints, and design constraints:
    • Technical constraints include:
      • Software requirements like performance, reliability, maintainability, integration, and so on
      • Hardware requirements like device size, connection speeds, peripherals, touch-enabled screens
      • Ex: business may use older generation laptops with low resolution and an older web browser
    • Business constraints include:
      • Time, budget, resources
      • Ex: design brief may include needing a solution by the end of the week. To meet that deadline, you may need three other designers, but budget for that may not be available.
    • Design constraints include:
      • Brand or content guidelines, design standards, quality governance, accessibility
      • Ex: brand guidelines may require logo to be a specific size that conflicts with feedback from users
• Stakeholders
  • Stakeholders are people who influence the project and are interested in the project’s success
    • Ex: designers/researchers helping on the project, engineers building the solution, leadership overseeing the project, client who hires you to design
    • Ex: Account executive, Sales rep, Salesforce admin, CEI, Financial Analyst…
  • RACI chart: Helpful exercise to outline roles of stakeholders
    • Responsible: who is responsible to do the work
    • Accountable: who is accountable to see that the project is completed
    • Consulted: who needs to be consulted for input
    • Informed: who needs to be kept informed of progress on the project
  • Consequence scanning: good to build the habit of examining the impact of the work and thinking through intended and unintended consequences of products/services we create
• Requirement gathering, negotiation, compromise, and communication are all vital to the design process and necessary to cover in-depth
  • These soft skills can be more important than artistic skills in UX design
    
    
• A persona is a fictional person representing someone who will use the product you’re designing
• Jobs to Be Done helps inform the design process by empowering you to focus on the outcomes that people using your product want

Create UX Artifacts

• Align first
  • Don’t start design process until you and your stakeholders have a shared understanding of the project goals
  • Design processes are cyclical and reliant on periodic stakeholder and user feedback through multiple iterations
  • UX design entails designing a solution to a problem, which may not always be a breathtaking visual design
    • Can also be a diagram documenting a process, words on a page, requirements, specifications, prototypes, research readouts, or high-fidelity designs
  • This unit covers UX deliverables and tools used to create design solutions
• UX Artifacts
  • UX artifacts are the outcomes of the design process
    • UX artifacts are craft-based deliverables, such as sketches, shapes, compositions, and interactions
    • Two main categories of UX artifacts: mappings and screens
• Mapping
  • Map-type UX artifacts are diagrammatic representations of a user’s experience. These:
    • Help designers and stakeholders empathize with the user, understand friction points, and identify opportunities for improvement
    • Encourage people to approach problem-solving from a user-centered perspective
    • Can operate at different levels of resolution, like a geographic map:
      • Broad view of the whole experience
      • Zoom into a specific step in an experience
  • Maps are forms of research
  • Types of maps:
    • Journey map
      • Visualization of each step of a persona’s experience with a product or service over a period of time, telling a story across all touchpoints
      • Useful to identify process optimizations, pain points, and potential solutions
    • Service blueprint
      • Extends a journey map by diagramming before and after states
      • Service blueprints establish relationships between digital and physical interactions, helping you understand the complete lifecycle of user interaction
    • Ecosystem map
      • Visualizes complex relationships among multiple systems
      • Can be complex in enterprise businesses that rely on interdependent applications that share data
      • Can include things besides technology, such as information, services, channels, even people
      • Help you understand complicated environments and how users interact with them
    • Empathy map
      • Visualization of how a user thinks, feels, acts and speaks
      • Helps you consider user psychology and identify motivations behind your product or service’s persona
      • Square with four quadrants:
        • Say: direct quotes
        • Think: lists things that matter and things personas think about
        • Feel: describes the emotional state from excitement to frustrations
        • Do: lists actions a user takes while interacting with your product or service
    • Mental model
      • Interaction patterns in your brain that represents how you think a system should work
      • Ex: you expect a “shopping cart” on an e-commerce site to operate similarly to a physical shopping cart
    • Storyboard
      • Sequence of illustrations that help designers/stakeholders visualize how users interact with your product or service
      • Similar to little comic strips
      • Don’t need to be perfect illustrations
• Screens
  • After creating UX artifacts to empathize with users, identify pain points, and align with stakeholders, continue the UX journey by designing screens for your product or service
  • When designing, focus on info hierarchy and appropriate positioning of design elements on each screen:
    • Position most critical data and actions prominently in highly visible areas
    • Secondary and tertiary info should be in less prominent areas
    • Use intuitive titles and content grouping
    • Share your screen designs with users early and often
  • Phases:
    • Use low-fidelity sketches in early phases
    • Share wireframes with users
    • Only refine to a high-fidelity, pixel-perfect screen when the design is rock-solid and ready to be sent to engineers to build

• Prototypes
  • Sharing static screens with users and stakeholders is fine, but prototypes bring static screens closer to reality
  • Goal of a prototype is to convey the interaction to the user
    • More interaction a design has, the more complicated and time-consuming the prototype can be
    • Screen design is fastest and easiest in low fidelity, same is true of prototypes
  • Click-through prototype, using tools like Google Slides or InVision, is a quick way to get early feedback.
  • Design deliverables range from sketches to diagrams to fully functional applications, each of which is rooted in feedback from the people who will use your product or service
    
    
• Info needed to create a UX map is usually gathered through workshops and talking with users
• Goal of a prototype is to convey the interaction to the user

Choose Tools and Request Feedback

• UX Designer Role and Tools
  • UX Designers' job is to create and communicate design
  • Design Tools can make your job easier - choose the best design tool for the deliverable you want to create.
    1. Pencil and Paper (or marker and whiteboard) are good tools for quick sketches in brainstorming sessions/group workshops
    2. Design System are good for more complex design elements and pattern documentation. Examples:
       • Design tools for interactive prototypes: InVision, Principle, Flinto, ProtoPie
       • Tools for virtual workshops or other collaborative ideation exercises: Miro, FigJam, Mural, InVision’s Freehand
       • Other tools try to do it all. 85% of UX Designers use either Figma or Sketch, which let you edit vector shapes and text, create interactive prototypes and animations, and engineering partners can extract specifications from your designs
       • Code is another tool that can be used to create designs. Ex: JavaScript frameworks like Lightning, React, or Angular can be as efficient as sketching or using a vector design tool
       • Activities are tools too, like Workshops, which can be great for getting groups together to solicit feedback, brainstorm opportunities, and align on solutions
• Research
  • UX Research is a set of activities that help you find out who your users are, what they value, and how they work
  • Combines the structure of project planning with rigor of research to build a case for improvement
  • Learn more from the UX Research Basics badge
• Feedback
  • While working through the user experience design process, important to do as much sharing as designing
  • Feedback from peers, stakeholders, and users is critical, and giving feedback is just as essential
  • Receiving Feedback
    • Feedback helps us grow, improves our work, and creates a trusting environment
    • Be transparent with your audience about the feedback you want, then be polite, talk less, and listen more
  • Giving Feedback
    • Avoid statements that offer an opinion without substance, like “looks great” and “I don’t like it”
    • Provide actionable feedback and reasons for your feeling
  • Asking clarifying questions is useful for both giving and receiving feedback - it can open a conversation and encourage deeper thinking about design decisions
• Remember the following:
  • In UX design, beauty takes a backseat to clarity
  • Talk to as many users as possible to get feedback at each stage in the design journey
    
    
• When selecting design tools, important to keep in mind that your tools' output must be accessible to stakeholders so they can provide feedback
• When requesting feedback, make sure the audience knows what problem you’re trying to solve