mirror of https://github.com/01-edu/public.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
278 lines
14 KiB
278 lines
14 KiB
2 years ago
|
## Animation
|
||
|
|
|
||
|
|
### Instructions
|
||
|
|
|
||
|
|
Animate your wireframes on Figma.
|
||
|
|
|
||
|
|
Think about multistate!!
|
||
|
|
|
||
|
|
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)
|
||
|
|
## Ideation A
|
||
|
|
|
||
|
|
**Context:**
|
||
|
|
|
||
|
|
The Olympics committee calls on you to get fresh ideas for the next Olympic Games.
|
||
|
|
|
||
|
|
You’ll team up by groups of 3 and focus each on one problem statement.
|
||
|
|
|
||
|
|
You’ll get guidelines and suggestions to run ideation workshops, and bring your ideas to life with three different prototypes, that you will animate and test.
|
||
|
|
|
||
|
|
### Instructions
|
||
|
|
|
||
|
|
Let's be creative!
|
||
|
|
|
||
|
|
Organize and run an ideation workshop with 4 to 8 participants to find ideas to solve this problem statement:
|
||
|
|
|
||
|
|
**How might we create a digital sport anyone (including athletes, non-athletes, disabled) could play between now and the next Olympics edition?**
|
||
|
|
|
||
|
|
A is leader, B is time-keeper and C focuses on logistics.
|
||
|
|
|
||
|
|
- The ideation workshop script should include:
|
||
|
|
|
||
|
|
- The main objective.
|
||
|
|
- An ice breaker.
|
||
|
|
- The main steps of the ideation process.
|
||
|
|
- Clear instructions.
|
||
|
|
- A time schedule for each step.
|
||
|
|
- A voting process to select the main idea.
|
||
|
|
|
||
|
|
Don't forget to:
|
||
|
|
|
||
|
|
- 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.
|
||
|
|
|
||
|
|
### Deliverables
|
||
|
|
|
||
|
|
- A PDF document with the ideation workshop script.
|
||
|
|
- Pictures of the ongoing workshop.
|
||
|
|
- A PDF document that represents the main concept out of the workshop.
|
||
|
|
|
||
|
|
**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!
|
||
|
|
|
||
|
|
**Resources:**
|
||
|
|
|
||
|
|
- [Where good ideas come from](https://www.ted.com/talks/steven_johnson_where_good_ideas_come_from)
|
||
|
|
- [Creative Confidence - Book by Tom Keller](https://booksvooks.com/creative-confidence-unleashing-the-creative-potential-within-us-all-pdf.html)
|
||
|
|
- [Sketching (podcast)](https://www.usersknow.com/podcast/2016/10/10/ua1wdsszhx2pemugxc1e0qj0a3l9cs)
|
||
|
|
- [13 unusual brainstorming methods that work](http://www.huffingtonpost.com/young-entrepreneur-council/13-unusual-brainstorming_b_3880619.html)
|
||
|
|
- [3 proven methods to organize a brainstorming session](https://uxdesign.cc/brainstorm-79e51f20f313)
|
||
|
|
- [Effective brainstorming (without feeling lost)](https://uxdesign.cc/effective-brainstorming-without-being-lost-b68750bbfac5?sk=5d5a332f7e3f2a43364c031b01b13229)
|
||
|
|
- [The myth of brainstorming](https://uxdesign.cc/the-myth-of-brainstorming-8517e02facc0?sk=995d601cbf988d574e86dd71364cb92f)
|
||
|
|
- [Ideation method: Worst possible idea](https://www.interaction-design.org/literature/article/learn-how-to-use-the-best-ideation-methods-worst-possible-idea)
|
||
|
|
## Ideation B
|
||
|
|
|
||
|
|
### Instructions
|
||
|
|
|
||
|
|
Let's be creative!
|
||
|
|
|
||
|
|
Organize and run an ideation workshop with 4 to 8 participants to find ideas to solve this problem statement:
|
||
|
|
|
||
|
|
**How might we provide relevant and on-demand information about the environmental and social impact of the Olympics through our platform?**
|
||
|
|
|
||
|
|
B is leader, C is time-keeper and A focuses on logistics.
|
||
|
|
|
||
|
|
- The ideation workshop script should include:
|
||
|
|
|
||
|
|
- The main objective.
|
||
|
|
- An ice breaker.
|
||
|
|
- The main steps of the ideation process.
|
||
|
|
- Clear instructions.
|
||
|
|
- A time schedule for each step.
|
||
|
|
- A voting process to select the main idea.
|
||
|
|
|
||
|
|
Don't forget to:
|
||
|
|
|
||
|
|
- 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 not to use the same ideation technique as in Ex 1!
|
||
|
|
|
||
|
|
### Deliverables
|
||
|
|
|
||
|
|
- A PDF document with the ideation workshop script.
|
||
|
|
- Pictures of the ongoing workshop.
|
||
|
|
- A PDF document that represents the main concept out of the workshop.
|
||
|
|
|
||
|
|
**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!
|
||
|
|
|
||
|
|
**Resources:**
|
||
|
|
|
||
|
|
- [Where good ideas come from](https://www.ted.com/talks/steven_johnson_where_good_ideas_come_from)
|
||
|
|
- [Creative Confidence - Book by Tom Keller](https://booksvooks.com/creative-confidence-unleashing-the-creative-potential-within-us-all-pdf.html)
|
||
|
|
- [Sketching (podcast)](https://www.usersknow.com/podcast/2016/10/10/ua1wdsszhx2pemugxc1e0qj0a3l9cs)
|
||
|
|
- [13 unusual brainstorming methods that work](http://www.huffingtonpost.com/young-entrepreneur-council/13-unusual-brainstorming_b_3880619.html)
|
||
|
|
- [3 proven methods to organize a brainstorming session](https://uxdesign.cc/brainstorm-79e51f20f313)
|
||
|
|
- [Effective brainstorming (without feeling lost)](https://uxdesign.cc/effective-brainstorming-without-being-lost-b68750bbfac5?sk=5d5a332f7e3f2a43364c031b01b13229)
|
||
|
|
- [The myth of brainstorming](https://uxdesign.cc/the-myth-of-brainstorming-8517e02facc0?sk=995d601cbf988d574e86dd71364cb92f)
|
||
|
|
- [Ideation method: Worst possible idea](https://www.interaction-design.org/literature/article/learn-how-to-use-the-best-ideation-methods-worst-possible-idea)
|
||
|
|
## Ideation C
|
||
|
|
|
||
|
|
### Instructions
|
||
|
|
|
||
|
|
Let's be creative!
|
||
|
|
|
||
|
|
Organize and run an ideation workshop with 4 to 8 participants to find ideas to solve this problem statement:
|
||
|
|
|
||
|
|
**How might we help sports fans organize local Olympic Games in between 2 international editions?**
|
||
|
|
|
||
|
|
C is leader, A is time-keeper and B focuses on logistics.
|
||
|
|
|
||
|
|
- The ideation workshop script should include:
|
||
|
|
|
||
|
|
- The main objective.
|
||
|
|
- An ice breaker.
|
||
|
|
- The main steps of the ideation process.
|
||
|
|
- Clear instructions.
|
||
|
|
- A time schedule for each step.
|
||
|
|
- A voting process to select the main idea.
|
||
|
|
|
||
|
|
Don't forget to:
|
||
|
|
|
||
|
|
- 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 not to use the same ideation technique as in Ex 2!
|
||
|
|
|
||
|
|
### Deliverables
|
||
|
|
|
||
|
|
- A PDF document with the ideation workshop script.
|
||
|
|
- Pictures of the ongoing workshop.
|
||
|
|
- A PDF document that represents the main concept out of the workshop.
|
||
|
|
|
||
|
|
**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!
|
||
|
|
|
||
|
|
**Resources:**
|
||
|
|
|
||
|
|
- [Where good ideas come from](https://www.ted.com/talks/steven_johnson_where_good_ideas_come_from)
|
||
|
|
- [Creative Confidence - Book by Tom Keller](https://booksvooks.com/creative-confidence-unleashing-the-creative-potential-within-us-all-pdf.html)
|
||
|
|
- [Sketching (podcast)](https://www.usersknow.com/podcast/2016/10/10/ua1wdsszhx2pemugxc1e0qj0a3l9cs)
|
||
|
|
- [13 unusual brainstorming methods that work](http://www.huffingtonpost.com/young-entrepreneur-council/13-unusual-brainstorming_b_3880619.html)
|
||
|
|
- [3 proven methods to organize a brainstorming session](https://uxdesign.cc/brainstorm-79e51f20f313)
|
||
|
|
- [Effective brainstorming (without feeling lost)](https://uxdesign.cc/effective-brainstorming-without-being-lost-b68750bbfac5?sk=5d5a332f7e3f2a43364c031b01b13229)
|
||
|
|
- [The myth of brainstorming](https://uxdesign.cc/the-myth-of-brainstorming-8517e02facc0?sk=995d601cbf988d574e86dd71364cb92f)
|
||
|
|
- [Ideation method: Worst possible idea](https://www.interaction-design.org/literature/article/learn-how-to-use-the-best-ideation-methods-worst-possible-idea)
|
||
|
|
## Second User Flow
|
||
|
|
|
||
|
|
### Instructions
|
||
|
|
|
||
|
|
Based on the main concept out of the workshop you led, design the user flow a user has to follow to access the main service.
|
||
|
|
|
||
|
|
This exercise is to be made individually.
|
||
|
|
|
||
|
|
Don't forget to:
|
||
|
|
|
||
|
|
- 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.
|
||
|
|
|
||
|
|
### Deliverables
|
||
|
|
|
||
|
|
- A comprehensive user flow on a board (digital or pictures of a physical one)
|
||
|
|
|
||
|
|
**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!
|
||
|
|
|
||
|
|
**Resources:**
|
||
|
|
|
||
|
|
- [User flow glossary](https://www.productplan.com/glossary/user-flow/)
|
||
|
|
- [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)
|
||
|
|
## 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:
|
||
|
|
|
||
|
|
- 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.
|
||
|
|
|
||
|
|
### Deliverables
|
||
|
|
|
||
|
|
- A PDF document with the usability test script that includes:
|
||
|
|
- 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:**
|
||
|
|
|
||
|
|
- 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!
|
||
|
|
|
||
|
|
**Resources:**
|
||
|
|
|
||
|
|
- [Running a usability test](https://www.usability.gov/how-to-and-tools/methods/running-usability-tests.html)
|
||
|
|
- [Usability testing: what is it and how to do it?](https://uxdesign.cc/usability-testing-what-is-it-how-to-do-it-51356e5de5d)
|
||
|
|
- [Analyzing usability testing data](https://uxdesign.cc/analysing-usability-testing-data-97667ae4999e)
|
||
|
|
- [The art of guerrilla usability testing](http://www.uxbooth.com/articles/the-art-of-guerrilla-usability-testing/)
|
||
|
|
- [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)
|
||
|
|
|
||
|
|
**Quote:**
|
||
|
|
|
||
|
|
Prototypes are created for testing purposes, that’s why creating a prototype without running tests on it makes no sense.
|
||
|
|
## Third Prototyping
|
||
|
|
|
||
|
|
### Instructions
|
||
|
|
|
||
|
|
Give another dimension to your user flow and turn your user flow into a paper prototype (6 to 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.
|
||
|
|
|
||
|
|
Don't forget to:
|
||
|
|
|
||
|
|
- 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.
|
||
|
|
|
||
|
|
### Deliverables
|
||
|
|
|
||
|
|
- Picture of a paper prototype.
|
||
|
|
- A Figma file with the wireframes (mid-fi).
|
||
|
|
|
||
|
|
**Tips:**
|
||
|
|
|
||
|
|
- 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:**
|
||
|
|
|
||
|
|
- 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
|
||
|
|
|
||
|
|
**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."
|