How to make an app

“Design is not just what it looks like and feels like. Design is how it works.”

Steve Jobs

Most brands have apps. For some, the app is the core of their business. For others, the app is just a loyalty instrument or a logistical tool.

And when I say ‘app’, I mean applications in the broadest possible sense: from browser-based desktop apps to mobile games.

Getting an app right is no small thing. If you want to hang on to your users, you have to provide intuitive structures and sexy looks across all platforms.

Both are the focus of an entire group of professionals, most of whom you can’t afford.

Or maybe you can afford them, but you want to make effective use of their expensive time.

So let’s take a look at how to do apps right in this chapter. We’ll cover:

• The rules for designing spaces.
• How to select a space.
• How to design a functional floor plan.
• How to source the elements.

Most apps die off quickly because users don’t stick around. The apps are not valuable enough or users don’t discover this value before their patience runs out.

So absorb the following rules before designing your app. They’ll prevent you from making the most common mistakes.

Apps must offer a great user experience and an intuitive user interface. 

In short, user experience (UX) is about the structure, where user interface (UI) is about the look. Think of it as putting sexy meat (UI) on sound bones (UX).

If you win at UX and fail at UI, your app is easy to use but looks terrible. If you win at UI but fail at UX, your app is hard to use but looks awesome.

UX is your priority. Your app should be usable by as many people as possible. 

Most app designers are smarter than their users. That’s why they often design apps that are too difficult for their audience to use.

Your app should be as easy as possible:

• Less is more. Use a clean interface with a minimum of elements needed to complete a task.
• Use what they know. Use buttons, icons, and names that users already know. The more familiar your design, the faster users learn to use it.
• Make it predictable. Users expect the things in your interface to behave a certain way. Make sure it lives up to it

Ease of use inspires further use.

Now what users find usable is not for you to decide. You might think your design is brilliant, but a user might find it frustrating:

So don’t be shy.

Put your app in front of users as soon as possible. 

Preferably before it’s built. Not after you’ve quit your day job and spend all your money.

Because there’s a word for waging big money on dubious outcomes. It’s called gambling. And as we’ll see next, the odds are NOT in your favor.

The crucial moment for your user is the sudden realization of your app’s benefits. It’s when she thinks: “Wow! This app is awesome!”.

This moment should come as soon as possible because people are quick to abandon apps. We saw in the part on websites that users start out skeptical: is this really worth my time and energy?

Based on data on Android Apps, the judgment is as follows: 20

The more days pass, the more users bail. The vast majority of apps lose 60% within the first day and 90% within the first 90 days. Sad!

Only the top apps somehow manage to retain their users. 

Why do their users decide to stay? That’s easy. These apps are useful enough to spend time, energy or money on. The users think it’s valuable.

So how do you copy their success? Simple:

Get your users to that moment where they experience the value of your app a.s.a.p. 

• Is it blogging? Get users to write their first “Wow! I’m a bloggernow.” (Medium)
• Is it a social network? Get users to follow an X amount of “Wow! My feed is filling up!” (Twitter)
• Is it a website tracker? Get users to install the tracker on their “Wow! I can snoop on my visitors!” (Hotjar)
• Is it solar system design software? Get users to put down their first set of panels. “Wow! I can save time!” (Solar Monkey)

Design your UX so that users arrive at this pivotal moment as soon as possible. Lubricate the experience.

Radically cut the time and work required to get to the Wow! moment.

Want to know this moment for your app? You can find out in several ways:

• Ask your users: Why would you recommend us to friends? What do you like most about our app?
• Use tools to record videos of user See where users bail.
• Users tools to get usage What did users do in their first sessions?
  Which activities keep them coming back?

Onboarding means getting new users to understand and work with your app. You guide them to the Wow! moment and beyond. If you don’t, users won’t see the point of using your app and quit.

You can’t have a successful app without good onboarding. 

Now we all recognize the friendly screens, tooltips, visual cues and emails that help us navigate a new environment.

These are the best onboarding methods:

• Showcase the benefits: highlight the features or benefits of your app This motivates users to register with or learn your app.
• Invite action: Get the user to take a common action within the app, or have her take a series of them.
• Setup the account: If you need data or permissions from users before they can start using your app, it’s wise to start with a simple, step-by- step setup.
• Gamify: Include a quiz or award points for taking certain actions.
• Manual: For expensive SaaS software it is common to get a walkthrough and setup help from a salesperson. If the money justifies it, you can offer in-app support.

Naturally, you can combine the above methods.

Now, what makes onboarding good?

• Keep it simple. People are busy.
• Use a minimum amount of words.
• Use simple visuals where possible.
• Use conversational language.
• One tip at the time.

So write down how you’d like to onboard your users. Feel free to take inspiration from similar apps – they’ve probably tested every route already.

Remember the goal: keep users coming back. Let them make a habit out of using your app.

We saw that successful apps are usable, user-tested, and get to the Wow! moment quickly using onboarding.

With the rules in mind, we’ll now design and build your app. 

We’ll use the following steps:

1. Ideation: Get all your ideas on paper and rank them.
2. Wireframe: Sketch the structure and screens of your app.
3. Prototype: Get a visual prototype of your app.
4. Build: Build your prototype.
5. Deploy: Deploy your app and acquire your first (Out of scope for this book)

The design phase is cheap. 

Things are done with pen and paper, or with easy tools. This is the moment to change your mind about your ideas, structure or design.

The production phase is expensive. 

Changing your mind is pricy here. New builds and tests for all your devices and operating systems. Perhaps you need to spend fresh marketing dollars to get it adopted again.

A. Write down all your ideas in a spreadsheet. 

Everything remotely relevant is welcome on the list. Be exhaustive. Ask others for input also: your team, your neighbors or your boyfriend.

Sadly, you can’t build everything on the list. With limited time, money, and user attention, prioritization is key.

B. Rank every idea on the list with a GIMP. 21

GIMPing your ideas means scoring them from 1 to 10 for:

Gut – What does your instinct say about the value of this idea? Don’t overthink it, just score it.

Importance – How relevant is the idea for the overall app experience? How useful will it be for your users? Will they adopt it quickly?

Money – How much resources will this idea demand? Will it add complexity? Security risks? Dependencies on third parties?

Probability – What’s the chance that we’re right? Are there any unknowns? What is the price we pay if it goes haywire? In short, what’s the risk?

Got your scores? Good. Now multiply them to get your total GIMP score.

Gut x Importance x Money x Probability = GIMP score

You multiply them because a low scoring GIMP factor should drag down the entire idea. Needless to say, higher GIMP scores mean better ideas.

C. Select the best ideas for a minimum viable app. 

By building this app you’re making assumptions:

• The problem my app solves is pretty common (market size)
• People will definitely use this app to solve their problem (user adoption)
• My first users will be suburban moms (market segment)
• I will be able to charge money for my app (pricing)
• 50% of users will keep using it after installing the app (retention)

These assumptions might or might not be right. You better validate them with an app that delivers on the basics.

Get this minimal version out fast, then improve it with user feedback. 

Use your best ideas, the merry GIMP’s, to build the minimal version. The other ideas – including those users will give you – can be included (and scored!) later.

Let’s take the ideas you picked and sketch out how they’d look on a screen. This is called wireframing.

A. Sketch the screens of your app. 

Simple lines, squares, and circles will do for now. Don’t use colors, logos or other artwork. They distract from the purpose, which is deciding where things go, not how things look like.

• Make sure the users know what to next at all time.
• Show only what is necessary. Attention is scarce, so eliminate clutter.
• Every interface element should behave as you’d expect. What looks like a button should act as a button.

B. Draw arrows between the screens.

Now for the navigation. What does a click result in? Where does the user go? Which screen is next? Draw some arrows to indicate how the users travel between screens.

C. Evaluate your wireframe.

Your wireframes should portray a clear and coherent user experience. Because if the wireframe is already confusing, you’ll build a Frankenstein of an app.

For every screen, ask yourself:

• Is this screen serving the greater goals of the app?
• Is the purpose or task for this screen clear?
• Is it clear for users on how to act on this screen?

Don’t forget to evaluate the total:

• Will this app be usable by every simpleton?
• How many steps to the Wow! moment?
• Where can I make it easier for the user?

The earlier you catch dubious layout and navigation choices, the cheaper. So don’t continue until you feel your screen layouts are crystal clear.

You’re about to spend the big bucks by building your app.

To make sure (1) the building goes as smoothly as possible and (2) the result is worth the money, you build a prototype of your app.

A prototype allows you to experience your app as if it was completed. 

A prototype is more than just the design. It simulates the workflow, the interaction between screens and the overall look & feel without writing a single line of code.

A. Pick a prototyping tool. 

There are many tools . you can use to build a prototype.

B. Design every screen. 

Take the wireframes you built in the previous step and bring them to life by adding your logo, images, colors, and buttons.

Always check if your design is ‘responsive’ – if it looks good on different screen sizes.

C. Prototype the interaction. 

Your wireframe defined the flow and paths of your app. Use your tool to define what user actions trigger app results like screen switches, color changes or animations.

D. Test your prototype with real users. 

You’ll now ask people to use your prototype and see if they encounter problems. So recruit some guinea pigs, watch them use your app, and take notes.

Can they do what you tell them to do? How long does it take them? Where are they confused?

If multiple users experience the same problem, you’ll have to fix it by changing the design.

There are two options for building your tested prototype:

Option I: Build it yourself (high skill or high budget) 

If you are skilled enough – or got a serious budget, you can code it from scratch.

Whatever framework you use for building your app, there are manuals, libraries, and other resources to kickstart your project.

Hiring coders is expensive since they’re in high demand. But perhaps you can ask for a fixed price if you completed the prototype.

Option II: Use an app builder (low skill or low budget) 

Those with limited skills or budget can use an app builder. These are drag- and-drop tools that allow you to build your app without writing a line of code.

Needless to say, this severely limits what you can do with your app. But the results might be suitable as a minimum viable product.

Making apps is about offering the user a great experience and a great interface. Your app should be easy to use (UX) and look awesome (UI).

Step 1: List your ideas and rank them with a GIMP:

1. Write down all your ideas in a
2. Rank every idea on the list with a
3. Select the best ideas for a minimum viable

Step 2: Wireframe your app:

1. Sketch the screens of your Include each idea.
2. Draw arrows between the
3. Evaluate your

Step 3: Prototype your app:

1. Pick a prototyping
2. Design every
3. Prototype the
4. Test your prototype with real

Step 4: Build your app:

1. Build it from scratch (high skill or high budget).
2. Use an app builder (low skill or low budget).