Create a Paper Prototype
Based on your design concept in Developing a UX Design Concept (CIS304), and especially the UI sketches you created, construct an interactive paper prototype that illustrates how your concept will be interactive, responding to user actions to complete the tasks you defined for your design.
Prepare a set of materials such as paper, post-it notes, transparency film, scissors, tape, and markers, using post-it notes and transparency film to create layers for interactive UI elements. Focus on the architecture of your design and the navigation between screens, as well as on the interactivity of the interface, allowing the user to make choices wherever possible.
Paper, post-it notes, transparency film, scissors, tape, and markers, using post-it notes to create layers for interactive UI elements
In summary, each decision was made to enhance the prototype's visual appeal, user engagement, and functionality while considering cost-effectiveness and simplicity. The rationale behind these decisions is to create an interactive, and user-friendly experience for the intended audience.
Appearance:
Decisions:
- Colorful scheme for buttons and navigation.
- Use of graphics objects for video and image representation.
- Material choice of cardboard and magazine photos.
Rationale:
- A vibrant color scheme adds visual appeal and enhances user engagement.
- Graphics objects make the prototype more visually representative.
- Cardboard and magazine photos create a tangible and budget-friendly prototype.
Content:
Decisions:
- Inclusion of a basic information form on the iPad.
- Presentation of product results based on user selections.
Rationale:
- The form captures essential information for user interaction.
- Displaying product results fulfills the prototype's purpose of showcasing outcomes.
Features:
Decisions:
- Integration of a navigation feature to indicate user progress.
- Design of a prominent start button with a pull-up action.
- Use of an engineered solution with velcro for screen connection.
Rationale:
- Navigation aids user understanding and enhances the user journey.
- The start button with a pull-up action adds a tactile and interactive element.
- An engineered solution with velcro ensures a stable and easy-to-assemble prototype.
Material:
Decisions:
- Selection of cardboard as the primary material.
- Use of colorful paper for buttons and options.
Rationale:
- Cardboard provides a sturdy and cost-effective base for the prototype.
- Colorful paper enhances the visual appeal and adds a tactile element.
Functionality:
Decisions:
- Design of a pull-up action for the start button.
- Integration of a navigation feature to indicate user progress.
Rationale:
- The pull-up action adds a playful and interactive element to the prototype.
- Navigation provides users with a clear understanding of their progress.
Interactivity:
Decisions:
- Use of colorful paper for checkboxes representing user answers.
- Incorporation of an engineered solution for user navigation.
Rationale:
- Colorful paper checkboxes add a tactile and visually appealing interactive element.
- An engineered solution for navigation ensures user interaction and engagement.
Resolution:
Decisions:
- Ensuring clarity in design details, such as the eminent orange start button.
- Providing clear guidance on how to use the prototype.
Rationale:
- Clarity in design details ensures a visually appealing and user-friendly prototype.
- Clear guidance helps users navigate and understand the prototype's functionality.
Paper Prototype using cardboard and magazines
Prepare an interactive medium-fidelity prototype of your design project using Balsamiq Wireframes desktop application. The prototype should be based on the paper prototype you created in the previous module while expanding by adding fidelity, content, interactivity, and functionality. Make sure that the prototype demonstrates the interaction flow with important features of your design.
This should not be a fully functional application, but should simulate the behavior of your application for specific tasks that you chose to support. The functions you are demonstrating in-depth should be developed vertically, while additional functionalities that you are not demonstrating should be developed horizontally.
1. Improved User Choices:
- Explanation: I added more detailed options for users to choose from. This makes it easier for users to pick what they really want.
2. New Look for Navigation Clue:
- Explanation: I changed how the navigation clue looks to help users understand where they are better. It's like a map to guide them through the prototype.
Conduct a heuristic evaluation of your prototype, then propose solutions to the problems you identified. Decide which problems you will fix in the next stage of the high-fidelity prototype. Justify why you chose the solution(s) that you did (i.e., does it substantially improve the design of the product?).
Conduct a heuristic evaluation.
Using the Heuristic Evaluation Spreadsheet tool and performing a systematic pass over the prototype, identify at least five problems in the design. Describe for each problem its location and what the problem is, what heuristic is being evaluated, and choose the correct severity level. In this project, you will perform the heuristic evaluation as a “team of one,” not recruiting a team of evaluators.
Propose solutions.
In the spreadsheet, identify each problem you will be fixing when you finalize the design later (in the high-fidelity prototype). Also in the spreadsheet, describe for each problem what the solution is going to be and why you chose to fix it.
Submit your heuristic evaluation.
You can submit the spreadsheet at the end of the course clearly labeled as a separate file using the naming convention.
The prototype should be based on the medium-fidelity prototype you created with Balsamiq. Expand this prototype’s interactivity and functionality, improve the screen layouts, and add high-quality visuals, a color palette, and other visual elements to your design. Also, make sure to fix any usability problems you discovered and decided to fix in your heuristic evaluation. Remember to always be mindful of your persona and their goals and behaviors when making changes to the design to ensure that your final prototype will be designed for the user experience that you are trying to support and achieve.
Create a prototype with Figma
Start by creating a new empty frame for each screen of your application, and name each frame by the name of the screen.
Then, fill each frame with shapes, constructing your user interface elements that show the main functionality of the screen. As you construct the various frames, commit to your own style (colors, shapes, and sizes) and replicate it across the various frames.
Finally, to add interactivity, connect the different frames by adding links from screen elements to the corresponding screens. Copy and paste interactive elements that occur on multiple screens (e.g., a “home” button) from one frame to the other. (Be sure to test your prototype before submitting.)
Explain the changes you made to this prototype compared to the medium-fidelity Balsamiq prototype:
Changes based on the heuristic evaluation:
For a better experience, please select "Fit to screen" under "Options" in the top right corner of the protoptype.
© 2024 by Learning Matrix. Empowering Minds!