UX-UI/subjects/ux/the-olympics/prototyping

UX IV - Ex 5 - Prototyping

Instructions:

Give another dimension to your user flow and turn your user flow into a paper prototype (12 screens max).

First, draw low-fidelity prototypes on paper. One main screen = 1 mobile frame.

Then, draw your mid-fidelity screens on Figma with simple shapes, in black and white.

Tips: Vocabulary

• Low-Fidelity: Paper Prototypes - Example here
• Mid-Fidelity: Wireframes - black and white, only the main elements, on digital prototype tools - Example here
• High-Fidelity: Wireframes with color, styles, graphical details, and micro-interactions - Example here

Deliverables:

• Picture of a paper prototype
• A Figma file with the wireframes (mid-fi)
• Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”.
• Add a title within all written documents.
• Pay attention to the global aspect of the deliverables. They must be clear, simple and easy to read. You can get inspiration on canva.com but don’t overload your design with too much details!

Resources:

• Example: Paper Prototyping - The Practical Beginners guide
• Example: Wellness App
• Android Mobile Template
• iPhone Template
• Figma

Quotes:

• ‘If you’re not embarrassed by the first version of your product, you’ve launched too late’ Reid Hoffman | LinkedIn
• To prototype your solution, you’ll need a temporary change of philosophy: from perfect to just enough, from long-term quality to temporary simulation.
• The prototype is meant to answer questions, so keep it focused. You just need a real-looking facade to which customers can react.