Develop: Prototype

Now that you have described the various aspects of the ritual, you will prototype a mobile application interface using a process known as paper prototyping. Paper prototyping is a quick way to simulate a product before too many resources are used to design and engineer the final product. It works as a kind of model that others can react to, giving designers an insight as to whether they are going in the right direction. The purpose of this prototype is to quickly communicate to your peers how you intend to use a mobile device application to facilitate a ritual.

Tools and Materials

1. Pen or marker
2. Assorted paper
3. Scissors
4. Ruler
5. Cellphone Camera
6. Invisionapp.com (free education account) Sign up for an education account with this code: 56-73-13-19
7. InVision mobile app (free download)
8. Paper Prototyping PDF: PDF Download

Technical resources

Cropping images:

• Windows
• Mac OS

Working with InVisionApp:

• Lynda: InVision Prototyping (PSU Login)
• InvisionApp Tutorials

Prototyping Instructions

A. Making a paper prototype

1. List the parts of the storyboard that can translate into mobile application functions. For instance, if the ritual has a time component, then you can build in a timed audio cue into the prototype (represented visually).
2. Find UI inspiration: http://collectui.com/, https://dribbble.com/, http://www.mobile-patterns.com/
3. Create the paper interface components
   1. Download and print the Paper Prototyping PDF.
   2. Draw and cut out interface elements including buttons, images, icons, navigation, text, and other elements needed to prototype your app interface.
   3. Cut out reusable interface elements so they can be rearranged for each application screen.
   4. Arrange the components for each screen and take a picture with your phone's camera.
4. Crop all images to the crop marks.
5. Upload images to a project folder on box.psu.edu to keep a backup.

B. Making an interactive prototype

1. See example prototype: https://invis.io/65BREK4PV
2. If you have not done so already, view the InvisionApp tutorials.
3. Upload prototype interfaces to InvisionApp
   1. Move the image files from your phone or camera to your computer.
   2. Crop each image to the screen border using the cropping methods suggested in the technical resources.
   3. Sign into invisionapp.com and create a new project. Choose the phone portrait template.
   4. Upload your cropped images to InVision.
   5. Build interactivity using InVision's built-in hotspot and linking tools.
   6. Test that all the desired interactivity is functioning.
4. Click on the More button (three dots) and click Download Prototype. Choose the export a ZIP file of the project.
5. Click the share button and choose share public link at the bottom to copy the public share link.

Prototype Description

• Start your description with the following: "This is a prototype for an app that..." To complete the sentence, synthesize your brainstorming and storyboard ideas.
• Describe the ritual in detail and how the prototype app is intended to work. How does it support the ritual?
• Write clearly, and check for grammar and spelling errors.

Instructions

1. Create the interactive prototype using the prototyping instructions
2. Download a ZIP archive of your prototype from InVision
3. Copy the InVision project's Public Share Link
4. Write a design document according to the document requirements

Post work to the Studio

Use the file format indicated in each step. You must obtain prior approval to deviate from these upload requirements. Please check that your work has uploaded properly.

1. Upload the .zip archive file to Studio
2. Submit the URL of the Public Share Link to the InvisionApp Live Prototype to the Studio together with Prototype Description to the Studio.