For some, the thought of developing a mobile app from scratch sounds like an uphill task full of corny, complex coding activities.
But it doesn’t have to be that way! Before developing a mobile app, you need to design it first. It’s critical to plan every step, and at some point, you might want to retreat and examine what you’re building.
If you’re in a customer-first business (every business is), then you need a mobile app. It’s no longer an option, but a necessity.
It’s expected that the global app downloads will reach 268.7 billion by 2017. Businesses that made the mistake of not creating a mobile app will continue to suffer in the coming years too.
Having a mobile strategy is essential, because this research shows that users spend 90% of their time in apps as compared to surfing the internet.
It’s great to have a mobile responsive website backed by a solid mobile marketing strategy with major resources being allocated to cross-device reach. In today’s competitive era, not having a mobile app has severe implications.
A mobile app helps businesses reach more customers, get better with marketing, provide value to the customers, increase brand awareness, increase customer engagement and loyalty, and create one or more competitive advantage(s).
When average user spends more time looking at a mobile phone than watching television, or using desktop or laptop, what excuse does your business have for not having a mobile app?
The question remains, where and how to start?
There are two phases of any mobile app design.
Mobile app design strategy
App design process
The following guide will cover both phases in detail with additional resources, mobile trends, and tips.
Mobile App Design Strategy
It starts with a strategy. It defines the future and the path to reach your destination.
The issue, however, is with creating a mobile app design strategy. You simply can’t create an app just because your competitor has one. Your competitor might have a different business objective and mobile strategy which are quite different from yours.
Developing a mobile strategy links back to the company strategy and has four stages:
i). Understand the business strategy
ii). Business mobile app strategy
iii). App strategy
iv). Product management strategy
Let’s explain each stage in detail:
1. Understand Your Business Strategy
Understanding the overall business strategy should form the basis of your mobile app design. Misalignment between company strategy and the mobile strategy might be suicidal.
Recent statistics from the Harvard Business Review shows that 70% of employees don’t have enough information about their company’s strategy or their perception of strategy is much different than the actual strategy.
There are several benefits of creating and executing a mobile strategy that’s derived from (and supports) the overall company strategy.
It maximizes ROI as much as 74%.
Reduces training needs.
It leads to customer satisfaction.
Decreases integration requirement and bugs.
Improvement in quality, value, productivity, employee efficiency, and customer engagement.
In its simplest form, a successful mobile strategy is the meeting point of business goals, mobile opportunities, and user needs.
How Do You Define A Mobile Strategy For Your Business?
It should, technically and logically, start from the understanding of the company’s strategy, market conditions, competitors, customer journey, threats and weaknesses, and where stakeholders want to see the company in the future.
Starting at the highest level will make things easy and well integrated.
To get started here is a short checklist that will help you understand the business strategy. This checklist will show you the current standing of your company in terms of its strategy, and where it wants to be in next five years.
Follow these steps to fully understand your company’s objectives, current standing, competitors, and why and how mobile strategy will fit in.
Your business’s mission statement, its competitive advantages, objectives, and where you want to see it in next 5 – 10 years.
Define customer journey on the mobile. What the app will do? Will customers be allowed to buy from the app directly? Will they be able to check the status of their order?
Create competitor profiles. Who are your competitors? What do they do. What are their strengths and weaknesses in terms of mobile strategy and app? Identify what they do differently, and what they offer on mobile.
Define the strengths, weaknesses, threats, and opportunities (SWOT) of your business. It will show all the areas of success and opportunities. It takes time but it’s worth it.
Doineedbackup.com, a company that offers solution on how to backup iPhone data to Computer, uses a mobile app strategy to trounce its competition.
In the same vein, Asda successfully launched a mobile app with a powerful mobile app strategy which aligned with the company’s long-term objective of having stores without walls.
The successful mobile app strategy showed results beyond expectation.
More than two million app downloads.
More than 90% of the mobile sales are attributed to the mobile app.
The app users are two times more likely to become repeat customers.
The buying frequency for mobile is 1.8 times higher than desktop and laptop.
It’s made possible because it started from the highest level – the overall business strategy.
2. Business Mobile App Strategy
Your mobile app strategy is your surefire path to achieving success with your mobile app design and marketing in general.
Yes the success or failure of the app depends on the strategy, since everything will be linked to the strategy. It will be easy to create if you have answers to these two questions:
What is the purpose of the app?
What is the benefit that the end-user will drive from using the app?
The simplest way to chart your app strategy is none other than:
“We will build this so that our customers can do that.”
The strategy has to be specific, measurable, achievable, relevant, and timely. Anything that’s too vague or looks seemingly unachievable, strike it out. For example, having more downloads than WhatsApp isn’t a practically achievable goal.
Create A Roadmap
Breaking the entire app idea into distinct components that will be executed in different time slabs is a step towards building a solid mobile strategy. It is known as a roadmap.
The entire app strategy will be distributed into small tasks that are represented visually. Who will complete the task, how much time it will need, and how these tasks interlink are all stated in a roadmap.
A roadmap will keep your team on track, and it will help stakeholders keep a track of the app strategy.
Budget Allocation
How much your business is willing to spend on the app will determine how quickly it can be designed and launched. The budget allocation includes capital, operating cost, human resources, and allocation of other resources.
This is how a budget plan looks like.
Allocating resources to the app and creating a budget plan is linked to your company’s budget and current standing. The budget, in return, is linked to the roadmap.
So if you intend to complete the app quickly, increase the app’s budget and fuel it with more resources, which can only be done if your business has enough available resources and budget.
You see, your mobile app strategy cannot exist in isolation.
Other Requirements
If you think a functional app idea, a roadmap, and the budget allocation are all what you need for the strategy, think again.
There are several other non-functional requirements that will be needed. They include:
Access points
Network availability
Maintenance costs
Architectural support
Payment processing
Security solutions
Access to tools
CDN
SLAs
These requirements are mostly useful for the IT team. Your IT team will share these requirements with you in the form of a visual layout also known as technology stack.
The basic idea is to document everything and make sure that the app performs as smoothly at the backend as it does on the frontend. A clear and concise technology stack is what you need.
Parse wanted to improve the speed and scalability of high-throughput and MogoDB clusters. They used Amazon Web Services (AWS) since it’s the only cloud service that handles their requirements. Parse used the following architecture on AWS.
This resulted in reducing the end-to-end latency from 400 milliseconds to 100 milliseconds.
3. Defining The App Strategy
Now is the time to define clear use cases on the basis of the customer journey. This calls for a clear definition of the single app strategy.
A use case is at the center of defining app strategy. It’s defined as the list of actions that define the interaction between a role and the system. The image below represents a simple use case that defines the actions of the buyer and the seller – the roles.
Ashish Toshniwal, YMedia Lab CEO, says:
“The number one secret is to focus on one or two main use cases. Let’s not overwhelm the user, but really focus on one or two use cases and do them really, really well.”
The best app strategy is one that uses not more than two use cases. Think of Instagram, people use it when they have to share a photo. This is a perfect example of a single use case.
A use case includes quite a few things such as the happy path, the intent of the use case, alternate action paths, and testable actions.
Defining use case is just the first phase of defining the app strategy.
Target Audience
Who will use your app?
I know, you may say your customers. Okay, but which type of customers in particular. What are their needs, gender, age, demographics, etc.
The fact is, you can’t create an app for your entire customer base. The simple rule of thumb is to design app for 80% of users.
The best approach to defining the target audience is to use personas. Buyer personas help you understand your target audience better. It helps in categorizing and grouping them.
List down all the following information about each type of your potential user.
Define Key Performance Indicators (KPIs)
What value the app delivers to the business is the question that stakeholders ask a lot.
Defining KPIs for the app will help monitor the performance and at the same time, it will help set realistic goals for the app to achieve year after year.
Setting KPIs for app is not enough. Linking and aligning the app performance metrics with the business’s KPIs is a must.
If the metrics for your business are revenue, cost reduction, and market share, then the KPIs for the app must lead to one of the business’s KPIs, else the app will not add any significant value.
If the app fails to perform, the business will suffer and if it performs, business will grow.
The most crucial app performance metric is the number of new users. Other metrics are app rating, an increase in usage and sessions, customer retention, repeat customers, session length, customer lifetime value, active users, and downloads.
Some other important questions to be answered during this phase include:
Type of app required. Do you need a hybrid app or a native app?
Should your business build app in-house or should it be outsourced?
Which platform to target first – android or iOS?
Finally, start promoting your new app at this stage because you now know what it is, who is it for, and what it will do. This is the right time to create early buzz and engagement.
4. Define Your Product Management Implementation Strategy
Once the mobile app strategy is defined and documented, it’s time to implement it.
Understand The Minimum Viable Product!
Implementation strategy begins with defining the minimum viable product. MVP is defined as the product with the minimum features for validating and learning purposes.
Instead of throwing all the features right at once, you should prioritize the features and start from the minimum acceptable features. All the best apps and products go through this phase.
Do you think Twitter offers the same features from day one? The first Twitter homepage was totally different from what you see today. It look like this:
Same is the case with Facebook.
Define minimum viable product by listing all the possible features for your app, prioritize those features, sort them on the basis of priorities, and add the top few must-have features in the first version. The remaining features should be added over the course of a few years.
Develop A Testing Strategy
Yes you need to test your app. Because every app has bugs – yours will have too.
You may not get rid of the bugs completely, but you can minimize these issues by creating a workable testing strategy. It’s an outline that clearly states the testing approach.
The test strategy should be defined before the coders get to work. Here’s what to include in the test strategy:
What is the scope of the app?
What is not in the scope?
The features
Individual cases
Outcome
App versions and integration
Know The Required Tools
What tools do you need for development, testing, and for maintenance? Though, it mostly depends on the budget allocation.
List all the tools required at every stage of the development and post-development.
Some of the tools that you may need include:
JIRA or TicketNow for documenting and tracking time.
Google Analytics, Site Catalyst or Omniture for analytics and performance.
Splunk, FogLight or AppDynamics for app performance.
PractiTest, Test Collab, TestRail or qTest for QA testing.
By the end of the mobile app design strategy, the strategy document with all the mandatory details will be ready.
Basic App Design Process
Benji Hyam, the co-founder of Social Proof Interactive, stated that before you approach an app designer, you must have the following things ready:
Understanding of your target market and the end-user
List of things that a user might want to accomplish with the app
Initial wireframes
Budget
This is, more or less, what we have covered in the previous section. Having a mobile app strategy will make app designing super easy.
Mobile app design strategy is an in-house process while app design process can be outsourced or done in-house.
The basic app design process consists of following steps:
Setting the scope
User/market research
UX wireframe
Prototype
UI design
Animation
Software architecture
iOS development
Testing
Release
Let’s roll.
1. Setting The Scope
The scope refers to what needs to be done, what you want to achieve from the app, and how large/small it has to be. The scope may include all of the following:
The nature of the app
Target audience
Most crucial functions and features of the app
Visual features
Potential technologies to be used
Consistency with the business strategy
Specific preferences
Did you notice that consistency with the business strategy is just one part of this process?
In order to document the scope of the app, it’s crucial to identify all of the following:
Objectives and goals of the app
Phases and subphases
Tasks and resources
Budget
Schedule
Based on the scope, the design and flow of the app will be prepared.
2. User & Market Research
This is the phase where the UX and UI designers will get to work based on the scope of the app and on the app strategy. It involves market research and user research.
The job of the designers is to come up with the best UX design that will help your app stand out from the crowd.
How is it Done?
Start by conducting an in-depth market research and analyze the existing apps in your industry. If you’re going to create an image sharing app, you’ll have to look at the existing image sharing apps, their color schemes, patterns, flow, etc.
The user research will reveal colors and themes that will help you develop an emotional connection with the target audience.
What type of colors and styles will the end-users prefer? You can use different methods to collect data from the potential users such as surveys, focus groups, design workshops, etc.
Here is a tip – don’t let users make all the decisions. If you do, you will end up designing an elephant like this…
3. UX Wireframe
The visual representation of the user interface is known as UX wireframe. You have to create a structure of the user interface, transitions, and interactions. It must be based on market research, user research, competition, and strategy.
You can use wireframing software or you can create a simple outline on a paper. Lay down the user flow as you want it to appear on the actual app.
Sure it’s enough to wireframe the user interface on paper. No need to do extra work. The simpler it appears, the better it will be.
The purpose of UX wireframing is to define the flow of the app such as the number of windows, buttons, where each button leads the user, the registration process, the login screen, and everything related to the front-end of your app.
4. Create A Prototype
Prototype lets you see and feel the app. It must be created as early as possible. Once you have the UX wireframe, creating a low-fidelity prototype is easy.
The low-fidelity prototype is the sketchy prototype that can be created right away as the wireframe is ready. There is no need to waste money on expensive prototypes.
Not only does a high-fidelity prototype consume resources but it takes time.
A simple physical prototype will show you how the app looks. The purpose of a prototype, by any means, is not to test or improve the functionality.
A lot of experts recommend using low-fidelity prototypes to save cost and time. Instead of wasting money creating expensive prototypes, spend money on app functions, features, and on coding.
Mozilla used low-fidelity prototypes to tweak its support website. They used multiple prototypes and all of them were created on paper. They quickly selected the best user-interface elements that worked for the users.
5. UI Design
Do not confuse UX wireframe and prototyping with the user interface (UI) design.
The UX research, wireframing, and prototyping are about how the app works while the UI design is about how the app looks.
Once the UX has been tested, tweaked, and several prototypes have been tested and finalized, you have to move to the UI designing phase.
At this stage, you have to deal with the visual representation of the concepts, color schemes, fonts, shapes, buttons, font size, images, forms, illustrations, animation, etc.
You have to test multiple designs to see what works best for your users. 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 difference being that in case of UI design, you have to make the judgments yourself. You cannot bring customers on board at this stage.
Just like prototyping, the UI designs can be sketched on paper.
Or, you can use a simple app for it known as Paper App. You can sketch different versions of your app and see which looks better.
Or, you can use a UI solution.
6. Interface Animation
Animation should be applied and tested with the UI design phase, so as to test different styles of animation in real-time.
Animation refers to the user interface animation such as how new screen will pop out and how gestures are defined, and so on.
Interface animation has the power of grabbing user attention, as pointed in Google’s material design principles:
“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.”
Animation should be functional instead of a simple design element.
Anatoly Nesterov has shared seven types of animations for mobile apps. You can choose from the following list.
Visual feedback
Function change
Element hierarchy
Orientation in space
Condition of the system
Visual prompt
Fun animations
7. Software Architecture Planning
This is perhaps the most crucial part of the entire design process. The core purpose of software architecture planning is to scale the app, make it better in terms of functionality and design.
It takes place as a parallel stage of designing.
It involves the entire team including the designers, programmers, and managers. The idea is to improve the frontend and the backend processes by constructively tweaking the software architecture.
It calls for regular constructive discussion on platforms, frameworks, abstract layers, design platforms, technology, components, etc.
The purpose of architecture planning is to define a structured solution that meets all the technical, operational, business, user, and system requirements.
Some of the best practices include:
Build to change.
Understand the end user needs before designing and redesigning.
Do not hesitate to invest in architecture.
Identify key interfaces, layers, and subsystems.
Use an iterative approach to designing.
Peter Eeles has explained the software architecture process and method in simple form, where phases are divided into iterations which are then broken down into activities which are further divided into tasks.
8. App Development
This is the phase where coding begins and the developers start creating the app.
This is something that developers have to do, so make sure you deal with the best coders. The app can be developed for android or iOS depending on your choice.
Instead of creating the app for multiple platforms simultaneously, the better approach is to create the app for one platform first.
Why?
Because developing an app for a single platform from an expert will cost you tens of thousands of dollars. If it turns out to be a poorly coded app, you will find yourself in the middle of nowhere.
Better yet, choose android app development first, since it’s cost-effective as compared to iOS.
By the end of this phase, your mobile app will be ready (i.e., scalable, aligns to the strategy, has all the perks, is well-designed, and works smoothly).
9. Testing
When the average failure rate for app testing for android is 16.4%, you can’t afford to launch your newly created app without testing.
The purpose of testing the app is to ensure there aren’t any bugs and the app works as expected.
There are several stages in an app testing process. This type of rigorous testing process will ensure that your app works smoothly.
There are different types of testing and a decent approach is to test for all the types.
Functional testing
Memory testing
Performance test
Security test
Interruption test
Usability test
The app can be tested in-house, outsourced, or the developers can do the preliminary testing. The app testers should not be your developers or partners of the developers.
10. Release
Finally, it’s time to release your app once it has passed the tests.
The app must be submitted to the appropriate app store. It will take time since most of the apps are reviewed before they are published. It can take up to a week for the app to get approval so plan your release accordingly.
Most of the developers believe that a proper release strategy should be used for app launches.
Partnering with the right business is the best approach that worked exceptionally well for David and Goliath. They partnered with the David Eckstein for the launch of their app which turned out to be a huge success.
This is one approach.
There are more on the list.
Mobile Design Trends
A research study revealed that over two billion people out of 3.2 billion people who use the web will access the internet from a mobile phone in 2016. In another study, half of the mobile phone users will switch to smartphones by 2017.
With this exponential increase in smartphones and the internet users all over the world, the following mobile design trends are expected to catch on:
1. Creative Gestures
According to Google, the gesture is a touch mechanic where each gesture is used to accomplish something such as opening the messages, sending an email, etc.
Some of the common gestures include tap, double touch, pinch open, drag, and two-finger touch.
As the number of mobile phones and the mobile phone users keep increasing, the app designers have to use more intuitive gestures to make user design better. Expect a lot of creative gestures to be introduced in the coming years.
2. Native Apps vs. Mobile Internet
Luke Wroblewski conducted a research that shows native app users spend 18x more time than mobile internet users.
On the other hand, the mobile web audience is much bigger than the native app audience. Mobile web receives 8.9 million unique visitors a month while native apps receive 3.3 million unique visitors a month.
<img class="alignnone size-full wp-image-11157" src="http://buildfire.com/wp-content/uploads/2016/11/image45-1.jpg" alt="image45 mobile app builder" width="750" height="389" srcset="http://grl4g152iaf38h0jg2pmaxr18ek.wpengine.netdna-cdn.com/wp-content/uploads/2016/11/image45-1.jpg 750w, http://grl4g152iaf38h0jg2pmaxr18ek.wpengine.netdna-cdn.com/wp-content/uploads/2016/11/image4