Prototyping Physical & Immersive Environments for UX Designers

  • Published on

  • View

  • Download

Embed Size (px)


  • PrototyPing Physical & immersive Environmentsfor UX Designerstools for Making Lo-Fi Prototypes to Stimulate the Design ProcessSeattle Prototyping for Designers Meetup | 10.19.2015 | Susan oldham

  • 1. About me2. Why lo-fi for 3D?3. Physical & Immersive environments

    a. Descriptionsb. Design challenges

    4. Prototyping Toolsa. Modelsb. Projectionsc. Sensorsd. Tracking engagement

    5. Virtual Worldsa. Second Life demo with Valerie Hill

    6. Questions & contributions


  • about me

    UX & Visual Designer

  • University of WashingtonMS Human Centered Design & Engineering, 2015

    Capstone : UX in Public SpacesBS informatics, Human Computer interaction, 2012

    Certificate of Virtual Worlds, 2009

    University of CincinnatiDAAP, graphic/industrial Design, 1980s


  • Apparel DesignerSportswear : Heet, Unionbay Sportswear

    Activewear : Jantzen, Burton Snowboard, nK Sport

    Handknits : Vogue Knitting, Knitters, Creative Knits

    Visual DesignerRetail & Merchandising : t-Mobile, Starbucks, Macys

    Packaging : Starbucks, Costco, Econobox, girvin

    Architectural : J. Miller & Associates; Kr Studios, t-Mobile

    UX, Web & Information Design : Costco, Engine interactive, City of redmond, Win Home inspection, UW. + others


  • PrototyPEA representation that can be tested in some wayproto- : combining form meaning first, foremost, earliest form of, used in the formation of compound words (protomartyr; protoplasm).

    MoCKUPA model for presentation & communicationmock : to mimic, imitate, or counterfeit; an imitation; counterfeit; fake; feigned; not real.

    my definitions

    Prototype is an actionsomething we do in order to solve a particular business, design, or technical problem.Anthony Franco

  • MoCKtyPE?Proto-UP?

  • 1. External memory reduces cognitive load [Simon & newell, 1972]

    2. Sketching/doodling aids concentration & recall [Andrade, 2009]

    3. Sketching improves ability to restructure ideas [Verstijnen, 1998]

    4. Serendipity and happy accidents [Fish & Stephen, 1990]

    5. Sketching facilitates team collaboration [van der Lugt, 2004]

    6. Better design outcomes [yang, 2009]

    7. Better communication with clients, stakeholders & users [Buxton, 2007]

    Sketches are social thingsBill Buxton

    making, sketching & the design brain

    From Smashing Magazine article by Laura Busche

  • SmartWheelsCommunication Kit

    SmartWheels Kit installed on chair Includes Sensors,

    Microcontroller and Wi-Fi

    SmartWheels App


    Secure User Database



    physical design patternsPhysical technology that users can interact with in an interior or exterior physical space, either in an overt or ubiquitous manner

    Engagement is key to interaction in public or private spaces

    Climate & traffic patterns are factors in designing physical interfaces How people move within

    the space will inform design solutions

    Conditions can vary inside or outside: consider heat, cold, wind, rain, light & sound

  • iot patternsThe Internet of Things is a network of physical objects embedded with electronics, software, sensors and network connectivity, which enables these objects to collect and exchange data

    Look and feel is of utmost importance, product must fit into environment and give pleasure to user because of the intimacy of everyday devices

    Small size of components requires : Power efficiency Heat dispersal Elegant interface

  • immersive design patterns | Ar, MrAugmented reality is the overlay of information onto a physical environmentMixed reality allows generated information to merge with physical

    Immersion is moderate, sense of the physical must be strong

    Distraction is a concern : Minimal information for job at hand Effortless way to turn on/off Light source is critical Safety protocols

    Carrier 12:34 AM 100%

    Rate the enteRtainmentRate the enteRtainment

    Make your Mark on a Seattle Park

    Put youR name on the wall

    Donate to a BuskeR oR a PaRk

    Youre in Westlake Park, Downtown Seattle

    watching band Blue Trees Wailiers

    on April 19, 2015

    Give voice to youR iDea

    Carrier 12:34 AM 100%

    Do you want to see this band in the park again?

    Youre in Westlake Park, Downtown Seattle

    watching band Blue Trees Wailiers

    on April 19, 2015

    nopenot again

    yes, loved it


    Carrier 12:34 AM 100%

    Sign your name and hometown.

    Youre in Westlake Park, Downtown Seattle

    on April 19, 2015





    Salt Lake City

    Carrier 12:34 AM 100%

    How would you change the world? Please record your thoughts for Seattle.

    Youre in Westlake Park, Downtown Seattle

    60 sec


    Carrier 12:34 AM 100%


    Today Tomorrow all

    Seattle Parks & Rec Calendar

    Pac NW Skateboard TournamentSetup Main Stage

    Buskers Play Noon to 2pm



    Pac NW Skateboard TournamentEvents begin

    Sonic Kittens ConcertPac NW Skateboard Tournament



    Carrier 12:34 AM 100%

    June 30thWestlake Park

    AUgMenteD event CAlenDAr for Westlake Park with projected info. real-time data from Seattle Park & recreation online calendar.

    rAte tHe PArK1. SCAle 1 qUeStIOn2. rAte It

    SIgn tHe PArK1. tyPe/SPeAK nAMe2. CHOOSe PlACe

    MArK tHe PArK1. CHOOSe A WAy tO

    IMPACt tHe PArK

    leArn tHe PArK SHAre yOUr vISIOn1. SPeAK2. SHAre

  • immersive design patterns | VrVirtual reality is a total immersion into another environment

    Freedom to break from physical norms, defy conventions

    Psychology of being immersed in unfamiliar situation : Physical cues to combat dizziness Empathy for users experience

  • 3d models | Physical, iot, Ar, Mr 3d representations of products that can be tested

    Design explorationtest for shape, size, weight, viability, etc Team communication & collaboration Work with stakeholders to refine before time-consuming user tests User testing can be amazing with a well-executed 3D model Triangulation of methods = deeper understanding




  • models



  • projections | Ar, Mr, iot Combine an old-fashioned transparency overhead projector with

    a regular projector to emulate augmented & mixed reality apps Layer transparencies of sketches, diagrams, info overlays into room Add objects for shadows, outlines Team can make notes & sketch on projected prototypes Conduct usability testing, users can add sketches and comments

    on transparencies

    Multiple projectors can emulate room immersion Standard projectors mounted on ceiling can be angled

    down on surfaces Used overheads are inexpensive, $20-50 each on craigslist

  • projections

  • projections | Physical, Ar, Mr, iot Wizard of oz interactivity for users by projecting onto wall

    Similar to paper prototype, but projected on wall or screen while researcher controls action from computer

    Project concept onto body for wearable and mobile concepts Projector can be angled toward body area Can be combined with light activated stickers or glow-in-dark paint

    Reverse images on smartphone to reflect on glass or clear plastic simulate augmented reality information overlay


  • projections

  • tracking engagement | Physical, Ar, Mr, iot glow sticks and bracelets body for wearable and mobile concepts

    Track users more easily, differentiate between users on camera

    UV beads and UV flashlight are physical breadcrumbs

    Light, heat or touch sensitive paper that changes state, i.e. color

    Find these science tools and more at


  • sensors | Ar, Mr, iot, Physical ibeacons

    Pros : Easy to install and use, about $100 for 3; waterproof Cons : Smartphones need to be bluetooth enabled to track

    Dash button Pros : Can track users button push with script; inexpensive, $5 each Cons : Users have to press button, can disrupt flow Script created by Edward benson,

    TILE squares, or other trackers with mobile apps


  • microcontrollers | Ar, Mr, iot, Physical Arduino

    Pros : customizable and scriptable Cons : learning curve; bulky appearance; one script

    Raspberry Pi Pros : High-level computing possible Cons : learning curve, bulky

    Sensors for prototyping physical spaces Proximity : track user patterns in local area Accelerometer or gPS : track broad user patterns

  • evaluate & refin



    n &


    nalyze envision &










    The roof that protects a home is one of the most expensive house systems. Customer avatars can safely learn how the inspector looks for potential issues.

    The thorough home inspector is aware that the crawl space under the porch or house may have clues to the homes condition. Customers can join him in this tight space.

    Its important that an inspector not harm the sellers home in any way, so a careful inspector comes prepared with coveralls and shoe protection, and parks offsite.

    The home inspector looks at the entire site as a system. Water is the biggest enemy to a home and a good inspector starts by assessing all possible exterior entry points.

    Jenna & Josh | AvatarsFirsttimehomebuyersNurse&MarketingManagerNewlyweds,nochildrenAvidgamers

    Joanna | AvatarRealEstateAgent,5yrsMarriedwithonechildCreatesvirtualhometoursLearningPhotoshop

    Jim | AvatarMovingfromapttocondoHighSchoolteacherDivorced,2grownsonsEnjoysgames,motorcycles

    Jason | AvatarRealEstateAgent,10yrsSingle,ownscondoLookingfornewsocialmarketingtechniques


    Client ProblemProspective homebuyers are often confused about the home inspection process, and problems found in the home can seem overwhelming. The client, WIN Home Inspection, wanted to educate and reassure homebuyers about the process.

    User Centered Design Conducted qualitative interviews with stakeholders Defined user personas to understand user needs Designed scenarios based on use case analysis Generated sketches & prototype Refined business & design requirements

    Solution = ExperienceInteractiveinformationsysteminSecondLife:Second Life is an immersive virtual world thats free and accessible. WIN can effectively educate & talk to homebuyers in a simulated environment. Customers can learn about home systems and experience inspections from the inspectors point-of-view.

    Feature goals Interactive views of home systems including roof, crawlspace, plumbing, furnace, windows, etc.

    Educational displays and videos Metric-gathering scripts to learn about the virtual home visitors and prospective customers

    Games and prizes to encourage repeat visits

    Social networking goals 3D Twitter feed to permit external communication Staging in-world events to engage visitors Real-time open house to network with agents Annual WIN Conference conducted virtually

    Evaluation User testing and surveys Virtual world heuristic guidelines Analysis of data gathered on site with scripts





    Second Life demo

    Second Life is a social virtual world, free to users unless they want to purchase space for building or services and goods.

  • Second Life | Ar, Mr, Vr, iot, Physical

    Virtual world features of Second life Multi-modal : many ways to collaborate with others. own it : keep what you create, sell or barter services. Free : unless users want to purchase space for building

    or services and events.

    Unique : design and create elaborate worlds & individual identities. Linden currency : users can sell licenses to what they create. Changes in terms of service : has made selling in SL less attractive. Similar to World of Warcraft : but without the gaming aspect.

  • prototyping in SL | Ar, Mr, Vr, iot, Physicalprototyping in SL | Ar, Mr, Vr, iot, Physical

    SL is a valuable rapid prototyping area for 3d tech. Upload images and textures to emulate your environment..

    you can buy assets very cheaply, no need to build everything.

    Test scenarios and use cases.

    Users & stakeholders are aware that its a rough prototype.

    Create scripts (similar to ActionScript) to :

    Run parts of simulation greet your users Emulate interactions

    Easy to create different personas

  • Valerie Hill, MLS, PhD

    information Literacy Consultant & MachinimatorValerie Hill is a professional librarian, adjunct instructor of library science, and information literacy consultant. Dr. Hill received her MLS in Library and Information Science from Texas Womans University in 2007 and a PhD in Library and Information Science in 2012.

    She is currently an information literacy consultant and machinimator with a research focus on the intersection of information literacy and libraries with virtual worlds and digital culture.

    As president of Community Virtual Library, Val invites you to visit this virtual space to learn more about how to get started in Second Life.

    @valibrarian blog:

  • pros & cons

    ConS1. Cartoony appearance

    2. Learning curve for new users who need time to learn how to navigate and communicate

    3. Substantial cost for personal space

    4. Public access allows griefers to harass users

    5. Lag time for many users with slower computers or connections

    6. Limited exchange of prims and property

    7. Users can no longer make a lot of money in SL, so many vendors and users have moved on

    PRoS1. Free entry, can invite friends

    2. Collaboration among remote team members is easy because of multiple modes of communication

    3. Excellent for large group events like graduations & conferences

    4. Users can emulate many different real world and virtual reality scenarios

    5. Users can sell and share what they create

    6. Practice for Project Sansar, the new VR platform from Linden Labs

    7. Linden Labs is a reputable company

  • alternative worlds

    openSim open source and compatible with Second Life,

    can exchange some items among worlds Users have more control Users have to create more infrastructure


    Kitely built in openSim


  • free spaces to build in SL

    Edtech island Sandbox & Campus

    techLab oldest and Largest Sandbox

    College of north West London Sandbox

    Check out new sandbox locations at

  • booksCreating your World: the official guid...