The Design Cycle

By now, you might feel confident in your abilities to create simple apps with little instruction. Have you been thinking about some app ideas of your own and how to make them a reality?

During this course, you've learned the basics of Swift and iOS development. As you've built apps, you've had the benefit of concrete designs to follow. And although you briefly learned the importance of design and how to give your app some flare and personality, the usefulness and design of the apps you've made so far have been secondary to practicing a specific development skill.

As you think about creating your own app, you'll need to consider design, and you'll need some new skills—skills you'll use long before any code is written. In this lesson, you'll learn how to turn an idea into a concrete app design through brainstorming, planning, iterative prototyping, and user interviews.

What You'll Learn

• How to clearly define the problem you want your app to address
• How to create a user persona to assist in making design decisions
• How to create iterative prototypes that end in a concrete design
• How to conduct user interviews to gather feedback on your prototype

Vocabulary

• minimum viable product
• persona
• scope creep

Related Resources

• WWDC 2016: Iterative UI Design Links to an external site.
• WWDC 2017: 60 Second Prototyping Links to an external site.
• WWDC 2017: Essential Design Principles Links to an external site.
• WWDC 2017: Love at First Launch Links to an external site.
• WWDC 2018: Presenting Design Work Links to an external site.
• WWDC 2018: Designing Fluid Interfaces Links to an external site.
• WWDC 2018: I Have This Idea For An App… Links to an external site.
• WWDC 2018: Intentional Design Links to an external site.
• WWDC 2018: The Qualities of Great Design Links to an external site.
• WWDC 2019: Introducing SF Symbols Links to an external site.
• WWDC 2019: What's New in iOS Design Links to an external site.

Guide

Think about your favorite app. What’s its purpose? What problem(s) does it solve? What sort of person would want to use it? Assuming you're thinking about a well-designed app, it's probably fairly easy to answer these questions. The best apps focus on one particular type of user and one or two issues that they face—and therefore have a very narrow and specific set of goals.

The process of designing and planning an app is a process of narrowing in on a specific problem that an app can solve for a specific group of people. This design process involves brainstorming many different ideas, then focusing on one of those ideas and following an iterative pattern of planning, prototyping, and interviewing users to come up with a concrete design for your app.

Brainstorm

Brainstorming allows you to identify problems and come up with possible solutions. In this stage, you might want to identify a few problems you think an iOS app could solve. With these problems in mind, you can brainstorm a list of apps you’d like to build. These could be new ideas you don't think anybody has thought of or they could be ideas for improving or personalizing existing apps. Don't hesitate to browse the App Store or any other source you think might provide inspiration.

For each of your ideas, think about who you want your audience to be. No app gets used by everybody. The more targeted an app is, the more likely it is to truly solve a problem that a group of users experiences. Keep a list of traits that your target audience would likely have. This helps you focus on their needs as you plan your app.

At some point in the brainstorming process, you need to focus on one app idea and one audience. Choose an idea that is both interesting to you and lends itself well to fulfilling the eight design criteria discussed in the Introduction to App Design lesson. After you’ve chosen one app idea, you can focus on its purpose, the problem it solves, and the people it helps.

As you continue through this lesson and learn the basics of planning, prototyping, and interviewing users, try to apply each principle to your app idea.

Plan

The planning stage is where you plan some of your app’s more granular details and figure out how it can achieve its goal. You'll more clearly define the problem you’re trying to solve, create a persona that embodies your target audience, and think about the features you want to include.

Simple Is Best

As you sit down to plan your app, remember that simpler is almost always better. In its initial release, your polished, functional app should solve a problem for a particular group of users. Don't attempt to release version 10 on day one. Instead, it's better to do a great job creating the minimum viable product for your initial idea.

In this case, a minimum viable product refers to an app that implements the smallest set of features to successfully accomplish its goals. As you brainstorm, don't get so attached to an idea that you aren't willing to postpone the feature or scrap it altogether. Allowing your original idea to be diluted by too many features is known among developers as scope creep—which delays the app's release and increases its chances of confusing your target users.

When users open your app, they do so with a specific goal in mind. Too many bells and whistles can overwhelm them and crowd out the features they're looking for. In the same way that a pen and paper are two of the simplest—yet most effective—tools, a simple and focused app is far more useful for your users.

Define the Problem

With simplicity in mind, your first task is to define the problem you want your app to solve. Think of a succinct bullet point that defines why you want to develop your app. Do you want to address a problem you've experienced in the past? It might be something trivial, or it might be more significant. For example, the problem that a game solves may be as trivial as boredom, while a budgeting app might attempt to address an overwhelming burden of debt. Both are equally valid reasons for creating an app.

As an example, imagine you're a connoisseur of toast. The problem you face is finding nearby restaurants that serve quality toast. You're certain that many toast lovers share your pain—so you decide to create an app, named Toast Modern, to solve the problem. You have a clear, narrow purpose for your app: to help toast connoisseurs find high-quality toast near them.

Create a Persona

Now that you've defined the specific problem your app will solve, you can work toward finding a solution. But wait. You skipped a step. Before you undertake any more planning, it's important to create a persona that represents your target user.

In this example, you happen to be a member of your target audience. But it's crucial that you recognize you are not the target user. Of course, you may end up using the app, but your audience may include people with characteristics different from yours. The persona should describe your typical, or average, user. At the same time, you don't want your persona to be so average and abstract that it represents the entire world's population.

Try talking to a few people who might actually use your app. Ask questions that reveal a wide variety of characteristics. Some questions might deal directly with the app—or, in this case, with toast—but you can also ask questions that reveal a sense of the individual's personality. "How often do you eat toast?" "What sort of music do you like?" "What are your favorite restaurants?" Keep track of the responses and then narrow them down to a list of specific attributes. In some cases, it may even be helpful to apply the attributes to a fictitious person.

Creating a persona, by definition, involves a degree of positive stereotyping or profiling. In the end, your persona (complete with attributes) represents the target audience for your app. Equipped with this information, you can keep your app design focused on its primary purpose and its target users.

Create a Feature Set

Now it's time to start brainstorming the basics of your app. List any and all features that might help your defined persona solve the defined problem. List every feature you can think of—you'll trim the list later. Just get the ideas flowing and write them down, as long as they're relevant to the persona and the problem.

In the case of Toast Modern, you may come up with the following list of features that could help your users find more tasty toast:

• Find toast nearby
• Find top toast
• Post toast
• Rate toast
• Review and discuss toast with fellow toast aficionados
• Get alerts about new toast or toast specials in the area
• Maintain a user profile with top toast picks

That's a good long list of app features! Now for the hard part. Which features suit your minimum viable product? What does your persona absolutely need to satisfy their toast craving? Obviously, the primary requirement is the first feature on the list: find toast nearby. But it's likely that your users don't just want to find toast; they want to find quality toast. A rating system and a way to find the top toast in the area would go a long way to meet their needs.

To satisfy these three features, what other features might you need to implement? Is the toast data coming from you, from restaurants, or from toast connoisseurs? For simplicity, assume that the data is user-generated and that each user can post toast from various restaurants.

The remaining features on the list, although relevant to your persona, aren't necessary to solve the primary problem. They may overly complicate your initial app design and development. For now, you decide that your feature set will be as follows:

• Find toast nearby
• Find top toast
• Post toast
• Rate toast

Prototype

With your feature set clearly defined, it might be tempting to start writing code. But that's not the best path to a successful app. More often than not, your app will fail to appeal to your target users if you don't get feedback on your designs and iterate on those results.

The key to planning a successful app is to implement as many design cycles as possible before you launch your final first version by going through an iterative design process.

Starting with your feature set, create a prototype to show to potential users (who resemble your persona). After you get feedback, you can rework the prototype to better target your users and to better solve their problem. But don't stop there. You can gather more feedback and repeat the process, again and again.

The process of making a prototype, showing it to users, and learning from the feedback will repeat itself until you feel confident that your design successfully meets your audience's needs.

Create Workflows and Visuals

The first step in creating your prototype is to turn your list of features into workflows and visual representations of the app. This is where your app starts to take shape. While working on your own, refer back to the Building Simple Workflows lesson for a refresher on creating intuitive workflows and navigation hierarchies.

At this point, you don’t need to pin down one (and only one) workflow. It's a great idea to create simple visual representations of multiple options. That way, you can compare different workflows side by side and decide which works best for your users (or let them decide).

The best approach is to pull out a pen and paper, and start drawing. You don't need to be an artist. You don't need to draw anything better than a stick figure. The less detail you put into your initial workflows, the less attached you'll be—and the easier it will be to accept negative feedback. Either of the following examples can help to give you ideas as you create a prototype.

When you start to feel confident about a few options for the flow of your app, you can start drawing each screen and determining how to navigate from one screen to the next.

Formalize a Prototype

Now that you have the skeleton for your prototype, it's time to make a more formal prototype. A prototype is a fake version of your app that you can show other people to get feedback. The key to good prototyping is to ask yourself three questions: What needs to be more real? What can I fake? Where will it be used?

Almost always, being more real means being on a handheld screen. A design looks and feels different on paper than it does on an iOS device. To get dependable feedback, you need to show people a prototype on a device they can hold. You don't have to build anything spectacular yet. Your first pass at a prototype might be as simple as snapping pictures of your hand-drawn screens. You can then open your Camera Roll and let potential users swipe from screen to screen.

What can you fake? Well, your first prototype can fake just about everything else. Your photos, text, and icons can all be your initial workflow drawings. At this point, there's no need to create real user interactions or even high-quality images.

Where will it be used? This question is important. Will this app be used on an iPad or an iPhone? Indoors or outdoors? The answers may impact the complexity of each screen, as well as the mood you want to convey in your designs. For Toast Modern, the app is most likely going to be used on an iPhone and frequently outside. Now that you're thinking about those variables, you may want to go back and make modifications to your workflow.

Evaluate

Prototypes in hand, it's time to talk to as many possible users as you can. For the purposes of this lesson, assume that you came up with four simple, single-screen prototypes:

How will you get their feedback? When you hand them the device with your app prototypes, allow their interactions to be natural and independent. Observe their responses and their interactions, then ask simple questions to help you understand what's working, what isn't, and what else might be important to consider adding to the app.

If you passed around the prototypes for the Toast Modern app, you might hear feedback that the list is better for finding top-rated toast and that the map is better for finding nearby toast—but they want both features. You now have the opportunity to learn from the feedback and iterate on your original design.

As the designer or developer, it's your job to evaluate the user feedback and incorporate it into the next design cycle.

Iterate

After you've completed each stage in the design process, it's time to take what you've learned and return to the planning stage to apply it, create a new prototype, and solicit more feedback.

To incorporate the feedback about your app into your prototype, you decide to include both the list and the map. You'll have the list segue to the map so that users can see both top-rated toast and the location of nearby toast.

Using this revised prototype, you can gather more feedback from the same or different users. They may give you positive feedback about seeing top-rated toast and finding toast on a map, but they may also tell you that the relationship between the selected toast and the toast on the map isn't clear.

You decide to rework the prototype so you can combine the list and the map as follows:

Again and again, you'll repeat the feedback process and rework the prototype until you have a polished design. With each iteration, you can make the prototype more real, more detailed, and closer to the final product.

Create Higher-Quality Prototypes

You may have noticed that the example prototypes for Toast Modern are of much higher quality than hand-drawn pictures. Your first one or two prototypes should stay in the hand-drawn realm—so you can get quick feedback early in the design phase. As you get more and more feedback, however, you can introduce more realism into your prototypes.

The Toast Modern prototypes, for example, were created using the Keynote app. They look pretty good, right? But it didn't take a huge amount of skill or design sense to throw them together.

Wrap-Up

The design and prototyping phase of app development is just as important as writing the actual code that goes into the app. Without proper design planning, an app may not stand out to its intended users, it may never get used, or it may be deleted shortly after download.

The more effort you put into prototyping and gathering user feedback, the better your app design will be and the more prepared you'll be to write a successful app.

Lab: Prototype Your Own Idea

Objective

In this lab, you'll work through prototyping your own app. As you learned in the lesson, prototyping is an iterative process, so you'll want to repeat it a few times before settling on a final design for the app you'll build. Before moving on, you may choose to complete this lab over a few days, or even several weeks.

Find yourself a marker and some 3-by-5 index cards, or any writing or drawing tools you prefer. You'll start with low-fidelity designs, then move to more detailed prototypes as you settle on your features and workflows.

Step 1: Define the Problem

What problem will your app solve? Try to choose a problem and solution that you can address with your current skill set. You'll be able to learn new frameworks and tools while building your project, but it's a good idea not to slow yourself down too much as you're developing the app.

• List 50 or more app ideas or problems you want to solve. There are no bad ideas at this brainstorming stage.
• Read through your list and highlight the top three to five ideas. Which ones stand out as interesting? Which ones do you think you can actually build? Eliminate ideas that are too complex, require too many tricky features, or aren't possible given the APIs available to iOS developers.
• Present your short list to a handful of people—especially people who can help you decide if the idea is possible and appropriate for the amount of time you have. Talk through the pros and cons of each idea.
• Choose one idea to move forward with. You may find that you want to reevaluate your choice later in the lab. That's OK, but for now, choose only one app idea.

Step 2: Create a Persona

Think about the type of people who will use your app. Remember, even though you'll likely use your own app, you are not the target user.

• Create a short list of three or four profiles, or personas, of specific types of potential users. Include details like hobbies, what other apps they like, where they'll use your app, and what problem they want your app to solve. Save your list somewhere, so you can reference it as you make future design decisions.
• Try to talk to at least three people who fit each profile. How do they currently solve the problem your app will solve? What related apps do they use and like? What would they want to see in your app? You'll probably find they have some great ideas you hadn't considered. Take notes from your interviews, or even record them, so you remember the valuable insights you learned.

Step 3: Create a Feature Set

You've decided what problem you're going to solve, and you've talked to a few people who might want to use your app. Now it's time to brainstorm the features you'll build in your app.

• Create a list of all the features you want to build into your app. Focus on features that solve the problem in a way that your potential users will appreciate.
• Reduce the list to three essential features. This minimum viable product helps you build your app's core functionality and make your app available to users quickly. You can get solid user feedback before investing the time to build a more complex product that may or may not appeal to your target audience.

Step 4: Create Visuals and Talk to Users

Now for the fun part. You'll create low-fidelity prototypes and get feedback from your potential users—and iterate over and over again. Start with simple drawings on paper, and work your way up to displaying fancier prototypes on the device screen.

• Draw low-fidelity screens that will make up the scenes in your app. Using a thick-tipped marker and a stack of 3-by-5 index cards, create each scene in at least three different ways. Experiment with styles or view hierarchies. Consider how you'll navigate to each screen. Reference the features you decided on in the previous step. Do your screens address all the essential features?
• Rethink your current approach if it has more than three or four scenes. It's probably too complicated for your first project. What can you do to combine your features in a simple, intuitive workflow? Create a new set of drawings that reflect a more streamlined approach.
• Talk to potential users. Use your index card drawings to learn what they think of the workflow and view hierarchy. Hand them the cards and ask them to navigate around the app.

At this stage, you might be tempted to create high-fidelity, good-looking designs. Don't. It's better to keep things simple and easy. As you gather early feedback, you want to determine whether people like your approach to solving the problem. Their opinions on details such as colors or typography aren't important—yet.

Now that you've learned a bit more, here are your next steps:

• Create new sets of prototypes and talk to more people. As you hone your workflow, try to create an experience on the device. You can take photos of your index cards, open your Camera Roll, and pass your device to potential users for feedback.
• Further develop your prototypes. You've got a firm idea on the navigation, workflows, and general appearance of the app. Try using Keynote—or any graphic design tools you like—to create more realistic screens that give you the ability to get finer-grained feedback about the look and feel of your app.

Congratulations! If you completed each step in the lab, you should have a set of user-approved designs. With those, you can start planning the code for your app. You may discover that you don't know everything you need to create a real app in Xcode based on your designs. For example, the app may include a map, a list or a grid of data, or a fancy custom view—such as one that lets the user draw with their finger.

The important thing to keep in mind is that you can get started implementing a prototype for your app in Xcode without knowing everything you need to complete it. When you get to a part that you don't know how to do, you can mock it up with image views, buttons, and segues. The app might not be fully functional, but you'll be able to begin the process of realizing your designs in code.

As you encounter challenges that require you to learn new parts of iOS development, remember that you can delve into the developer documentation to see if you can find the answers. And don't forget that the iOS developer community is vast. Millions of developers have created amazing apps, and many of them have shared their knowledge in all sorts of ways—as blog or social media posts, answers on reference sites, podcasts, video tutorials, books, and more. If all else fails, you're likely to find an answer to your question just by searching on the web.