Midterm - Mid-fidelity Prototype

Description:

You are required to create a prototype in Figma Make for your mobile application. This will be the equivalent of your mid fidelity prototype. It is mid fidelity because at this stage we are focused on the content, concept, Architecture and not the visual Design. Visual Design is the last layer to acheive High Fidelity.

Instructions:

Step 1: Paper prototype

To transition from IA and Scenario to a User Interface is a very critical step of what we have done so far. We will work in class to guide you on making that transition accurate.

• Your Scenario and IA should guide your paper prototype.
• Reference your IA to draft the necessary app screens.
• The interface you sketch should allow the user to perform the scenario task you created.
• The paper prototype should account for the platform you have chosen and its navigation rules.
• Step 2: In Class Concept Testing
  • Engage with your classmates to test your app concept on paper during class.
  • Conduct concept testing with a minimum of 3 classmates.
  • Document all feedback gathered during the concept testing phase.

Concept Testing Details:

• Your users should be able to:

  • Browse the app’s content.
  • Navigate to a specific screen to execute a task.
  • Switch between tasks as needed.

• Required Screens:

  • TBD (based on your User Scenarios)
  • Example screens:
    • Home / Browse
    • Section / Detail view
    • Primary Task Execution screen
    • Secondary Task / Settings / Profile

• Task Flow:

  • Browse the main content.
  • Navigate to a specific section.
  • Execute a primary action.
  • Browse a different section.
  • Perform a secondary action.

Step 3: Figma Make Prototype

Implement the changes from Testing to your paper prototype to ensure your user can complete the main scenario. Use your paper screens as guidance for your AI generated Prototype. Craft a well thought through first prompt that will set you up for success in what you are creating. The success of your Figma Make prototype is defined by its accuracy to match what you have created so far. The prototype should have all the paper screens you tested and planned for. The prototype should allow for the user to complete the main scenario tasks. The prototype should account for the UI rules of the platform you are designing for. This prototype will be tested the following week with 3 classmates again to enable you to move to the next phase of the design. Your scenario will be the testing script, so make sure your scenario can be achieved through the prototype.

Consider including the following in your first prompt:

• Project context: app name, target platform (iOS/Android/web), and brief description of the problem being solved.
• Target user: persona, goals, and key scenarios the prototype must support.
• Primary tasks: list the main user actions the prototype must enable (e.g., browse content, complete purchase, submit form).
• Required screens: enumerate each paper screen to be included (Home, Section/Detail, Primary Task, Secondary Task/Settings/Profile, etc.).
• Navigation rules: specify navigation model (tabs, drawer, bottom nav, gestures) and back/forward behavior.
• Interactions and fidelity: indicate mid-fidelity expectations (clickable hotspots, flows, basic states) and which interactions should be simulated.
• Design constraints: platform UI guidelines, accessibility basics, and any components or patterns to avoid/include.
• Deliverables: clickable prototype link, annotated screens, list of assets and components, and notes on any limitations.
• Testing script and success criteria: the scenario steps to test, acceptance criteria for task completion, and any metrics to record (time on task, errors, observations).
• Revision plan: how to document feedback and iterate before the next testing session.

Grading Criteria:

You will be graded on the following:

• Accuracy of your Make prototype in comparison to your IA and paper prototype.
• Ability to complete your scenario tasks through the prototype.
• Quality of your prompts and history of your progress.
• Creative solutions that led you to your final result (showcase how you arrived at your solution through prompt history or additional comments).

Submission

Provide a link to your Figma Make and make sure Your teacher can access it. No need to publish the Figma Make just yet.