1. WF V.S. PROTOTYPE
   1. WF not interactive and represent flow and this is skeleton of UI
   2. The Low-fidelity prototype = interactive WF
   3. Normally, the reason why transition of design(Sometime design mock-ups) from WF to prototype is the req to show or test the proposed FLOW and NAVIGATION of the site
   4. Mock up is a potential design
   5. Example
      1. Low-fidelity WF
         1. Subtopic 1
      2. Meidum-fidelity Prototype
         1. Subtopic 1
      3. High-F Prototype
         1. Subtopic 1
2. Wireframe & Annotation
   1. Definition
      1. Low-fidelity prototype
      2. Identify elements
         1. Menu navigation
         2. Content section
         3. Image or media
         4. Form of elements
         5. CTA
      3. Create in black and white or shades of grade
      4. Use placeholder for image and do not get into specific font
         1. Font sizing is ok
      5. Be evloving
      6. Show to client to get validation on "design thinking"
         1. b4 design and development start
   2. LOTTE PROJECT
      1. Identify the data source
      2. Provide some design sample together with WF (optional)
      3. In PPTX format
      4. Content of a WF page
         1. Entry and exit point
         2. Display rule
         3. Interaction rules
         4. Some notes for design
         5. Error content/messaging
         6. Ex
            1. WF
      5. Propose simnple not complex WF in terms of function
   3. Approach
      1. Quickly share
         1. Test
            1. Iterate
            2. Improve
      2. BA -TMA : Send WF plan and discuss with Ha.Thang for suitable timeline.
         1. Should be 3-5 WFs for each
   4. Annotation
      1. Content identification and labeling
      2. User Goal
      3. Biz goal
      4. Entry and exit point
      5. Some notes for design
      6. Content source
      7. Display rule
      8. Interaction rules
      9. Interaction designation
      10. Process rules
      11. Error content/messaging
   5. Who uses WF ?
      1. PM
         1. as discussion points within the team to highlight strategy, technology needs, and a very high-level user experience.
      2. User
         1. See WF in earlier stage sometime in form of "paper prototype" to test design direction
      3. Client
         1. Validate the biz req, goals,and objective are met
         2. Provide approval to move forward into the visual design phase
      4. BA
         1. requirements are being met and to validate that they have not missed requirements that need to be included
      5. Design
         1. Use WF as blueprint for design output
         2. WF provide explanation and behaviours that need to be included
      6. Dev
         1. Together with BRD to understand expected functions and behaviour of design
      7. QC
         1. As basic for authoring its test case
         2. Once WF is approved the variation should be minimal
         3. This is allow QC to work earlier
3. PROTOTYPING
   1. Definition
      1. The art of creating, mimicking or testing all or part of the functionality of an app or website with USER
      2. Prototype can be created in analog or digital state
      3. It is a process
         1. Iterative process to identify issue
         2. Validate user experience
      4. Outcome
         1. Might end up prototyping with PROTOTYPE
            1. Screen
            2. Functionality
            3. A prototype is a mid- to high-fidelity representation of the final user interface.
         2. Actionable internal or external feedback on concepts in order to enhnace or improve design
   2. Purpose
      1. Testing and validating proposed functionality and design before investing in development
      2. Great way to experiment and communicate with team, client when it comes to complex nagivation and interaction
   3. How much Prototype is enough?
      1. Only simulate key part or interaction
         1. Only need to test handful of concepts
      2. Prototype looks like WF is enough
         1. It maybe preferable
            1. WF shows that the project is WIP
      3. Outcome of P rests on 3 factors
         1. Who are you building for and why?
            1. For design testing with user?
            2. For a biz pitch
         2. What types of resources, tools,and skills at your disposal?
         3. What does your timeline look like?
   4. What happen after prototyping?
      1. If you were Paper Protoyping
         1. Creating digital WF based on feedback received
      2. Update Digital P
   5. Protoype Ex
      1. Paper Prototyping allows analyst to bypass the WF phase and move to visual design and layout
         1. Due to timeline limited
      2. Begin with OmniGraffle WF then built as High-fidelity XHTML P
         1. TO determine the functionality is usable and affordable