Design Project

Rapid Prototyping for a Mobile App Design (Phase 2)

VI. Now let's do Paper Prototyping

We are now in the second phase of the project. If you still have not started with the first phase, I suggest you go over it first.

Ideally, you, as designer, should come up with as many sketches as you can to cover as many features as you could visualize for your app. But for the purposes of our exercise, we scale down the scope of our app's features and skip further iterations of our sketches so we could move on the the next prototyping method, which is paper prototyping.

What is Paper Prototyping?

Before we get into doing actual paper prototyping, I suggest that you watch a video on the subject. This time, we are featuring Melissa Powel of Google's Developer Relations Team. She will guide you through paper prototyping and how it will help you through key user interactions.

RP 02 Paper Prototyping.mp4

Let us first review the different methods in prototyping (see image below). A designer always starts with sketching to visualize and assess the user flow, screen layout, and overall UI structure. After showing these sketches to prospective users and getting their feedback, the designer then begins to build paper prototypes to further evaluate the design. The focus of paper prototypes is on the interactions, the terminologies used, app navigation, and functionalities.

Paper prototyping is still considered a low fidelity prototype as compared to digital prototyping, where you already study and incorporate additional design details using graphics applications. Each prototype that you build is based on the user feedback from previous iterations. This allows the designer to test out the ideas without even having to do programming, such that, when the time comes to start coding, the developer already has the ideas properly explored, evaluated, and effectively communicated.

After getting user feedback through your sketches, you will now build an interactive paper prototype in the second phase of the design project.

VII. Different ways of doing paper prototyping

As with any prototyping method, there are no strict rules on how you carry things out. An important element, however, with paper prototyping is your ability to produce cheap, but effective interactivity for your test users, in a short span of time. The idea is that you allow your test user to interact with your "app" the way they would if it were a real, working program, but just with the use of pen and paper. In the course of the simulated user interaction, the designer plays the role of the "computer" by updating what the test user sees or experiences by employing elements or movement.

To get a clearer idea on how paper prototyping is carried out, below are some examples or techniques on how you can build them and how you can carry out simulated interactivity.

a paper prototype using sliders or scrollers

1. Scrolling display. In this example, you draw an organized and interconnected sequence of UI screens that preempts the flow of the user interaction. The scrolling movement, which is controlled by the designer, could run either horizontally or vertically.

a paper prototype using replaceable panels

2. Replaceable display panels. In this example, you keep a stack of pre-drawn UI displays. As the user interacts with elements of your prototype, you replace the display with another sheet corresponding to the flow dictated by the test user.

a paper prototype employing floating elements

3. Floating elements. With this technique, you come up with elements such as dialogue boxes, pop-up menus, or floating icons, that can be pasted or moved on the pre-drawn screens to alter the UI display. Coloured paper such as Post-it notes would come in real handy for this purpose. This technique allows you reuse elements of your prototype, making your design more flexible and consistent. This also enables you to perform alterations to your design much faster.

The examples above should already give you a general idea of paper prototyping. You may use one or a mixture of all of these techniques. You may even come up with a technique of your own. What is important is that you are able to test your UI design by providing an "almost-like-the-real-thing" experience for your test users, albeit in a low-fidelity format.

Take note, however, that the goal of paper prototyping is not to display one's exceptional arts & crafts skills, so too much elaboration defeats the purpose of the exercise. You build a prototype to test your hypothesis or ideas and learn how your users would actually use the app.

If you want some more ideas on paper prototyping, feel free to google "paper prototyping gif" or look for some paper prototyping videos on YouTube.

As with the first phase of the design, you will have to build your paper prototype to cover a simulation of the UI designs for the two use case scenarios:

  • First use case scenario: a person looking for a service using the app (e.g., searching for and finding a barber within the vicinity using the app and then eventually getting in touch with him)
  • Second use case scenario: an individual who signs up to advertise his or her service using the app (e.g., a barber who signs up through the app so that any information related to his services would be available when people would search for haircut services using the same app).

You can now start trying out your design changes and additional ideas by simulating an app interaction with your test user according to the two use cases.

VIII. Doing usability testing

In testing your design with a user, try not to dictate to the user where to press or what to do. Instead, give the user a concrete goal (e.g., look for a barber within the vicinity) and then allow them to use the app (your paper prototype) to help them achieve the goal on their own. Keep in mind that, in the real-world scenario, the app designer or developer will not be around to assist anyone using the app. The challenge therefore is to come up with a design that would be intuitive enough for any user to achieve his or her goals without any assistance. Observing a test user interacting with your paper prototype will allow you to take note of and understand the deficiencies and strengths of your design.

The real advantage of paper prototyping is that it is easier to go back to the drawing boards and implement changes or improvements that you can immediately validate with your user. Unlike actual programming, there is little investment in terms of time and skill with paper prototyping, but you already get tons of valuable user feedback to determine the specific directions you can take in building the app.

IX. Deliverables for the second, and last, Phase of your Design

  1. A single, detailed photo of your final paper prototype. See to it that the image is of good quality (i.e., clear enough to show as much detail as possible but not too large to take up too much bandwidth or disk space). You may submit the images of your sketches or through a shared folder in Google Drive. You may also submit via Canvas.
  2. Two video clips that show a simulation of an interaction with your app (similar to the animated images you see above). Show a quick-paced interaction sequence of your app just like in the animated images shown above. Depict the moment a user starts using the app and all the way to the moment when the user has achieved his or her goal. The goals should be based on the two use case scenarios mentioned above (hence, two video clips). There is no need for an audio recording but feel free to add some background music. You may use stop motion animation technique to achieve, if you want (here's an example on YouTube). Be sure that the video is clear enough (but not too large). The fingers or hands of a user interacting with the prototype should be visible. You may send links to the video files you uploaded on Google Drive or any shared online resource (e.g., YouTube). You may also submit via Canvas.

X. Assessment Criteria

Phase 1 photo submissions (10%) – clarity in depiction

Phase 1 video submissions (20%) – clarity in depiction; thoroughness of test (show entire user journeys)

Phase 1 write-up submission (10%) – quality of assessment; clarity

Phase 2 photo submission (10%) – clarity in depiction

Phase 2 video submissions (20%) – clarity in depiction; thoroughness (show entire user journeys)

General design assessment of the final paper prototype (30%) - every violation of the principles categorized below would lead to point deductions (out of the total number of 20 points given).

  • Fitts' Law - Is the size of the button or clickable item large enough for a human finger?
  • Human errors - Will the user easily fall into human errors in using the app (e.g., loss-of-activation, modal slip, or description error)
  • Gestalt Laws, layout, and alignment - Is the organization of elements in the UI confusing? Is the layout easy to read? Are text, images, and elements aligned to show how information is related?
  • Memory - Will the user experience cognitive overload (unnecessary thinking or demanding memory recall) in the use of the app?
  • Affordance & Constraints - Are there elements on the UI that are confusing, unrecognizable or unidentifiable?
  • Mapping & Visibility - Do the appearance of the UI elements clearly communicate their function?
  • Feedback - Will the user be informed or would he be left hanging or wondering about the state of his actions?
  • Gulfs of Execution & Evaluation - Will the user be able to evaluate executable actions or confirm executed acts?
  • Typography - Are there more than two typefaces used? Are the fonts chosen readable enough? Is the text size legible at typical viewing distance according to the interface guidelines?

XI. Now what?

That's it!

Well, we could have done all of these, plus the digital prototyping, in a more ideal setting (i.e., classroom workshops and actual user tests with non-BSIT UA&P students), but given the constraints, we will just have to make the most out of our current situation.

I hope you were able to learn something valuable in this exercise. Be sure you submit them before 12 midnight on Friday (May 29, 2020).