Sketching and Prototyping in Computing

Introduction and Background

For this project you will sketch interfaces of a mobile or desktop application and generate a functional prototype to share with others for feedback — much like a product designer would do to test ideas.

While this project will focus on user experience prototyping, the video below provides a broader overview of user experience design, including the research and evaluation components of the domain. This will provide a good context to think about the skills needed for this project.

The video below provides a great overview of prototyping, including the tools and techniques used.

The video below provides pointers on how to sketch particular components, like buttons and form fields, that are efficient and easy to understand.

Student objectives:

• Envision a new mobile application interface

• Sketch an interface concept with multiple screens

• Generate a dynamic (functional) prototype (without coding)

• Evaluate the concept through feedback from others

Subject Areas: Computer Science, Engineering Design, Drawing and Art

Instructions

1. Envision a new mobile application interface

While you could create a fully new mobile app concept, we recommend that you choose an existing mobile app and re-imagine the interface and interactions for a particular task. For example, you could redesign the interaction sequence for adding emojis to a messaging app, or redesign the interaction sequence for accessing favorite destinations on a phone map application.

• Determine which mobile app you will prototype with a slight modification.

• Describe the modification you intend to make and why it may be an improvement. Try to come up with an interaction sequence that will require you to sketch three unique screen views. For example -- 1) a sketch of a messaging app screen with an empty message field, 2) on the user tap of an emoji icon, a sketch of the screen having an overlay of emojis to choose from, and 3) on the user tap of a particular emoji, a sketch of the inserted emoji in the message field.

2. Sketch an interface concept with multiple screens

Interface prototypes can be created with hand sketches, digital pen drawings, online wire-framing tools, or advanced graphics software. For this exercises we recommend hand sketching for it rapid and easy-to-use benefits.

• Sketch the screen views that represent the sequence of the interaction with the level of detail, style, and color required by your teacher. You can draw them on paper or a white board. Consider using a template like the ones found here to help get the aspect ratio right and to keep features aligned.

• Edit and re-do sketches, several times if needed, to fine tune the concept. That is the power of hand sketches, you can create multiple versions rather quickly. Below is an example of rough sketches.

3. Generate a dynamic (functional) prototype (without coding)

There are many software tools available to help with prototyping interactions, but we recommend https://marvelapp.com and the partner mobile app as an easy-to-use tool for creating a dynamic prototype.

• Create a new project in Marvel App for your prototype.

• Take some nice photos of your sketches to be imported into Marvel App. You can take regular snapshots and import them into the browser-based version of Marvel App or use the mobile app to get photos in directly.

• For each sketch, create the hotspots (or other options) that will link the screens together to simulate the app interaction. You can decide which options to use to fine tune the interactions -- like slides or fades.

• Test the interaction simulation and refine the sketches as needed.

4. Evaluate the concept through feedback from others

Now you want to share your prototype with others to have them use it (tap through the screens) and get feedback on the concept.

• Find at least five people to use your prototype to get feedback. Consider finding a diverse set of people to give you feedback. For example, consider using classmates, friends, and family members of all ages.

• Using the shareable link to your project in Marvel App or your own phone, have your participants try out your prototype. Give each person an introduction to your project and explain that you are testing the interface concept, not their abilities. This will help set them at ease and not feel like your are testing them.

• Summarize your key findings and be prepared to share the results and potential improvements you could make to the concept.

• Conduct a demonstration of your prototype with your class and present your summary of the evaluation results.