- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
- Add a title within the file.
**Deliverable:**
- An animated Mid-Fi prototype on Figma.
**Tips:**
- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
**Resources:**
- [Efficiently Manage Your Designs - How Mockplus State Page Helps To View & Manage Multiple State](https://help.mockplus.com/p/372)
- [Site flows vs User Flows](https://uxmovement.com/wireframes/site-flows-vs-user-flows-when-to-use-which/)
- [Site flows vs User Flows](https://uxmovement.com/wireframes/site-flows-vs-user-flows-when-to-use-which/)
- [How to make a User Flow diagram](https://www.lucidchart.com/blog/how-to-make-a-user-flow-diagram)
- [How to make a User Flow diagram](https://www.lucidchart.com/blog/how-to-make-a-user-flow-diagram)
## Test Wireframe
## Prototyping
### Instructions
### Instructions
Test your wireframe prototype with 5 different people and write down the 5 main iterations that need to be made on the next version.
Give another dimension to your user flow and turn your user flow into a paper prototype (6 to 12 screens max).
This exercise is to be made individually.
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.
Don't forget to:
Don't forget to:
@ -213,37 +195,62 @@ Don't forget to:
### Deliverables
### Deliverables
- A PDF document with the usability test script that includes:
- Picture of a paper prototype.
- A greeting and onboarding paragraph.
- A Figma file with the wireframes (mid-fi).
- A scenario the user has to complete.
- A conclusion to wrap up the test and thank the user.
- Pictures of the ongoing tests.
- A PDF document with a report on what you learnt and a list of the 5 main iterations that you'd like to do on the next version.
**Tips:**
**Tips:**
- Pay attention to the global aspect of the deliverables. They must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
- 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)
- Pay attention to the global aspect of the document. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
**Resources:**
**Resources:**
- [Running a usability test](https://www.usability.gov/how-to-and-tools/methods/running-usability-tests.html)
- Example: [Paper Prototyping - The Practical Beginners guide](https://www.uxpin.com/studio/blog/paper-prototyping-the-practical-beginners-guide/)
- [Usability testing: what is it and how to do it?](https://uxdesign.cc/usability-testing-what-is-it-how-to-do-it-51356e5de5d)
- [How to write a user testing report that people will actually read](https://uxdesign.cc/how-to-write-a-user-testing-report-that-people-will-actually-read-652d15d2f92e)
- Figma
**Quote:**
**Quotes:**
Prototypes are created for testing purposes, that’s why creating a prototype without running tests on it makes no sense.
- "If you’re not embarrassed by the first version of your product, you’ve launched too late’ Reid Hoffman | LinkedIn
## Third Prototyping
- "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."
## Animation
### Instructions
### Instructions
Give another dimension to your user flow and turn your user flow into a paper prototype (6 to 12 screens max).
Animate your wireframes on Figma.
First, draw low-fidelity prototypes on paper. One main screen = 1 mobile frame.
Think about multistate!!
Then, draw your mid-fidelity screens on Figma with simple shapes, in black and white.
This exercise is to be made individually.
- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
- Add a title within the file.
**Deliverable:**
- An animated Mid-Fi prototype on Figma.
**Tips:**
- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
**Resources:**
- [Efficiently Manage Your Designs - How Mockplus State Page Helps To View & Manage Multiple State](https://help.mockplus.com/p/372)
## Test wireframe
### Instructions
Test your wireframe prototype with 5 different people and write down the 5 main iterations that need to be made on the next version.
This exercise is to be made individually.
Don't forget to:
Don't forget to:
@ -252,26 +259,25 @@ Don't forget to:
### Deliverables
### Deliverables
- Picture of a paper prototype.
- A PDF document with the usability test script that includes:
- A Figma file with the wireframes (mid-fi).
- A greeting and onboarding paragraph.
- A scenario the user has to complete.
- A conclusion to wrap up the test and thank the user.
- Pictures of the ongoing tests.
- A PDF document with a report on what you learnt and a list of the 5 main iterations that you'd like to do on the next version.
**Tips:**
**Tips:**
- Low-Fidelity: Paper Prototypes - [Example here](https://miro.medium.com/max/1400/1*5nUfqqA2gjdAYHagjbHA5w.jpeg)
- Pay attention to the global aspect of the deliverables. They must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
- 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)
- Pay attention to the global aspect of the document. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
**Resources:**
**Resources:**
- Example: [Paper Prototyping - The Practical Beginners guide](https://www.uxpin.com/studio/blog/paper-prototyping-the-practical-beginners-guide/)
- [Running a usability test](https://www.usability.gov/how-to-and-tools/methods/running-usability-tests.html)
- [The art of guerrilla usability testing](http://www.uxbooth.com/articles/the-art-of-guerrilla-usability-testing/)
- Figma
- [How to write a user testing report that people will actually read](https://uxdesign.cc/how-to-write-a-user-testing-report-that-people-will-actually-read-652d15d2f92e)
**Quotes:**
**Quote:**
- "If you’re not embarrassed by the first version of your product, you’ve launched too late’ Reid Hoffman | LinkedIn
Prototypes are created for testing purposes, that’s why creating a prototype without running tests on it makes no sense.
- "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."
davhojt
1 year ago
committed by