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

agenda

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

education

Apparel DesignerSportswear : Heet, Unionbay Sportswear

Activewear : Jantzen, Burton Snowboard, nK Sport

Handknits : Vogue Knitting, Knitter’s, 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

experience

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 action—something 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 things”—Bill 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

OpenStreetMaps

Secure User Database

BluetoothHeadset

User

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, Mr

Augmented 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

You’re 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?

You’re in Westlake Park, Downtown Seattle

watching band Blue Trees Wailiers

on April 19, 2015

nopenot again

yes, loved it

suBmitRate!

Carrier 12:34 AM 100%

Sign your name and hometown.

You’re in Westlake Park, Downtown Seattle

on April 19, 2015

name

Place

suBmit

Manuel

Salt Lake City

Carrier 12:34 AM 100%

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

You’re in Westlake Park, Downtown Seattle

60 sec

suBmitlisten

Carrier 12:34 AM 100%

Sunday,

Today Tomorrow all

Seattle Parks & Rec Calendar

Pac NW Skateboard TournamentSetup Main Stage

Buskers Play Noon to 2pm

10

Noon

Pac NW Skateboard TournamentEvents begin

Sonic Kittens ConcertPac NW Skateboard Tournament

1

5

Carrier 12:34 AM 100%

June 30th

Westlake 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 | Vr

Virtual 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 user’s experience

3d models | Physical, iot, Ar, Mr

• 3d representations of products that can be tested• Design exploration—test 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

PLAy-DoH ILLUSTRAToR EXTRUSIon

SEConD LIFE

PAPER

models

SkETCHIng USER EXPERIEnCESQUEEnSLAnD UnIVERSITy LIbRARy

InTERnATIonAL USER EXPERIEnCE CoURSE, UW

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

SkETCHIng USER EXPERIEnCES

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 www.teachersource.com.

TEACHERSoURCE.CoM

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, medium.com/@edwardbenson

• TILE squares, or other trackers with mobile apps

AMAzon DASH bUTTon ESTIMoTES IbEACon DEV kIT TILE

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

e

lear

n &

a

nalyze envision &

design

PER

SONAS SCENARIOS

SK

ETCHING REQUIR

EMEN

TS

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 home’s condition. Customers can join him in this tight space.

It’s important that an inspector not harm the seller’s 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 | Avatars•Firsttimehomebuyers•Nurse&MarketingManager•Newlyweds,nochildren•Avidgamers

Joanna | Avatar•RealEstateAgent,5yrs•Marriedwithonechild•Createsvirtualhometours•LearningPhotoshop

Jim | Avatar•Movingfromapttocondo•HighSchoolteacher•Divorced,2grownsons•Enjoysgames,motorcycles

Jason | Avatar•RealEstateAgent,10yrs•Single,ownscondo•Lookingfornewsocial

marketingtechniques

AWINHomeInspectioninspector’smainroleistocommunicatewithhomebuyersabouttheirnewhome,andhowitssystemswork.Accurateinformationisanimportantfactorinthesuccessoftheinspection.

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 that’s 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 inspector’s 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

THESEEMOREVIRTUALHOUSEHomeInspectionasImmersiveUserExperience

ThePersonasTheDesignProcess

InspectorIdentity

Thepersonasexercisewasparticularlyimportantforavirtualworldprojectwheretrustcanbeanissue.It’scriticaltogainthetrustofpotentialusersviagooddesign,andtohelptheclientassesshowSecondLifeuserstranslatetorealcustomers.

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 it’s 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 Woman’s 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.

http://maps.secondlife.com/secondlife/bradley%20University/57/114/27

@valibrarian blog: vhill.edublogs.org

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

http://opensimulator.org

inWorldzhttp://inworldz.com

Kitely • built in openSim

http://www.kitely.com

free spaces to build in SL

Edtech island Sandbox & Campus http://maps.secondlife.com/secondlife/Edtech/148/88/24

techLab oldest and Largest Sandbox http://maps.secondlife.com/secondlife/techinvestLab/125/193/26

College of north West London Sandbox http://maps.secondlife.com/secondlife/CnWL/48/175/26

Check out new sandbox locations at http://secondlife.com/destinations/howto/sandbox

booksCreating your World: the official guide to Advanced Content Creation for Second Life by Aimee Weber, Kimberly Rufer-Bach & Richard Platel

Prototyping and Modelmaking for Product Design by Bjarki Hallgrimsson

Scripting your World: the official guide to Second Life Scripting Paperback by Dana Moore, Michael Thome & Dr. Karen Haigh

Sketching for User Experiences by Bill Buxton

Sketching for User Experiences Workbook by Saul Greenberg & Bill Buxton

linksScience project supplies: www.teachersource.comDash button sniffer hack: https://medium.com/@edwardbenson/how-i-hacked-amazon-s-5-wifi-button-to-track-baby-data-794214b0bdd8 Dash button: www.amazon.com/dashtiLE finder: www.thetileapp.com

references & links

Please share your own tips for prototyping

emerging technologies.

thanks!

question & contribution time