Rapid Prototyping: Sketch and Digital Testing
During class, we discussed prototyping and were shown a YouTube clip by Google for Startups, Rapid Prototyping: Sketching. The clip detailed methods of sketching on paper to create rapid prototypes and provided this highlight statement:
“the fidelity of your prototype should match the fidelity of your thinking. So don’t be afraid to share your prototypes early and often to get feedback to guide your next product design decision.”
In our last class, I created a prototype in Figma that looked pretty slick but I wanted to try making a paper prototype for a test and then digitizing it for a second test.
The beauty of pen and paper is that I can draw a prototype and get immediate feedback regardless of language, culture, institutional setting, or jargon. It is fast, mobile, accessible, disposable, and doesn’t evoke a digital rift when testing with users who may not familiar with a certain digital tool.
For this exercise, I am going to sketch out a paper prototype and watch a user complete a few tasks. Then, I am going to take photographs of the sketches, turn them into a clickable prototype in Invision and send it to another user for testing. I wanted to get a comparison of these two techniques.
First, I sketched out my prototype of a mobile to-do app. The concept is that this app allows users to take photos of handwritten notes or import digital text from a screenshot, .pdf, or linked file that can be processed and placed in their to-do list.
Here are the tasks that I requested from my users: sign in as a new user, add a new task, take a photo of a handwritten note, confirm correct entry and add it to the list, edit an incorrect entry and add it to the list, and insert a scan. I filmed one user's interactions and during the in-person, user-test.
I read this statement to set the user’s state of mind: “You are opening an app for the first time. You want to sign in, then add a task. Then, you want to take a photo of a handwritten note, make sure the app digitizes the note correctly, editing if you need to, then add that to your task list. In the end, you want to add a pdf file into your tasks.”
First user: 2nd-grade teacher, 33 yr., uses digital and analog notes regularly in planning.
In the test, users got stuck in spots and had questions. This is the result of poor pre-planning, user-flows, and shoddy wireframes. On the other hand, it was great to see how many points of error were discovered. I do believe that this strategy would be great for early testing and just getting as much feedback before heading into digital design.
For the next step into digitizing this prototype, I took photos and then edited them just a bit in Photoshop
I imported the photos into Invision to create interactions so users can push or swipe their way through the digitial prototype test on their phone.
Second user: Creative director & videographer, 36 yr., uses digital and analog notes regularly in planning.
I sent it to the second user and this is what they commented on:
- The “Q” icon is screwy and I don’t get it (it is actually a search icon)
- I didn’t know what to do with the “add note” button
- When I wanted to edit, I didn’t even see the “edit” button. Maybe center those buttons or make it more obvious.
- You wouldn’t ever say screenshot for something like this.
- I would have a share list. Share to contact and share to calendar. It didn’t feel finished the way it.
If you want to see the prototype and interaction, free to copy this link and click through with your phone:
Design changes and thoughts: I would definitely be more concious about adding home and back icons. I would make sure that if they got somewhere, they could at the very least get out! For the drawings, I would be a bit more careful with my layouts and make sure things are as centered as possible. I would also make a more satisfying “end” to the prototype or at the very least allow the user to get back to the task/home screen. The users provided so many thoughts and stuck-points that I would need a big redraft of this app.
I loved being able to draw out this app and get it in front of someone so quickly. If I could do this again, I would start with a drawing like this and do some hallway testings (3–5 people) and sketch in little updates if necessary between tests. Then, I would bring it into Figma and create a black and white, super basic design and do additional digital tests.
