In Part 2 of this lesson, students shift from data to design. They learn the difference between User-Interface (UI) and User Experience (UX) and use AI-powered prototyping tools - Uizard or UX Pilot - to create a mockup of their app or website. Students integrate their data visualizations from Part 1 into their mockup and prepare a screenshot or exported image for use in their project.

Students learn the distinction between UI and UX, then use an AI assisted design tool (UIzard or UXPilot) to create a mockup of their app or website. They embed their Datawrapper visualization from Part 1 into the mockup and export it for use in their final presentation.

What is UI and UX? This document explains. This can be assigned to students as Pre-reading the night before the lesson.

This handout is available to support your students with the tool during Activity #1: Build Your Mockup, which can be found in the Lesson Plan.

This handout is available to support your students with the tool during Activity #1: Build Your Mockup, found in the Lesson Plan.