In this module you will start designing your app. We will start by reviewing two application design workflows, the waterflow model and the agile model. Informed by the agile approach, you will select one user task to prototype, and complete a full cycle of prototyping, testing, and refining. For this quick cycle you will draw a user flow to plan the steps users take to complete the task and use it to create a low-fidelity prototype. You will share the design with classmates and refine it based on the feedback. You will do the same for two more user tasks.
Learning outcomes
- Design user flows that map clear and efficient path to complete a task
- Design a low-fidelity prototype, focusing on one user task at a time
- Articulate interaction and design problems found in prototypes of peer projects
- Modify user flow design based on peer feedback.
Read/Watch
Design and Development Process
Rapid Prototyping: Sketching
User Testing
Journal 9
Final Project
You should have completed the creative brief and persona by now, If you have not, do it before moving forward with the steps below.
TASKS
Select one user task to prototype, and complete a full cycle of prototyping, testing, and refining. For this quick cycle draw a user flow that describes the steps users take to complete the task and use it to create a low-fidelity prototype in Figma. Share the design with classmates and refine it based on the feedback. Do the same for two more user tasks.
STEPS
- User flows: identify one important user tasks in your app and draw a user flow for it. Use pencil on paper or directly in Figma. The drawings should just be sketches- focus on the elements that the user interact with and omit any graphic detail. If drawing in Figma, use B/W lines, boxes and text only.
- If you draw on paper you can print and use these templates to start with.
- Prototype this ONE task completely. Create a low-fidelity prototype using the drawings of your user flows in Figma (using scans of your drawings, if drawn by hand).
- To scan your user flow drawing you can use a free scanner app on your phone such as Adobe Scan.
- See this Sample low-fidelity prototype done from scans of user flows.
- Testing
- Test your prototype with a classmate or a student friend. Publish your prototype and share a link with your tester. Include any information he or she needs to know before testing it. Ask your tester the following questions:
- How easily they identify and interact with active interface elements?
- How quickly it is it apparent what the app offers and how to accomplish it.
- Is the path to accomplish it efficient?
- Considering the context in which the the app might be used, what worked for them, what did not, what was confusing, and what expectations they had that were not met.
- Test your prototype with a classmate or a student friend. Publish your prototype and share a link with your tester. Include any information he or she needs to know before testing it. Ask your tester the following questions:
- Revise your design and prototype based on the feedback from your tester.
- More user flows: draw user flows for two more user tasks and add them to your prototype.
Submission: 3 user flows, low-fidelity prototype
Resources
- 4 Phases of Rapid Application Development Methodology
- A Designer’s Introduction to “Agile” Methodology
- Prototyping 101: The Difference between Low-Fidelity and High-Fidelity Prototypes and When to Use Each
- Rapid Prototyping: Sketching & Paper Prototyping
- Tips on Prototyping for Usability Testing
- 10 Usability Heuristics for User Interface Design
