Chapter 2 - Working with Data and App Interfaces

Read Aloud with Speechify Complete Knowledge Check Complete Initial Wireframe Survey Open Figma

2.1 What is Data?

When we think of apps, we usually imagine things we can see—buttons to tap, screens to scroll, images and menus that guide us. But behind every tap and swipe, something else is at work: data.

In computer science, data is any piece of information that can be stored, retrieved, processed, and used. That might sound technical, but chances are, you’re interacting with data every day without even realizing it. When you open TikTok and the app shows you videos based on what you’ve watched before—that’s data. When you log into a homework app and it shows your upcoming assignments—that’s data too.

Apps would be nearly useless without data. Data helps apps remember things, respond to users, and make decisions. It’s the reason an app can greet you by name, track your steps, recommend a playlist, or tell you whether it’s going to rain tomorrow.

Let’s break down what data really is, and why it matters so much in design.

Types of Data in Apps

There are many types of data, but most fall into a few main categories:

Text – Names, addresses, messages, comments
Numbers – Age, temperature, scores, prices
Yes/No (Boolean) – Subscribed or not? Logged in or not?
Dates and Times – Calendar events, reminders, timestamps
Media – Photos, audio files, videos
Sensor Data – GPS location, motion, sound, heart rate

Some apps use just one type of data. A calculator app, for example, mostly works with numbers. Others combine many types—like a social media app that handles usernames (text), likes (numbers), uploads (media), and notifications (time and date).

When designing an app, one of your first tasks is to think about what kind of data the app needs to work, and how users will interact with that data.

Where Does Data Come From?

Data doesn’t just appear—it has to be collected somehow. In mobile apps, the most common ways to collect data include:

User Input – The user types something (like a note or a password), selects an option, or takes an action.
Sensors – The device itself gathers data, like a step counter or a light sensor.
APIs – The app connects to outside services to pull in data, like weather forecasts or news updates.
Stored History – The app remembers what the user did previously, like saved progress in a game or browsing history.

For example, a journaling app collects entries that the user writes (text input) and saves the time and date (automatically recorded). A fitness app might track steps using the phone’s built-in accelerometer. A ride-sharing app like Uber collects data from GPS, maps, and driver databases to match users with cars.

Your job as a designer is to decide what data the app needs to do its job—and only collect what’s necessary. If a weather app asked for your photo gallery, you’d probably think that was suspicious. That’s why being thoughtful about data collection is part of ethical design.

What Happens After Data is Collected?

Once the app has collected data, it usually needs to do something with it. That might include:

Storing it (so the app remembers it later)
Processing it (doing calculations or organizing it)
Displaying it (showing it to the user in a readable way)
Sharing it (sending it to other users or syncing with other devices)

For example:

A budgeting app stores your spending data, processes it into categories, and displays it as a pie chart.
A music app stores your listening history and uses it to recommend new songs.
A scheduling app stores upcoming events and reminds you based on the current time.

In later sections, you’ll learn how to plan for this flow of data—how to collect, store, process, and present it in a way that’s useful and respectful of the user’s time and privacy.

Why Designers Need to Understand Data

You might be wondering: “Isn’t data something for programmers to worry about?” Not quite. Even before any code is written, the design of your app must reflect how data will be used. For example:

You need to make sure the app asks the user for the right information.
You need to provide the user with a way to change or delete their data.
You need to plan for how the data will be displayed—whether in a list, a card, a graph, or another format.

Let’s say you’re building a task manager app. If your design doesn’t include a place to input due dates, you won’t be able to sort tasks by deadline. If you forget to include a delete button, users will have to live with old, outdated information cluttering their screens.

Even though you’re not programming yet, thinking about data now means your app design will be smarter and easier to build later.

Big Idea, Real Impact

In the AP Computer Science Principles course, Big Idea 2 is all about data: how it’s stored, managed, and transformed to create meaning. You’ll return to this idea again and again as you develop your app and explore topics like compression, data abstraction, and privacy.

More importantly, you’ll start to see that every app—every technology—relies on the invisible power of data to work behind the scenes.

As a future developer, designer, or even informed user, your ability to understand, work with, and design for data will be one of your most important skills.

2.2 Designing Data Inputs in Figma

Now that you understand what data is and why it matters, it’s time to figure out how users will give your app that data. Think about your favorite apps. How do they get information from you? Maybe you tap a heart icon to like a post, or type your name into a signup form, or select your mood from a list of emojis.

Every one of these actions is an example of data input—where the user shares information with the app. That information gets stored, processed, and often displayed again later. As a designer, you are responsible for making these input experiences as easy, clear, and helpful as possible. That’s where Figma comes in.

Figma isn’t just for drawing screens—it’s for thinking through how users will interact with your app. And one of the most important things users will do is input data. In this section, you’ll learn how to design smart, simple data input forms and fields that make your app feel smooth and intuitive.

Start With a Question: What Data Do You Need?

Before you start drawing screens, ask yourself:

What data does the app truly need to do its job?

Let’s look at a few examples:

A habit tracker might ask for: habit name, category, and a daily check-in.
A meal planner might ask for: dish name, ingredients, and the meal’s date.
A mental health journal might ask for: how the user is feeling, a short note, and a mood rating.

Each app collects a different type of data, based on its purpose. As a designer, you need to figure out:

What inputs are essential?
What inputs can be optional?
How can you make those inputs as quick and easy as possible?

If an app asks for too much, users will feel overwhelmed. If it asks for too little, it might not be helpful. Finding the right balance is part of thoughtful, human-centered design.

Common Types of Input Fields

In Figma, you can create the visual layout for different types of input fields. Each one serves a different purpose:

Text Fields – Let users type in free-form responses, such as names, emails, or journal entries. These should be wide enough to read clearly and always have a label (e.g., “Enter your name”).
Dropdown Menus – Useful when users need to choose one item from a list, like selecting a country or choosing a grade level. Dropdowns keep the interface clean and reduce typing errors.
Checkboxes – Let users select multiple options, like “I agree to the terms” or “I want email notifications.” Checkboxes work well for yes/no or multi-select questions.
Toggles/Switches – Provide a simple way to turn something on or off, such as dark mode or push notifications. They give immediate visual feedback to the user.
Radio Buttons – Similar to checkboxes, but only allow one choice from a list (e.g., choosing a payment method).
Sliders and Rating Bars – Good for capturing a range, like mood or satisfaction, without typing. These feel interactive and take up less space than a text field.
Date and Time Pickers – Ideal for scheduling apps. These let users pick dates from a calendar or set alarms with minimal effort.

You can create all of these in Figma using basic shapes, icons, and text boxes. Later, when your app is coded, these designs will be turned into real interactive elements.

Input Design Tips for Real Users

Here are some best practices to keep in mind while designing input fields:

Always label your fields clearly. Users should never wonder what kind of information to type in. For example, don’t just say “Enter value”—say “Enter daily water intake (oz)”.
Group related fields together. For example, if you’re collecting contact info, place name, email, and phone number in the same section.
Use placeholder text wisely. Placeholders should show an example, not act as the label. For example, a placeholder for an email field might be “you@example.com.”
Minimize typing. Use dropdowns, toggles, and sliders when possible to make input faster.
Make buttons easy to find. Whether it’s “Submit,” “Save,” or “Next,” your call-to-action button should stand out and be easy to tap.
Add visual cues for errors or required fields. Mark required fields with asterisks (*) and use warning colors to signal problems like invalid email formats.

Building an Input Form in Figma

Let’s walk through an example.

Suppose you’re designing a daily check-in screen for a mood tracking app. The screen might include:

A question: “How are you feeling today?”
A slider with icons ranging from sad to happy
A text field: “Want to write a quick note?”
A “Save” button

In Figma, you’d use:

Emojis or icons for the mood scale
A rectangle and text for the input box
A bold, colored rectangle for the button

This simple design lets users quickly log their mood, and the app now has data to store and analyze later. As a bonus, it’s friendly, personal, and takes under 10 seconds to complete.

Accessibility and Inclusivity

Not all users interact with your app the same way. Some users may have vision or motor difficulties, and input fields need to accommodate everyone. Consider these design tips:

Make buttons and fields large enough to tap easily.
Use high-contrast labels for readability.
Don’t rely on color alone to indicate error messages—use icons or text as well.

Designing with accessibility in mind helps your app reach more people and makes the experience better for everyone.

Why This Matters

You might think of input screens as “just forms,” but they’re actually the foundation of all data in your app. If users can’t easily give you information, your app can’t function properly. Whether you’re building a study planner, a game, or a budgeting tool, everything starts with how users interact with the app through inputs.

In this section, you’ve learned not only what types of input fields exist, but how to design them to be useful, intuitive, and even enjoyable. As you work on your app idea, your input designs will become the bridge between your users and the technology you’re building.

2.3 Mapping Data Flow in FigJam

By now, you’ve learned how to design the screens where users enter data and interact with your app. You’ve even created sample input forms in Figma and thought about how users will see and interact with that data. But here’s the next big question:

What actually happens to the data once the user enters it?

That’s where data flow mapping comes in. In this section, you’ll learn how to visualize what happens behind the scenes of your app using FigJam. You’ll plan out the journey data takes from input to storage, processing, and eventually back to the user. This step is critical because it helps make sure your app’s design isn’t just pretty—it actually works.

What is Data Flow?

Data flow refers to the path that information takes as it moves through your app. Think of it like a delivery route: the user gives your app information, your app stores or processes that information, and then sends something back—like an updated screen, a message, or a new result.

In a simple app like a calculator:

The user inputs two numbers.
The app calculates the result.
The result is displayed on screen.

Even this simple example has a data flow: Input → Processing → Output.

For more complex apps—like a task manager, social media platform, or fitness tracker—the data flow can involve multiple steps, different types of data, and even external services like cloud storage or APIs.

Why Should Designers Map Data Flow?

At first, it might seem like something only programmers need to worry about. But actually, understanding how data moves through your app will help you:

Design smarter, more useful screens
Anticipate where things might go wrong
Communicate better with developers
Avoid collecting unnecessary or confusing data
Create apps that feel seamless and responsive

When you map your data flow in FigJam, you’re thinking like a systems designer—someone who plans how everything works together.

Using FigJam to Map Data Flow

FigJam is a perfect tool for data flow diagrams. It’s like a digital whiteboard where you can:

Create shapes to represent different steps in the process
Use arrows to connect those steps
Add sticky notes or labels to explain what each step does

Here are the basic building blocks of a data flow diagram in FigJam:

Element	Use
Oval / Circle	Start or end of the process (e.g., “User opens app”)
Rectangle	An action or process (e.g., “Save assignment”)
Diamond	A decision point (e.g., “Is the input valid?”)
Arrow	Shows the direction data moves
Sticky Notes	Add extra details, questions, or notes to yourself or your team

Example: Homework Tracker App

Let’s say your app lets students log homework assignments. Here’s what a basic data flow might look like:

User taps “Add Assignment” button
→ 2. User fills in assignment title, due date, and class
→ 3. App checks if the input is valid (no blank fields)
→ 4. If valid, save assignment to local storage
→ 5. Update the list of assignments on the home screen
→ 6. App displays updated assignment list to user

This flow can be mapped out in FigJam using shapes and arrows. Each step should be labeled so anyone looking at your board can understand what happens to the data at each point.

You might even include optional paths, like:

“If input is invalid → Show error message”
“If due date is today → Send reminder notification”

This helps you think through different scenarios and build a better experience for users.

Questions to Ask as You Map

While creating your data flow, try asking:

Where does the data go after the user enters it?
Is it being saved permanently or temporarily?
Does it need to be processed (e.g., sorted, filtered, calculated)?
Where and how is it displayed again?
Are there any decisions or conditions that change the path?

The answers to these questions will help you build smarter, more complete diagrams.

Levels of Data Flow

Depending on your app, your data flow diagram might include different levels of detail.

High-Level Flow – A simple overview of how data moves from input to output.
Detailed Flow – A breakdown of each interaction, including error handling, optional steps, and internal processes like sorting or filtering.

Start with a high-level diagram, then add detail as needed. Remember: It’s better to start simple and improve it than to overcomplicate it right away.

Team Collaboration

This is a great opportunity to work with your team. In FigJam, everyone can contribute to the data flow map:

One person creates the shapes and arrows.
Another adds sticky notes to explain each step.
Another checks the map for missing pieces or confusing paths.

You can also use comments to leave questions like:

“Should we store this in the cloud or on the device?”
“What happens if the app is closed before saving?”
“Do we need a confirmation screen after submitting?”

This keeps your thinking organized and prepares you for development later in Android Studio.

Designing With Purpose

When you map out your data flow before writing a single line of code, you’re designing with intention. You’re planning how your app will work in a way that’s clear, functional, and efficient. This will make your job easier later—when you start programming—and it will make your app easier to use.

Apps aren’t just collections of screens. They’re systems of input, storage, logic, and output—and your ability to visualize and map that system is a sign of real design maturity.

2.4 Displaying Data Clearly

After your app collects and processes data, there’s one more essential step: showing that data back to the user in a way that is clear, useful, and meaningful. If users can’t understand the information your app gives them, then all the planning, data entry, and programming won’t matter.

As a designer, your job is to take that data and present it visually in a way that helps the user make decisions, track progress, or feel in control. In this section, we’ll explore how to design data display screens in Figma, and how to choose the best layouts, visuals, and elements for the type of data your app uses.

Why Visuals Matter

Imagine an app that tracks your homework assignments. If it simply shows a huge block of unorganized text, would that be helpful? Probably not. Now imagine that same data shown as:

A clean list of tasks by due date
Tasks grouped by class
Color-coded based on priority

Suddenly, the app feels easier to use—and more helpful. That’s the power of visual design. You’re not just showing data—you’re making meaning from it.

Common Ways to Display Data

Let’s look at a few popular design strategies for displaying different types of data in apps:

1. Lists

Ideal for:

Task managers
Shopping apps
Calendar events

Lists allow users to scroll through entries and quickly find what they need. They can be simple (just a line of text) or detailed (with icons, due dates, and buttons). Good list designs often include:

A clear title
Optional details (like a due date or label)
Checkboxes or icons for actions

2. Cards

Ideal for:

News articles
User profiles
Social media posts

Cards break up data into bite-sized blocks. Each card usually contains a small amount of information—like a title, image, and action button—and looks like a mini “window” on the app.

They’re great for keeping content organized and easy to tap on mobile devices.

3. Tables

Ideal for:

Grade books
Budgets
Inventory or product lists

Tables show data in rows and columns and allow for easy comparison. Make sure your tables are readable on mobile by keeping columns to a minimum and using bold headers.

4. Progress Bars

Ideal for:

Goal-tracking apps
Fitness apps
Download status

Progress bars give users a sense of how close they are to finishing something. A progress bar might fill as a user logs more water each day, completes lessons, or reaches savings goals.

5. Charts & Graphs

Ideal for:

Financial tracking
Data visualization apps
Mood or health tracking

Charts turn complex data into visual patterns. You might use:

Bar charts to compare values
Pie charts to show portions of a whole
Line graphs to track progress over time

You won’t build these with code yet—but you can design what they will look like in Figma using simple shapes and sample data.

Designing a Data Display Screen in Figma

Here’s how to start:

Decide what data to show.
What will the user care most about? Recent activity? A total? A trend?
Choose your layout.
Will it be a list, grid of cards, progress bar, or chart? Pick what best fits your app’s purpose and screen size.
Add placeholder content.
Use text like “Homework: Read Chapter 4” or “Steps Walked: 8,324” to simulate real data. This helps you see what the screen will look like when it’s live.
Use hierarchy and spacing.
Make important numbers or labels stand out. Use consistent spacing so the screen looks clean, not cluttered.
Label everything clearly.
Users shouldn’t have to guess what a number means. Is “42” a score, a time, or a number of messages?

Design Example: Habit Tracker Summary

Let’s say your app tracks daily habits. Here’s how you might display the data on a home screen:

A daily streak counter (“You’ve logged 6 days in a row!”)
A progress bar showing how many of 5 daily habits were completed
A list of today’s habits, with checkmarks for completed ones
A line graph showing progress over the past week

All of this can be mocked up in Figma. You might use circles for habit icons, rectangles for the progress bar, and dotted lines to simulate graphs. Even without live data, your layout will tell the story clearly.

Avoiding Common Mistakes

Here are a few things to watch out for when designing with data:

Too much at once: Don’t overwhelm users with numbers. Focus on the most important info.
Poor contrast: Make sure text and numbers are easy to read on any background.
Lack of explanation: Always include labels, titles, or tooltips so users know what the data means.
No structure: Use grid lines, spacing, and alignment to make your screen feel clean and professional.

Your design should answer this question:

“If someone opens this screen for 5 seconds, can they quickly understand what the data is saying?”

Designing for Updates and Change

One of the unique things about displaying data is that it’s always changing. A grade might go up, a task might get completed, or a goal might be reached.

This means your design needs to look good both full and empty. Ask yourself:

What does the screen look like when there’s no data yet?
What does it look like when all the data is filled?
How does the app notify the user when data changes?

You might design an “empty state” screen that shows a message like “No tasks yet—tap ‘+’ to add one!” or “You haven’t logged any water today.”

These thoughtful touches help users stay connected and motivated.

Closing Thoughts

Displaying data clearly is one of the most important skills in app development. It’s the difference between a confusing interface and a helpful one. By combining design tools like Figma with an understanding of what your users need to see, you’ll create apps that don’t just collect data—they make it useful and actionable.

Next time you use an app, pay attention to how it shows you information. Is it easy to understand? Is it visually appealing? What could be better?

That’s the kind of thinking that will make you not just a good student—but a great designer.

2.5 Responsible Data Collection

It’s easy to get excited about what your app can do with data. You can sort it, display it, personalize experiences, and even predict what users want next. But here’s a question every app designer and developer needs to ask:

Just because we can collect data—should we?

In today’s digital world, users are constantly being asked to give up personal information. From signing up for an email list to creating an account for a new app, people are entering names, birthdates, photos, locations, and more. Sometimes they know exactly what’s being collected. Other times, they don’t.

That’s why understanding responsible data collection is essential. As a future computer scientist—or even just a responsible technology user—you have to think not only about what your app needs to work, but also about what your users deserve: privacy, transparency, and control.

What Does “Responsible” Mean?

Responsible data collection means collecting the minimum amount of data needed, explaining why it’s being collected, protecting it, and giving users control over it.

Here’s a simple checklist to help you think responsibly:

🟢 Do I really need this data for the app to work?
🟢 Am I explaining what I’m collecting and why?
🟢 Can users edit or delete their data later?
🟢 Am I keeping the data safe?

If you can answer “yes” to all four, you’re on the right track.

Examples of Good and Bad Practices

Let’s look at a few real-world scenarios.

✅ Good Practice:

An app asks for your name and birthday so it can personalize the user experience and send you a birthday message. It shows a short note explaining why the data is collected, gives you the option to skip the birthday field, and allows you to update it in settings later.

❌ Bad Practice:

An app asks for your location, access to your contacts, and permission to use your camera—even though it’s just a calculator. There’s no explanation, and you can’t use the app without agreeing to everything.

Which of these would you trust more? Which feels safer? Which app respects your privacy?

Designers and developers who think responsibly earn user trust. Those who don’t? Their apps get deleted—and sometimes even taken off app stores.

Designing for Transparency

As an app designer, you can build transparency into your design. That means:

Using clear labels for all input fields
Adding short tooltips or helper text to explain what information is for
Creating a “Privacy” or “Data” screen where users can see what’s being collected
Using friendly, simple language—no legal jargon!

Let’s say you’re designing a study timer app and ask for a user’s school name. Instead of just showing a text field, you might add this explanation underneath:

“We use this to customize your dashboard with your school’s colors. This field is optional.”

That one sentence shows respect, informs the user, and builds trust.

Give Users Control

Once data is collected, users should have control over it. That means giving them:

A way to see what data they’ve entered
An option to update or delete it
Settings that let them turn off certain features (like notifications or tracking)

For example, your app might include:

A profile screen where users can update their name or preferences
A history log where they can see their recent actions or data entries
A delete account button (yes, even though it sounds scary!)

Designing these features shows you understand that your app doesn’t own the user’s data—they do.

Data Sensitivity: Know What’s Private

Not all data is the same. Some information is just more sensitive than others. As a designer, you need to be aware of what types of data require extra care:

Type of Data	Sensitivity	Examples
General Info	Low	Username, app preferences
Personal Identifiers	Medium	Name, email, birthday
Sensitive Info	High	Location, health data, photos
Private Communication	Very High	Messages, passwords, payment info

Apps that collect medium or high-sensitivity data should:

Use secure storage practices (like encrypted databases)
Ask for permission clearly
Offer users the choice to opt in, not just opt out

Even in Figma, you can begin to design icons, confirmation screens, and checkboxes that support these values.

Responsible Design in Action

Let’s say you’re building a journaling app for students. You want to let users tag their mood, write notes, and track patterns over time. Great idea! But here are some responsible design choices to include:

Label mood tracking as optional
Let users turn off saving their journal entries
Add a toggle: “Use password to protect journal”
Include a privacy statement that explains how data is used (even if it’s just stored on the device)

Even if you’re not writing the code for data protection yet, you’re setting up the app in a way that puts user safety first.

Laws and Guidelines (A Preview)

In the real world, there are also laws that protect people’s data. You might not need to follow them strictly in your student projects, but it’s important to be aware that they exist. Some examples include:

COPPA (Children’s Online Privacy Protection Act) – Protects kids under 13 in the U.S.
GDPR (General Data Protection Regulation) – Protects user data in Europe
CCPA (California Consumer Privacy Act) – Gives users control over their data in California

These laws require apps to:

Get permission before collecting certain types of data
Let users delete their information
Be transparent about how data is used

You don’t need to memorize these laws—but it’s important to understand that data design has real-world consequences.

Your Role as a Responsible Designer

You don’t need to be a privacy lawyer or cybersecurity expert to design apps that respect users. All you need is to:

Be thoughtful about what you collect
Be clear about why you collect it
Let users control their own information

Doing this will make your app more trustworthy, more professional, and more user-friendly.

So as you move forward with your app project, take a moment to look at each data field and ask yourself:

Is this necessary?
Can the user see and change it later?
Am I explaining what happens with this information?

If you build your app with these questions in mind, you’re already ahead of the game—not just as a student, but as a future developer, innovator, and leader in technology.

2.6 Planning for Data in Android Studio

By now, you’ve designed input forms, mapped out your app’s data flow, created layouts to display that data, and thought carefully about responsible data collection. So what’s next?

You’re ready to move from the design stage into the development stage—where your ideas begin to come to life in code. That doesn’t mean you’ll jump into a complicated programming language right away. Instead, you’ll begin to plan how to build your app in Android Studio, the official tool used for making Android apps.

In this section, you’ll learn how all the data you designed for—like names, tasks, moods, or scores—will be created, stored, and displayed using real code concepts. You’ll see how variables, storage, and screens work together to make your app functional and responsive.

What is Android Studio?

Android Studio is a program where developers build apps for Android phones and tablets. It includes tools for:

Designing your app’s layout (what the user sees)
Writing the app’s logic using code (what the app does)
Running and testing your app on a virtual device

The programming language used in Android Studio is usually Kotlin (or sometimes Java), and while you won’t need to master all the code right away, it’s important to understand how your design decisions affect what gets coded later.

Step 1: Collecting Data From the User

Let’s say you designed a screen in Figma where users enter their name and select their favorite color. In Android Studio, that screen would be built using a layout file (called an XML file), and those fields would be connected to code like this:

val name = nameInput.text.toString()
val favoriteColor = colorDropdown.selectedItem.toString()

This code is telling the app:
“Take the text from the name field and store it in a variable called name.”

Every input you designed in Figma—text fields, checkboxes, toggles—needs to be connected to a variable in your app. These variables are the building blocks of how the app “remembers” and uses the data that users provide.

Step 2: Storing Data

Once the app collects the data, it needs to decide where to put it. In real apps, there are a few options for storing data:

Storage Method	Use Case
In-memory variables	Temporary data that goes away when the app closes
SharedPreferences	Simple storage for things like usernames and settings
Local files	For saving text, logs, or custom notes
Databases (e.g., SQLite)	For organizing lots of structured data like tasks or contacts
Cloud storage	For syncing across devices or sharing online

For your first app, you’ll likely use variables or SharedPreferences to store things like names, scores, or user settings. For example:

val sharedPreferences = getSharedPreferences("MyAppPrefs", MODE_PRIVATE)
sharedPreferences.edit().putString("userName", name).apply()

This line saves the user’s name, so the app can show it again next time they open it.

Step 3: Using Data to Make Decisions

One of the most exciting things about programming is using data to control what the app does. This is where algorithms, logic, and user feedback come into play.

Let’s say you collected the number of tasks completed today and want to show a message if they’ve completed all their goals. In Kotlin, it might look like this:

if (tasksCompleted == totalTasks) {
    messageText.text = "Awesome! You finished everything today!"
} else {
    messageText.text = "Keep going—you’re almost there!"
}

You’ve just created a conditional statement—a block of code that does something different based on the data your app has.

You can use logic like this to:

Change the layout of a screen
Display different messages or graphics
Show or hide buttons and notifications
Trigger reminders or alerts

You’ll explore this deeper in Chapter 3, when you learn about algorithms and programming more directly.

Step 4: Displaying Data on Screen

Once your app has collected and processed data, it needs to show that information back to the user—just like you planned in your Figma display screens.

In Android Studio, this is done with elements like TextView, ImageView, and RecyclerView (for lists).

For example, if you want to show the user’s name:

greetingText.text = "Welcome back, $name!"

Or if you want to show a list of assignments, you’d use something like a RecyclerView to repeat a layout for each item in your data list.

Your Figma design acts like a blueprint for these screens. Developers use your wireframes to:

Know what information to display
Understand where the data will appear on the screen
Match screen layouts to code components

This is why clear design leads to clean code.

Planning Before You Code

Even if you’re not doing all the programming yourself (yet!), understanding how data works in code will help you:

Talk to developers more effectively
Anticipate what’s easy or hard to implement
Adjust your designs to be more realistic
Start learning to build your own functional prototypes

That’s why many developers sketch out their data plan before they write any code. In fact, you can do this using a simple table like the one below:

Screen	Data Collected	Stored As	Used For
Sign Up	Username, email	SharedPreferences	Log in user, personalize welcome
Add Task	Task name, due date	Local list or file	Build to-do list display
Progress Screen	Number of tasks completed	Variable or SharedPref	Show progress bar and message

Use this type of chart to double-check that your screens collect the right data, and that you’ve planned for where it goes next.

Bringing It All Together

Data is not just something you design for—it’s something your app depends on. Now you know how:

User input is turned into variables
Data is stored using tools like SharedPreferences
Logic uses that data to make decisions
Screens are updated to show results

All of this brings your app to life.

Your designs in Figma and FigJam are no longer just drawings—they’re instructions. And when you open Android Studio, you’ll start transforming those instructions into code that users can actually tap, read, and interact with.

What’s Next?

In the next chapter, we’ll go even deeper into how to control what your app does using algorithms and programming. You’ll learn how to build logic into your app with loops, conditions, and functions—and start becoming not just a designer, but a true developer.

Discussion Prompt

“Think about an app you use regularly—like Spotify, Duolingo, Snapchat, or a school-related app. How does that app collect and use your data? What types of input do you give it (text, photos, choices, etc.)? How does the app display that information back to you?

Now imagine you are the designer.

What would you change about how the app asks for your data?
How could it display the data more clearly?
Are there any features you think could be more responsible or respectful of your privacy?”

Share your thoughts in a paragraph, small group, or class discussion. Try to connect your ideas to something you learned in Chapter 2—like input design, data flow, data display, or ethical collection.”

Key Vocabulary

Term	Definition
Data	Information that an app collects, stores, processes, or displays—like names, scores, or locations.
Input Field	A part of the app where the user enters data, such as text boxes, sliders, or dropdown menus.
Variable	A container in code used to store data temporarily (e.g., a user’s name or score).
Data Flow	The path that data takes through an app—from input, to processing, to display.
Storage	The place where data is saved so it can be used later (e.g., memory, files, or databases).
Display	The way an app shows information back to the user—such as a list, chart, or progress bar.
SharedPreferences	A simple way to store data like settings or login info on an Android device.
Chart / Graph	A visual way of showing data patterns, such as a pie chart, bar graph, or line graph.
User Feedback	Information an app gives the user based on their data—such as a message or visual response.
Data Sensitivity	A measure of how private or personal certain data is (e.g., health data is more sensitive than a username).
Privacy	The right of users to control how their personal information is collected, used, and shared.
Opt-in / Opt-out	User choices to allow or decline data collection or certain features in an app.
Ethical Design	Creating apps that are honest, respectful, and protect the user’s information.