IN4MATX 131 UIUC Sketching and Prototyping Design Discussion

In Assignment #4 and #5, you learned about the experiences and needs of one or several participants. Using interviews, you surfaced some current challenges faced by students. Based on your findings, you created a Persona.

In this assignment you will practice using some methods from the Prototyping stage of design. Specifically, you will be sketching three design alternatives and creating an interactive prototype in Figma. Your design will address one or several needs that you identified in your Interview and Contextual Inquiry. Your design should be based on the needs of the users and on the persona you developed.

Step 1: Sketch a Design

Following what we learned from the lecture and activities, you will first sketch to explore design ideas before going into more details and develop an interactive prototype. You should sketch three different low-fidelity wireframe designs for a webpage that could better serve needs of the target users. Make sure to write what needs your design will support.

Include labels in your wireframe (like section headers) that indicate what types of content will go where. For each sketch, you will also write a brief (200-300 word) summary of the design and how it addresses one or more of the personas’ frustrations or needs.

Edit 11/20:

• Specify what is one unique aspect of your design that addresses the need of the persona. Be specific about which aspect of the wireframe addresses that need and how. It is ok if the wireframe doesn’t have all the details, but be specific about how the design addresses the persona’s need. Please include the persona in the document (it is ok if you decided to modify your persona from the last time, but you don’t need to do that).
• Some of you assessed needs in previous assignments that were not related to a web interface. If that was the case, it is not a problem, but please adapt the problem or design you are working towards to be a web/app interface. We know that for some of you worked towards improving a physical artifact, if you are unsure how you might design something that relates to the design you were studying, you can change the problem you are trying to address. Don’t hesitate to reach out to the teaching staff who can help you with ideas

Your sketches do not need to be polished, but they should be clear enough that we can understand what you are showing. We encourage you to sketch on paper. However, you will submit electronically. Please scan or take a decent photograph of your sketch and put it in your document. You will submit an electronic document that includes your three sketches with summaries.

Step 2: Develop an Interactive Prototype in Figma

Next, choose one of your designs and convert it into a low-to-medium fidelity prototype in Figma. This means your prototype does not need to have the final copy (that is, body text) or look and feel (that is, colors and fonts and graphics) completely worked out.

Your Figma prototype can be as simple or as complex as you want it to be. It can have multiple pages, or just one page. It can simulate interaction on either a mobile or desktop platform. To make your prototype interactive, consider adding features like buttons, links, slideshows and sliding content, dynamic panels, forms and other inputs, etc. The purpose of this part of the assignment is simply to give you exposure to the tool. Those of you who would like to build your portfolio may want to put more effort into this part of the assignment than others. However, anyone who meets the basic requirements will receive full credit.

Rather than uploading your editable Figma file, you will “share” your prototype in the Figma folder with the name “Assignment 6”, in your Figma team. At the end of your document containing sketches, please insert the URL to the prototype for evaluation.

Edit 11/20:

• Please specify one or two tasks that a user should be able to accomplish with the design that you created (e.g. user should be able to see how many unread emails they have, user should be able to fill in the login form, user should be able to know when the bus is arriving, user should be able to enter start and destination of directions). Users should be able to accomplish these tasks with your current design, even if it is just one screen, so pick the tasks carefully.
• If the folder “Assignment 6” does not exist in your team, please create it. Make sure the link you share in your assignment has the permissions to be seen by other people besides yourself (public to view)

Examples of Expected Sketch/Prototype Fidelity

As indicated above, the wireframe sketches are intended to be low-fidelity, and the Figma prototype is intended to be low-to-medium fidelity. Consider the following visual comparison of sketches/wireframes and low-vs-high fidelity mockups/prototypes:

Your three wireframes should look close to the “sketch.” Your Figma prototype should look closer to the “low-fi” prototype. It is acceptable for your low-fi prototype to be black and white, but you can use color if you wish. The following wireframe sketch is particularly useful, because it includes short callouts to indicate what each piece of content will be and how it will work:

This would be a great format for your wireframe sketches, which would include 200-300 word summaries in addition to the callouts.

*Edit 11/24: Here’s an example of this assignment.