SlideShare a Scribd company logo

Digital prototyping workshop UXLibs 2019

At the 2019 User Experience in Libraries conference, themed from research to design, I led a digital prototyping workshop. The case for my workshop was to design an improved mobile experience of reserving a group study room. The aims were to empower participants with skills and confidence to: * build interactive digital prototypes quickly and easily from low fidelity paper sketches * test prototypes with users to gather feedback, iterate and implement improvements to digital experiences

1 of 25
Download to read offline
Digital prototyping workshop
Vernon Fowler
@vfowler
UXLibs 2019
Photo by Hal Gatewood on Unsplash
Better experience of reserve a group study room
Outline
•Insights to concept
•Design a prototype
•Test, learn, iterate
Leiden University Library, Group Study Room (CC BY 3.0)
Learning objectives
1. Sketch a sequence on templates
2. Scan sketches & link into a flow
3. Test your prototype & gather feedback.
Insight to concept: room reservation
Stories
https://jtbd.info/replacing-the-user-story-with-the-job-story-af7cdee10c27
Story #1
When we need to do focus work this weekend
I want to reserve a group study room
so we can collaborate on our group project.
Story #2
When we need to cram for this afternoon’s exam
I want to reserve a group study room
so we can learn together.
Story #3
When our group (7) need to rehearse this evening
I want to reserve a group study room
so we can practice presenting.
Further context
Using their mobile
Apply story contexts to
our reservation system
→ insights.
Photo by ROBIN WORRALL on Unsplash
Insights
Available + desired timeframe
+ mobile = 
•Unavailable slots shown
•Scroll ↑ times disappear
•Capacit…
Problem statement
Mobile users struggle to find an available
group study room in their desired timeframe.
How might we …?
HMW make it easier for mobile users to
reserve an available group study room
in their desired timeframe?
Concept: show relevant options
•In the desired timeframe
•Only show available options
•Designed for mobile
Design a sketched sequence
Any template for 3
Cut a template → everyone has 1 frame to sketch.
https://marvelapp.com/sketchpad
https://youtu.be/JqDAOWfEpbE
Sketching
Scan sketches
0:26 to 0:39 of https://youtu.be/bHn2wxrN21w
Install Marvel on your phone
Android
http://j.mp/marvelforandroid
iOS
http://j.mp/marvelforios
Use Marvel app:
1. Create project
2. Name the project: Test
3. Choose your device
4. Add some designs +
5. Camera × 3 sketches
→ Screens × 3
Link screens
0:39 to 0:54 of https://youtu.be/bHn2wxrN21w?t=39s
Use Marvel app:
1. Choose screen 1
2. Add Link
3. Rectangle around Next
4. Link to …
5. Choose screen 2
6. Done.
7. Choose screen 2 & link…
Test your prototype
0:54 to 1:20 of https://youtu.be/bHn2wxrN21w?t=54s
User feedback
•Share the prototype
•Learn from users
•Iterate the implementation
Take-aways
•Use insight to frame problems
•Prototyping is a design experiment
•Test with users
•Learn, iterate & implement
Thank you
Questions and comments
@vfowler
Photo by Hal Gatewood on Unsplash

Recommended

Deep Learning @ ZHAW Datalab (with Mark Cieliebak & Yves Pauchard)
Deep Learning @ ZHAW Datalab (with Mark Cieliebak & Yves Pauchard)Deep Learning @ ZHAW Datalab (with Mark Cieliebak & Yves Pauchard)
Deep Learning @ ZHAW Datalab (with Mark Cieliebak & Yves Pauchard)Thilo Stadelmann
 
541 video enhanced lesson
541 video enhanced lesson541 video enhanced lesson
541 video enhanced lessontdsparks3
 
Patterns for building patterns communities
Patterns for building patterns communitiesPatterns for building patterns communities
Patterns for building patterns communitiesYishay Mor
 
Visionaire project learning in 3D virtual worlds, enabling vacademia in cave
Visionaire project learning in 3D virtual worlds, enabling vacademia in caveVisionaire project learning in 3D virtual worlds, enabling vacademia in cave
Visionaire project learning in 3D virtual worlds, enabling vacademia in caveMikhail Fominykh
 
Break out: Project Communication and Dissemination - Fabian Di Fiore
Break out: Project Communication and Dissemination - Fabian Di FioreBreak out: Project Communication and Dissemination - Fabian Di Fiore
Break out: Project Communication and Dissemination - Fabian Di Fioreimec.archive
 
Loanable equipment supporting creation and dissemination for the campus commu...
Loanable equipment supporting creation and dissemination for the campus commu...Loanable equipment supporting creation and dissemination for the campus commu...
Loanable equipment supporting creation and dissemination for the campus commu...Shawna Sadler
 
S.T.A.R.R case study template
S.T.A.R.R case study templateS.T.A.R.R case study template
S.T.A.R.R case study templateYishay Mor
 
Microsoft's Free Tools
Microsoft's Free ToolsMicrosoft's Free Tools
Microsoft's Free ToolsFiona Beal
 

More Related Content

Similar to Digital prototyping workshop UXLibs 2019

The Art of APPlication: Using Apps to Engage Students as Collaborators, Creat...
The Art of APPlication: Using Apps to Engage Students as Collaborators, Creat...The Art of APPlication: Using Apps to Engage Students as Collaborators, Creat...
The Art of APPlication: Using Apps to Engage Students as Collaborators, Creat...sewilkie
 
Machine Learning ass. of tanumalakar.pdf
Machine Learning ass. of tanumalakar.pdfMachine Learning ass. of tanumalakar.pdf
Machine Learning ass. of tanumalakar.pdfDYDF
 
[부스트캠프 Tech Talk] 안영진_Tackling Complexity with Easy Stuff
[부스트캠프 Tech Talk] 안영진_Tackling Complexity with Easy Stuff[부스트캠프 Tech Talk] 안영진_Tackling Complexity with Easy Stuff
[부스트캠프 Tech Talk] 안영진_Tackling Complexity with Easy StuffCONNECT FOUNDATION
 
Software project management - Assignment Question - Exploring Wideband.docx
Software project management - Assignment Question - Exploring Wideband.docxSoftware project management - Assignment Question - Exploring Wideband.docx
Software project management - Assignment Question - Exploring Wideband.docxmmary455
 
Data Science Accelerator Program
Data Science Accelerator ProgramData Science Accelerator Program
Data Science Accelerator ProgramGoDataDriven
 
Mobile Prototyping Essentials
Mobile Prototyping EssentialsMobile Prototyping Essentials
Mobile Prototyping EssentialsRachel Hinman
 
NLJUG speaker academy 2023 - session 1
NLJUG speaker academy 2023 - session 1NLJUG speaker academy 2023 - session 1
NLJUG speaker academy 2023 - session 1Bert Jan Schrijver
 
M256 Unit 1 - Software Development with Java
M256 Unit 1 - Software Development with JavaM256 Unit 1 - Software Development with Java
M256 Unit 1 - Software Development with JavaYaseen
 
Digital authoring
Digital authoringDigital authoring
Digital authoringariellehg
 
Ml goes fruitful
Ml goes fruitfulMl goes fruitful
Ml goes fruitfulPreeti Negi
 
Math Technology to Engage, Delight, and Excite
Math Technology to Engage, Delight, and ExciteMath Technology to Engage, Delight, and Excite
Math Technology to Engage, Delight, and ExciteMaria H. Andersen
 
From the Mouths of Babes: Peer to Peer Instruction via iPad
From the Mouths of Babes: Peer to Peer Instruction via iPadFrom the Mouths of Babes: Peer to Peer Instruction via iPad
From the Mouths of Babes: Peer to Peer Instruction via iPadReba Gordon Matthews
 
Leveraging On Easy Java Simulation Tool And Open Source Computer Simulation L...
Leveraging On Easy Java Simulation Tool And Open Source Computer Simulation L...Leveraging On Easy Java Simulation Tool And Open Source Computer Simulation L...
Leveraging On Easy Java Simulation Tool And Open Source Computer Simulation L...lookang
 
Leveraging On Easy Java Simulation Tool And Open Source Computer Simulation L...
Leveraging On Easy Java Simulation Tool And Open Source Computer Simulation L...Leveraging On Easy Java Simulation Tool And Open Source Computer Simulation L...
Leveraging On Easy Java Simulation Tool And Open Source Computer Simulation L...lookang
 

Similar to Digital prototyping workshop UXLibs 2019 (20)

Twine workshop
Twine workshopTwine workshop
Twine workshop
 
The Art of APPlication: Using Apps to Engage Students as Collaborators, Creat...
The Art of APPlication: Using Apps to Engage Students as Collaborators, Creat...The Art of APPlication: Using Apps to Engage Students as Collaborators, Creat...
The Art of APPlication: Using Apps to Engage Students as Collaborators, Creat...
 
Machine Learning ass. of tanumalakar.pdf
Machine Learning ass. of tanumalakar.pdfMachine Learning ass. of tanumalakar.pdf
Machine Learning ass. of tanumalakar.pdf
 
[부스트캠프 Tech Talk] 안영진_Tackling Complexity with Easy Stuff
[부스트캠프 Tech Talk] 안영진_Tackling Complexity with Easy Stuff[부스트캠프 Tech Talk] 안영진_Tackling Complexity with Easy Stuff
[부스트캠프 Tech Talk] 안영진_Tackling Complexity with Easy Stuff
 
Software project management - Assignment Question - Exploring Wideband.docx
Software project management - Assignment Question - Exploring Wideband.docxSoftware project management - Assignment Question - Exploring Wideband.docx
Software project management - Assignment Question - Exploring Wideband.docx
 
Software Engineering 2014
Software Engineering 2014Software Engineering 2014
Software Engineering 2014
 
Data Science Accelerator Program
Data Science Accelerator ProgramData Science Accelerator Program
Data Science Accelerator Program
 
Mobile Prototyping Essentials
Mobile Prototyping EssentialsMobile Prototyping Essentials
Mobile Prototyping Essentials
 
Geolocation
GeolocationGeolocation
Geolocation
 
NLJUG speaker academy 2023 - session 1
NLJUG speaker academy 2023 - session 1NLJUG speaker academy 2023 - session 1
NLJUG speaker academy 2023 - session 1
 
M256 Unit 1 - Software Development with Java
M256 Unit 1 - Software Development with JavaM256 Unit 1 - Software Development with Java
M256 Unit 1 - Software Development with Java
 
recount text.pptx
recount text.pptxrecount text.pptx
recount text.pptx
 
Maker Boot Camp
Maker Boot CampMaker Boot Camp
Maker Boot Camp
 
Digital authoring
Digital authoringDigital authoring
Digital authoring
 
Ml goes fruitful
Ml goes fruitfulMl goes fruitful
Ml goes fruitful
 
Math Technology to Engage, Delight, and Excite
Math Technology to Engage, Delight, and ExciteMath Technology to Engage, Delight, and Excite
Math Technology to Engage, Delight, and Excite
 
From the Mouths of Babes: Peer to Peer Instruction via iPad
From the Mouths of Babes: Peer to Peer Instruction via iPadFrom the Mouths of Babes: Peer to Peer Instruction via iPad
From the Mouths of Babes: Peer to Peer Instruction via iPad
 
Leveraging On Easy Java Simulation Tool And Open Source Computer Simulation L...
Leveraging On Easy Java Simulation Tool And Open Source Computer Simulation L...Leveraging On Easy Java Simulation Tool And Open Source Computer Simulation L...
Leveraging On Easy Java Simulation Tool And Open Source Computer Simulation L...
 
Leveraging On Easy Java Simulation Tool And Open Source Computer Simulation L...
Leveraging On Easy Java Simulation Tool And Open Source Computer Simulation L...Leveraging On Easy Java Simulation Tool And Open Source Computer Simulation L...
Leveraging On Easy Java Simulation Tool And Open Source Computer Simulation L...
 
Course Intro.pdf
Course Intro.pdfCourse Intro.pdf
Course Intro.pdf
 

More from Vernon Fowler

Iterating a form wizard | from research to design
Iterating a form wizard | from research to designIterating a form wizard | from research to design
Iterating a form wizard | from research to designVernon Fowler
 
Becoming a library member - transforming the user experience of patron self r...
Becoming a library member - transforming the user experience of patron self r...Becoming a library member - transforming the user experience of patron self r...
Becoming a library member - transforming the user experience of patron self r...Vernon Fowler
 
UX - New roles for new times - PDIG 2017
UX - New roles for new times - PDIG 2017UX - New roles for new times - PDIG 2017
UX - New roles for new times - PDIG 2017Vernon Fowler
 
Participatory (Co-design) Workshop - CRIG 2017
Participatory (Co-design) Workshop - CRIG 2017Participatory (Co-design) Workshop - CRIG 2017
Participatory (Co-design) Workshop - CRIG 2017Vernon Fowler
 
CRIG 2017 Improving digital library services with user research
CRIG 2017 Improving digital library services with user researchCRIG 2017 Improving digital library services with user research
CRIG 2017 Improving digital library services with user researchVernon Fowler
 
Co-design workshop for library homepage project #UXLibs 2017
Co-design workshop for library homepage project #UXLibs 2017Co-design workshop for library homepage project #UXLibs 2017
Co-design workshop for library homepage project #UXLibs 2017Vernon Fowler
 
Pinterest Policy Primer
Pinterest Policy PrimerPinterest Policy Primer
Pinterest Policy PrimerVernon Fowler
 
Service design 2016 conference sharing
Service design 2016 conference sharingService design 2016 conference sharing
Service design 2016 conference sharingVernon Fowler
 
User centred design and students' library search behaviours
User centred design and students' library search behavioursUser centred design and students' library search behaviours
User centred design and students' library search behavioursVernon Fowler
 
User stories workshop
User stories workshopUser stories workshop
User stories workshopVernon Fowler
 
Apps in language learning
Apps in language learningApps in language learning
Apps in language learningVernon Fowler
 

More from Vernon Fowler (14)

Iterating a form wizard | from research to design
Iterating a form wizard | from research to designIterating a form wizard | from research to design
Iterating a form wizard | from research to design
 
Becoming a library member - transforming the user experience of patron self r...
Becoming a library member - transforming the user experience of patron self r...Becoming a library member - transforming the user experience of patron self r...
Becoming a library member - transforming the user experience of patron self r...
 
UX - New roles for new times - PDIG 2017
UX - New roles for new times - PDIG 2017UX - New roles for new times - PDIG 2017
UX - New roles for new times - PDIG 2017
 
Participatory (Co-design) Workshop - CRIG 2017
Participatory (Co-design) Workshop - CRIG 2017Participatory (Co-design) Workshop - CRIG 2017
Participatory (Co-design) Workshop - CRIG 2017
 
CRIG 2017 Improving digital library services with user research
CRIG 2017 Improving digital library services with user researchCRIG 2017 Improving digital library services with user research
CRIG 2017 Improving digital library services with user research
 
Co-design workshop for library homepage project #UXLibs 2017
Co-design workshop for library homepage project #UXLibs 2017Co-design workshop for library homepage project #UXLibs 2017
Co-design workshop for library homepage project #UXLibs 2017
 
Pinterest Policy Primer
Pinterest Policy PrimerPinterest Policy Primer
Pinterest Policy Primer
 
Project wall rooms
Project wall roomsProject wall rooms
Project wall rooms
 
Service design 2016 conference sharing
Service design 2016 conference sharingService design 2016 conference sharing
Service design 2016 conference sharing
 
User centred design and students' library search behaviours
User centred design and students' library search behavioursUser centred design and students' library search behaviours
User centred design and students' library search behaviours
 
User stories workshop
User stories workshopUser stories workshop
User stories workshop
 
UX Australia 2015
UX Australia 2015UX Australia 2015
UX Australia 2015
 
Apps in language learning
Apps in language learningApps in language learning
Apps in language learning
 
Amy pecha kucha
Amy pecha kuchaAmy pecha kucha
Amy pecha kucha
 

Recently uploaded

Cargo joggers tech pack for womenswear used in industry
Cargo joggers tech pack for womenswear used in industryCargo joggers tech pack for womenswear used in industry
Cargo joggers tech pack for womenswear used in industryDarshiniPatel16
 
International Anti-Corruption Day XL by Slidesgo.pptx
International Anti-Corruption Day XL by Slidesgo.pptxInternational Anti-Corruption Day XL by Slidesgo.pptx
International Anti-Corruption Day XL by Slidesgo.pptxzulamirulhaq1
 
Hill Area development- Issues and Options
Hill Area development- Issues and OptionsHill Area development- Issues and Options
Hill Area development- Issues and OptionsJIT KUMAR GUPTA
 
Jamnagar Event Guide_anantambani wedding
Jamnagar Event Guide_anantambani weddingJamnagar Event Guide_anantambani wedding
Jamnagar Event Guide_anantambani weddingPriyanka Singhvi
 
SECMOL School In Leh- A Role Model of Vernacular , Passive and Sustainable H...
SECMOL School In Leh- A  Role Model of Vernacular , Passive and Sustainable H...SECMOL School In Leh- A  Role Model of Vernacular , Passive and Sustainable H...
SECMOL School In Leh- A Role Model of Vernacular , Passive and Sustainable H...JIT KUMAR GUPTA
 
Anavi Gold And Diamond Ring by Dishis Designer Jewellery.pdf
Anavi Gold And Diamond Ring by Dishis Designer Jewellery.pdfAnavi Gold And Diamond Ring by Dishis Designer Jewellery.pdf
Anavi Gold And Diamond Ring by Dishis Designer Jewellery.pdfanishdishis
 
introduction_to_small_business_environment_amy_shapiro.pptx
introduction_to_small_business_environment_amy_shapiro.pptxintroduction_to_small_business_environment_amy_shapiro.pptx
introduction_to_small_business_environment_amy_shapiro.pptxrajeshkapahi786
 
Interior Landscape and Landscape Features Extraction
Interior Landscape and Landscape Features ExtractionInterior Landscape and Landscape Features Extraction
Interior Landscape and Landscape Features ExtractionNityaSharma77
 
Concept of Partition Wall Panelling Cladding.ppt
Concept of Partition Wall Panelling Cladding.pptConcept of Partition Wall Panelling Cladding.ppt
Concept of Partition Wall Panelling Cladding.pptAr. TANIA BERA
 
Trends and Innovations: Home Decor in 2023
Trends and Innovations: Home Decor in 2023Trends and Innovations: Home Decor in 2023
Trends and Innovations: Home Decor in 2023maker Money
 
Storyboard.pdfbueiearviaelvr;aeibvribrvipervwbv
Storyboard.pdfbueiearviaelvr;aeibvribrvipervwbvStoryboard.pdfbueiearviaelvr;aeibvribrvipervwbv
Storyboard.pdfbueiearviaelvr;aeibvribrvipervwbv22nvatafu
 
Personal Brand Exploration Presentation | FS
Personal Brand Exploration Presentation | FSPersonal Brand Exploration Presentation | FS
Personal Brand Exploration Presentation | FSvnendicottstudent
 
Book on-Identifying, Analysing and Planning sites for Architectural Projects
Book on-Identifying, Analysing and Planning sites for Architectural ProjectsBook on-Identifying, Analysing and Planning sites for Architectural Projects
Book on-Identifying, Analysing and Planning sites for Architectural ProjectsJIT KUMAR GUPTA
 
The Role Of Antique Mirrors In Boutique Hotel Design
The Role Of Antique Mirrors In Boutique Hotel DesignThe Role Of Antique Mirrors In Boutique Hotel Design
The Role Of Antique Mirrors In Boutique Hotel DesignAlbany Glass
 
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...Peter139483
 
Explore the Culinary Delights by the Pool.pdf
Explore the Culinary Delights by the Pool.pdfExplore the Culinary Delights by the Pool.pdf
Explore the Culinary Delights by the Pool.pdfCREATIVEDESIGNS9
 
40 Shots.docxmjggggggggggggmgjjjjjjjjjjmjm
40 Shots.docxmjggggggggggggmgjjjjjjjjjjmjm40 Shots.docxmjggggggggggggmgjjjjjjjjjjmjm
40 Shots.docxmjggggggggggggmgjjjjjjjjjjmjm22nvatafu
 

Recently uploaded (17)

Cargo joggers tech pack for womenswear used in industry
Cargo joggers tech pack for womenswear used in industryCargo joggers tech pack for womenswear used in industry
Cargo joggers tech pack for womenswear used in industry
 
International Anti-Corruption Day XL by Slidesgo.pptx
International Anti-Corruption Day XL by Slidesgo.pptxInternational Anti-Corruption Day XL by Slidesgo.pptx
International Anti-Corruption Day XL by Slidesgo.pptx
 
Hill Area development- Issues and Options
Hill Area development- Issues and OptionsHill Area development- Issues and Options
Hill Area development- Issues and Options
 
Jamnagar Event Guide_anantambani wedding
Jamnagar Event Guide_anantambani weddingJamnagar Event Guide_anantambani wedding
Jamnagar Event Guide_anantambani wedding
 
SECMOL School In Leh- A Role Model of Vernacular , Passive and Sustainable H...
SECMOL School In Leh- A  Role Model of Vernacular , Passive and Sustainable H...SECMOL School In Leh- A  Role Model of Vernacular , Passive and Sustainable H...
SECMOL School In Leh- A Role Model of Vernacular , Passive and Sustainable H...
 
Anavi Gold And Diamond Ring by Dishis Designer Jewellery.pdf
Anavi Gold And Diamond Ring by Dishis Designer Jewellery.pdfAnavi Gold And Diamond Ring by Dishis Designer Jewellery.pdf
Anavi Gold And Diamond Ring by Dishis Designer Jewellery.pdf
 
introduction_to_small_business_environment_amy_shapiro.pptx
introduction_to_small_business_environment_amy_shapiro.pptxintroduction_to_small_business_environment_amy_shapiro.pptx
introduction_to_small_business_environment_amy_shapiro.pptx
 
Interior Landscape and Landscape Features Extraction
Interior Landscape and Landscape Features ExtractionInterior Landscape and Landscape Features Extraction
Interior Landscape and Landscape Features Extraction
 
Concept of Partition Wall Panelling Cladding.ppt
Concept of Partition Wall Panelling Cladding.pptConcept of Partition Wall Panelling Cladding.ppt
Concept of Partition Wall Panelling Cladding.ppt
 
Trends and Innovations: Home Decor in 2023
Trends and Innovations: Home Decor in 2023Trends and Innovations: Home Decor in 2023
Trends and Innovations: Home Decor in 2023
 
Storyboard.pdfbueiearviaelvr;aeibvribrvipervwbv
Storyboard.pdfbueiearviaelvr;aeibvribrvipervwbvStoryboard.pdfbueiearviaelvr;aeibvribrvipervwbv
Storyboard.pdfbueiearviaelvr;aeibvribrvipervwbv
 
Personal Brand Exploration Presentation | FS
Personal Brand Exploration Presentation | FSPersonal Brand Exploration Presentation | FS
Personal Brand Exploration Presentation | FS
 
Book on-Identifying, Analysing and Planning sites for Architectural Projects
Book on-Identifying, Analysing and Planning sites for Architectural ProjectsBook on-Identifying, Analysing and Planning sites for Architectural Projects
Book on-Identifying, Analysing and Planning sites for Architectural Projects
 
The Role Of Antique Mirrors In Boutique Hotel Design
The Role Of Antique Mirrors In Boutique Hotel DesignThe Role Of Antique Mirrors In Boutique Hotel Design
The Role Of Antique Mirrors In Boutique Hotel Design
 
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...
 
Explore the Culinary Delights by the Pool.pdf
Explore the Culinary Delights by the Pool.pdfExplore the Culinary Delights by the Pool.pdf
Explore the Culinary Delights by the Pool.pdf
 
40 Shots.docxmjggggggggggggmgjjjjjjjjjjmjm
40 Shots.docxmjggggggggggggmgjjjjjjjjjjmjm40 Shots.docxmjggggggggggggmgjjjjjjjjjjmjm
40 Shots.docxmjggggggggggggmgjjjjjjjjjjmjm
 

Digital prototyping workshop UXLibs 2019

Editor's Notes

  1. Hello and welcome to our digital prototyping workshop. I’m Vernon and today we’re improving the experience of reserving a group study room.
  2. In this workshop: I’ll walk through translating insights to a concept for reserving a group study room. In groups of 3 you’ll design a prototype that addresses pain points. Last, I’ll mention how to test your prototype with users, learn from that; and how might you iterate from there.
  3. Through practice, you’ll learn how: To sketch a sequence of screens onto paper templates; Scan your sketches and link screens into a flow; Test your prototype & gather feedback.
  4. Before I introduce insights for our room reservation concept, we need context. Unlike user stories, a job story adds context (the When __ situation), and focuses on motivation.
  5. In this story, the context is: “When we need to do focus work this weekend”. The motivation is to reserve a group study room. The expected outcome here is collaboration on a group project.
  6. In story 2, the context is: “When we need to cram for this afternoon’s exam”.
  7. In story 3, the context is: “When our group of 7 need to rehearse this evening”.
  8. Further context in all stories: users are using their mobile to make a reservation!!! When we apply story contexts to our reservation system, our (hypothetical) insights will become clear.
  9. Insights: To find an available group study room in a desired timeframe from mobile = painful: Unavailable slots are shown. Users can’t reserve these! The first 17 rooms are visible but scrolling moves the date time headers offscreen. The capacity of each room is truncated from display – it’s impossible to choose a big enough room.
  10. Let’s frame these insights as a problem statement: Mobile users struggle to find an available group study room in their desired timeframe.
  11. We use a “How might we …” statement to generate a concept to address the problem. HMW make it easier for mobile users to reserve an available group study room in their desired timeframe? [Order of HMW about to be reversed in concept model – next slide.]
  12. A successful concept must show relevant reservation options: In the desired timeframe – users already have a timeframe in mind. Only show available options – don’t show options that aren’t available. Show options designed for mobile. [Pause – let the concept sink in]
  13. In groups of 3 you’ll sketch these 3 key screens: Timeframe selection. List available times within the chosen timeframe, also indicating room capacity. List room capacity options for the selected time. Arrows indicate the flow we’re going to link later.
  14. Any template is fine for your group of 3. Each group will need to cut a template so that everyone has 1 frame to sketch 1 screen.
  15. You might start sketching with a pencil. As soon as you’re confident, use a Sharpie for contrast and easy scanning. Pens can also be used.
  16. Any questions before we sketch? Grab a template, cut it and sketch these 3 key screens: Timeframe selection. List available times within the chosen timeframe. Also indicate room capacity. List room capacity options for the selected time.
  17. This video demonstrates how to scan your sketches.
  18. Who doesn’t yet have the Marvel app? Either scan the QR code or type the URL for Android or iOS.
  19. Use Marvel app to 1. Create project. 2 Name the project: Test. 3. Choose your device. 4. Add some designs (tap +). 5. Choose camera to scan your 3 sketches. Confirm, then resize and crop to fit. → This gives screens 1 to 3.
  20. Let’s watch a quick demonstration of how to link the screens.
  21. Use Marvel app to 1. Choose screen 1. 2 Add link. 3 Rectangle around Next. 4 Tap Link to … 5 Choose screen 2. 6 Done. Then choose screen to & link from the 2pm – 3pm option.
  22. Let’s watch a quick demonstration of how to test your prototype. Try it yourself. Hit play and tap through the screens.
  23. After your testing, share the prototype with users for their feedback. Learn from your users with an informal usability test. With validated user feedback, you can then iterate the implementation.
  24. Final take-aways are: Use insight to frame problems Prototyping is a design experiment Test with users Learn from them, iterate & implement for a better user experience.
  25. Thank you