Desire Paths & Inclusive Design

So you have an idea and want to build an app. Have you figured out the design-dev plan yet? In this talk I share my approach for mobile development:

1. Design for Inclusion (Think Personas)
2. Instrument for Understanding (Think Analytics)
3. Prototype for Validation (Think Resources)
4. Reimagine for Affordances (Think Dual-Screen!)

Read the longer series of posts here:
https://bit.ly/desire-paths-design

Transcript

1. #DesignForImpact | http://bit.ly/desire-paths-design @nitya
   @nitya
   Desire Paths
   & Inclusive
   Design
   #DesignForImpact
   http://bit.ly/desire-paths-design
   Nitya Narasimhan, PhD | Microsoft Cloud Advocate | @nitya
   Image Credit: Noun Project
   Image Credit: https://undraw.co
   

   View Slide

2. #DesignForImpact | http://bit.ly/desire-paths-design @nitya
   About Me ● Phd & Polyglot
   20+ yrs software R&D in
   mobile, web, distributed
   ● Visual Storyteller
   convey complex concepts
   to diverse audiences
   ● Cloud Advocate
   help translate awareness
   into actionable learning
   

   View Slide

3. #DesignForImpact | http://bit.ly/desire-paths-design @nitya
   Objectives ● Think Design
   What does your user want?
   Is your design inclusive?
   ● Think Development
   How can you validate ideas?
   How can you evolve them?
   ● Resources:
   Share comments, get slides!
   http://bit.ly/desire-paths-design
   ●
   Image Credit: https://undraw.co
   

   View Slide

4. #DesignForImpact | http://bit.ly/desire-paths-design @nitya
   ● User
   Who is the audience? What
   does a target user look like?
   ● Concept
   What is your idea? Does it
   match your user’s needs?
   ● Platform:
   Where should you build it?
   Why? Will it work?
   So you want to
   build an app!
   What’s your
   design-dev plan?
   

   View Slide

5. #DesignForImpact | http://bit.ly/desire-paths-design @nitya
   Why Mobile ●
   7.26B | users by 2022
   ●
   220 | minutes/user daily
   ●
   2617 | clicks/user daily
   ●
   48% | access internet on phone
   ●
   40% | uninstall apps for unuse
   ●
   ~80 | apps installed/user (avg)
   ●
   ~9 | apps actively used (daily)
   Image Credit: https://undraw.co
   Source: https://fueled.com/blog/mobile-stats/
   

   View Slide

6. #DesignForImpact | http://bit.ly/desire-paths-design @nitya
   ● User
   Who is the audience? What
   does a target user look like?
   ● Concept
   What is your idea? Does it
   match your user’s needs?
   ● Platform:
   Where should you build it?
   Why? Will it work?
   Image Credit: https://undraw.co
   So you want to
   build an app!
   What’s your
   design-dev plan?
   

   View Slide

7. #DesignForImpact | http://bit.ly/desire-paths-design @nitya
   Desire Paths
   Source: Desire Path: Medium / Jul 2019
   Desire paths are the
   trails created by natural
   human traffic through
   an environment ..
   They emerge as “preferred” shortcuts
   when the “constructed” alternative is
   either non-existent or ineffective in
   user’s context - pay attention!
   Software Example:
   Twitter hashtags, threads, photos
   

   View Slide

8. #DesignForImpact | http://bit.ly/desire-paths-design @nitya
   Want to learn more?
   Visit this later.
   Detect desire
   paths, then “pave”
   them for a better
   user experience
   Design Example:
   Wayfinding within mobile apps.
   Development Approach:
   Instrumentation & User feedback
   

   View Slide

9. #DesignForImpact | http://bit.ly/desire-paths-design @nitya
   ● User
   Who is the audience? What
   does a target user look like?
   ● Concept
   What is your idea? Does it
   match your user’s needs?
   ● Platform:
   Where should you build it?
   Why? Will it work?
   Image Credit: https://undraw.co
   So you want to
   build an app!
   What’s your
   design-dev plan?
   

   View Slide

10. #DesignForImpact | http://bit.ly/desire-paths-design @nitya
    Inclusive
    Design
    https://www.microsoft.com/design/inclusive/
    Recognize
    exclusion (biases)
    Learn from
    diversity
    (perspectives)
    Solve for one,
    extend to many
    (constraints)
    

    View Slide

11. #DesignForImpact | http://bit.ly/desire-paths-design @nitya
    Recognize
    Exclusion
    https://www.microsoft.com/design/inclusive/
    Exclusion happens when we solve
    problems using our own biases!
    Physical, cognitive, social
    exclusion behaviors
    Permanent, temporary, situational
    exclusion contexts
    

    View Slide

12. #DesignForImpact | http://bit.ly/desire-paths-design @nitya
    Learn from
    Diversity
    https://www.microsoft.com/design/inclusive/
    Put the user in the center of your
    proccess (& you are not the user!)
    The insight is in the user’s
    adaptation behaviors
    The solution lies in actively
    building empathy
    

    View Slide

13. #DesignForImpact | http://bit.ly/desire-paths-design @nitya
    Solve for one,
    extend to many
    https://www.microsoft.com/design/inclusive/
    Look for common ground -
    everyone experiences exclusion
    The insight is in the beauty
    of constraints - reuse becomes key
    The solution lies in perceiving
    universal benefits
    

    View Slide

14. #DesignForImpact | http://bit.ly/desire-paths-design @nitya
    ● User
    Who is the audience? What
    does a target user look like?
    ● Concept
    What is your idea? Does it
    match your user’s needs?
    ● Platform:
    Where should you build it?
    Why? Will it work?
    Image Credit: https://undraw.co
    So you want to
    build an app!
    What’s your
    design-dev plan?
    

    View Slide

15. #DesignForImpact | http://bit.ly/desire-paths-design @nitya
    Approach ● Design for User Inclusion
    Think PERSONAS
    ● Instrument for User
    Understanding
    Think ANALYTICS
    ● Prototype for Idea Validation
    Think RESOURCES
    ● Reimagine for Affordances
    Think DUAL-SCREEN & MULTI-MODAL
    Image Credit: https://undraw.co
    

    View Slide

16. #DesignForImpact | http://bit.ly/desire-paths-design @nitya
    https://www.microsoft.com/design/inclusive/
    The Persona
    Spectrum
    We use the Persona Spectrum to
    understand related mismatches and
    motivations across a spectrum of
    permanent, temporary, and situational
    scenarios.
    It’s a quick tool to help foster empathy
    and to show how a solution scales to a
    broader audience.
    

    View Slide

17. #DesignForImpact | http://bit.ly/desire-paths-design @nitya
    Approach ● Design for User Inclusion
    Think PERSONAS
    ● Instrument for User
    Understanding
    Think ANALYTICS
    ● Prototype for Idea Validation
    Think RESOURCES
    ● Reimagine for Affordances
    Think DUAL-SCREEN & MULTI-MODAL
    Image Credit: https://undraw.co
    

    View Slide

18. #DesignForImpact | http://bit.ly/desire-paths-design @nitya
    Analytics
    Instrument your app to
    collect & analyze behavior
    ● Integrate App Center SDK
    Automatically gather usage data. Define
    custom events for additional insights.
    ● Collect & visualize key metrics
    View app analytics, user demographics,
    session usage & more at scale.
    ● Define & collect custom events
    Track how users navigate your app, find
    desire paths and pave them
    Image Credit: https://undraw.co
    How App Center Analytics Works
    

    View Slide

19. #DesignForImpact | http://bit.ly/desire-paths-design @nitya
    Approach ● Design for User Inclusion
    Think PERSONAS
    ● Instrument for User
    Understanding
    Think ANALYTICS
    ● Prototype for Idea Validation
    Think RESOURCES
    ● Reimagine for Affordances
    Think DUAL-SCREEN & MULTI-MODAL
    Image Credit: https://undraw.co
    

    View Slide

20. #DesignForImpact | http://bit.ly/desire-paths-design @nitya
    Affordances Microsoft Surface Duo
    Dual-Screen Layouts
    Think PAIRED APPS & SPANNED APPS
    ● Unique 360-degree hinge
    Think MULTI-POSTURE & ADAPTIVE UX
    ● Android + M365 apps
    Think PRODUCTIVITY & PLAY
    ● Native, Multi-Platform, Web
    Think DEVELOPMENT-READY
    Image Credit: https://undraw.co
    https://aka.ms/sdd-dual-screen
    https://dev.to/t/surfaceduodev
    

    View Slide

21. #DesignForImpact | http://bit.ly/desire-paths-design @nitya
    Approach ● Design for User Inclusion
    Think PERSONAS
    ● Instrument for User
    Understanding
    Think ANALYTICS
    ● Prototype for Idea Validation
    Think RESOURCES
    ● Reimagine for Affordances
    Think DUAL-SCREEN & MULTI-MODAL
    Image Credit: https://undraw.co
    

    View Slide

22. #DesignForImpact | http://bit.ly/desire-paths-design @nitya
    What is
    Rapid
    Prototyping?
    ● Build a mockup of
    idea, app or design
    ● Validate the idea
    by demo to users
    ● Do this iteratively
    in agile teams
    Image Credit: https://undraw.co
    

    View Slide

23. #DesignForImpact | http://bit.ly/desire-paths-design @nitya
    @nitya
    Let’s talk about
    Design
    Resources!
    Image Credit: https://undraw.co
    

    View Slide

24. #DesignForImpact | http://bit.ly/desire-paths-design @nitya
    Design Resources
    Tools / Principles
    Design practices & resources
    from device manufacturers.
    1. Microsoft Design
    (Fluent UI, Inclusive design)
    2. Google Design
    (Material Design, Fonts)
    3. Apple Design
    (SF Symbols, Templates)
    

    View Slide

25. #DesignForImpact | http://bit.ly/desire-paths-design @nitya
    Design Resources
    Content Assets
    Open source or free assets
    for professional looking
    presentations or app views.
    1. Images
    Unsplash, Pixabay, Flickr
    2. Icons
    Noun Project
    3. IconFonts
    IcoMoon
    

    View Slide

26. #DesignForImpact | http://bit.ly/desire-paths-design @nitya
    Design Resources
    Wireframes
    Wireframes are visual guides
    to help you blueprint your app
    design before you build
    1. Mockup User
    Interfaces
    Balsamiq, Figma
    2. Build Interactive
    Prototypes
    Invision, FluidUI, NinjaMock
    Focus on getting design elements (UI, Flows) right
    

    View Slide

27. #DesignForImpact | http://bit.ly/desire-paths-design @nitya
    Design Resources
    Wireframes
    Wireframes are visual guides
    to help you blueprint your
    app design before you build
    1. Mockup User
    Interfaces
    Balsamiq, Figma, NinjaMock
    2. Build Interactive
    Prototypes
    Invision, FluidUI
    Interactive
    Demo
    Hosted for mobile/web access, get user feedback
    

    View Slide

28. #DesignForImpact | http://bit.ly/desire-paths-design @nitya
    @nitya
    Let’s talk about
    Development
    Resources!
    

    View Slide

29. #DesignForImpact | http://bit.ly/desire-paths-design @nitya
    Building
    Functional
    Interactive Apps
    ● No Code
    Use wireframe+mock tools to build,
    test UI/UX. Cannot integrate or use
    APIs or services. Think designers.
    ● Low Code
    Visual drag-and-drop approach to
    mobile/web app development. Ex:
    Power Platform. Think citizen devs.
    ● Full Code
    Build mobile/web app from scratch
    or boilperplate, integrating APIs or
    services. Think mobile/web devs.
    Image Credit: https://undraw.co
    

    View Slide

30. #DesignForImpact | http://bit.ly/desire-paths-design @nitya
    Developer Resources
    Mock Data
    Placeholder data (text,
    images, user profiles) to help
    create realistic UI/UX
    1. Generators
    https://loremipsum.io
    2. User Profiles
    RandomUser.me
    3. FakeData Libraries
    Faker.js, JSONPlaceholder
    4.
    

    View Slide

31. #DesignForImpact | http://bit.ly/desire-paths-design @nitya
    Developer Resources
    Mock Data
    Placeholder data (text,
    images, user profiles) to help
    create realistic UI/UX
    1. Generators
    LoremIpsum
    2. User Profiles
    RandomUser.me
    3. FakeData Libraries
    Faker.js, JSONPlaceholder
    4.
    Downloadable dataset or accessible via API
    

    View Slide

32. #DesignForImpact | http://bit.ly/desire-paths-design @nitya
    Developer Resources
    Mock Data
    Placeholder data (text,
    images, user profiles) to help
    create realistic UI/UX
    1. Generators
    LoremIpsum
    2. User Profiles
    RandomUser.me
    3. FakeData Libraries
    Faker.js, JSONPlaceholder
    4.
    

    View Slide

33. #DesignForImpact | http://bit.ly/desire-paths-design @nitya
    Developer Resources
    API Integration
    APIs allow for cross-platform
    app experiences, addition of
    remote capabilities.
    1. Mock your API
    Postman
    2. 3rd Party APIs
    Programmable Web
    Simulate API responses using mock servers for “new”
    features or workflows you want to showcase
    

    View Slide

34. #DesignForImpact | http://bit.ly/desire-paths-design @nitya
    Developer Resources
    API Integration
    Placeholder data (text,
    images, user profiles) to help
    create realistic UI/UX
    1. Mock your API
    Postman
    2. 3rd Party APIs
    Programmable Web
    Find APIs for any category or keyword, globally
    

    View Slide

35. #DesignForImpact | http://bit.ly/desire-paths-design @nitya
    Developer Resources
    App Generators
    The Yeoman tool & workflow
    simplifies discovery & usage
    of starter kits to scaffold apps
    1. Static Websites
    JAMStack, GitHub Pages
    2. Web Apps
    React, Vue, Angular, PWA
    3. Mobile Apps
    Android, iOS, Flutter, Hybrid
    

    View Slide

36. #DesignForImpact | http://bit.ly/desire-paths-design @nitya
    Recap ● Think Design
    What does your user want?
    Is your design inclusive?
    ● Think Development
    How can you validate ideas?
    How can you evolve them?
    ● Resources:
    Share comments, get slides!
    http://bit.ly/desire-paths-design
    ●
    Image Credit: https://undraw.co
    

    View Slide

37. #DesignForImpact | http://bit.ly/desire-paths-design @nitya
    Recap: Hack Your Hackathon!
    Plan Ahead
    Design Resources
    can get you 80% of
    the way...
    Prototype Wisely
    Focus on 20% core
    idea - use fake data,
    APIs & generators
    Perfect Pitch
    Keep plans simple,
    execute on
    checklists.
    

    View Slide

38. #DesignForImpact | http://bit.ly/desire-paths-design @nitya
    This is the
    25-min talk I
    gave on Local
    Hack Day ..
    Today we’ll just
    scan some of
    the resources
    

    View Slide

39. #DesignForImpact | http://bit.ly/desire-paths-design @nitya
    @nitya
    Thanks for
    Listening!
    Slides from Local Hack Day:
    https://j.mp/2020-hacks4hacks
    Nitya Narasimhan, PhD | @nitya Local Hack Day 2020
    Image Credit: Noun Project
    Image Credit: https://undraw.co
    

    View Slide