Digital prototyping workshop UXLibs 2019
•Download as PPTX, PDF•
1 like•1,176 views
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
Recommended
Recommended
More Related Content
Similar to Digital prototyping workshop UXLibs 2019
Similar to Digital prototyping workshop UXLibs 2019 (20)
More from Vernon Fowler
More from Vernon Fowler (14)
Recently uploaded
Recently uploaded (20)
Digital prototyping workshop UXLibs 2019
- 1. Digital prototyping workshop Vernon Fowler @vfowler UXLibs 2019 Photo by Hal Gatewood on Unsplash Better experience of reserve a group study room
- 2. Outline •Insights to concept •Design a prototype •Test, learn, iterate Leiden University Library, Group Study Room (CC BY 3.0)
- 3. Learning objectives 1. Sketch a sequence on templates 2. Scan sketches & link into a flow 3. Test your prototype & gather feedback.
- 4. Insight to concept: room reservation Stories https://jtbd.info/replacing-the-user-story-with-the-job-story-af7cdee10c27
- 5. 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.
- 6. 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.
- 7. Story #3 When our group (7) need to rehearse this evening I want to reserve a group study room so we can practice presenting.
- 8. Further context Using their mobile Apply story contexts to our reservation system → insights. Photo by ROBIN WORRALL on Unsplash
- 9. Insights Available + desired timeframe + mobile = •Unavailable slots shown •Scroll ↑ times disappear •Capacit…
- 10. Problem statement Mobile users struggle to find an available group study room in their desired timeframe.
- 11. How might we …? HMW make it easier for mobile users to reserve an available group study room in their desired timeframe?
- 12. Concept: show relevant options •In the desired timeframe •Only show available options •Designed for mobile
- 13. Design a sketched sequence
- 14. Any template for 3 Cut a template → everyone has 1 frame to sketch. https://marvelapp.com/sketchpad
- 16. Sketching
- 17. Scan sketches 0:26 to 0:39 of https://youtu.be/bHn2wxrN21w
- 18. Install Marvel on your phone Android http://j.mp/marvelforandroid iOS http://j.mp/marvelforios
- 19. 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
- 20. Link screens 0:39 to 0:54 of https://youtu.be/bHn2wxrN21w?t=39s
- 21. 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…
- 22. Test your prototype 0:54 to 1:20 of https://youtu.be/bHn2wxrN21w?t=54s
- 23. User feedback •Share the prototype •Learn from users •Iterate the implementation
- 24. Take-aways •Use insight to frame problems •Prototyping is a design experiment •Test with users •Learn, iterate & implement
- 25. Thank you Questions and comments @vfowler Photo by Hal Gatewood on Unsplash
Editor's Notes
- Hello and welcome to our digital prototyping workshop. I’m Vernon and today we’re improving the experience of reserving a group study room.
- 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.
- 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.
- 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.
- 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.
- In story 2, the context is: “When we need to cram for this afternoon’s exam”.
- In story 3, the context is: “When our group of 7 need to rehearse this evening”.
- 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.
- 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.
- Let’s frame these insights as a problem statement: Mobile users struggle to find an available group study room in their desired timeframe.
- 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.]
- 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]
- 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.
- 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.
- 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.
- 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.
- This video demonstrates how to scan your sketches.
- Who doesn’t yet have the Marvel app? Either scan the QR code or type the URL for Android or iOS.
- 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.
- Let’s watch a quick demonstration of how to link the screens.
- 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.
- Let’s watch a quick demonstration of how to test your prototype. Try it yourself. Hit play and tap through the screens.
- 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.
- 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.
- Thank you