Artificial Intelligence

Designing with Web

Artificial intelligence (AI) has reached peak hype. News outlets report that companies have replaced workers with IBM Watson and that algorithms are beating doctors at diagnoses. Progress made in computer vision or natural language processing over the last few years has been phenomenal. These technologies are already everywhere, our phones, instagram filters, cars, robots... New AI startups pop up everyday, claiming to solve all your personal and business problems with machine learning.

Ordinary objects like juicers and Wi-Fi routers suddenly advertise themselves as “powered by AI.” Not only can smart standing desks remember your height settings, they can also order you lunch.

Mariya YAO,
Understanding the limits of deep learning

So what is Artificial Intelligence? How can we use it? The goal of this module is to get started with AI and understand its possibilities and limits.


Machine Learning

Within the field of Machine Learning, there are two main types of tasks: supervised, and unsupervised.

  • Supervised learning is about making predictions with a labelled dataset. For instance, if you need to detect a human face in a picture, you will train a model with a dataset containing pictures labelled with people (it is called classification). You can take also take a look at numerical regressions, it is commonly used to predict stock/housing market price.
  • Unsupervised learning , on the other hand, will infer using unlabelled data. It is used to identify all kind of unknown patterns in data. For instance, you'll use it to group customers by purchasing behaviors. This is called clustering.

Mathematical analysis of machine learning algorithms and their performance is a well-defined branch of theoretical computer science often referred to as computational learning theory.

Machine Learning at its most basic is the practice of using algorithms to parse data, learn from it, and then make a determination or prediction about something in the world. So rather than hand-coding software routines with a specific set of instructions to accomplish a particular task, the machine is “trained” using large amounts of data and algorithms that give it the ability to learn how to perform the task.

MICHAEL COPELAND,
What’s the Difference Between Artificial Intelligence, Machine Learning, and Deep Learning?

Teachable Machine is an experiment that makes it easier for anyone to explore machine learning, live in the browser – no coding required. Play with Teachable Machine for an example of classification using supervised Machine Learning.


ml5.js logo

Hello ml5.js

In this module we're going to use ml5.js, a JS library that aims to make machine learning approachable for a broad audience of artists, creative coders, and students.

ml5.js aims to make machine learning approachable for a broad audience of artists, creative coders, and students. The library provides access to machine learning algorithms and models in the browser, building on top of TensorFlow.js with no other external dependencies.

The ml5.js library is supported by code examples and tutorials with an emphasis on ethical computing.

Start by watching this video to get a basic idea on how to get started with ml5.js:

And you can study the code of the video here:

So, ml5.js is using supervised Machine Learning: large datasets with classifications given by humans are used to create models that ML algorithms will use to determine classifications of future inputs. As we've seen at the end of the previous video, sometimes these models fail to classify some inputs, this is a key in understanding the limit and risks of ML.
Watch the first video in the playlist below to understand the origins of these biases:

You should definitely watch the full playlist, first to learn a more about ml5.js features, second to watch someone coding and learn more about the process from thinking a project to writing it with code.


Sum up

  • Machine Learning is a field of Artificial Intelligence.
  • ML uses statistical techniques to give computer systems the ability to "learn" from data.
  • Supervised Learning is a class of algorithms, where we already know the result we wish to predict for the sample dataset.
  • Supervised Learning algorithms can be used for classification or regression (numerical interpolation).
  • Unsupervised learning is the process of searching for structure in a dataset.
  • Unsupervised Learning algorithms can be used for pattern identification or clustering.

Be careful: data used to create models can be selected towards certain goals that may be different from ours, or can have biases:

"Any time you have a dataset of human decisions, it includes bias," said Roman Yampolskiy, director of the Cybersecurity Lab at the University of Louisville. "Whom to hire, grades for student essays, medical diagnosis, object descriptions, all will contain some combination of cultural, educational, gender, race, or other biases."

Hope REESE,
Bias in machine learning, and how to stop it


Resources and going further


Quiz

Test your knowledge

This quiz is mandatory. You can answer this quiz as many times as you want, only your best score will be taken into account. Simply reload the page to get a new quiz.

The due date has expired. You can no longer answer this quiz.


AI Project

Assignment

Objectives

You should now have a better understanding of what Artificial Intelligence is and how it can be integrated in web services. We are now ready to take a step back from all these new technical concepts in order to grasp how they can add value to various projects, increase their efficiency or improve their impact. You'll conduct and document an exploratory research on existing web projects (if possible partially based on Artificial Intelligence) answering to your Sustainable Development Goal subject (cf the chapter Introduction).

You should make a difference between what your subject is and what the associated SD Goal is. Here you have to focus on your subject as stated in the page Introduction, which is more specific than the general SD Goal.

The pedagogical objectives of this assignment are the following: The pedagogical objectives of this documentation project are the following:

  • Gather information:
    • on your SD Goal and more specifically on your subject
    • on the way Artificial Intelligence is actually integrated in web projects
  • Identify
    • actual needs on your subject
    • potential users and/or beneficiaries of that type of projects
  • Practice
    • formulating relevant research questions
    • creating a user persona
    • producing a user scenario
  • Project yourself
    • in the opportunities brought by web and new technologies, in particular Artificial Intelligence, to a project of general interest
    • in a dynamic of social innovation

This assignment is also the only way to get well prepared for your group project, so be sure to get involved now to make the most of the four weeks of collective prototyping that will follow! Indeed, this research process corresponds to a phase of empathy and inspiration, which is an essential step for generating new ideas.

Instructions

This assignment is mandatory. If you update your work but the link doesn't change, you don't need to re-submit it.

On Glitch, make sure you're always connected when you make your assignment!
Assignments done without being connected are graded 0!

Your assignment will take the form of a web page created and hosted through glitch, just as in the previous part. It should summarize the results of your exploratory research and reflect your understanding of the technologies and of your subject's issues. Your documentation project will take the form of a web page created and hosted through glitch, just as in the previous part. It should summarize the results of your exploratory research and reflect your understanding of the technologies and of your subject's issues.

At first, you'll look for existing projects addressing your subject in an interesting way. They must be digital projects, ideally based on web technologies or on a mobile app. If they use Artificial Intelligence in a way or another, it's even better! You'll probably use mainly a search engine to discover and document such projects, but feel free to use other ways to gather information: specialised magazines, tech or social entrepreneurship events, organizations, incubators... You'll then have to summarize briefly four projects that seem relevant to you, following the detailed structure given below.

Don't forget to write down all your sources during your research!

Then in a second time you will focus on only one of these projects. The choice is up to you, but be sure to explain us why you chose this project among the others. You will deepen both the user experience aspects and the technical principle.

This assignment is evaluated on the quality of your thinking and of your documentation, not on your ability to code or recreate such projects using Machine Learning / ml5.js. But if you feel like experimenting more Machine Learning tools, try to simulate one of the projects, you could earn bonus points!

Structure of your assignment

Be sure to follow strictly the structure given below. Your layout must be very clear and highlight the information hierarchy. Keep in mind that the ability to properly structure and style your page with HTML/CSS will be evaluated!

Your assignment has to be structured as it follows:

Your documentation project has to be structured as it follows:

Presentation

  • Subject
  • The subject assigned to you on the page 'Subject'
  • Technological module
  • API / Database / AI, which one did you choose?

A. Exploratory research

  1. Name of the project n°1

  2. Insert an image to illustrate the project.
    1. Project carriers

      The persons, companies, organizations, institutions who carry the project

    2. Beneficiaries

      Who benefit from this project? In some projects, the entity can be non-human, such as a certain type of animal species etc.

    3. Users

      Who is using this project? There can be several types of users. Also, users may be the same persons as beneficiaries, but not necessarily.

    4. Need

      The need the project is answering to

    5. Principle

      How is the project answering to the need? What solution is it offering?

    6. Main technologies involved

      A list of the main technologies that make the project work.

    7. Sources

      Link to the resources you used, the website of the project etc.

    8. Other info

      Optional

  3. Name of the project n°2

  4. Proceed as for project n°1
  5. Name of the project n°3

  6. Proceed as for project n°1
  7. Name of the project n°4

  8. Proceed as for project n°1

B. Deepening

  1. Name of the selected project

  2. Insert one or several images to illustrate this project.
    1. Carriers and actors of the project

      In addition to the persons who carry the project, other actors can contribute to it.

    2. Research question

      Take the time to formulate the research question the project is answering to. See in 'Methodological tools' below what is expected from a good research question.

    3. The reason you selected this project
  3. User scenario

    1. Users

      A reminder of who the users are

    2. Persona

      Create a relevant persona that could use this project and describe that persona. See tips in 'Methodological tools' below.

    3. Key features

      Every action that your user can do with a product is called a feature. The most important features are called key features: list them by order of importance in the form VERB + NOUN (ex: "order food")

    4. UX storyboard

      Insert an image of your UX storyboard. It can be a picture if you draw it by hand, or a screenshot / image if you created it on a computer. See tips in 'Methodological tools' below.

  4. Technical analysis

    1. General principle

      One to two phrases to explain briefly how the project technically works

    2. Technical overview - AI version

      Write down a detailed technical overview of the project in an "AI version", that is:

      • If no Artificial Intelligence technologies are involved in the existing project you're currently documenting, you'll have to imagine how AI could be integrated in the project for it to have a greater impact / efficiency. Then describe precisely how it would work.
      • If Artificial Intelligence technologies are involved in the existing project you're documenting, then the "AI version" is the same as the existing one.
      See what is expected from the detailed technical overview in 'Methodological tools' below.

    3. Added value thanks to Artificial Intelligence

      In two to three sentences, summarize how AI improves the project (whether you're working on a fictionnal "AI-version or on the existing one that already involves AI)

  5. Simulation

  6. If you feel like experimenting more Machine Learning tools, you can try to simulate the project, for example with ml5.js. This part is optional (bonus points). Screenshots, source code, link to your projects ... All efforts appreciated!


Complementary sources

  • Source 1
  • Source 2
  • Source 3

Methodological tools

This section gives you detailed methodological tips and clarifies what is expected from your documentation on the points Research question, Persona, UX storyboard and Technical overview. Be sure to read it carefully!

Research question

As the name suggests, a research question (sometimes called problematique) is particularly central in a research project, such as a thesis or even a dissertation. But it is more generally a fundamental starting point when you're trying to tackle an issue through a well-defined problem. If you want to propose a relevant solution, which meets a need or a demand, you absolutely must take your time to carefully formulate your research question.

So basically, what is a research question? It is the question that the project sets out to answer. Remember that you have to be the most precise as possible. Your research question must meet all the criterias below:

  • it expresses the specific problem the project aims to solve
  • it mentions the potential users and ideally the end-beneficiaries
  • it gives the context the project focuses on
  • it is formulated in an interrogative form

You may not need right now to invent original solutions, but you will have to be innovative in the Part 3 of this course, so take this opportunity to practice formulating a good research question now.

Here are some examples of bad research questions:

  • How can we reduce noise pollution?
    → This is much much too general.
  • How to reduce noise pollution in big cities?
    → Still too general, no context and no users / beneficiaries mentioned.
  • How does the Ambi-city open source mobile app use noise pollution data collected by citizens to educate to this major health issue?
    → This describes the project more than the issue and the context.
  • How can we reduce noise pollution in schools?
    → We're starting to get somewhere, but we're still not sure who the users of the project are and the issue is a bit vague.
  • People raising kids under 8 years old in big cities should have a priority access to the flats that are less exposed to noise pollution.
    → This is a statement, not a question.

Here are some better examples of what can be expected as research questions. As you can see, they are all addressing noise pollution but in quite different ways:

  • How can we motivate city residents to collect noise pollution data with their phones in order to contribute to academic research?
  • How can the municipalities use noise pollution data to orient their urban planning policy?
  • How can we provide reliable noise pollution maps to vulnerable people (e.g. people with chronic high sleep disturbance, cardiovascular problems, etc.) at key moments such as renting a flat or accepting a job offer?
  • How can noise pollution time data improve the daily life of people suffering from anxiety in urban areas?

Now it's your turn to try to formulate a relevant and precise research question regarding the project you're documenting!

Persona

A persona in user-centered design and marketing is a fictional character created to represent a user type that might use a site, brand, or product in a similar way.

W. Lidwell; K. Holden; J. Butler, Universal Principles of Design

Personas are useful in considering the goals, desires, and limitations of users in order to help to guide decisions about a product such as choices of features, interactions, visual design...

Ok so how are we supposed to define such a fictional character? First we must be sure that we're talking about the right type of persons: our concerns here are the actual users of the product, who are not necessarily the same people as the end-beneficiaries. Also, we'll focus on only one type of users.

Then we have to build a profile of the type of users we focus on, by defining a set of characteristics such as their name, motivations, family status, age, etc. What are their habits? Their hobbies or activities? Do they have a job, study? What are their goals, their limitations? Here is a small list of what should be mentioned in your persona's description:

  • First name
  • Age
  • Activity / Profession
  • Place of residence, country, environment (city, countryside, etc.)
  • Family status
  • Income
  • List of hobbies and passions
  • List of needs, desires, dreams
  • List of problems and frustrations
  • Major issue related to the subject
You can present all this info the way you want as long as you defined at least all the above characteristics. Fell free to add pictures if it makes your persona more tangible!

UX storyboard

When you'll design a product or service in a user-oriented approach, you'll have to take in account the user experience (UX) you want to offer. Before diving into subtle ergonomic details, we first need to describe the user journey's big picture. A very common and effective tool to do so is the UX storyboard. A storyboard is a sequence of drawings describing a scene. In our case, we'll use storyboards to illustrate how the user interacts with the product. Here are some tips to help you draw a relevant UX storyboard:

First step
Write down the user scenario on a draft, in 5 to 6 steps rather general, with words and not drawings. It is the base of your process, don't include it to your assignment. It must start with the initial situation and end with the resolved situation, and should contain:

  • The context of the interaction
  • The user's motivations
  • The actions performed with the product
  • The consequences of the interaction

If your scenario is too long, try to combine some steps or simplify your user flow.

Second step
Transform your scenario in a storyboard by illustrating each step with pens and paper: you'll then have 5 to 6 boxes, the first one illustrating the initial situation and the last one the resolved situation. These drawings will help you show the environment of the user, the key aspects of their interaction with the product, and the evolution of the situation. If you think that your drawings are not clear enough, you can add a short caption under each box to describe the situation. Here are some tips for drawing your storyboard:

  • Don't draw wireframes (i.e. the details of the interface), but only the element essential to understand the main interaction (like a single button)
  • You can use text in your drawings, for example when your characters talk or think, or to give info about the environment ("in the subway", "at the office" etc.)
  • In general, don't draw too much details. Use thick felt-tip pens to avoid multiplying details.
  • The artistic esthetic of your drawings is not important at all, but if you really don't feel comfortable with pens and paper you can go with digital illustration.

It's the result of that step, that is the illustrated storyboard, that you will have to include in your assignment (picture of your storyboard or screenshots / .png export of your digital illustrations)

Example storyboard
Example of an UX storyboard by Alexandra Mevissen.

Technical overview - AI version

In this part, you'll write down a detailed technical overview of the project in an "AI version", that is:

  • If no Artificial Intelligence technologies are involved in the existing project you're currently documenting, you'll have to imagine how AI could be integrated in the project for it to have a greater impact / efficiency. Then describe precisely how it would work.
  • If Artificial Intelligence technologies are involved in the existing project you're documenting, then the "AI version" is the same as the existing one.

To give a good and detailed technical overview of the project, you must at least answer the following questions:

  • Is it based on supervised or unsupervised learning?
  • What kind of data are manipulated: values, images, sounds, words?
  • What tasks does the algorithm have to perform? Classification, generation, pattern identification, clustering, regression, etc.
  • Is it using datasets and how? What do these datasets contain, are data labelled, and if yes how? Where do the datasets come from?
  • What are the types of algorithms used? In which language are they programmed, with which librairies?
  • Is their some potential biases we have to be careful of?

You should give as much (relevant) technical details as possible. Don't hesitate to include links of external resources. And remember to always cite your sources!


Evaluation criteria

It's time to start your exploratory research! The evaluation criteria are the following:

Participation: 4 points
Time spent on course + interaction with resources / examples

Exploratory research: 4 points
Quality of your exploratory research on the four projects

Selected project deepening: 5 points
Choice of the project and research question, definition of users, persona, key features and UX storyboard

Technical analysis: 4 points
Technical overview - AI version, added value thanks to AI

HTML & CSS quality: 3 points
Page's structure, use of skeleton, custom CSS, code clarity

Simulation: bonus points
Simulation of the project with ml5.js or other machine learning technologies

Submit your assignment

To validate, your project must:

  • follow strictly the structure given below
  • be correctly documented and include the links to all your sources
  • be formatted using HTML and CSS, you can start by remixing this template

Your project should:

  • follow strictly the structure given below
  • be correctly documented and include the links to all your sources
  • be formatted using HTML and CSS, you can start by remixing this template

When sharing your Glitch projects, copy the link for the result (not the editor view). Then, simply paste that link in the submission box down below. 👇

Before submitting, make sure you check all of the criteria below.

The due date has expired. You can no longer submit your work.


Congratulations! Understanding Artificial Intelligence and Machine Learning might be a key knowledge in you future career:

The AI job market has grown at an incredible rate in the last five years, thus creating a significant skill gap. An estimated 2.3M people are needed to fill the global AI talent pool, where an estimated 300K AI researchers and practitioners exist today.

Udacity for Enterprise, AI Skills Gap Report 2019

Woman clapping and saying ‘Impressive’.