Chapter 1 - Brainstorming with FigJam

Read Aloud with Speechify What is FigJam - Tutorial Video Open FigJam Complete Brainstorming Survey Complete Knowledge Check

1.1 Understanding the Design Process

Before any code is written or any app appears on a screen, there’s a process that developers follow to bring ideas to life. This process doesn’t begin in Android Studio or even in Figma—it begins in your mind. It starts with asking questions, exploring problems, and imagining how technology might help. This is the heart of creative development, and it’s something anyone can do with the right mindset.

In computer science, the design process is a method developers use to create meaningful, useful technology. While the steps can vary slightly from project to project, the core of the process remains the same: investigate, design, prototype, test, and improve. These steps are not only important for making apps; they apply to everything from building websites to programming robots to designing video games.

Let’s take a closer look at each part of this process and how it connects to tools like FigJam and Figma.

Investigating and Reflecting

Every app solves a problem. That problem might be big, like helping people find clean water in developing countries, or small, like helping students organize their homework. Either way, the first step is figuring out: What are we trying to solve?

To answer this, developers often start by researching what already exists. If you want to make a food delivery app, it helps to look at how Uber Eats, DoorDash, or Grubhub work. What do they do well? What could be better?

Developers also think about the audience. Who will use this app? Teenagers? Adults? Children? People with disabilities? Reflecting on users’ needs early in the process leads to better solutions later.

During this phase, you might use FigJam to write down ideas, ask questions, and create mind maps. You might also develop user personas—imaginary characters who represent real users. This helps you think about how different people might interact with your app.

Designing the Experience

Once you understand the problem and the people who need a solution, the next step is designing how the app should work. This is not the same as programming—yet. Instead, you’re planning how users will move through the app, what screens they will see, and what actions they can take.

You might start by drawing rough sketches on paper or in FigJam. These could include:

A home screen that shows key information
A menu that lets users choose between sections
Buttons that trigger actions like saving, submitting, or searching

This is also when you decide on the flow of your app. For example, if a user clicks “Sign Up,” where should they go next? If they forget their password, what happens? Drawing user flow diagrams helps you map out the logic behind the scenes.

At this stage, your ideas should be more organized but still flexible. You’re not locked into anything—you’re just getting a clearer picture of how your app will work.

Prototyping with Figma

After planning the layout and flow of your app, it’s time to turn those ideas into something visual and interactive. That’s where Figma comes in.

Figma lets you build wireframes—simple versions of your app screens that show where each element will go. You’ll use shapes like rectangles for buttons, lines for dividers, and placeholder text for labels and menus.

Even though these wireframes are simple, they are powerful. They help you visualize your design and get feedback before any coding begins. You can also use Figma’s prototyping tools to link screens together, simulating what will happen when a user clicks a button or swipes left.

This gives your team a chance to walk through the app experience and identify any problems before the development begins. It’s like building a cardboard version of a house before pouring concrete.

Testing and Iteration

Once your prototype is ready, it’s time to test. This doesn’t mean you need a full app or a team of engineers. All you need is feedback.

You might ask classmates to try out your Figma prototype. Ask them what’s confusing. Did they get stuck anywhere? Did they expect something to work differently? Write down their responses. Every time you test and revise your design, that’s called an iteration.

Iteration means you’re not just making something once and hoping it works. You’re improving it step by step. In fact, the best apps in the world—like Instagram, YouTube, and TikTok—are constantly updated because the people behind them are always iterating.

Why the Design Process Matters

You might be thinking: “Can’t I just start coding?” While it’s tempting to jump straight into development, skipping the design process often leads to confusing, buggy apps. Without planning, users get frustrated. They don’t know where to click, and they give up.

But when you take the time to understand the problem, design a smart solution, and test it with real users, your app becomes something people enjoy using.

In this chapter, you’ll practice this process yourself. You’ll investigate a problem, design a solution, and build a prototype. You’ll give feedback to your classmates and improve your work with their help. And you’ll learn that design is not just the first step of programming—it’s the foundation.

By mastering this process early, you’ll be better prepared for more advanced coding challenges and your AP Create Performance Task later in the year. Most importantly, you’ll be developing one of the most valuable skills in computer science: the ability to think creatively, plan strategically, and build something real.

1.2 Brainstorming and Planning in FigJam

Once you’ve chosen a problem to solve, the next step in the design process is to figure out how you’re going to solve it. This doesn’t mean you start building your app yet—it means you take time to think, explore ideas, and organize your thoughts. Brainstorming is where creativity meets structure. It’s where random ideas become real possibilities. And one of the best tools for this part of the process is FigJam.

FigJam is an online whiteboard made by the same company that created Figma. It’s designed for brainstorming, planning, and collaboration. Imagine the giant whiteboard you might see in a classroom or office—but instead of using dry-erase markers, you use digital sticky notes, arrows, emojis, and text boxes. Multiple people can work on the same board at the same time, even if they’re in different places. This makes it perfect for group projects.

In this section, you’ll learn how to use FigJam to develop your app idea before you ever write a single line of code or draw a wireframe. You’ll use FigJam to ask the right questions, map out your thoughts, and begin shaping your app’s features and flow.

Start with a Problem

Let’s say your team decides to build an app that helps students keep track of homework assignments. That’s a great starting point, but it’s still pretty broad. What kinds of students are you targeting? What makes your app different from a simple calendar or a paper planner?

To narrow things down, you’ll use FigJam to brainstorm answers to some essential questions:

What is the specific problem we’re solving?
Who is the app for?
What would make our app fun, useful, or easier to use than other tools?

Each team member can create sticky notes in FigJam to answer these questions. The goal isn’t to come up with one perfect idea right away. Instead, you want to generate lots of ideas—some realistic, some wild. You can always narrow them down later.

For example:

“Track homework assignments by class and due date”
“Remind students about upcoming tests with push notifications”
“Use a fun avatar system where students earn rewards for completing tasks”
“Let students share their schedule with parents or teachers”

After you’ve added a bunch of sticky notes, group similar ideas together and vote on your favorites using the FigJam voting stickers. This helps you focus on what really matters.

Create User Personas

Once you have a clearer idea of what your app will do, it’s time to think about who will use it. Understanding your users is one of the most important parts of app design. After all, you’re not building the app for yourself—you’re building it for someone else.

A great way to visualize your users is by creating user personas. A user persona is a fictional character who represents the kind of person your app is designed for. You give them a name, an age, and a short background. This helps you think about their needs, challenges, and goals.

Here are two examples:

Jasmine, age 14, is a freshman in high school. She’s involved in cheerleading and robotics club, and she has a hard time remembering when everything is due.
Miguel, age 17, is preparing for college and works part-time after school. He needs an app that helps him prioritize which assignments matter most.

You can build these personas directly in FigJam using sticky notes, shapes, or even drawing simple cartoon avatars. You can also add emojis and photos to help bring your characters to life.

By thinking like Jasmine or Miguel, you can make smarter design choices. For example, you might decide your app needs color coding to help Jasmine spot cheerleading tasks quickly. Or maybe you add a time estimate feature so Miguel can plan around his work schedule.

Map Out the User Experience

Now that you know your problem and your users, it’s time to figure out how they’ll use your app. This is where you start building a user flow—a step-by-step path showing how someone moves through your app.

Ask yourself:

What’s the first thing users see when they open the app?
What happens when they click “Add Assignment”?
Where do they go if they want to change their settings?

Use shapes and arrows in FigJam to draw this out. You can use circles for screens, rectangles for actions, and diamonds for decisions (like “Yes” or “No”). This is called a flowchart, and it helps you see if your app is logical and easy to use.

A basic user flow for your homework tracker might look like this:

Open app → 2. See list of assignments → 3. Tap “+” to add assignment → 4. Fill in details → 5. Press save → 6. Return to list

If the flow seems confusing or has too many steps, you can go back and adjust it before you begin designing screens. This saves you a lot of time and frustration later.

Organize Your App’s Features

By this point, you’ve come up with a problem, identified your users, and mapped out the experience. You’re almost ready to start designing—but first, you need to clearly list out the features your app will have.

In FigJam, create a new section for core features and extra features:

Core features are must-haves—things your app needs to function properly.
Extra features are nice-to-haves—things you can add if you have time.

For your homework app, core features might include:

Add/edit/delete assignments
Due date notifications
Class organization

Extra features might include:

A progress tracker
Sync with Google Classroom
Dark mode

Having this list helps you stay focused and avoid adding too much at once. It also gives your group a way to divide up the work later.

Brainstorming in a Real App Environment

FigJam is more than just a place to jot down ideas. It’s a collaborative workspace where you can think like a designer. You can invite classmates, leave feedback with emojis or comments, and organize your board into sections like “Ideas,” “User Flow,” and “Personas.”

As your ideas evolve, you can return to FigJam to make changes. Just like in the real world, designs are always changing based on what you learn, what users say, and what’s technically possible.

Why This Matters

Brainstorming might seem like a fun activity, but it’s also one of the most powerful skills in computer science. The best developers don’t just sit down and write code—they start with empathy, creativity, and careful planning.

By using FigJam, you’re learning how real teams work together to build great products. You’re practicing how to think through problems before trying to solve them. And you’re building the foundation for your Create Performance Task later in the year, where planning, design, and collaboration will be key.

1.3 Sketching Your Ideas in Figma

After brainstorming your app idea and mapping out how users will move through it, you’re ready for one of the most exciting parts of the design process—sketching your app screens. This is where your ideas begin to take shape in a visual form. Instead of imagining what your app might look like, you’ll create a blueprint for how it should look and function. To do this, we use a powerful design tool called Figma.

What is Figma?

Figma is a free, browser-based design tool used by professionals to design everything from mobile apps and websites to logos and user interfaces. What makes Figma so great—especially for students and teams—is that it’s collaborative, meaning multiple people can work on the same file at the same time. It also autosaves your work in the cloud, so you never lose your progress.

In this chapter, we’ll focus on using Figma to create wireframes, which are simple, black-and-white layouts of each screen in your app. These wireframes don’t have colors, animations, or fancy graphics yet—that comes later. Right now, we’re focused on structure and functionality.

From Paper Sketches to Digital Designs

Think of wireframes like floor plans for a house. They don’t show furniture or paint colors, but they show you where the doors, rooms, and windows go. Similarly, a wireframe shows you where buttons, text fields, menus, and images will be placed on the screen.

You may have already drawn basic ideas for your screens on paper or in FigJam. Now you’re going to recreate them digitally in Figma so you can move things around easily, get feedback from others, and start planning for how your app will actually function.

To get started in Figma:

Open figma.com and create a free account if you haven’t already.
Click “New Design File.”
From the top toolbar, choose the Frame Tool and select a phone frame (such as iPhone 13 or Pixel 5).
Now you can begin adding elements to your screen using shapes and text.

Building Blocks of an App Interface

Let’s walk through the most common parts of a mobile app screen and how to design them in Figma:

Navigation Bar – Usually located at the top or bottom of the screen. This bar helps users move between different parts of the app. Use a rectangle and label it with icons or words like “Home,” “Tasks,” or “Settings.”
Buttons – These are what users tap to take actions. Use rounded rectangles with labels like “Log In,” “Save,” or “Add Assignment.” You can use Figma’s Components feature to create a consistent button style you can reuse.
Text Fields – Places where users type information, like a username or assignment name. Use rectangles with a light border, and place a label above them.
Headers – Big text at the top of the screen that tells users what page they’re on. Use the Text Tool to create large bold text like “Your Assignments” or “Welcome Back!”
Icons and Placeholders – You can add simple shapes (like circles for profile pictures or squares for images) as placeholders. Later, you can replace these with actual images or icons.

You don’t need to make the design perfect at this stage. The goal is to build a wireframe that clearly shows where each piece of the app will go and what it’s supposed to do.

Designing Multiple Screens

A good app has multiple screens that work together. In your Figma file, create separate frames (like pages) for each screen. Common screens to include are:

A Welcome Screen
A Sign-Up/Login Screen
A Main Home Screen
A Feature Screen (e.g., assignment list or task details)
A Settings or Profile Screen

Use arrows or Prototype Links in Figma to connect buttons to the screens they should lead to. This helps simulate how a user will move through your app when they tap different parts of the interface.

For example, you can create a “Log In” button that links to the home screen. When someone clicks that button during a prototype demo, Figma will show the next screen—just like a real app.

Keep It Simple First

It’s tempting to jump ahead and start adding colors, cool fonts, and animations—but that can wait. In this early stage, keep your wireframes simple. This helps you focus on layout and usability instead of decoration.

Ask yourself:

Is the screen too crowded?
Can users clearly see what actions they can take?
Is the navigation easy to understand?

Great design is clear, not complicated. Simple wireframes are easier to revise and improve as you get feedback.

Team Collaboration in Figma

One of the best things about Figma is that it allows multiple people to design together. Your group can work on different screens in the same file or leave comments on each other’s work.

Here are a few tips for collaborating in Figma:

Use naming conventions for frames and components so it’s easy to find things (e.g., “Login_Screen,” “Home_Tasks,” etc.).
Leave comments by clicking the Comment Tool and tagging your teammate with “@” if you want them to see it.
Assign one person to be the “File Organizer” who keeps things neat and arranged on the canvas.

Just like in real-world design teams, clear communication and respectful feedback make collaboration more productive and fun.

Sketching Now, Coding Later

Creating wireframes in Figma might feel like a lot of work before you even start coding—but it’s one of the most important steps in app development. It saves time, reduces confusion, and gives you a roadmap to follow when you start building the actual app in Android Studio.

By the end of this section, you should have at least 2–3 wireframes representing key screens in your app. These designs will act as your visual guide for building the app later in the course. You’ll also use them in your Create Performance Task, where you’ll describe how you planned and designed your project.

Remember, the best designs come from iteration. Don’t be afraid to update your wireframes as you learn more, get feedback, or discover better ways to organize your app. That’s what real developers do every day.

1.4 Teamwork and Feedback

If you’ve ever worked on a group project in school, you know that teamwork can be both rewarding and challenging. In computer science—especially in the world of app development—teamwork is everything. Very few successful apps are built by one person. In fact, the apps you use every day—like Instagram, Spotify, or Google Maps—are the result of many people working together: designers, developers, testers, marketers, and more.

That’s why learning how to collaborate, communicate, and give and receive feedback is just as important as knowing how to write code or design a wireframe. This part of the chapter is all about building those soft skills, and using digital tools like Figma and FigJam to help you work better as a team.

Design is a Team Sport

In app design, every member of the team brings something valuable. Some people are great at coming up with ideas. Others are detail-oriented and catch tiny mistakes. Some can sketch out screen layouts quickly, while others might be better at organizing the user experience. A great team doesn’t have to agree on everything—but they do need to know how to work toward a shared goal.

Let’s say you’re working on a study planner app. One teammate suggests adding a timer feature like Pomodoro. Another suggests daily reminders. Someone else points out that color-coded subjects might help users stay organized. All of these ideas are useful—but now your team has to decide: What’s most important? What can we build with the time and skills we have?

You’ll use FigJam to map out ideas, discuss possibilities, and vote on the best features. Then, once your wireframes are created in Figma, you’ll switch into review mode and begin giving each other feedback.

Constructive Feedback: How to Make It Helpful

Feedback can sometimes feel awkward. You might not want to hurt someone’s feelings, or you might feel nervous about sharing your thoughts. But when done respectfully and thoughtfully, feedback helps everyone improve.

Here’s how to give constructive feedback:

Start with something positive. (“I really like the layout—it feels clean and easy to use.”)
Be specific. (“The text on the login button is hard to read. Maybe try a darker font?”)
Offer a suggestion, not a demand. (“Have you thought about adding a label to the menu icon?”)

Avoid comments like:

“This doesn’t make sense.” (Instead, ask a clarifying question.)
“I don’t like it.” (Instead, say what’s confusing or hard to use.)

Good feedback is kind, clear, and focused on improving the work—not criticizing the person.

Receiving Feedback: Stay Open, Not Defensive

Getting feedback can be just as hard as giving it. It’s normal to feel attached to your design—you spent time on it, and you want others to like it. But feedback is not a sign that you did something wrong. It’s a tool to help you grow and make your app better.

When someone offers feedback:

Listen without interrupting.
Ask clarifying questions if something is unclear.
Thank them, even if you don’t agree.
Decide what to change, and what to keep.

You don’t have to make every suggested change. It’s your design. But if you notice that multiple people are confused by the same part of your wireframe, that’s a strong signal that something could be improved.

Using Comments and Review Tools in Figma

Figma makes collaboration and feedback easy with built-in tools. Once you’ve finished a wireframe, switch from “Design” mode to “Comment” mode. Your classmates can click anywhere on the screen to leave comments like:

“What does this icon do?”
“This screen looks really clean—great job!”
“Can you make the save button stand out more?”

You can reply to comments, resolve them once they’re addressed, and even tag teammates using @mentions to direct feedback to the right person.

Encourage your team to review each other’s work using Figma’s presentation mode, where you can click through each screen as if it were a real app. This gives everyone a better sense of how the app flows and where improvements are needed.

Versioning and Iteration: Your Design Will Change

One of the biggest lessons in teamwork is learning that the first draft is never the final draft. Your team will revise your app’s screens, tweak the layout, and maybe even remove or add features based on feedback and testing.

This cycle of designing, getting feedback, and revising is called iteration. It’s not a sign of failure—it’s how the best products are made.

In Figma, you can duplicate a frame before making big changes, or use Version History to go back if needed. This lets your team track progress and learn from past ideas.

Working Through Disagreements

Disagreements are natural in teams—especially when everyone is passionate about their ideas. But they don’t have to turn into arguments. Here’s how to handle creative differences:

Vote using FigJam’s voting tool to let everyone have a voice.
Test both options and see what works better during peer feedback.
Talk to your teacher or mentor if your group gets stuck.

Sometimes, combining ideas leads to an even better solution than anyone expected.

Reflection Is Part of the Process

At the end of your design sprint or team session, take time to reflect:

What worked well in your team?
What communication challenges came up?
How did feedback improve the final design?

You can even return to FigJam to do a “Rose, Thorn, Bud” activity:

🌹 Rose – Something that went well
🥀 Thorn – Something that was difficult
🌱 Bud – Something you’re excited to work on next

This kind of reflection strengthens your teamwork skills and prepares you for future projects—including your Create Performance Task, where collaboration and planning are part of the required process.

Design is Never Done—But It Does Get Better

By the time you finish this part of the project, your app wireframes will look very different from how they started. And that’s a good thing. You’ll have taken feedback, worked through ideas as a team, and refined your vision step by step.

Just like in the tech industry, your first version was just a starting point. Your final version is something built through collaboration, reflection, and continuous improvement.

Now you’re ready to turn those wireframes into something interactive—and that’s exactly what we’ll start working on in the next chapter.

1.5 From Sketch to Solution

You’ve done the brainstorming. You’ve asked the big questions. You’ve drawn out your ideas, mapped how users will interact with your app, and designed the screens that bring those ideas to life. But what comes next? How do all these sticky notes, flowcharts, and wireframes turn into a real, working app?

This section is all about connecting your planning and design work to the actual creation of your product. In other words, this is where your sketch becomes a solution.

You’ve already taken a major step that many people skip—planning before building. This planning is more than just good practice; it’s a professional habit. Whether you’re designing a game, building a shopping app, or writing software for a self-driving car, great developers plan before they code. Your wireframes, flowcharts, and feedback sessions are the blueprint for everything that follows.

Bridging the Gap Between Design and Development

When you start working in Android Studio (the tool you’ll use to build your app later in this course), you won’t just be coding randomly. You’ll already know what your screens should look like, how users should move from one screen to the next, and what each button, field, and action is supposed to do.

That’s what your Figma wireframes are for. They help you and your team stay focused. They tell you:

Which screens need to be built
What components (like buttons and text boxes) go on each screen
How those components should behave when users interact with them

When you start building the real app, you’ll be able to check back with your design and ask, “Are we following the plan?” If something isn’t working, you’ll know where to look.

Even professional developers use tools like Figma to guide their development process. In fact, many companies hand off these wireframes to software engineers and product managers to make sure everyone’s on the same page. This shows how important your planning work really is.

Your App Is a System—Not Just a Screen

As you’ve learned, each screen in your app is part of a larger system. A user may start at the login page, move to a home screen, tap a button to view tasks, then return to the home screen to see updates. All of these actions are connected, and the design decisions you’ve made shape how that system feels to the user.

For example:

A confusing button label can make a user feel lost.
A missing “back” button might trap them in the wrong screen.
A poorly placed navigation bar can make even the best features hard to find.

Design isn’t just about what looks good—it’s about what makes sense, and what helps users feel confident, successful, and even happy while using your app. And that’s your job as a designer and future developer: to make something that works well and helps people solve problems.

Prototypes: Practicing Before You Launch

Before you begin programming your app, you might want to take your wireframes one step further and build a prototype. A prototype is a clickable version of your app that looks and feels like the real thing, but doesn’t actually include any code or data.

In Figma, you can link screens together so users can click from one screen to another, just like they would in a real app. This lets you:

Demonstrate how the app will work
Test the user experience before building
Catch errors or confusing parts early
Show off your design to teachers or classmates for feedback

Building a prototype is like practicing for a performance—you’re seeing what works before it really counts. If you can find and fix issues in your prototype, you’ll save a lot of time and effort later when you’re coding.

Iterate, Improve, and Build Confidence

By now, you might have gone through several versions of your design. Maybe you changed the layout of your home screen, adjusted your navigation, or added a new feature after peer feedback. That’s a sign that you’re thinking like a real developer.

In the tech world, teams often say, “You’re never really done. You’re just launching version one.” There will always be ways to improve, and that’s a good thing. The most successful apps—like TikTok, Spotify, or Duolingo—started with a simple idea and grew through constant feedback, testing, and updates.

This is where the concept of iteration really matters. Each version of your design is a chance to learn. Each piece of feedback is an opportunity to improve. And every change you make gets you closer to a final product that works better for your users.

A Foundation for Your Future Projects

The work you’ve done in this chapter sets the tone for everything that comes next. Whether you’re building a simple tool to keep track of assignments or working on a capstone project for your AP Create Task, you now have a clear process to follow:

Start with a problem
Understand your users
Map out the experience
Sketch clear, purposeful screens
Test your ideas
Work as a team to improve them

You don’t need to wait until you’re an expert coder to start solving real problems. By combining creativity, empathy, design, and teamwork, you’re already doing the work that real developers do.

Looking Ahead

In the next chapter, you’ll begin working with data—how it’s collected, how it’s stored, and how it shapes the behavior of your app. You’ll start thinking about how users interact with information and how your app can use that information to deliver value.

But before you move on, take a moment to appreciate what you’ve already accomplished. You’ve taken an idea and turned it into a visual solution. You’ve made decisions like a designer, collaborated like a team, and planned like a programmer. That’s no small feat—and it’s the foundation of every great app you’ll ever build.

Discussion Prompt

“Think about an app you use regularly—maybe it’s Snapchat, YouTube, or a school app. Choose one screen and describe how the layout helps (or hurts) your ability to use the app. Then, share one change you would make to improve the user experience, and explain why.”

You can respond with a paragraph or walk through your answer during class discussion. Consider things like button placement, font size, screen flow, and overall usability.

Key Vocabulary

Term	Definition
Creative Development	The process of designing, prototyping, and testing computing solutions through collaboration, iteration, and planning.
Design Process	A structured or flexible approach to solving problems, including steps like brainstorming, sketching, testing, and improving.
FigJam	A collaborative online whiteboard used for brainstorming, mapping user flows, creating personas, and planning app features.
Figma	A browser-based design tool used to create wireframes, high-fidelity prototypes, and interactive app layouts.
Wireframe	A simple, visual guide that shows the structure and layout of an app screen without colors or final graphics.
User Persona	A fictional character that represents the needs and behaviors of a typical app user to guide design decisions.
User Flow	A diagram or plan that shows how users will move through an app, screen by screen, to complete tasks.
Prototype	A clickable version of an app created in Figma that simulates how users will interact with the design before coding begins.
Iteration	The process of repeatedly improving a design based on feedback and testing.
Feedback	Suggestions or comments given by peers or users to help improve the design and functionality of an app.
Navigation Bar	A set of icons or buttons that help users move between different parts of the app.
Component	A reusable element in Figma (like a button or header) that helps maintain consistency across screens.
Collaboration	Working with others to plan, design, and improve a project by sharing ideas, dividing tasks, and giving feedback.