The Definitive Guide To Mobile App Design
The Definitive Guide To Mobile App Design
to Mobile App
Design
Everything You’ve Ever Wanted
to Know About Building
a Mobile App
2
1. Introduction
If you’ve ever thought about building a mobile app, but didn’t
know where to start or what questions to ask, then this ebook
is for you.
After building more than 10,000 apps, we’ve learned that most
people don’t have any idea of how complex it is to actually
plan and develop a mobile app, so we created this ebook to
guide you along the average process, the best practices, and
how you can get ahead of the competition.
But don’t worry; this isn’t some boring book filled with coding
or programming or complex business plan diagrams. It’s
;a very broad overview of the steps your app developers and
designers use, so you won’t have to bother them with basic
questions.
3
2. Part I: Planning and Strategy
The first thing you need to do when you want to build a mobile
app is make a plan.
Before you get too excited about how building a mobile app
is going to make all your wildest business dreams come true,
let’s look at what a mobile strategy is NOT:
• B
uilding a mobile app should NOT take the place of, nor is
it an extension of your other online strategies.
• Y
our mobile app strategy is part of your overall business
strategy. The app that you build is a tool, a tool to engage
users, establish rapport, and keep them wanting the product
or service you provide in an easy, quick, and convenient
way.
Now that that’s out of the way, let’s start putting the plan
together.
4
2.1. Step 1: Look in the Mirror
“
If you know the enemy and know yourself, you need not fear
the result of a hundred battles. If you know yourself but not
the enemy, for every victory gained you will also suffer a
defeat. If you know neither the enemy nor yourself, you will
succumb in every battle.
”
→→ Sun Tzu, The Art of War
It’s not terribly cliche to say that you can’t know where you’re
going until you know where you’ve been. Self reflection is one
of the critical components of success for any endeavor, not
just ascetic gurus in their mountaintop perches contemplat-
ing the universe.
Well maybe not your enemy, but your competitors. These are
the businesses who are in the same industry, provide similar
products, and appeal to the same users. Competitive analysis
is one of, if not THE most critical parts of a business strategy.
5
Looking at what other businesses are doing, and what they
are NOT doing, provides immeasurable and actionable insight
that you can directly turn into an effective mobile strategy.
Competition Grid
Indirect
Future
For example, say you want to build an app where people can
upload, share and tag photos of themselves. (This is just an
example, Instagram has that feature pretty much covered.)
6
Start by conducting in-depth market research to analyze
the existing apps that provide that service. Even the most
successful examples have areas where they fail to deliver,
and users that they don’t service adequately, so no matter
what the size of your competitors there will always be oppor-
tunities.
2.1.2. Know Thyself
STRENGTHS WEAKNESSES
OPPORTUNITIES THREATS
7
This framework allows you to instantly and honestly evaluate
your company and reveals the potential roadblocks in your
path. Once you understand yourself, your competitors, and
what you shouldn’t try and do with a mobile app, you’re finally
ready to begin to plan your app.
Now that you know who you are, who you’re up against, you’re
finally ready to put pen to paper and fingers to keys and start
planning out your app.
Now you just have to ask yourself the easiest question of all:
what IS your app going to do, and how are you going to turn it
into reality? What you need to do is define the scope of your
mobile app strategy.
8
Two tips to consider though:
• First, TAKE YOUR TIME when you plan your app. It is much,
much easier to adjust goals during the planning phase than
it is fixing code or design during production. Each change
you make during development is REALLY expensive and
complicated, and will make your production team hate you
for not being confident and prepared.
• Second, at this point, you also need to consider how your
app will look and perform six months, a year, and five years
from now. Plan for the future and try to build that notion
into your mobile app strategy.
Keep these tips in mind during every step along the way.
The best way you can truly visualize what your app is going to
be is to open up your twitter account and write out the entire
concept in one tweet.
(It also has the side benefit that you’ll know that when you
need to promote your app you can use a channel like twitter,
and your description will fit.)
9
When writing your tweet, ask yourself two basic questions,
and be honest:
Probably. Probably not the new Ebay, either . But, if you think
of a way to provide value to a small group of users who are
underserved by bigger organizations, you have the core of
a good idea.
So, with your concept firmly in hand, now you’re ready to map
it out.
10
2.2.2. Map it Out
If you were going to build a house, would you just start by going
down to the Home Depot, load up a truck with some lumber,
grab some nails, and just start hammering them together?
11
A standard app development strategy usually looks something
like this:
Design
→→ gather business requirements
→→ determine scope of project
→→ investigate alternative products / competitors
→→ create action plan
→→ user research
→→ usability research
→→ graphic design and brand development
Build
→→ build mockups and prototypes
→→ choose a development platform
→→ code the designed screens and interactions
→→ integrate U-M authentication and APIs
→→ as necessary
Test
→→ test app components individually
→→ test the components integrated together
→→ test overall system compliance with
→→ initial requirements
→→ verify that the solution is accepted by the user
12
Now that you have your map, it’s time to make a shopping list
before you head on down to the (virtual) Home Depot to get
all the “stuff” you need to build your app.
And what is that stuff, you ask? Money. The industry average
for building a mobile app is somewhere between $200,000
and $400,000, depending on your other available resources
such as time, product, etc.
Here’s a pro tip: whatever you think your app is going to cost
from an operational standpoint, take that amount and add
30% to it. That’s the industry standard average for what app
maintenance will cost
Once you have worked out how much you have to build your
app, your budget will be spent in two different sections:
Operations and Capital.
13
The other budget expense is Capital, which are the tangible
resource like employees, office space, database stacks, and
so on. These are generally controllable expenses, with regular,
predictable prices, making them easy include in your budget
estimates and in some instances (like personnel)they will
decrease over time. Once you can predict them and account
for them on a regular basis, you can have one fewer thing off
your mind.
So let’s review: you have your app concept, you drew up your
plan, and you have the resources to build it. So what’s next?
Now comes the time to actually pick the tech that’s going
into your app. For people without a background in software
development, this part is probably the most intimidating.
Technically speaking, in industry terminology, they are called
“non-functional requirements”, and are the features behind
the scenes that actually make an app operate. The guts of it,
if you will.
14
Here is a short list of what the “guts” of an app are. This list
is by no means exhaustive, but rather a general standard for
the average app doing average things:
• Access points
• Network availability
• Maintenance costs
• Architectural support
• Payment processing
• Security solutions
• Access to tools
• CDN
• SLAs
All of these aspects of an app are critically important, though
you probably wouldn’t ever think of them while you’re using
one. However, when you’re building one, you ABSOLUTELY
have to consider them, and make sure that your engineer-
ing team understands how critical they are to proper perfor-
mance.
You’ve got your plan, you’ve got the tools, you’ve got your
budget. Developers are ready to build and you’ve got buy in
from stakeholders. You’re not ready yet though.
15
2.3.1. Know Thy User
16
So, pick two or three types of ways to use your app, then
build out every step along the way for someone to use them,
and you’ll be ok.
17
2.3.2. Conduct User and Market Research
The user research will reveal colors and themes that will
help you develop an emotional connection with the target
audience, as well as the current trends in design. Common
strategies and methods to collect this data include surveys,
focus groups, design workshops, and competitive analysis.
18
The only way you can provide this answer is if during your
strategy session you determined the variables and conditions
and milestones into the roadmap of your app. These instances
are called Key Performance Indicator(KPI)s, and defining them
allows you to monitor the performance of your development,
and as you meet them you can measure against what you
expected to happen and when.
A side benefit of your KPIs are they will help you set realistic
goals for the app to achieve year after year.
S M A R T
19
The type of metrics you measure depend greatly on the type
of app you’re building, who it’s for, and what it’s going to be
used for.
After you know your audience and know how you’re going to
track success, you now have to ask yourself one of the most
fundamental development questions: what type of app do
you want to build, a native, hybrid, or progressive web app
(PWA).
20
2.3.5. Spread the Word
2.3.5.1. Pre-launch Strategies
While there are many ways to get people on board with your
app, one of the most effective strategies is to offer an open
beta to early adopters in the app community.
An open beta is when you offer your unfinished app in its final
stages to a group of people who will give you feedback on its
performance, and how you can make it better. Once they do
that, you can incorporate their ideas into your final version,
making it that much more polished and ready for a wider
variety of users.
For more ideas on how to promote your app, check out this
blog and see how easy it can be!
21
2.3.5.2. Post-launch Strategies
After your beta testing and you launch your final version, you
can do three main things to promote your app:
Let’s review: you have your strategy, your roadmap, and your
resources. You’ve planned how to use them, how you are
going to measure their success, and how you are going to get
the word out about it.
22
Well… not so fast. There’s one last step before you enter one
line of code, before you can say “Hello World!”, you need to
finally define just what it is you’re going to build, how you’re
going to make sure it works, and what you’re going to do after
it escapes into the wild.
That way, when things don’t go to plan (and they usually don’t),
and you have to eliminate a feature or function because of
time or budget constraints, you don’t have to stress and fight
over what feature to remove.
23
2.4.2. Define Your Test Strategy
Yes, you need to test your app. Every app has bugs – yours
will too.
24
2.4.3. Formulate Post-release Strategy
25
As with anything with building an app, having a plan ahead of
time will save you lots of trouble down the road. Your release
strategy is as critical as your development strategy, because
if you provide your users a bad product, getting back in their
good graces is nearly impossible.
You have everything you need to build your app, so don’t wait
any longer.
26
The basic app design process consists of the following steps:
27
There are number of popular wireframing software programs
available online, or you can do it the old-fashioned way and
create a simple outline on a piece of paper or whiteboard.
3.2.Build a Prototype
Once you have your UX wireframe, you can now create a basic
prototype of your app. A prototype lets you interact with your
app in a way that simply seeing it on a diagram or whiteboard
can’t.
Plus, after you actually start using your app instead of just
thinking about it as an abstract concept you’ll probably be
surprised by how it really works.
During this phase you’ll often discover issues and ideas that
you initially didn’t conceive, and you’ll need enough time to
revise your roadmap or secure additional resources.
28
One great example of a big company using simple prototypes
is Mozilla, the creators of the popular web browser Firefox.
Even though they are a sophisticated tech giant, Mozilla
used low-fidelity PAPER prototypes to improve their support
website.
3.3. Create a UI Design
As with every other part of your app, you have to test multiple
designs to see what works best for your users. Just because
you have a really great idea for what the app should look like,
that doesn’t always translate to a real product.
29
The color schemes, skins, themes, and all the visual elements
have to be tweaked several times to find what works. It’s
somewhat similar to A/B testing with the difference being
that in case of UI design, you have to make the judgments
yourself.
You have a plan, you have a goal. Stick to your roadmap and
don’t get sidetracked.
Pick the one that feels right, and get creative! Just remember
your user research, your roadmap, and your end goal.
30
“Motion design can effectively guide the user’s attention in
ways that both inform and delight. Use motion to smoothly
transport users between navigational contexts, explain
changes in the arrangement of elements on a screen, and
reinforce element hierarchy.”
31
Although virtually anything can be animated, from splash
screens to menu screens to sign in screens, it is REALLY easy
to go overboard.
32
3.6. Test, Test, and Test Again
Before you can release your app, you’re going to need to test
it. Thankfully you’ve outlined your testing strategy long before
this point, so you have a clear set of guidelines and rules to
follow.
• Functional testing
• Memory testing
• Performance test
• Security test
• Interruption test
• Usability test
The reason why is because they are too close to the project;
in their exposure to designing and building your app, they can
gloss over processes and results that a new set of eyes would
easily pick up. While they can be useful early on, it is best
practice to have independent teams conduct truly thorough
testing.
33
3.7. Publish, Release, and Monitor
Depending on the type of app you built, and for which platform,
you must submit it to the appropriate app store.
After your mobile app is ready for download from the app
stores, you can now employ your Post-release strategy to
ensure that your app continues to grow, provides value to
users, and operates according to your roadmap.
You’ve done it. Take five minutes and appreciate your accom-
plishment.
34
4. Critical Takeaways
Let’s review some of the most important things you need to
remember if you’re going to build a mobile app strategy:
• Step 1 Evaluate
ɠɠ Understand what a mobile strategy is NOT!
ɠɠ Know thy Enemy
ɠɠ Know Thyself
35
Part II: Development and Production
5. Conclusion
Planning, designing, developing, and launching a mobile app
design is a complex task that needs time, resources, tools,
and the right expertise.
36
If you want to learn more about the best ways to design and
develop your mobile app, one of the best things you can do is
talk to someone who has helped build tens of thousands of
successful, revenue-generating apps.
BuildFire’s App Geniuses are ready to help you plan your
strategy, define your vision, and turn your mobile app ideas
into reality.
37