When it comes to the mobile app development you’ve got to find some sleek catchy design solutions in order to sell the whole thing. It works that way because your prospective customers, investors and industry experts often base their final judgment on first impression. How your product looks, feels, and tastes in terms of style, ergonomics and usability.
So, where do you begin with designing a mobile app? Let’s briefly cover major principles and walk through a few important tips for mobile app design:
See the opportunity
First you must figure out the specific market demand for a new mobile product or service. It may come as a preliminary request from potential customers, investors, your co-workers, friends. Or it might be your own idea!. Every idea must be evaluated in terms of novelty, market potential, tech ability and investment requirements.
Let’s walk through the entire process of mobile app design and review a few important tools.
The idea
How to design a mobile app? It may sound trivial, but a really good business idea is the major key to final success of your mobile app. Gather together with your team and write down every thought that comes out your mind making a so-called long list. Next critically scrutinize every single point analysing why this idea will win the customer. Why is this market niche yours? Scratch all weak points out the list making a so-called short list. Finally leave just one idea on the list. To make sure the idea is sound, discuss what specific problem your mobile app will solve. Why does this problem still exist, but there is no efficient competitor’s app to solve it.
How much does it cost to design a mobile app?
It depends. In general, there are two major paths: to create it “in house” from scratch or to order it from an outside vendor.
If you need to create a mobile app design for startup just to stake out a spot in the Play market, the App Store, and at the same time you score a little or no expertise in mobile app development, it’s best cost wise to order it from an outside vendor well experienced in mobile app design services. Standard mobile app may cost you as little as several thousand to several tens of thousands of dollars.
On the other hand, if your IT expertise is much above zero and you already have experience in developing tech products, running IT projects on your own, you might consider to design mobile app in-house.That will require building the project team of your own. It would also make sense if the mobile app design issue tends to be a little more complex. For example, your company already has a web- or PC- version of the app, or sophisticated integrations with databases, servers and mainframe systems are required. And moreover, this option is yours if after initial implementation a mobile app will require significant levels of customer support, with high odds to frequent upgrades or new version releases.
User stories
Right after your initial idea has won the short list at the initial brainstorming, it’s time to go out the box and dream up imagining how your app is going to work in every possible way. What exactly does the user want to see in their smartphone? Don’t just dream on. Write it down! Connect the imaginary pictures of your product’s intended uses into well elaborated stories
User story is a brief description of user’s need made on behalf of the user and in the user's language
The primary objective is to overcome communication barriers between mobile app developers, designers, and users. This way developers and designers would better understand users, their needs and expectations.
How detailed the user story should be? Detailed enough for the ability to successfully evaluate it
User story format should be as follows: "I as [the user's role] want to [achieve the objective] for [the reason].
When user stories are created? At any time: whether you’ve got a new idea, during the production sprint or demo, at sprint planning or backlog trimming.
Competitor analysis
Make a list of market competitors and analyze their mobile apps by following parameters:
How popular the mobile app is. How many people downloaded it. What is download dynamics from initial release in App store/Google play week by week. Why users download it and why the number of downloads increases or decreases in time.
Browse through ratings and reviews. It will help you identify weaknesses and discover winning features for your mobile app.
Study the competitor companies success stories. Make a list of their strong points and weaknesses. Understand what problems and obstacles they had to overcome. How did they gain user recognition? Think how your company will deal with these treats and what specific opportunities does your team have to stay ahead of the competition.
Why is competitor analysis so important? You’re saving time and investors money learning from the mistakes of others. Also it helps to understand what you will have to come through to survive in the jungle of the mobile development market.
Building the team
At this point you will be able to see the amount of skill and expertise needed to make the things happen and project done. Subtracting your own skill and experience from the total will give you the idea of what team members need to be found and hired.
Analyzing your competitors will help you find out which companies you should hunt for the right employees
Almost always the architecture of your app will contain front- and back-end, logical data model, integration links to data sources, data targets and user interfaces.
Building every part of it requires separate information technology expertise. It’s a very rare case that one person could possess more than one of those.
- Interface and graphics designer creates a front-end UI/UX user interface
- IOS and Android developers know ins and outs of mobile operating systems implying your design into the OS specific requirements.
- JS or Python programmer writes the front-end code
- Java, SQL or Python programmer writes the back-end code
- Data engineer defines main algorithms, puts together a logical data model, transfers it into a physical data model
- Technical writer develops necessary manuals, descriptions of product or service, maintains project documentation
- Devops engineer moves your app development and testing build through devops stands - from dev stand through system testing, integration and functional testing stands to a final production stand
- Hardware base engineer defines a sizing needed for the app development and provides physical server, network and device capacities for the team
- Project lead keeps the team focused on operational goals and objectives, sets up sprints, presents MVPs and sprint results to the product owner, and operates the product backlog. He controls deadlines, budget and quality of mobile app design
- Product owner deals with mobile app product stakeholders, investors and owners in sharing the common vision of an app being created. He is responsible for creating marginal incremental value for every feature of the app designed. Product owner sets goals and objectives and progress evaluation metrics for a project team. The most important - PO is responsible for project funding and budgeting.
Goals
Whether you’re designing a mobile app ‘in-house’, outsourcing it to an outside vendor, or having built a joint team with insiders and outstaffers, appointing right goals brings the half of your final success.
So what are the major principles project goals must be based on?
- Specific. What exactly has to be achieved? Be explicit and precise to what distant shores your project’s ship is bound to.
- Measurable. How do we know that the goal once set has finally reached? Your project’s “journey map” should provide exact direction and distances to intermediate and final points of that venturous trip.
- Agreed. Who do we have on the approval list for every goal set? What are the specific requirements of every stakeholder we need to meet?
- Resourced. What resources should be provided to achieve this goal?
- Timed. What’s the deadline? Goals should be limited in time.
Product Vision
We need to make clear what’s the exact mission of our mobile app. What is the purpose of designing it? What positive values will it bring to the world?
To get that clear, let’s outline four most important meaning clusters: target group, market(customer) demand, the product itself, and business goals.
- Target group. What specific group of customers do we target with the mobile app? What markets and market segments should be covered? It usually helps to visualize the task on the geographical map pasting the yellow sticky notes with your ideas written on them.
- Customer demand. What are the problems exactly your mobile app will solve? What particular benefits will it provide to users? Put down your thoughts on blue sticky notes and paste it next to the yellow ones.
- The product. What are the main recognizable features and traits you want to infuse into the mobile app to be designed? Why will your app bold out the crowd and beat the market? Is it really feasible to further develop the product after initial release? Script down your suggestions to pink stickers and paste to the vision map.
- Business goals. What is the business value of the product? How the product cost structure is playing out with profit margin and sales price? How competitive are the selling prices to market? Where and when major profits would yield? How and when funds invested in new mobile app will pay back? Write the ideas and numbers out to green stickers and paste to the vision map.
Gathering together your team’s thoughts, expectations and inspirations towards a future mobile app in several important dimensions will help create a clearly shared vision of final goals to achieve success.
Customer Journey Map
The stylish and technological UI/UX design of your mobile app will work as a great marketing tool, selling the product and making friends simply by admiring how it works, looks and solves their problems. In order to get that kind of results we need to map all features and user stories together making a unified map of customer actions and behavior while using the app.
First we go down the hierarchy “user story - features - contact points” to the exact atomarial contact points where interaction of customer and service takes place. The contact point may be situated online or offline. It’s a spot or space where users meet your product or service contained in a mobile app.
Next we detect and track the paths that the user will take between the points of contact (the customer's journey). It is useful to structure the info on the contact points and paths in a table, for example
It’s helpful to chart all user journeys on a graphical map attaching the analysis tables.
Finally we need to choose the most critical paths and points of interaction and create a mobile app design improvement backlog.
Use the secret buyer tactic to get public opinion about the necessary app features and products of competitors.
Working with a design improvement backlog, we need to strive towards making users stay online with our mobile app the longest possible time, moving from one contact point to another.
Monetization
By building a customer journey map you have found the best ways to keep customers inside your app’ contact points web. Now it’s time to think how to make customers pay! The most common options include:
- paying for a subscription or premium version
- placing ads
- selling data
- paid distribution of the mobile app.
Come up with your own monetization ideas. When it’s right time to start monetization? See what you have learned from the competitor analysis. Look at how much your competitors earn. Where in the marketing cycle they start to monetize. Based on results, decide when to start monetization. Remember, timing is everything! If you realize this too late, you risk falling on hard times.
Product roadmap
Important part of planning is drawing up a roadmap for your mobile app, which will figure its ideal path from the minimum viable product (MVP) to winning the market in the App store and Google play. Make a list of checkpoints and place them according to your own priorities. Take into account the app's functionality, possible audience requests, and the upcoming events, for example updates, marketing meetups and so on. The example of technological roadmap is shown below
Minimally viable product (MVP). It’s the simplest working prototype of your new mobile app designed. This prototype may cover the entire scope of functions and features desired, a significant part of them, or just one or two critical functions. For example, MVP might be as small in function as displaying the app logo and opening the home screen. Regularly present MVP to stakeholders and potential users. Get feedback. Every sprint, work on bugs and pitfalls eliminating negative user experience.
UX design
Starting with UX
First, take all the user stories features from the backlog and make a list in descending order of priority.
Next, make a short list of key visual elements. Features and visual element descriptions should be written on stickers and placed on board.
Wireframe
Draw your app screens on board and place visual and functional features stickers on appropriate screen. Connect screens with logical and data links. Part of them will come from the customer journey map, another part - from the logical data model.
User scenarios
Take each and every path from the customer journey map and detail them down to atomarial points. Define all the ways of customer interaction with the app. Consider all the options in customer behavior to figure out how many touches it will need to complete a certain action. How many touches needed in total to complete the action. Keep in mind that each additional unnecessary action may force the user to turn to competitors. If you find that the interface is not intuitive to the user, you have to go back to the previous step and change the wireframes. There is a possibility that by simplifying one action we may complicate another. Therefore, until the final production release, your wireframe is the subject to constant reviews.
User verification
A useful way to understand how good your UX design is to test it on future users. Set up a link to a rendered wireframes and send it to prospective users.They can evaluate your interim UX solutions and give important feedback. Listen to the comments, change features, screens, visuals and functions if necessary. Fix the problem and test it again.
UI design
Style guides
You need to set up uniform requirements for colors, signs, buttons, frames, forms, visual modes, creating your own unique style. It will provide standard building materials for finishing the "interior" of a mobile app and improve user experience. Style guide manual must be as specific as possible based on known user traits.
Rendering
Now it’s time to draw out digital prototypes of your wireframes using results of UI development and style guide.
Design evaluation
Send results to prospective users the same way it has been done for UI evaluation and analyse feedback. Make necessary changes. This is a very important point in designing your mobile app. Before this point, making any changes to design are relatively cheap. Beyond this point, they become more and more expensive.
Development
Architecture
Architecture of your mobile app will contain front- and back-end, logical data model, integration links to data sources, data targets and user interfaces. It is very important that the mobile app architecture is well thought out, analyzed, validated and agreed upon with all stakeholders before development begins. Otherwise, your project may incur additional costs due to unavoidable mistakes and pitfalls during development.
Front-end development
Frontend development can be based on one of three main approaches:
- Hybrid-code is written in CSS, HTML, or Javascript in environments such as Phone Gap, Ionic and Cordova. It’s the cheapest but most risky way of development.
- Native. The app is written for a specific mobile platform. And this is a very sensitive point cost wise. The Android app code can't be used on IOS without adaptation. And vice versa. The native app works quickly and smoothly. Its interface looks as organic as possible. You have to pay for such reliability, so native development is more expensive than other options.
- Cross-platform. The app code is universal, it runs as native no matter what OS it will be run with: IOS, Android or HUAWEI. This method tends to be optimal in terms of price-quality ratio. Nevertheless it still requires to invest time into app optimization.
Back-end development
Depending on the selected development environment, required database size, server hosting and API features, hardware base engineer must figure out required sizing for development environment, capabilities for development, testing and production stands.
So what’s back-end development for mobile app design?
- Programming language. You need to choose the language and development framework. The most popular are Java, JS and Python. But you may decide to go with PHP, C#, Go-lang, and several others.
- Hosting for the server and API. Depending on the project scale and complexity, you need to choose between cloud solutions and “in-house” server operations. Some specific issues like regular data backup and update must be addressed and solved.
- Database management system. Majority of databases work on SQL or its varieties like MSSQL, PostGRESQL and such. But there are some databases working on other languages. SQL databases are the most reliable. At this step, you need to choose the database and deploy it according to the project requirements and architecture. Subsystems for data storing, processing data requests, and integrating with development and testing stands should be built.
- Development approach. It is highly recommended to apply flexible project management methodologies like Agile, Scrum, Kanban. The main point is to break down all work to be done into short (usually 2-week) sprints. Each sprint is planned in order to get an interim result, an MVP increment, which will be presented to stakeholders for review. That helps to save time and budget as well as to better understand the users expectations and opinion. Many concepts of flexible methodologies (such as user story, sprint, backlog, customer journey map) you have already met in chapters above. Agile methodology is the most common project management technique used in mobile app design.
- Planning. Every sprint is planned during the sprint planning sessions. Scrum-master and team members evaluate features (tasks) to be taken from the backlog board to the sprint board. When a pool of tasks is ready, team members evaluate tasks complexity and resource needed playing so-called scrum poker. Finally, scrum master assigns tasks to team members and the sprint begins.
- Development. Project manager distributes tasks to team members the way all the workload is evenly distributed. Developers should understand their task in detail as well as an entire app concept. Many bright ideas may arise at this point but the bird in the hand is worth two in the bush.
Quality Assurance
QA procedure must be set up at all stages of development. Depending on your team size, QA issues will be run by the QA department, QA manager or just by project manager themselve.
Testing
Devops defines several types of tests your app builds must go through before going on production. NB: your app must be tested by a professional testing team (other than the people of your development team)!
- System testing. Determines how stable your build runs on a specific operating system.
- Functional testing. Development results must match the functional requirements stated in all user stories’ taken into development. Your QA people must develop testing scenarios and run them on an IFT stand using special software.
- Integral testing. All the integrations between front- and back- ends, external data sources and API must be evaluated and tested
- Load testing. The ability of your build to work under stated load (he amount of data, the number of data requests, execution time of the query, the maximum load on applications and data operation)
- Regression testing. Checks the code for errors that were already fixed previously or occurred again as a result of these fixes.
- Production testing. This type of testing is the final step for an app on the way to market release. All previous types of tests must be completed successfully. Often, to make sure that the app is ready for publication, the testing team is expanded to include volunteer users who want to participate in beta testing.
Sprint review and analysis
At the end of each sprint discuss its results with stakeholders. Draw conclusions from the difficulties and obstacles in your way. Mark and remember successful approaches. And don’t forget to always study on solving real arising problems. In the end, everything that won’t kill you - makes you stronger.
Going public
Before going to App Store and Google play, distribute the app to closed focus groups of users. Сollect and analyze reviews. Discuss controvercial points. It's better to get as many detailed bug reports as possible than to get none. Fix them! This way you find out about the problem in advance (much less disgruntled users comments after the public release).
App stores
First of all, make sure your app meets all store's requirements. Fill out endless forms for each of them. Prepare necessary descriptions, marketing materials, and user manuals. After all tremendous effort, the store may refuse or postpone publication of app for whatever reasons. But don’t give up! No rest for the wicked! And congratulations, your mobile app is finally published!
Wrapping up
Whenever you’re building and trimming the app backlog, moving build through devops gauges, presenting intermediate and final results, releasing ready products to market - it’s all up to the game of impressing users with hype, style and graphics of front-end manifesting superior tech levels and creating value of convenience. Your back-end might be of cutting edge Nobel prize capability but you will never prove that to the market without designing a mobile app front-end of stunning superior value. Indeed, superior app design may work as an important marketing tool creating loyal customers, friends and brand advocates all around the world.