public/subjects/user-experience/piscine-ux/the-olympics/README.md

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 but don’t overload your design with too much details!

Resources:

• Where good ideas come from
• Creative Confidence - Book by Tom Keller
• Sketching (podcast)
• 13 unusual brainstorming methods that work
• 3 proven methods to organize a brainstorming session
• Effective brainstorming (without feeling lost)
• The myth of brainstorming
• Ideation method: 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 but don’t overload your design with too much details!

Resources:

• Where good ideas come from
• Creative Confidence - Book by Tom Keller
• Sketching (podcast)
• 13 unusual brainstorming methods that work
• 3 proven methods to organize a brainstorming session
• Effective brainstorming (without feeling lost)
• The myth of brainstorming
• Ideation method: 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 but don’t overload your design with too much details!

Resources:

• Where good ideas come from
• Creative Confidence - Book by Tom Keller
• Sketching (podcast)
• 13 unusual brainstorming methods that work
• 3 proven methods to organize a brainstorming session
• Effective brainstorming (without feeling lost)
• The myth of brainstorming
• Ideation method: Worst possible idea

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 but don’t overload your design with too much details!

Resources:

• User flow glossary
• Site flows vs User Flows
• How to make a User Flow diagram

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
• 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
• Pay attention to the global aspect of the document. It must be clear, simple and easy to read. You can get inspiration canva 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."

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 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

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 but don’t overload your design with too much details!

Resources:

• Running a usability test
• Usability testing: what is it and how to do it?
• Analyzing usability testing data
• The art of guerrilla usability testing
• How to write a user testing report that people will actually read

Quote:

Prototypes are created for testing purposes, that’s why creating a prototype without running tests on it makes no sense.