Signed in as
The modern paradigm shift for the roles of teacher and students is focused on the transformation of the teacher from all-knowing to facilitation. In this lesson, help students understand what's expected of them and what they can expect from you.
This lesson really serves as a template for how to attack our first large-scale project for this course: prototyping an app. Students will have to work in small groups to design, develop, and iterate a high-fidelity mock-up of a web app. You can go through all this information in CYA fashion, but its intention is to act as a resource for their project. The project associated with this module will take a lot of time. Devote at least one week from this lesson to let them design, prototype, and iterate.
Prototyping an app is kind of like creating a theory and testing it in a lab. This is a short intro activity, but ask students this question: Why do scientists test their hypotheses? The goal is simply to get students to think about the importance of testing something before putting it out into the world. Bonus points for getting students to understand that a scientist receives feedback from the experiments they conduct, helping them to know what's good and what's off about their theory.
There's a lot of great resources for this process available in the wild. Notably, this lesson builds a lot on the book from GV mentioned in the lesson's content. They have a whole slew of short videos available on YouTube to help guide students through each step in the process. They even have most of their content for free on GV's library.
The best option is to start by presenting the project to students and helping them see the steps involved from these resources and the text. Additionally, we provide a video illustrating the basics of creating a prototype in Figma and how to share it with test users.
Take the formative assessment and work towards mastery.
Prototyping an application or website is critical to ensuring any glaring issues are worked out in advance. We can create a high-fidelity - meaning, with the same appearance as the eventual product could have - mock-up using Figma. Since we're already building out our different components, it's helpful that we can mimic the actual interface and get feedback from potential users.
Much of what this lesson is based off is from Google Venture's book Design Sprint. You can find more about their process and dive deeper into their details by visiting their site. Notably, there's a ton of great information about precisely what should be happening throughout the prototyping process.
Our goal - as will be evident in the project attached to this module - will be to create a mock-up, solicit feedback from real users, make improvements, and then pitch our 'final' versions to each other.
Our first step is taking our design system and library of components in Figma and starting to place them. We'll use the frame tool to generate a series of steps that mimic the flow from our storyboard. Essentially, we want to put a user in front of the prototype and see if they can get from point a to point b without us holding their hand the entire way. In the real world, a user won't have a dev sitting next to them showing them how everything works!
One important note from those of us that have been teaching for a long time: slide transitions are overused in presentation software like PowerPoint and Google Slides; the same is a dangerous possibility for changing views in your app! Take your time and keep it simple.
As you'll see in the video accompanying this lesson, we want to try and match our storyboard the best we can while realizing the limits of Figma's capabilities. Remember: it is a design tool, it's not meant for building out a fully functional app. As such, we'll have to get a bit creative here and there; if we walk a fine line between taking a few liberties in the interaction and staying true to the original design, we'll get better feedback from our test users.
This is the storyboard from an earlier lesson in this module. We'll use it in the video below, too. Pay special attention to how we try and match the frames in the storyboard with views and events in the prototype.
While the prototype is being finalized by members of the team, others will need to develop the process of inviting in test users to try out your app. We recommend using students from other classes. Your classmates know what you're doing and may be a bit too lenient with you; if you want real data, find others who are completely new to what you're building.
The feedback process is one meant to give you actionable ideas and help you see confusing or divergent areas of your app. When you're working on a product and are knee-deep in it every day, you can easily develop blind-spots. Bringing in fresh eyes is the best way to help you find these issues and make a plan to improve on your design.
This process starts with developing a set of questions.
The interview process is important. You'll pick one team member to interview five different test users. You'll want the interviewer to be someone in the group that is comfortable talking with others, friendly, and can hep to gain some context about the user's needs.
It can be awkward, but the other members of the group need to be present as observers. This means no shouting, "JUST CLICK THERE! UGH!" when a user is having trouble figuring our your UI. Your goal, along with the interviewer, is to see your app through the users' eyes.
The process should be no longer than about ten minutes. Observing members of the group should be focused on taking down notes and not discussing what they're seeing until the wrap-up at the end of class.
As you wrap up your last interview, you should be looking at a complete set of notes that helps you to understand what users thought throughout the day. Hopefully, patterns have started to emerge. With your team, you should be able to discuss the areas that need improvement; from there, it's a matter of developing a plan, iterating, and testing again.
In the real world, you'll have more time. In a class that has to meet a certain pace, you'll probably only be able to test with one or two more people again. However, you should be seeing if there's improvements in the areas that you set out to fix.
For this module, you'll be completing the project called The Prototype. It's a significant investment of time on the part of you and your team, but hopefully it will be a lot of fun. Within the repo you'll find all the resources you need to build out your prototype and document your progress along the way. In the end, you'll pitch these ideas to 'investors' in your school.
For a complete picture of how this whole prototyping process will work, check out this video.