Welcome

The App Design Workbook guides you through the app

design cycle to help you bring your iOS app ideas to life.
You’ll define, prototype, test, validate, and iterate on your
design as you relate your design concept to the Swift code
that powers iOS apps.

App designers spend a lot of time getting the look and feel
of their app just right. But that’s just one part of a much
longer process. And design isn’t linear; the best designs are
refined and improved over time. Good app design begins
with understanding the user and extends to every decision
you make, both big and small.

Behind every great app is an individual or team that

started with an idea and a commitment to improve and App Design Cycle
refine it, step by step. Get ready — you’re about to take the
first step in a rewarding journey.

2
How to Use This Workbook
This workbook is designed so that you can customize it as you go. The result will be unique to you and your app, and it will reflect all the
decisions you make along the way. You can add notes and highlights to exercises and bring in your own images and other resources.

Templates

Some slides include templates that you’ll fill out. Make as many
copies as you need.
Prototype exercises

Slides marked with the app prototype icon indicate that you’ll
work in a separate Keynote document to build your prototype.
Code explorations
Slides marked with the Swift Playgrounds app icon indicate that
you’ll dive into code in Swift Playgrounds.

3
What You’ll Need
Swift Playgrounds

Swift Playgrounds is a revolutionary app for iPad and Mac that helps you
learn and explore coding in Swift, the same powerful language used to
create Download Swift Playgrounds for M
world-class apps for theac > Store. You’ll use Swift Playgrounds in optional
App
coding explorations in this workbook, diving into code to learn concepts
that
relate directly to your app. Download Swift Playgrounds for Mac >
Go Green prototype Download the Go Green app prototy
pe >

The examples in this workbook are based on Go Green — a demonstration

app prototype in a Keynote file. To simulate the app, play the slideshow
Download the iOS Keynote K
and click to advance through screens.
it >
Download the Go Green app prototype >
iOS Keynote Kit
You’ll use a library of iOS interface elements to build your Keynote
prototype. Download the iOS Keynote Kit >

4
Keynote Basics
Before you start, be sure you’re familiar with the basics of navigating
Keynote. To see the navigator, click the icon in the toolbar or the View menu
and choose Navigator. Groups of slides have a disclosure indicator for hidden
( ) or visible ( ) content. To show or hide slides in a group, click the
disclosure indicator.

To move a slide, click and drag it in the navigator. To duplicate a slide, select
it in the navigator, then choose Edit > Duplicate Selection or press
Command ( )-D.

Fill out templates by editing text in boxes. To edit the text in a box, double-
click it.

Add images to placeholders by dragging and dropping.

Remember: You can always undo mistakes by choosing Edit > Undo or by
pressing Command-Z. 5
App Design Cycle

Define Prototype Test Validate Iterate

Discover Map Architect Validate Iterate
• Observe • Outline Screens • Define Tests • Gather Notes • Organize Your Conclusion
• Explore Your Users • Group Screens • Create User Journeys • Form Key Insights s
• Consider Diversity • Link Screens • Define a Process • Draw Conclusions • Go Back: Define
• Summarize Your Audienc • Plan an Introduction • Go Back: Prototype
e Wireframe • Go Back: Test
• Create Tabs Script
Analyze • Add Navigation • Outline Scripts
• Analyze Causes • Create Modals • Write Scripts
• Research Competitors • Add Interface Elements • Anticipate Errors
• Leverage Capabilities
Refine Prepare
Plan • Size Tap Targets • Gather Users
• Find Differentiators • Inset Content • Perform Last Check
• Define Features • Judge Weight and Balanc
• Prioritize Features e
• Describe Key Functions • Check Alignment
• Define an MVP
Style
• Define Personality
• Design Icon

6
Define
Your journey starts by defining your app. An initial discovery
process will help you identify the challenge you want to solve
and understand your audience. Then you’ll analyze how an app
can tackle the challenge before building toward a list of goals,
features, and key functions.

7
Defin
e

Observe
Explore Your Users Discover
Consider Diversity
You’ll begin by identifying a challenge and the people it
Summarize Your
affects. By the end of this stage, you’ll have a thorough
Audience
understanding of a challenge and an insight into the people
who would benefit from a solution.

Be observant and keep an open mind. The questions you ask

— and the scenarios and points of view you imagine — will
determine the direction of your app and its ultimate success.

Even if you already have an idea for your app, the following
exercises can help you validate your current thinking.

8
 Are there questions you or others think about often?
Observe
Spark your imagination. People
who create great apps are often How can I track my fitness easily?
motivated by addressing a How can I help others
challenge that they or their How can I entertain myself?
community experience.
Create as many copies of this
slide as necessary to capture
your thoughts. Don’t try to filter What challenges do you or others face in your daily lives?
them too much! You never know
which one
will lead you to a great app idea.
Boredom, wheter it be from lack of stimulation or desire for such stimulation

Have you or others used workarounds in existing apps?

Are there apps that partially address a challenge but require you to use them in unintended ways
or augment their capabilities using other apps or activities?

In the chess app that I use, it doesn’t have a timer

Define | 9
Discover
Explore
Code

Hello World!
You’re using the App Design Workbook because you have an idea that you want to
turn into an app. But design isn’t the whole story; every app is built with code. The
design and code of an app are related — maybe more closely than you might
imagine.
In this exercise, you’ll:
If you’re new to coding, it might seem mysterious and complex. While it takes
• Write your first line of code.
some time
• Print a message to the console.
to learn the skills necessary to build an app from top to bottom, the basic concepts
and practices are easy to understand. The perspective you get from understanding
even a little
of the code behind an app will give you an advantage in the design process.

In this and future exercises, you’ll discover how Swift code — the same language
used by professional app developers around the world — powers the features of an
app.

One last thing: Don’t worry about mistakes. All coders get stuck — from the 1
0
newest beginner to the most seasoned expert. You won’t need any of the code
from these exercises, so use them to play, explore, and get curious.
Hello World! To get started, download the Swift Playgrounds app from the App Store. It’s available for
Download the Swift Playgrounds app both Mac and iPad. Instructions in all Explore Code exercises are for Mac.
and create a new playground.
Open the app. To make a new playground, find the More Playgrounds section at the
bottom of the screen and choose Blank, or choose File > New Blank Playground. A
playground starts with one page named “My Playground.” You’ll add more pages in
coming code explorations. Double-click your new My Playground to open it. You’ll see the
window below:
Page
s

Coding
area

Additional
code files

Explore 1
1
Code
Hello World! Look for the blue text “Click to enter code” in the coding area and enter the following Swift
Add a line of code that will display text code:
in the console.
print("Explore Code!")

Run your code by clicking the Run My Code button in the lower right.

This code produces a message in the console. Notice that a red badge has appeared on the
button in the lower right.

Explore Code!
That’s the console button. Click it to display the output of your program to the right of your
code.

print("Explore Code!")

Explore 1
2
Code
Hello World! Your playground page should now look like this:
Review your work and try a challenge.

Congratulations! You’ve just completed your first code exploration.

Challenge: Programmers who are first learning a new language usually write a simple
program that produces just the message “Hello World!” You’re now ready to do this in
Swift. Give it a try and join the ranks.

Hints: Replace the characters in between the two quotation marks. Leaving matching
quotes at the beginning and the end is very important. Did you remember to click “Run
Explore My Code” again? 1
3
Code
 Exampl
Explore Your Users Who is this person? How do they describe themselves? e
Pick one of the challenges and gather
information about individuals who A father of two, kindergarten teacher, taking online classes in photography.
experience it. Each person is different.

It’s important to think broadly to

capture How old are they? What are important aspects of their environment?
as much diversity as you can.

Good design is user-centered. You’ve Live in an apartment on the third floor. Not enough space for large
gotten a good start by thinking about 31
bins in the house, so they only have a small recycling container.
the challenges that you and
others face. Keep it going! By
narrowing down from the general How do they describe the challenge they face?
to the specific, you’ll place individual
people at the core of your process.
I don’t really understand what’s recyclable and what belongs in the trash. The labels are hard
Personal stories from real people can to find, and I don’t really how to distinguish between things like different kinds of paper.
give you perspective you might not
otherwise have. Consider interviewing
people from your community to create
authentic profiles. What do they most want in a solution? How would it make their lives easier?

I need help quickly identifying what’s recyclable. If I could sort through items quickly every
evening, I’d be more likely to spend mental energy on it, since my kids deserve as much
energy as I can give them.

In which specific circumstances might they use an app that addresses their challenge?

I could spend a little time every evening with my kids sorting through our daily waste.

Define | 1
4
Discover
Explore Your Users Who is this person? How do they describe themselves?

Pick one of the challenges and gather

information about individuals who A bored teenager. They love to play videogames
experience it. Each person is different.

It’s important to think broadly to

capture How old are they? What are important aspects of their environment?
as much diversity as you can.

Good design is user-centered. You’ve 10-18 The lack of stimuli

gotten a good start by thinking about
the challenges that you and others
face. Keep it going! By narrowing
down from the general to the specific, How do they describe the challenge they face?
you’ll place individual people at the
core of your process.

Personal stories from real people can They feel as though they are constantly bored
give you perspective you might not
otherwise have. Consider interviewing
people from your community to create
authentic profiles. What do they most want in a solution? How would it make their lives easier?

They want a game that can entertain them. This would make their lives easier by making it
less boring.

In which specific circumstances might they use an app that addresses their challenge?

When they feel extremely bored

Define | 1
5
Discover
Consider Diversity Ages Genders

Identify things about your users you

may have overlooked. 10-18 All
A user’s identity and circumstances
will have a huge impact on how they’ll
experience and use an app.
Summarize Languages Disabilities
all your users with these different
aspects
in mind. English Any will be accompanied

Everyone has biases that affect the

way they perceive the world.
Compensate for your biases so that Cultures
they don’t creep into your app’s
design.
Did you identify something that you Any
didn’t consider when imagining your
audience? For example, were all your
users of similar age? Consider going
back to the earlier exercises with your Economic circumstances
new insights in mind.

Whether poor or rich, if a user has a phone they should be able to use my app

Living situations

If a certain demographic has poor living conditions, they may have more important
priorities than using my application
Define | 1
6
Discover
 Exampl
What’s the most important concern in a e
Summarize Your solution?
Audience
Summarize your findings about Understanding the percentage of trash vs. recycling.
individual users. Refer to your earlier
research and use it to draw some
conclusions.
The age range of the users is: Our app will be opened when…

15 to 30. Throwing things in the trash or recycling.

Our app will be used in this environment:

Inside with connection to Wi-Fi or cell reception.

Our environment will have these limitations:

User may have their hands full.

When designing our app, we need to consider:

Users might not know what qualifies as a recyclable.

Define | 1
7
Discover
 What’s the most important concern in a
Summarize Your solution?
Audience
Summarize your findings about Entertaining users
individual users. Refer to your earlier
research and use it to draw some
conclusions.
The age range of the users is: Our app will be opened when…

10-18 The user is bored

Our app will be used in this environment:

Any setting where there is a lack of stimuli

Our environment will have these limitations:

Wifi
App accessibility

When designing our app, we need to consider:

Adding language options

The demographics using the app
Define | 1
8
Discover
Defin
e

Analyze Causes
Research Competitors Analyze
Leverage Capabilities
Now that you’ve identified who your app serves and the
challenges they face, it’s time to get specific. By the end of
this stage, you’ll have a clearer picture of the form your app
might take.

You’ll look at the root causes of your users’ challenges. And

you’ll use them to drive feature ideas that take advantage of
key iOS capabilities, while contrasting your ideas with
existing apps.

1
9
 Exampl
e
Analyze Causes Users are having this problem:

Dig deeper into the issues you’ve

They'd like to begin recycling but struggle to hold themselves accountable.
observed and find the core problem.
Then consider how your app could
solve it. This happens because:
Asking why something happens will
help you discover hidden causes It’s easier to throw everything into one bin.
behind what you observe directly. The
deeper you dig, the closer you’ll get to
the core motivating need for your This is because:
solution.
Create as many copies of the following They struggle to differentiate between trash and recycling.
template as you need to describe the
problems you’ve identified in your Which is because:
research.

Recycling seems complicated and hard to remember.

And the root cause is this core problem:

People are rarely taught how to recycle.

We can solve this issue in our app by:

Educating people on what qualifies as recycling and gamifying the experience so they
can hold themselves accountable with their peers.

Define | 2
0
Analyze
Analyze Causes Users are having this problem:

Dig deeper into the issues you’ve

observed and find the core problem. They begin to find themselves getting bored
Then consider how your app could
solve it. This happens because:
Asking why something happens will
help you discover hidden causes They have a lack of stimulation
behind what you observe directly. The
deeper you dig, the closer you’ll get to
the core motivating need for your This is because:
solution.
Create as many copies of the following The user does not have something to entertain them
template as you need to describe the
problems you’ve identified in your Which is because:
research.

They require an application that meets their needs

And the result is this core problem:

A lack of stimulation

We can solve this issue in our app by:

Making an entertaining game that keeps the user engaged

Define | 2
1
Analyze
 This app is interesting because: I like/dislike this app because:
Research Competitors
Find and describe apps that relate to
the problem you’ve identified.
Discover what people are currently
using
to solve the problem. Search the
App Store for similar apps to find out
what users
enjoy or dislike about their solution.
This
will give you insight into what your
app
will be competing with.

Define | 2
2
Analyze
Leverage Capabilities Map Bluetooth

Note iOS capabilities that you might Display interactive maps that locate Communicate wirelessly with nearby
the user, provide directions, indicate devices using a standard, secure,
use in your app. points of interest, display satellite low-power interface.
images, and more. GPS
iOS comes with an array of great
technologies for addressing how Near field communication
Locate the device anywhere in the
users want to interact with an app. Detect when your device is near world and look up corresponding
You’ll see many listed here, but keep a sensor to interact with payment information, such as country and
in mind that there are many more. systems and more. city.
Augmented reality Context menus
What features do your competitors
have in common that you might Place virtual objects in the world that Provide quick access to actions for
need to use in your app? Which users can see and interact with an object onscreen.
onscreen.
features might be game-changers?
Microphone and speakers
Visit the Image processing
iOS Human Interfa
iOS Human Capture and play back high-fidelity
ce si Interface Guideli
Guidelines Use sophisticated algorithms to adjust stereo audio.
nes site
te images and apply filters.
and look at User Interaction and
Drag and drop
System Capabilities Speech recognition
to learn more. Move items by pressing and
Convert spoken audio into text. dragging.

Haptics Accelerometer and

gyroscope
Provide feedback through touch by
vibrating the device. Track the device’s orientation and
movement.
Machine learning
Widgets
Use sophisticated algorithms to
analyze and categorize visual, Display information related to your
auditory, textual, and other forms of app on the Home screen in a variety
information. of sizes and styles.
Camera Notifications 2
Define |
3
Analyze Use the built-in front and back Provide updates to the user on the
cameras and their powerful processing lock screen when they’re not using
Explore
Code

Map
A major component of coding is recognizing what work has already been done for
you and figuring out how to use it. The many advanced built-in capabilities of iOS
are organized in frameworks.

In this exercise, you’ll display an interactive map using an iOS framework. To start,
In this exercise, you’ll:
be sure “My Playground” is open in the Swift Playgrounds app.
• Create a new page.
• Import a framework.
• Learn about the live view.
• Display an interactive map.

2
4
Map
Create a new page and add code to If it’s not showing, open the sidebar
create a map.
by clicking . To create a new page,
hover your mouse next to “Pages”
and click the button, or choose File
> New Page.

Change the page title to “Map.”

While you’re editing page names,
right-click the “My Playground”
page, click Rename, then type
“Hello World” to give it a more
descriptive name.
In the editor, type the following Swift
code:

MKMapView()

You’ll get a red dot, indicating an error:

MKMapView()

Explore 2
5
Code
Map This is the right code to create a map, but MKMapView is in a specialized
Import the MapKit framework.
framework. You’ll need to import that framework to use it in your code.

Above your first line of code, enter:

import MapKit
Swift uses different font styles
Your code should now look like this: and colors (syntax highlighting)
import MapKit to help you read your code.

MKMapView()

import is a Swift keyword. Keywords have special meaning in Swift that sets them
apart from the rest of your code.

Now that you’ve imported the MapKit framework, the error will go away. Click Run
My Code.

The code runs, but you won’t see a map. To view it, you’ll need to do one more
thing.

Explore 2
6
Code
Map You’ve created a map, but displaying it requires another framework. The
Import the PlaygroundSupport
PlaygroundSupport framework lets you control aspects of the playground itself. Enter
framework and display the map.
one more line of code above the first line:

import PlaygroundSupport

Then add the highlighted code to the beginning of the final line:
PlaygroundPage.current.liveView = MKMapView()

Be sure to include a space both before and after the equal sign. Your completed
playground should now read:
import PlaygroundSupport
import MapKit
PlaygroundPage.current.liveView = MKMapView()

Now run your code.

The live view in the playground opens to display the map you created. You can
interact with it as you would any app that embeds a map. Try clicking and dragging
to display different regions of the map. If you’re using a trackpad, use two-finger
gestures to zoom.

Explore 2
7
Code
Map Your completed exercise should now look like this:
Review your work.

This is a simple example of the power of Swift frameworks. You get a large body of
familiar functionality just by importing the ones you want. In fact, other than the
import statements themselves, it took just one line of code to create the map and
show it in the live view!
Explore 2
8
Code
Defin
e

Find Differentiators
Define Features Plan
Prioritize Features
You’re ready to put together a concrete plan for your app.
Describe Key Functions
By the end of this stage, you’ll have a concise, well-
Define an MVP
defined plan that you can begin building into a prototype.

You’ll build your plan by identifying key differentiators,

setting goals, and then narrowing down your feature set
to exactly
those you’ll need to test whether your app will impact real
users.

2
9
 Our app will be different from these apps
Find Differentiators by:
Create a list of ways your app will be
different from existing apps.
Your app’s differentiators set it apart
from others in the market.
A differentiator is a core feature of
your app. The following things are
not differentiators:
• Style, such as color, fonts, icons,
and images.
• Arrangement of items onscreen.
• How screens are organized.

Define | 3
0
Plan
Explore
Code

Model and View

As a designer, your focus is largely on the visible interface and usability of your app.
Developers use the term “view” to describe the parts of an app a user sees and
interacts with. The model of an app defines its data. It’s a companion to the app’s
views, and equally important.
In this exercise, you’ll:
Developers separate views from models because they’re independent. A view might
• Learn how to separate models and
views.
display different model data at different times, and the same model data might
• Create variables. appear in multiple views.
• Discover another way to display text.
In this exercise, you’ll create model data and display it in two different views.

To start, be sure “My Playground” is open in the Swift Playgrounds app. Then create
a new page and name it “Model and View.”

3
1
Model and View Enter the following line of Swift code:
Display text data in the console.
"Explore Code!"

This text value is a model. If you run your code now, the text will be created, but you
won’t see anything. But you’ve already displayed data using print(). The console is a
kind of view, and the print() command adds a line of text to it.

Add the following line of code, being sure to keep the first line; you’ll come back to
it.
print("Explore Code!")
Run your code and open the console to see the
message.

"Explore Code!"
print("Explore Code!") Explore Code!

Explore 3
2
Code
Model and View The console is useful for developers to examine data in their app, but it’s not visible
Display text data in the live view.
to the user. To display text on a user’s device, you’ll need another kind of view.
Insert the following code at the beginning of your playground:
import SwiftUI

Now add the following line at the end of your playground to create a view to display
Text is a kind of view that
the string: can display text data,
The equal sign
textView is a variable which you provide in
var textView = Text("Explore Code!") associates the value
declared using the parentheses.
on the right with the
keyword var. You use
variable on the left.
variables in Swift to
This is called
refer to things by
assignment to a
name.
variable.

You’ve created a new view for your text. Now it’s time to display it using the live
view. Add two more lines of code as highlighted below:
Adds playground support.
import PlaygroundSupport
import SwiftUI

"Explore Code!"
print("Explore Code!")
var textView = Text("Explore Code!")
Sets the Text view as the
PlaygroundPage.current.setLiveView(textView) current page’s live view.

Now run your code to see your text in the live view.
Explore 3
3
Code
Model and View Notice that you’ve entered “Explore Code!” as a text value three times. It’s not just
Create a model using a variable.
repetitive — a typo in one value would break your intention to make all three
represent the same model data.

You’ve just learned to create a variable to refer to something by name. You can use
the same technique here with your text data. Update the line where you first created
the value "Explore Code!" by assigning it to a new variable.

var message = "Explore Code!"

Now you can use the message variable anywhere you want to refer to this text.
Replace the remaining instances of "Explore Code!" with message. Your completed code
should now look like this:
import PlaygroundSupport
import SwiftUI

var message = "Explore Code!"

print(message)
var textView = Text(message)
Run your code. As before, you should see this text
PlaygroundPage.current.setLiveView(textView)
value displayed in both the live view and the console.

You’ve taken the final step to separate your model from its views. The variable
message stores the model text "Explore Code!", and you’ve displayed it in two different
views.
Explore 3
4
Code
Model and View Your completed exercise should now look like this:
Review your work and try a challenge.

A major part of developing an app is defining and creating the models and views that
power it.
By separating the two concepts, you can focus on them separately. Consider the kinds
Challenge: Experiment
of models and views yourwith
appchanging theas
might have text
youyou assigned
continue to message and observe
designing.
Explore 3
the result. 5
Code
 Exampl
e
Define Features Current have focused primarily on

Summarize the baseline and

differentiating features of your app. recycling apps what is considered recycling.
Establishing clear, achievable goals
helps you focus on the problems
you’re trying
to solve and the way you’re hoping to As a baseline, our app will need to:
solve them. All of your previous
research will help you define the basic Scan product barcodes to determine
features and differentiators of your Log trash and recycling.
recyclability.
app.

Provide quick links to environmental

Educate about what is recyclable.
causes.

Host a storefront for environmentally

Provide breakdown of trash vs. recycling.
friendly products.

Our app will be different by:

Encouraging recycling through Communicating with smart bins to

gamification. calculate weight automatically.

Host a storefront for recycling supplies like

Creating challenges to spark ideas.
bins, bags, and magnets.
Define | 3
6
Plan
Define Features Current have focused primarily on

Summarize the baseline and

differentiating features of your app.
Establishing clear, achievable goals
helps you focus on the problems
you’re trying
to solve, and the way you’re hoping to As a baseline, our app will need to:
solve them. All of your previous
research will help you define the basic
features and differentiators of your
app.

Our app will be different by:

Define | 3
7
Plan
Explore
Code

Strings
Just about every app displays text, and many allow the user to enter it using the
keyboard. In Swift, the concept of text — and all that you can do with it — goes by
the name “string.” You’ve already used strings to create values such as “Explore
Code!” In this exercise, you’ll explore more of what you can do with strings.
In this exercise, you’ll:
To start, be sure “My Playground” is open in the Swift Playgrounds app. Then create
• Learn about strings.
• Create a string with concatenation. a new page and name it “Strings.”
• Create a string with interpolation.

3
8
Strings The simplest way to work with string values is to simply enter text between
Create a string with concatenation.
matching double quotes. Create two new strings by entering the following code:
"No Palm Oil Challenge"
"Pick Up Trash Challenge"

Note the common text, “Challenge,” in each string. Now imagine that your app
might want to create many such strings on the fly. Swift allows you to compose
strings from multiple parts. Start by defining a new variable below to store the
unchanging text, including the leading space:
var challengeString = " Challenge"

Use another variable for the changing beginning of the string by entering the
following code:
var name = "No Palm Oil"

You can combine these two strings using the "+" operator. This is called string
concatenation. Enter the following two lines to create a new string and print it.
var noPalmOilChallenge = name + challengeString
print(noPalmOilChallenge)
Run your code and open the console to see the
message.

Explore 3
9
Code
Strings Another way to compose strings is with string interpolation, which is similar to filling in the
Create a string with interpolation.
blanks in a sentence. Think of it as a placeholder that will insert the value of name when the
string needs to be used.
"\(name) Challenge" … is like
This is a … "________
placeholder Challenge"
that
will insert the value of
name when the string
needs to be used.

Use string interpolation to produce the same “No Palm Oil Challenge” string by entering the
following code:
var anotherNoPalmOilChallenge = "\(name) Challenge"
print(anotherNoPalmOilChallenge)

Notice that the constant part of the string is colored red, while the interpolated part is black.
This is another great example of syntax highlighting.

String interpolation is powerful. For example, it works with numbers. Enter the following
code:
var pointsForCompletion = 8
print("You could score \(pointsForCompletion) points by completing it.")

A string can have any number of interpolated values. Enter the following code to substitute
both the name of the challenge and the number of points in one longer string:
Run your code and review the console output.
Explore print("Complete the \(noPalmOilChallenge) to score \(pointsForCompletion) points!") 4
0
Code
Strings Your completed exercise should now look like this:
Review your work and try a challenge.

Challenge: Experiment with what you’ve learned about constructing strings. Try assigning
your
given name to givenName and your family name to familyName, then construct fullName
using concatenation (+). Use interpolation to embed them in a string like so: “My full
Explore 4
Code
name is _____ _____.” Can you add your age? Review the earlier explorations and try to 1
display this using a text view.
 Exampl
e
Prioritize Features Current have focused primarily on

Make a copy of the previous exercise.

Annotate the most important features recycling apps what is considered recycling.

and order them by priority. Ask

yourself which features are
absolutely necessary. Can you pare
As a baseline, our app will need to:
your list down to three
or four key features? Do you need to
Scan product barcodes to determine
reorder your priorities? Log trash and recycling. 1 recyclability.
8
Identifying the most important
features
of an app helps you work toward your
Provide quick links to environmental
minimum viable product (MVP). Your Educate about what is recyclable. 2 causes.
5
first iteration of the app should
include just the features necessary to
validate your idea.
To avoid “feature creep,” it’s Host a storefront for environmentally Provide breakdown of trash vs.
friendly products.
7 recycling.
6
important
to distinguish between must-have
features and those that would be
great enhancements. Clear, minimal
focus is essential to the success of Our app will be different by:
the design process.
Encouraging recycling through Communicating with smart bins to
gamification. 3 calculate weight automatically. 9

Host a storefront for recycling supplies

Creating challenges to spark ideas. 4 like bins, bags, and magnets.
10
Define | 4
2
Plan
 Exampl
e
Describe Key For this feature:

Functions
Log trash and recycling
For each priority feature, describe its
key functions. Copy and paste this
slide as many times as you need. The user will need to be able to do and see these
Notes:
List information the user will see and things:
actions that the user will take. Add
notes Add log entry Select either weight or item
to clarify your thoughts or ask
questions that you’ll want to come
back to as you work on your design.
Describe items How much they recycled on what day
Don’t think in terms of user interface
yet. Elements such as buttons, tabs,
and icons are supported and defined
by the data Keep records of past items Day, week, month
and actions in your app. The better
you understand them, the better your
design will fit your MVP features.
Choose a day that recycling was done

Default to today’s date Might need a quick jump to “today”

Browse past dates

Share log entry to social media

Define | 4
3
Plan
Describe Key For this feature:

Functions
For each priority feature, describe its
key functions. Copy and paste this
slide as many times as you need. The user will need to be able to do and see these
Notes:
List information the user will see and things:
actions that the user will take. Add
notes
to clarify your thoughts or ask
questions that you’ll want to come
back to as you work on your design.
Don’t think in terms of user interface
yet. Elements such as buttons, tabs,
and icons are supported and defined
by the data
and actions in your app. The better
you understand them, the better your
design will fit your MVP features.

Define | 4
4
Plan
 Exampl
e
Define an MVP For this feature:

Go back to your Describe Key

Log trash and recycling
Functions slides, or duplicate them,
and prioritize the most important and
crucial functions to implement for
each feature. The user will need to be able to do and see these
Notes:
things:
You’ll base your MVP on the features
you identify here. Add log entry 1 Select either weight or item
Remember that you’re not your user.
If you get stuck, think about what
would most help the user achieve the
Describe items 2 How much they recycled on what day
goals
you identified.

Keep records of past items 3 Day, week, month

Choose a day that recycling was done 5

Default to today’s date 4 Might need a quick jump to “today”

Browse past dates 6

Share log entry to social media 7

Define | 4
5
Plan
Prototype
It’s time to build a working Keynote prototype of your app.
You’ll start by mapping screens to form an app architecture,
then apply basic
UI elements to create a wireframe. Then you’ll refine your
prototype using common design guidelines to ensure that it
meets an iOS user’s expectations. And finally, you’ll define the
personality of your app with color, icons, and more.

4
6
Prototy
pe

Outline Screens
Group Screens Map
Link Screens An app map is a set of outlines that describe the information and
functions on each screen — and how they relate to each other.
By the end of this stage, you’ll have a set of screen outlines with
well-defined groupings and relationships.

By mapping your app, you define its architecture. iOS users have
a set of expectations — a mental model — for the way an app
should behave. They expect related information to be grouped
together, and for activities to be easy to navigate. You’ll derive
your app’s architecture from the key functions of the MVP, making
decisions based on how you expect users to work with the app.

4
7
 Exampl
e
Outline Screens
Review the key functions of your MVP
and organize them into screens,
describing the content and actions of
each.
The key functions you listed have
natural relationships that suggest
which ones belong together. Feel free Day Summary Item Detail Calendar View Add Item
to break up a function into more than
one item in a screen outline, or Summary of today’s Calendar with current
Type of item Select trash or recycling
combine several key functions into recycling date

one item. Your notes will help you

make these decisions. Itemized list of today’s
Weight
Summary of the month’s Select by weight or by
recycling items item

Try to keep each screen focused on a

single concept or activity, summarized View details for a logged
Date
View a day’s recycling Input details: date, type,
item log weight
in its title, without worrying about how
many there
Add new items to trash
are. Next you’ll organize them in a or recycling
Recycling information

way that users understand.

You’ll work with these outlines in the Submit items
map stage. During the wireframe
stage, you’ll translate your screen
Cancel entry
outlines into the
text, images, controls, icons, and other
UI elements in your app.

Prototype | 4
8
Map
Outline Screens
Review the key functions of your MVP
and organize them into screens,
describing the content and actions of Screen
each. title

The key functions you listed have

natural relationships that suggest
which ones belong together. Feel free
to break up a function into more than
one item in a screen outline, or
combine several key functions into
one item. Your notes will help you
make these decisions.
Try to keep each screen focused on a
single concept or activity, summarized
in its title, without worrying about how
many there
are. Next you’ll organize them in a Key
way that users understand. functions

You’ll work with these outlines in the

map stage. During the wireframe
stage, you’ll translate your screen
outlines into the
text, images, controls, icons, and other
UI elements in your app.

Prototype | 4
9
Map
 1. Create a new Keynote file.

2. Open the Document inspector or choose

View > Inspector > Document.

3. Under Slide Size, choose Custom Slide

Size.

Prototy 4. Enter 375 for width and 812 for height.

Click OK.
pe
Create a new Keynote file for your 5. Open the Format inspector or choose
prototype and add a slide for each
View > Inspector > Format.
screen outline.
It’s time to begin creating your app 6. Under Background, select Color Fill and
prototype in a new Keynote document.
choose light gray (or another background
Keynote is a great way to make a
prototype that you can view on the to contrast with white).
device you’re testing on.
7. At the top of the inspector, use the
Change Master button to select the Blank
master slide.
Now create one slide per screen
outline and copy your outlines to the
slides.

To copy a screen outline, click and

drag to select all of its boxes. Copy,
then paste them to the blank slide in
your prototype and drag them into

Prototype | position. 5
0
Map
Explore
Code

Data and Naming

Text isn’t the only kind of data in an app. Swift can work with many other common
kinds of values, such as numbers and dates. Different kinds of data are called
types. All data in Swift belongs to a type — including ones you create to represent
the information your app works with. In this exercise, you’ll create your own
In this exercise, you’ll: custom type.
• Learn about structures.
To start, be sure “My Playground” is open in the Swift Playgrounds app. Then
• Learn about naming.
• Use code comments.
create a new page and name it “Data and Naming.”

5
1
Data and Naming To create your own data type in Swift, you’ll use a structure. Each custom structure in
Define and name a structure. your code should have a recognizable and understandable name — for example,
Challenge, RecyclingItem, and Achievement. By convention, the name of a type always
begins with a capital letter. Spaces aren’t allowed in type names; if you need more than
one word to describe a type, use camel case to capitalize the first letter of each word.

Enter the following code to create a structure (denoted by the keyword struct). Be sure to
include the curly braces, which you’ll find near the P on your keyboard.
struct Challenge {
}

You can create a new challenge value (an instance) by typing its name followed by
parentheses. Add the following code to create two instances of Challenge and assign
each to an identifier:
var noStraws = Challenge()
var pickUpTrash = Challenge()

A structure instance is basically a value like any other. Try printing both to the console:
print(noStraws)
print(pickUpTrash)

You can see that while they’re two different instances assigned to two different
variables, there’s nothing to distinguish one challenge from another.
Explore 5
2
Code
Data and Naming Obviously no two challenges are alike. Consider what distinguishes one challenge
List the properties of a structure. from another. Which properties will the Challenge type need to support the app’s
functionality? Making a list or diagram can help:
Unique Specific end date and
title time
struct Challenge
Is it a team
Number of points for
challenge, yes or
successful completion
no?

The next exploration will show how to add properties inside the definition of a type.
But for now, you can use comments in your code to plan. Swift will ignore anything
you type after two forward slashes (//), all the way to the end of the line.
Programmers use comments to take notes and describe their code.

Enter some comments between the curly braces as placeholders for the Challenge
structure’s properties. You can replace them with code later.
struct Challenge {
// title - the name
// points - scored upon successful completion
// is team - true of a team effort, false if solo
// end date - when it will no longer be offered
}

Explore 5
3
Code
Data and Naming Your completed exercise should now look like this:
Review your work.

Challenge: Think about the kinds of data you’ll need in your own app. Create a
new structure for each type and use comments to describe their properties.

Explore 5
4
Code
 Exampl
e
Group Screens
Group your screen titles into
categories
and name them. Use the SF Symbols
app to choose an icon that best Log Challenges Achievements
describes each category. Then
highlight the default screen for each
category.

The architecture of an app often Calendar View Enter Challenge Achievements

breaks down into several global
categories
of activities that the user can switch
between fluidly. These screen groups Add Item Enter Global Code View Achievement
will translate into UI elements in the
next stage of prototyping.
Don’t worry if your screens don’t
fall naturally into multiple categories. Day Summary View Results
Some apps focus on just one activity.

Item Detail Challenges

Recycling

Prototype | 5
5
Map
Group Screens
1. Copy the title box for each screen
outline here.
2. Group the screen titles into
categories. Category
3. Duplicate the Category box as
needed to provide titles and icons
for each group of screens.
Screen Title
4. Choose the title of the main
screen for each category and
highlight that box.
Screen Title

Screen Title

Screen Title

Screen Title

Prototype | 5
6
Map
 1. Order the screen
outlines by group.

2. For each group,

use the main
Prototy screen as the
parent and drag
pe
Use the slide navigator to group the others below it
screen outlines by category. as children.

Prototype | 5
7
Map
Explore
Code

Types and Properties

The structures you create are determined by the data in your app. You organize
each thing your app represents by grouping related data together and giving it a
name. In Swift, you define a structure and declare its properties. In this exercise
you’ll learn how to create properties for a structure to further your understanding
In this exercise, you’ll: of Swift types.
• Define properties for a structure.
To start, be sure “My Playground” is open in the Swift Playgrounds app. Then open
• Use different data types.
• Supply values for an instance of
the page named “Data and Naming.”
a structure.

5
8
Types and Properties Start by deleting everything but the first few lines where you created the Challenge
Create structure properties. structure. Update the first two lines inside the structure by creating two variables:
struct Challenge {
var title: String // the name
var points: Int // scored upon successful completion
// is team - true of a team effort, false if solo
// end date - when it will no longer be offered
}

A variable inside a structure has special meaning and is called a property of the
structure. You created two properties, title and points. Each one has a type. Here’s
how that works:
var title : String
The name of the
Defines the property type
name
Special delimiting
character

Unlike the variables you’ve made previously, you didn’t assign values to title or
points. You’ll assign the values to all of a structure’s properties each time you
create one.

Explore Note the names of the two types you used. You’ve already learned about strings; 5
9
Code
the official Swift type goes by the same name, and uses the capital letter naming
 (title: String, points:
Types and Properties Enter the following to start creating an instance of your challenge struct, stopping
Int)
Make an instance of a struct by with the open parenthesis (:
supplying values for its properties.
var noStrawsChallenge = Challenge(

Look at the bottom of the playground. This time, there’s a code completion
highlighted in
blue that you can use as a shortcut.

Press Return to insert it String

into your code: Int
Challenge(title: , points: )

Now that your structure has properties, you’ll need to provide values for each
instance.
Each placeholder indicates the type of the property, which you replace with a
specific value. Replace the first placeholder with "No Straws Challenge" and the
second placeholder with 5 to make a specific unique Challenge instance. Then print
it to the console:
var noStrawsChallenge = Challenge(title: "No Straws Challenge", points: 5)
print(noStrawsChallenge)

Explore You can also review the values directly without printing by clicking the result icons 6
0
Code
( )
Types and Properties You can access the values of these properties individually using dot notation. Try
Access individual properties of a printing the values of each property using the following code:
structure instance.
print(noStrawsChallenge.title)
print(noStrawsChallenge.points)

Property
Variable (structure name
Do
instance)
t

Run your code and review the console output.

You can also use dot notation to modify an existing structure instance. Use the equal
sign to assign a new value of the correct type to the desired property. For example,
add the following line to the end of your page:
noStrawsChallenge.points = 8

Add another print line at the end to show the new modified state of the challenge
using string interpolation:
print("The \(noStrawsChallenge.title) could score you
\(noStrawsChallenge.points) points!”)

Explore 6
1
Code
Types and Properties Your completed exercise should now look like this:
Review your work.

Challenge: In addition to String and Int, you can use Bool to represent values that can
either be true or false and Double to represent decimal numbers, such as 3.14. If you’ve
created structures for your app’s data types, practice replacing your comments with
real properties and creating instances of them.

Is there a property that doesn’t match one of those four basic types? Try to create a new
structure to represent it, then use it as the type of the property. When you create an
instance, you’ll have to create an instance of the property’s structure as well. If you’re
feeling adventurous, you can take this exercise as far as you want, nesting structures 6
Explore
inside others to create complex data types. 2
Code
Link Screens
Draw lines that connect content to the Calendar Day
screens you outlined and grouped. Item Detail
View Summary
Screens within each global category Calendar with current Summary of today’s
recycling Type of item
are often organized in a sequential date

flow from one to the next. Summary of the Itemized list of today’s
recycling Weight
month’s items
You might notice that some screens
have many outgoing lines while others View a day’s recycling View details for a logged
Date
log item
have none. Don’t worry — you’ll
organize them Add new items to trash
or recycling
in the next exercise.

Add Item Recycling

Numbers and
Select trash or recycling descriptions of
commonly accepted
recyclable plastics
Select by weight or by
item
Recycling instructions

Input details: date, type,

weight

Recycling information

Submit items

Cancel entry

Prototype | 6
3
Map
Link Screens
Copy your existing screen outlines here
and link them together.
You’ll probably need one slide per group.
After you paste your outlines, resize
them so they all fit on the screen.
Arrange the screens so that related ones
are close to each other.
Ungroup your slides before you add
links. Select all the screens and choose
Arrange > Ungroup or press Option-
Command-G.
Change the color of boxes that trigger
the presentation of a different screen.
Use a connection line to link from a
colored box
to the screen it leads to.

Prototype | 6
4
Map
 For each item that
presents another
screen, add a link from
that item to the screen

Prototy it presents.

To add a link to another

pe
Add links between related screens. slide, right-click an
Linking slides is the process of object and choose Add
creating Link > Slide or press
tap targets on a Keynote slide that
Command-K. Choose
jump
to a corresponding slide. Slide, then select Slide
You may want to add highlights to the (the last item in the
same items you just highlighted in list), and enter the slide
your
app map to make this exercise easier. number.

After you’ve finished, try playing your

Keynote prototype and click the links.
(You can play your presentation on an
iPhone to get a feel for how your app
will look and feel on a device.)

Prototype | 6
5
Map
Prototy
pe

Create Tabs
Add Navigation Wireframe
Create Modals
A wireframe is a minimal working prototype. By the end of
Add Interface Elements
this stage, you’ll have a functioning Keynote prototype that
simulates the behavior of your app.

You’ll build a wireframe from your app’s architecture map by

converting screen outlines into a sketch of the interface. This
is an organized process, starting with the top-level
navigation elements and progressively drilling down to the
elements on each screen.

6
6
 Exampl
e
Create Tabs
A tab bar is the most common form of Calendar Day
global navigation in apps. It lets Item Detail
View Summary
people quickly switch among different
Calendar with current Summary of today’s
sections of an app. Because it’s always date recycling Type of item

at the bottom of the screen and

doesn’t change, users can rely on the Summary of the
month’s items
Itemized list of today’s
recycling Weight

tab bar no matter where they are in

the app. View a day’s recycling View details for a logged
item Date
log

In the following Keynote exercise,

Add new items to trash
you’ll or recycling

add a tab bar to your prototype.

If your app doesn’t have multiple top- Add Item Recycling
level navigation categories, you might
find a tool bar useful. Use a tool bar at Numbers and
Select trash or recycling descriptions of
the bottom of commonly accepted
recyclable plastics
a screen to provide important actions Select by weight or by
for that screen. item
Recycling instructions

Never use a tab bar and a tool bar on Input details: date, type,
weight
the same screen.
Recycling information

Submit items

Cancel entry

Prototype | 6
7
Wireframe
 Set up a global tab bar.

1. Copy and paste a tab bar

from the iOS Templates+UI-
Elements Keynote
Prototy presentation into a slide of
your prototype.
pe
Add a tab bar to your prototype
2. Ungroup it by right-clicking
screens and link each tab to its main
screen. and choosing Ungroup or by
After you’ve finished, try playing your pressing Option-Shift-
Keynote prototype and click the tabs Command-G.
to navigate between screens.
Congratulations! You’re one step 3. Set the names and icons of
closer to a prototype that looks and
the tab items to match your
feels like a native iOS app.
navigation categories.

4. For each tab item, add a link

from the tab item to the main
page for that navigation
category.

5. Group the tab bar again.

Select
all its items, then either right-
click and choose Group or
Prototype | press Option-Command-G. 6
8
Wireframe
 Create a tab bar for each main
screen.

1. Copy and paste the updated tab

bar into each main screen outline
Prototy in your prototype.

pe
Add a tab bar to your prototype
2. For each main screen, use the
standard iOS blue to highlight the
screens and link each tab to its main
screen. icon and title of its tab; make the
After you’ve finished, try playing your other screens gray.
Keynote prototype and click the tabs
to navigate between screens.
Congratulations! You’re one step
closer to a prototype that looks and Create tab bars for all child
feels like a native iOS app. screens.

3. Copy and paste the tab bars from

each main screen to its children.

Prototype | 6
9
Wireframe
 Exampl
e
Add Navigation
Find linear paths between the screens
Summary Calendar Today Today Item Detail
in your app map.
Linear paths between screens are Calendar with current Summary of today’s
recycling Type of item
usually managed through hierarchical date

navigation. Summary of the Itemized list of today’s

recycling Weight
month’s items
The navigation bar manages a
sequence View a day’s recycling View details for a logged
Date
log item
of hierarchical screens. Choosing an
item onscreen pushes the next one in Add new items to trash
or recycling
from the right, and tapping the Back
button allows the user to go to the
previous screen. Today Add Item Add Item Recycling

The title of the current screen appears

Numbers and
in the center of the navigation bar. The Select trash or recycling descriptions of
commonly accepted
Back button appears on the left, and recyclable plastics
often takes the title of the previous Select by weight or by
item
screen. The right side of a navigation Recycling instructions

bar can contain actions such as Add Input details: date, type,
weight
and Search.
In the following Keynote exercise, Recycling information

you’ll
add navigation bars to your prototype. Submit items

Cancel entry

Prototype | 7
0
Wireframe
 For each screen in your
prototype:

1. Delete its name.

2. Copy and paste a navigation bar

Prototy from the iOS Templates+UI-

pe
Add a navigation bar to the top of
Elements Keynote presentation.
(Choose the one most appropriate
each screen outline and link their Back
buttons. to this screen.)

3. Set the title of the navigation bar.

(If the screen’s name is long, you
might choose a different title for
the navigation bar.)

4. Delete extraneous items in the

navigation bar.

5. Link the Back button to the

previous screen, if applicable.

Prototype | 7
1
Wireframe
 Exampl
e
Create Modals
Modals slide up from the bottom and
Identify focused activities and create
Summary Calendar Today cover the screen that triggered them. Today Item Detail
modal screens. Therefore, they present differently. The
tab bar is no longer visible and the
Modality is a design technique that Calendar with current Summary of today’s navigation bar is contained within the
recycling Type of item
helps people focus on a self-contained date
modal screen.
task or Summary of the Itemized list of today’s
Weight
set of closely related options. A modal month’s items recycling

presents content in a temporary View a day’s recycling View details for a logged
Date
mode that’s separate from the log item

user’s previous context Add new items to trash

or recycling
and requires an explicit action to exit.
Always include a button that dismisses
Cancel Done
the modal view — in the main screen, Add Item Add Item Recycling

the navigation bar, or both. For

Numbers and
example, you might use a Done or Select trash or recycling descriptions of
commonly accepted
Cancel button. Including a button recyclable plastics
Select by weight or by
ensures that the modal view is item

accessible to assistive technologies and Recycling instructions

Input details: date, type,

provides an alternative to dismissal weight

gestures.
Recycling information

Submit items

Cancel entry

The first screen in a modal does not have a

Back button. If your modal moves to a
secondary screen, then a Back button is used.
Prototype | 7
2
Wireframe
Prototy
pe
Find screens that present a focused
activity to the user and convert them
to modals
by removing the tab bar and updating
the navigation bar.

Prototype | 7
3
Wireframe
Add Interface
Elements
Use standard iOS elements to convert Day Summary
your screen outlines into wireframes.
S M T W T F S
iOS users expect standard interface 2 2 2 2 2 2 2
3 4 5 6 4 8 9
elements in apps when presented with
information, controls, or navigational Summary of today’s recycling
elements. And iOS developers
Trash Recycled
consistently adopt a set of common
practices, which are documented in
the Human Interface Guidelines. Itemized list of today’s
recycling
1lb
2lb
View details for a logged item

Add new items to trash or

recycling TODAY’S LOG

•�
Paper �
•�
Breakfast leftovers �

•�
Coffee grounds �

Prototype | 7
4
Wireframe
 1. Review the UI elements in the
Human Interface Guidelines.

2. Decide which elements will be

helpful in your app.
Prototy 3. Paste the elements from the iOS

pe
Convert the remainder of your screen
Templates+UI-Elements Keynote
presentation.
outlines into UI elements.
4. Create any custom elements
you need that aren’t in the
template.

5. Change your screen outline

boxes from text to UI elements.

Prototype | 7
5
Wireframe
Explore
Code

Event-Based Programming
In an iOS app, the user is in control. Their interactions are represented to your app
as a
series of events. Your app responds to each event by interpreting the user’s action
and acting on their command. You write event handlers — blocks of code that
In this exercise, you’ll: perform the work — and attach them to interactive elements such as buttons, text
• Create a button. fields, sliders, and switches.
• Update the console when the
button is clicked. Consider a button in your app. How do you know when the user has tapped the
• Update the value of a variable.
button?
The SwiftUI framework provides a Button type that detects user taps and lets you
attach
the specific action you want when the button is tapped. In this exercise, you’ll
create a
button that performs an action.

To start, be sure “My Playground” is open in the Swift Playgrounds app. Then
7
create a new page and name it “Event-Based Programming.” 6
Event-Based Enter the following two lines to import the PlaygroundSupport and SwiftUI
Programming frameworks:
Create a button that prints to the import PlaygroundSupport
console.
import SwiftUI

Now create a button with the following three lines of Swift, being careful that the
curly braces { }, parentheses ( ), and double quotes " " all match:
var challengeButton = Button("Complete Challenge") {
print("Completed a challenge.")
}

Creates a variable for the button.

From start to finish, here’s what this code does:
Creates an instance of Button — a type of
var challengeButton
SwiftUI view — and sets its title with a String
value.
Button("Complete Challenge")
Defines the button’s action, which will execute
{
each time the button is clicked.
print("Completed a challenge.")

Now add one more line to add the button to the live view:
PlaygroundPage.current.setLiveView(challengeButton)

Explore 7
7
Code
Event-Based Run your code. You’ll see the live view with your button. Click the console button; you’ll
Programming see an empty console. Now click the Complete Challenge button. You should see the
Create a variable that the button will result of the action appear in the console.
update.
As the user interacts with the views in an app, the app often updates its model data in
response.
For example, you might want to keep track of the number of challenges the user has
completed.

Add a variable to keep track of the total number of challenges completed and include it in
your printed string:
var numberCompleted = 0
var challengeButton = Button ("Complete Challenge") {
print("Challenge Completed! Total number of challenges completed: \(numberCompleted).")
}

Run your code and click the button a few times.

You should see the following in the console view:

Challenge Completed! Total number of challenges completed: 0.
Challenge Completed! Total number of challenges completed: 0.
Challenge Completed! Total number of challenges completed: 0.
Challenge Completed! Total number of challenges completed: 0.

Explore 7
8
Code
Event-Based Of course, you want the number of challenges to increase each time the button is
Programming clicked.
Update the variable when the button is
clicked. To do this, you’ll update the value of the variable in the button’s action. You’ve
changed the property of a structure instance by assigning it a new value. But this
time, you have to base
the new value on the existing value of numberCompleted. You might think to assign 1 to
the variable as shown below:
var challengeButton = Button ("Complete Challenge") {
numberCompleted = 1
print("Challenge Completed! Total number of challenges completed: \
(numberCompleted).")
}

However, this won’t work because the variable will change from 0 to 1 the first time
the button is clicked, but won’t change afterward.

Explore 7
9
Code
Event-Based Instead, you’ll refer to the value of the variable itself when updating it. Modify your
Programming code so it looks like this:
Update the variable when the button is var numberCompleted = 0
clicked.
var challengeButton = Button ("Complete Challenge") {
numberCompleted = numberCompleted + 1
print("Challenge Completed! Total number of challenges completed: \
(numberCompleted).")
}

To understand what’s happening, read the line from right to left:

numberCompleted = numberCompleted + 1
2. Assign the new value to 1. Get the current value of
numberCompleted. numberCompleted and add 1 to it.

Run your code again. Click the Challenge Completed button a few times. Each time
you complete a new challenge, the total number of challenges completed should
change in
the console.
Explore 8
0
Code
Event-Based Your completed exercise should now look like this:
Programming
Review your work and try a challenge.

Challenge: Change the title of the button, for example, “Another Challenge
Down!”

Change the code in the action to construct and print a message of your choosing.

Make a button that counts down from a starting value.

Make a button that updates the value of a String variable using the same
technique you used with numberCompleted. 8
Explore
1
Code
Prototy
pe

Size Tap Targets

Inset Content Refine
Judge Weight and
Now that you have a functioning prototype, it’s time to apply
Balance
important interface design guidelines. By the end of this
Check Alignment
stage, your prototype will feel at home on iOS and in the
hands of your users.

A solid interface design is critical to a good iOS experience.

You’ll learn about the most important properties of a good
interface and apply those lessons to make your prototype a
pleasure to use.

8
2
Size Tap Targets
Users should be able to tap the icons
or buttons in your app. If the tap
target is too small, users will have
trouble triggering it.
If it’s too big, it can interfere with
another button that’s close to it.
Try to maintain a minimum tappable
area
of 44pt x 44pt for all controls.

Prototype | 8
3
Refine
Inset Content
Many actions in iOS require the user to
use a swipe gesture to trigger them.
People use swipe gestures at the
bottom edge of the display to access
features like the Home screen and app
switcher. These gestures could cancel
custom gestures you implement in this
area. The far corners of the screen can
be difficult areas for people to reach
comfortably.
In general, content should be centered
and symmetrically inset so it looks
great
in any orientation and isn’t clipped by
rounded corners, hidden by a sensor
housing, or obscured by the indicator
for accessing the Home screen. Margins Safe area

Prototype | 8
4
Refine
Judge Weight and
Balance
Large items catch the eye and appear
more important than smaller ones.
They’re also easier to tap, which is
especially important when an app is
used in distracting surroundings, such
as in the kitchen or a gym. In general,
place principal items in the upper half
and near the left side of the screen in
a left-to-right reading context.

Prototype | 8
5
Refine
Explore
Code

Composing Views
All apps have a view hierarchy. Larger views in your app (such as a screen) contain
smaller
ones (such as lists), which contain even smaller ones (a list’s individual rows). How
much
In this exercise, you’ll: further could you break down the hierarchy?
• Learn how to display colors.
Views are powerful because you can compose them in myriad ways to create
• Arrange views in horizontal and
vertical stacks. intricate and beautiful interfaces. In this exercise, you’ll get a taste of the power of
• Nest stacks. view composition.
• Add other kinds of views to
stacks. This is the only code exploration that won’t explain every line of code you write.
SwiftUI is a complex and powerful framework. To see it at work, you’ll have to forgo
understanding exactly how your code works.

To start, be sure “My Playground” is open in the Swift Playgrounds app. Then create
a new page and name it “Composing Views.”
8
6
Composing Views Start by importing your two favorite frameworks:
Display a color view. import PlaygroundSupport
import SwiftUI

Now enter the following code. You won’t understand all of it, though you should
notice that you’re creating a new structure named ContentView and a new kind of
property named body. Be sure you’re nesting the curly braces correctly and that
you have one closing brace for each opening brace.
struct ContentView: View {
var body: some View {
Color.red
}
}

PlaygroundPage.current.setLiveView(ContentView())

The live view should open to show a red view that fills all the available space, as
shown above. As you may have guessed, Color is a type of SwiftUI view that simply
displays a color.

For the remainder of this exercise, focus only onThis

thecode
innermost code, as indicated
defines the
below. views inside
ContentView.
struct ContentView: View {
var body: some View {
Explore 8
Color.red 7
Code
}
Composing Views SwiftUI provides several types of views that allow you to “stack” other views inside of
Arrange views in stacks. them.
The VStack view can arrange many views vertically. Try it by replacing Color.red in your
code with a VStack that arranges three differently colored views.
import PlaygroundSupport
import SwiftUI
struct ContentView: View {
var body: some View {
VStack {
Color.black
Color.green
Color.red
}
}
}
PlaygroundPage.current.setLiveView(ContentView())

The HStack HStack {

view arranges your views horizontally. Replace VStack with HStack and click
Color.black
Run My Code again.
Color.green
Color.red
}

Explore 8
8
Code
Composing Views Vertical and horizontal stacks can be placed inside each other. Replace the contents of
Nest stacks. the HStack with the code below and click Run My Code.
HStack {
VStack {
Color.black
Color.green
}
Color.red
}

You already know two other kinds of SwiftUI views. Try adding a Text view:
HStack {
VStack {
Color.black
Text("Hello Colors!")
Color.green
}
Color.red
}

Explore 8
9
Code
Composing Views Your completed exercise should now look like this:
Review your work and try a challenge.

You’ve just scratched the surface of view composability in SwiftUI. Views can be nested
to an arbitrary level and combined to create the most complex of interfaces.

Challenge: There are many ways to specify Color instances, but for now try displaying
some
other common ones using dot notation, for example, .yellow, .purple, or .blue.

How many flags can you replicate with this technique?

Try adding a button (or several!) to your view hierarchy.

Explore 9
What kinds of interfaces can you simulate using just these five SwiftUI views? 0
Code
Check Alignment
Alignment makes an app look neat
and organized, helps people focus
while scrolling, and makes it easier
to find information. Indentation and
alignment can also indicate how
groups of content are related.

Prototype | 9
1
Refine
Prototy
pe

Define Personality
Design Icon Style
The last stage of prototyping is defining the personality of
your app to set it apart from its peers. By the end of this
stage, you’ll have a prototype that’s as close as it can come
to a real app — one that you’ll be proud to share with your
testers.

Style encompasses a range of elements from color and font

to icons. Now you can use your imagination to create a
cohesive identity for your app.

9
2
Define Personality Primary color Icon set Imagery examples

Complete the style guide template to

ic_name ic_name
apply to your app.

Picking out colors, typography,

ic_name ic_name
images,
and icons — in other words,
branding your app — can be fun. ic_name ic_name
But it’s important to
keep accessibility in mind when Secondary color ic_name ic_name
choosing these UI elements.
San Francisco Typeface
ic_name ic_name
Designed to be consistent with the
simple and clean iOS aesthetic,
system fonts are legible and neutral. ic_name ic_name
SF Symbols
Apple created an icon set that
supports Dynamic Type and the
Bold Text accessibility feature.
Typography
Color
iOS offers a range of system colors
that automatically adapt to vibrancy
and changes in accessibility settings.

Prototype | 9
3
Style
 1. Update important elements in your app
(for example, highlighted tabs and
buttons) to match the primary color in
your style guide.

Prototy 2. Use the secondary color sparingly to

call attention to important details.
pe
Incorporating style into the provided
3. Update icons to match your style guide.
resource.
4. Update fonts to match your style guide.

5. Standardize imagery.

Prototype | 9
4
Style
Design Icon
Use the templates to try out a few icon
designs. Make more copies of this slide
if you need to.
Your app’s icon will distinguish it on a
user’s screen from all the other apps
they use on their phone.
Make it simple
Find a single element that captures the
essence of your app and express that
element in a simple, unique shape. Add
details cautiously. An icon should have
a single, centered focus point that
immediately captures attention. If an
icon’s content or shape is too complex,
its essence may not be discernible,
especially at smaller sizes.
Make it recognizable
You don’t want your users to have to
examine the icon to figure out what it
represents and what your app does;
they should get the gist immediately.
Using transparency or a busy
background can impede recognition.
Test your icon against varying
backgrounds — dark
and light, simple colors, patterns, and
photos — so you can be sure that it
stands out in all contexts.

Prototype | 9
5
Style
 1. Create a tap target link of your
icon.

2. Use the Magic Move transition

from opening your app to a
Prototy launch screen.

pe
Create a Home screen in your
3. Set a timer to move to the next
screen that the user will land on.
prototype so that users can tap your
app icon.
Test your icon on different
backgrounds.

Prototype | 9
6
Style
Test
Testing your prototype will help you understand whether your
ideas and assumptions are correct. In the test phase, you’ll
architect your tests, create a plan to execute them, and
prepare by gathering users and creating a checklist.

9
7
Tes
t

Define Tests
Create User Journeys Architect
Define a Process
The first part of testing your app is understanding what and
Plan an Introduction
how to test. By the end of this stage, you’ll have a plan that
you can use to write your test scripts.

You’ve defined your app’s goals; how will you determine

whether you’ve achieved them? You’ve implemented a
prototype; how do
you expect it to be used? You’ll define tests that will answer
those questions, and you’ll also take a step back to think
about setting expectations — yours, and those of your users.

9
8
 Exampl
e
Define Tests Users want to do this with our app:

For each goal that users want to

accomplish with your app, define the Add trash or recycling weight to a day
steps they’ll take to accomplish it and
describe any existing flow the user
may be in.
The user will need to have completed these steps first:
Before you design your tests, you
need to decide what’s important to
test. Your tests will teach you what Have either trash or recycling to throw out
users find useful as well as how well
you’ve designed your app. You’ll also
learn about the assumptions you
made along the way.
Users need to complete these critical tasks:
If you select the right set of tests with
your broad goals in mind, the results
Classify whether the item is trash or
will help you draw clear conclusions
recycling
about where you’re on track and
where you need to correct course.

Estimate the weight of the item

Submit the entry

Test | 9
9
Architect
Define Tests Users want to do this with our app:

For each goal that users want to

accomplish with your app, define the
steps they’ll take to accomplish it and
describe any existing flow the user
may be in.
Before you design your tests, you The user will have needed to complete these steps first:
need to decide what’s important to
test. Your tests will teach you what
users find useful, as well as how well
you’ve designed your app. You’ll also
learn about the assumptions you
made along the way.
Users need to complete these critical tasks:
If you select the right set of tests with
your broad goals in mind, the results
will help you draw clear conclusions
about where you’re on track and
where you need to correct course.

Test | 10
0
Architect
Create User Journeys
For each feature you want to test, use Calendar Day
a copy of your screen outline map to Item Detail 8

View Summary
create
Calendar with current Summary of today’s
a user journey map. Number and label date recycling Type of item

each step from your previous

exercises, attaching each to the Summary of the
month’s items
Itemized list of today’s
recycling Weight

screen that the

user will be on. View a day’s recycling
1
View details for a logged
item
7
Date
log

A journey map visually represents

Add new items to trash
what or recycling
2

a user will need to do to complete a

task. These might be interactions like
taps or swipes, but they may also Add Item Recycling
include taking
Numbers and
a picture, speaking into the Select trash or recycling
3
descriptions of
commonly accepted
microphone, recyclable plastics
Select by weight or by
or bringing their device close to an item
4

object Recycling instructions

in the world (for example, an NFC Input details: date, type,

weight
5

reader). Add and confirm a recycled

1. Tap a date.
item Recycling information

2. Tap to add a new item.

3. Select Recycling. Submit items 6

4. Enter by item.
5. Enter details. Cancel entry

6. Submit.
7. Choose the new item from the
list.
8. View the details.

Test | 10
1
Architect
 Exampl
e
Define a Process We plan on testing these user journeys:

Summarize the requirements and

parameters of your test. A list of the user journeys
Before you build the tests themselves,

you should create a standardized

process for how you’ll test individual We will record our findings using:
users. Having consistent data is
critical to a successful analysis of the
test results. Paper, video, audio only, screen recording

We will show our prototype by: We will conduct the test at:

Screen share, in person Time, date, location

We will need the following equipment:

MacBook, iPhone, chairs, desk, camera, tripod

This person will take notes/record: This person will conduct the user test:

John Appleseed Jane Macintosh

Test | 10
2
Architect
Define a Process We plan on testing these user journeys:

Summarize the requirements and

parameters of your test.
Before you build the tests themselves,

you should create a standardized

process for how you’ll test individual We will record our findings using:
users. Having consistent data is
critical to a successful analysis of the
test results.

We will show our prototype by: We will conduct the test at:

We will need the following equipment:

This person will take notes/record: This person will conduct the user test:

Test | 10
3
Architect
Plan an Introduction Write a short introduction about yourself and your project and explain the goals of your test.

Create an introduction that you’ll use

with each participant.
You’ll want to set the tone prior to
each test so that all your participants
have consistent expectations. By
anticipating issues that might arise,
Participants can be intimidated by the word “test.” Be sure to let your user know that there
you’ll help both your participants and
are no wrong answers and any feedback is useful feedback. What else might make your
yourself feel at ease, and you’ll have
participant feel uncomfortable? How might you mitigate those feelings?
the best chance to gather useful
information.

If you’re recording a participant, be sure to get their consent for audio and/or video. Let the
participant know why recording is beneficial to your test. Consider what you’ll do if they
decline to consent.

Participants usually want to know how much time they need to commit to the testing session.
How long do you think it will take for users to complete tasks and answer your follow-up
questions?

Test | 10
4
Architect
Tes
t

Outline Scripts
Write Scripts Script
Anticipate Errors
Now that you’ve planned your testing, it’s time to focus
on the details. By the end of this stage, you’ll have a
complete set of test scripts.

You’ll define the flow of your tests to keep the user

engaged and oriented, dig into the kinds of questions
each test can answer, and prepare for the unexpected.

10
5
 Exampl
e
Outline Scripts This is the sequence of tasks to test: Context we should provide prior to the test:

Describe each test and the order

they’ll Give the participant a group of objects
Add recycling or trash to daily summary.
be conducted. Be sure to include any that are trash and recycling.
contextual information the user will
need
to complete the task successfully. Discover information about recycling
Your testing script should tell a story numbers.
that the user can relate to. The order
of tasks should create a natural flow
that puts the user into the right frame
User should reach the achievement when
of mind and keeps them engaged Check their achievements.
they successfully add recycling.
throughout the process. Where
possible, put your tests in the order
the user would encounter them in
their everyday lives. Understand challenges to being more
Remember that some tasks are more environmentally conscious.
critical to test than others. What are
the most important features to test?
You might want to test those first in
case you run out of time.
For tests that don’t flow naturally from

one to the next, it’s especially

important
to provide context so you don’t
interrupt the flow of the script. Make
sure you identify those situations and
think carefully about how you’ll keep
the user focused
and oriented. 10
Test |
6
Script
Outline Scripts This is the sequence of tasks to test: Context we should provide prior to the test:

Describe each test and the order

they’ll
be conducted. Be sure to include any
contextual information the user will
need
to complete the task successfully.
Your testing script should tell a story
that the user can relate to. The order
of tasks should create a natural flow
that puts the user into the right frame
of mind and keeps them engaged
throughout the process. Where
possible, put your tests in the order
the user would encounter them in
their everyday lives.
Remember that some tasks are more
critical to test than others. What are
the most important features to test?
You might want to test those first in
case you run out of time.
For tests that don’t flow naturally from

one to the next, it’s especially

important
to provide context so you don’t
interrupt the flow of the script. Make
sure you identify those situations and
think carefully about how you’ll keep
the user focused
and oriented. 10
Test |
7
Script
 Exampl
e
Write Scripts We want to understand more about:

For each test, determine which

questions and observations you’ll use.
Will users be able to successfully sort and enter trash and recycling into the app?
You can choose from different types of
questions when building a testing
script. You might use one or more of
We could answer this by having users complete a rank order of the screen.
them for a given test, and you might
ask them (more than once!) during a
particular user journey. Looking at this screen, rank the items you see from most to least important for discarding
Refer back to your user journeys; trash or recycling.
they’ll help you decide when and how
to gather your data.
We could gain insights for this by having users complete a task observation.

Your participant should be starting from a screen that they’re most likely to be on when starting
the task. Observe and note where they’re successful or unsuccessful completing parts of the task.
To gather more information, ask what they think about completing the task.

If you were to discard these items, how might you record that in the app?

We can dig deeper about why a user makes decisions by asking about expectations.

Your participant should look at the screen and talk through what they are seeing and what they
expect each element will do. For example, if a participant mentions the “plus icon,” you can use it
as an opportunity to ask more questions on how it might work.

When looking at this (Today) screen, what do you expect you’ll be able to complete on this
screen?

Test | 10
8
Script
Write Scripts We want to understand more about:

For each test, determine which

questions and observations you’ll use.
You can choose from different types of
questions when building a testing
script. You might use one or more of
We could answer this by having users complete a rank order of the screen.
them for a given test, and you might
ask them (more than once!) during a
particular user journey.
Refer back to your user journeys;
they’ll help you decide when and how
to gather your data.
We could gain insights for this by having users complete a task observation.

Your participant should be starting from a screen that they’re most likely to be on when starting
the task. Observe and note where they’re successful or unsuccessful completing parts of the task.
To gather more information, ask what they think about completing the task.

We can dig deeper about why a user makes decisions by asking about expectations.

Your participant should look at the screen and talk through what they are seeing and what they
expect each element will do. For example, if a participant mentions the “plus icon,” you can use
it as an opportunity to ask more questions on how it might work.

Test | 10
9
Script
 Participants who get stuck completing a task will often ask you for help. It’s important to dig
Anticipate Errors deeper into why they’re stuck. Ask things such as, “What do you expect it to do?” How might
Make a plan for what you’ll do when you get your user back on track without leading them? What questions will help you better
the user gets stuck or asks you a understand why they’re stuck in a task?
question.
It’s especially important not to lead
the user through a test. You’ll be
most tempted to step in when
something goes wrong. Your
interactions can bias the user and
rob you of important insights,
so be sure you’ve planned for how to When participants are completing a task, there might be smaller elements that you can test.
ask and answer questions to Things like icon recognition, text clarity, and color contrast can impact how the user completes
minimize their influence on the test. the task. Consider what small tests can happen while a participant completes tasks.

When participants get quiet, they’re usually figuring things out. You want them to talk through
what they’re experiencing. How might you gently remind them to talk through their thought
process? Where might they need a moment to think during the test?

Test | 11
0
Script
Tes
t

Gather Users
Perform Last Check Prepare
You’re almost there! By the end of this stage, you’ll be ready
to test your prototype.

The quality of your data depends on the users you test with,
so it’s important to select them carefully. And you’ll want to
make sure
that you’re ready right at the start to provide each
participant with
an enjoyable experience.

11
1
Gather Users Participant’s name Date and time Location

Make a list of the users you’ll enroll

in your testing, and plan a date and
location for each one.
The information you gathered in the
Discover phase will be beneficial
during testing. Select users who are
directly affected by the challenges
you identified and who would be
most likely to use your app.
It takes at least three people to
begin to see patterns in user tests,
so be sure to enroll enough
participants so that you can
accommodate a cancellation or two.

Test | 11
2
Prepare
Perform Last Check Are all your questions nonleading?
Use the checklist to double-check that
you’re ready to start testing.
Be sure that the testing script will run Can you run a script in your sketch or prototype
smoothly when talking to users. Use
this checklist to complete a dry run of smoothly?
your testing script.

Do you have a plan for how you’ll restart the task

process if the user gives up?

Does your testing script cover the features that are

most important to the goal?

Do you have a plan for where you’ll conduct the

testing? Remote vs. in person?

Test | 11
3
Prepare
Validate
You’ll have a lot of information to digest after testing your
prototype. It’s important to summarize and draw the correct
conclusions from your testing data so that you know how to
improve your app. You’ll start by formatting your data to make
it digestible. Then you’ll summarize your observations by
discovering relationships between them. Then you’ll zoom out
to root causes and identify core issues.

11
4
 Exampl
e
Gather Notes
Create succinct notes from your Participant: Christina Ahmed
observations for each participant.
After user testing, you’ll have a lot of
raw data. Before you draw any Didn’t find it
conclusions, necessary to
Wanted to use Wished she could Unclear on what
Able to enter change the date.
it’s important to convert it to a the scale enter trash and classified
trash and She wouldn’t
consistent format. Don’t worry about because she has recycling on the something as
recycling. have entered
how to organize or categorize it. one at home. same screen. recycling.
something after
the fact.
The more you can narrow your
observations down to single, focused
data points, the easier it will be to Would like to Would like to see
have seen which of her
organize them. Likes that she
possible Unclear on what Unsure where friends are
can see both
This activity could involve transferring achievements Rewards and she would get an participating
active and past
and splitting up written notes, rather than just Waterway mean. invite code from. rather than just
challenges.
ones she’s the number of
summarizing survey answers, or
earned. friends.
analyzing video or audio.
You might need many notes for each
participant. If so, consider organizing
the notes by task to be completed per
participant.

Validate | Gather 11
5
Notes
Gather Notes
Create succinct notes from your Participant:
observations for each participant.
After user testing, you’ll have a lot of
raw data. Before you draw any
conclusions,
it’s important to convert it to a
consistent format. Don’t worry about
how to organize or categorize it.
The more you can narrow your
observations down to single, focused
data points, the easier it will be to
organize them.
This activity could involve transferring
and splitting up written notes,
summarizing survey answers, or
analyzing video or audio.
You might need many notes for each
participant. If so, consider organizing
the notes by task to be completed per
participant.

Validate | Gather 11
6
Notes
 Exampl
e
Form Key Insights
Look through your notes and group This is our key
similar ones. Summarize those groups Jamil Green insight:
as key insights into your users’ Unclear on what
behaviors. classified
something as
An affinity diagram helps you visualize recycling.
similarities across participants and
identify patterns.
As you group your notes, the patterns
Karla Gonzalez
you see should help you draw some Karla Gonzalez
“Oh I wish that
initial conclusions about your data. “I wonder what
information was
this is for next to
Don’t analyze the reasons for user somewhere more
recycling?”
visible.”
behavior yet; just focus on finding
themes.
Users are confused about whether
Jody Akana
Jody Akana an item is recyclable.
Threw out
“I don’t know if
recycling. Unable
this is recycling
to find
or not… what
information
does the 5
about recycling
mean?”
numbers.

Validate | Form Key 11

7
Insights
Form Key Insights
Look through your notes and group This is our key
similar ones. Summarize those groups insight:
as key insights into your users’
behaviors.
An affinity diagram helps you visualize
similarities across participants and
identify patterns.
Once you start to see a pattern in your
groupings, you can summarize those
groups as key insights into user
behavior.
Don’t analyze the reasons for their
behavior yet; just focus on finding
themes.

Validate | Form Key 11

8
Insights
 Exampl
e
Draw Conclusions We tested this task:

For each task, summarize your key

insights and review them in light of Do users discover the information about what’s considered recycling?
your assumptions to draw overall
conclusions.
The final phase of analyzing your
results is to look for big patterns. We expected users would complete the task by:
Identifying these patterns will guide
you toward decisions about iterating
on your design. Tapping the icon to reveal more information.
When drawing conclusions from key
insights, keep things general. Focus on

root causes rather than particular

We observed this instead:
issues.

Users are confused about whether an item is recyclable.

We’ve made these conclusions:

Users want a more prominent reminder of

The icon isn’t well understood.
what the recycling numbers mean.

Users have difficulty remembering It’s important to also tell users where to
recycling numbers. find recycling numbers on products.
Validate | Draw 11
9
Conclusions
Draw Conclusions We tested this task:

For each task, summarize your key

insights and review them in light of
your assumptions to draw overall
conclusions.
The final phase of analyzing your
results is to look for big patterns.
We expected users would complete the task by:
Identifying these patterns will guide
you toward decisions about iterating
on your design.
When drawing conclusions from key
insights, keep things general. Focus on

root causes rather than particular

issues. We observed this instead:

We’ve made these conclusions:

Validate | Draw 12
0
Conclusions
Iterate
Look closely at your first prototype and you’ll see a world-
changing app beginning to take form. Now comes the critical
phase of any design — working toward that vision by applying
all you’ve learned during your design process. You’ll use the
conclusions from your analysis as a guide to reevaluate
choices you made throughout your app design journey. Then
you’ll revisit different elements of your design, looking for
opportunities to make improvements large and small.

12
1
 Exampl
e
Organize Your
Conclusions
Before you use your conclusions to Interface Navigatio
revisit steps in your design process,
group similar conclusions. Seeing
elements n
important themes will help you decide
where to focus your efforts. The flow for
It’s too hard to
Your conclusions may range from adding a new
find the button to
surfacing important content to making The icon isn’t recycling item
add a new item.
it easier to navigate the app and well understood. requires too many
reducing visual clutter. actions.

You might also discover that you’ve

misunderstood your users, or you’ve
omitted a critical element of your test
plan. Adding multiple
Graphs and items requires the
charts don’t have user to repeat the
enough contrast. same flow for
each one.

Wordin Many users don’t

understand the
g phrase “Recycling
Number.”

Iterate | Organize Your 12

2
Conclusions
Go Back: Define If you heard comments like these: Revisit these sections in Define

If your groupings include the

following topics, consider revisiting Research Competitors, Find
Your competitor did a feature better
these elements of Define. Differentiators

Needing to use two hands Consider Diversity

Observe, Analyze Causes, Prioritize

Issue not being solved
Features

Observe, Analyze Causes, Define Key

Wished for a different feature
Functions

A feature not being recognized Prioritize Features

Iterate | Go Back: 12
3
Define
Go Back: Prototype If you heard comments like these: Revisit these sections in Prototype

If your groupings include the

following topics, consider revisiting Outline Screens, Group Screens, Link
Unable to understand a task
these part Screens
of Prototype.

Unable to read content Style, Judge Weight and Balance

Add Navigation, Create Modals, Add

Unable to complete a task
Interface Elements

A feature not being recognized Add Interface Elements

Disconnect of what the app icon means Design Icon

Outline Screens, Group Screens, Link

Didn’t understand categories
Screens

Iterate | Go Back: 12
4
Prototype
Go Back: Test If you heard comments like these: Revisit these sections in Test

If your groupings include the

following topics, consider Confused as to what you want them to Define Tests, Outline Scripts, Write
revisiting these parts of Test. do Scripts

I know that because you called it this Anticipate Errors

Define Tests, Outline Scripts, Create User

Script didn’t match thought process
Journeys

Iterate | Go 12
5
Back: Test
Learn to Code with Apple.
You don’t need prior experience to dive right into creating apps for Apple platforms. Apple’s app development curriculum makes it
easy for anyone
developer.apple.com/learn/curric
to code in Swift just like the pros — whether it’s for a semester in school, for professional certification, or to advance your skills.
ulum
Learn more at developer.apple.com/learn/curriculum.

App Showcase Guide Swift Coding Club

Demonstrate your ingenuity by sharing your Swift Coding Clubs are a fun way to design apps.
achievements with community events, such as project Activities are built on learning Swift programming
demonstration events or app showcases. The App concepts in Xcode playgrounds on Mac. Collaborate
Showcase Guide provides practical support to help you with peers to prototype apps and think about how
apple.co/developinswiftappshowcaseg
host an in-person or virtual app showcase event. code can make a differenceapple.co/swiftcodingclubxc
in the world around you.
uide
Download: apple.co/developinswiftappshowcaseguide ode
Download: apple.co/swiftcodingclubxcode
12
6
© 2021 Apple Inc. All rights reserved. Apple, the Apple logo, iPad, iPhone, Keynote, Mac, Swift, the Swift logo, Swift Playgrounds, and Xcode are trademarks of Apple Inc., registered in
the U.S. and other countries. IOS is a trademark or registered trademark of Cisco in the U.S. and other countries and is used under license. Other product and company names
mentioned herein may be trademarks of their respective companies. App Store is a service mark of Apple Inc., registered in the U.S. and other countries. The Bluetooth® word mark
and logos are registered trademarks owned by Bluetooth SIG, Inc. and any use of such marks by Apple is under license. April 2021