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
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.