# UX II - Ex 7 - 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. No micro-interactions nor multistate are needed for this exercise.
- Test the prototype with 3 people. To do so, prepare a usability testing guide following the [Design Sprint Five-Act interview](https://www.youtube.com/watch?v=U9ZG19XTbd4)
- Then, draw your mid-fidelity screens on Figma with simple shapes, in black and white.

**Deliverables:** 

- A paper prototype
- Wireframes (mid-fi) to upload on the Figma

**Tips:** Vocabulary 

- Low-Fidelity: Paper Prototypes - [Example here](https://miro.medium.com/max/1400/1*5nUfqqA2gjdAYHagjbHA5w.jpeg)
- Mid-Fidelity: Wireframes - black and white, only the main elements, on digital prototype tools - [Example here](https://miro.medium.com/max/1400/1*eGSfaxwYbxUFomYbyO6GWw.png)
- High-Fidelity: Wireframes with color, styles, graphical details, and micro-interactions - [Example here](https://miro.medium.com/max/1400/1*Xn0HSKAvhr4TZzC9lN5udw.gif)

**Resources:** 

- Google Ventures - Design Sprint: The Five-Act interview
- Example: [Paper Prototyping - The Practical Beginners guide](https://www.uxpin.com/studio/blog/paper-prototyping-the-practical-beginners-guide/)
- Example: [Wellness App](https://medium.com/@ebtaskin/story-of-my-very-first-ux-ui-design-project-at-ironhack-bootcamp-955addeb760e)
- [Android Mobile Template](https://i.pinimg.com/originals/43/8e/de/438ede24264eb9552b635d34142eac29.png)
- [iPhone Template](https://www.cssauthor.com/wp-content/uploads/2014/01/iPhone-5S-Template-PSD.jpg)
- Figma

**Quote:** 

Any design is like a joke …if you have to explain it, it’s bad.