P3 - Sketching and Prototyping (Learning Pod)

read tutorials and put in the hours to learn how to use this tool. Your wireframes should have an appropriate level of detail for a wireframe drawing--not too much, not too little--and should follow best practices for wireframing. Make sure that your Figma file is ordered cleanly and logically, so that it is obvious which screens represent the initial state of the system and which screens are the result of user interaction over time (usually, we arrange them from left to right in temporal order). Label your frames so that it is easy to understand. You are welcome to use design "kits" to make wireframing faster and cleaner. Step 4: Create Hi-Fi Mockups It's time to develop a high-fidelity prototype. Use Figma to re-present the wireframe drawings as a realistic visual design for the interface. Be sure not to overwrite the wireframes; they should be preserved, so you can document the design process from beginning to end. Your high-fidelity prototype should follow best practices for mockups. Remember that hi-fi prototypes are pixel-perfect renderings, with full color, accurate font style and size, etc. To the user's eye, this should be indistinguishable from the final interface in the web app. And, recall that your design changes should integrate seamlessly into the visual and interaction design of the web app's current interface. So, follow the brand guidelines and spatial layouts and general look and feel of the existing web app. Step 5: Create an Interactive Prototype Finally, Figma enables you to create animated interactive prototypes, to simulate a functional prototype. You only need to make the newly designed pages you designed functional. It is up to you and your team to decide how much interactivity is reasonable given the user story you developed. Create a video recording demoing your interactive functionality. Step 6: Write a Reflective Report Your submission will be in the form of a short executive summary with a long appendix. The executive summary should this template ( https://docs.google.com/document /d/1G53IxoTF7a4esRnBRc6qjNGB8L4mHaf2h62Sqyy2RkU/edit?usp=sharing ) . If you have questions about this assignment, please ask them in #ask-the-instructors on Slack so that everyone can benefit from the questions and answers. Step 7: Submit 1. Give the instructional team <inf-131-instructors@uci.edu> edit access to your Google Doc 2. Submit a URL to your accessible Google Doc (note, we will pay attention to whether changes are 

Criteria Ratings Pts 10 pts 10 pts 10 pts 6 pts 20 pts 10 pts 20 pts 20 pts Report: Mockups Role: <name of team member who did this> What did you learn about making high-fidelity mockups? What would you do differently next time? 10 pts Full Marks 8 pts Mostly Satisfying 5 pts Partially Satisfying 0 pts No Marks Report: Interactive Prototype Role: <name of team member who did this> What did you learn about making an interactive prototype? What would you do differently next time? 10 pts Full Marks 8 pts Mostly satisfying 5 pts Partially Satisfying 0 pts No Marks Report: Conclusion User stories, expert review, and prototyping are standard approaches to imagining new interaction designs. Based on your experience, what do you think their strengths and weaknesses are? Applying what you know about HCI design process, what are the next steps? If so, what? If not, why not? 10 pts Full Marks 8 pts Mostly satisfying 5 pts Partially Satisfying 0 pts No Marks Appendix: User Story 6 pts Full Marks 4 pts Mostly satisfying 3 pts Partially Satisfying 0 pts No Marks Appendix: Expert Analysis 20 pts Full Marks 15 pts Mostly satisfying 10 pts Partially Satisfying 0 pts No Marks Appendix: Wireframes pencil sketches + Figma wireframes 10 pts Full Marks 7.5 pts Mostly satisfying 5 pts Partially Satisfying 0 pts No Marks Appendix: Mockups 20 pts Full Marks 15 pts Mostly satisfying 10 pts Partially Satisfying 0 pts No Marks Appendix: Interactive Prototype 20 pts Full Marks 15 pts Mostly satisfying 10 pts Partially Satisfying 0 pts No Marks 