Mobile App Design - UX Practices - Useful Tools
Posted: Tue Jan 21, 2025 7:11 am
Fortunately, we can control the vast majority of the latest devices from our smartphones, so we don't have to learn much! In today's post, we will look at the process of designing mobile applications from the User Experience perspective , we will learn about many useful tools that will make the design process easier for us, and we will learn about several interesting and effective practices . If you are not sure what User Experience (UX) is, I invite you to the previous post. Let's get started!
Phone apps
What distinguishes dedicated mobile applications from mobile versions of websites?
At first glance, they look quite similar, both have very often expanded menus and the content is adapted to small displays, but their main difference is the functional possibilities and optimization , which is responsible for the smooth loading of views.
For example, when entering our bank's website on a smartphone, we do it just like on a computer, i.e. we enter our ID, password and possibly two-step authentication, i.e. we enter the code we have just received in an SMS in the browser. On the other hand, when launching our bank's application, we can use, for example, a fingerprint that is saved in the device or use the facial recognition system to log in . When making a transfer via a browser, we will also probably have to wait for an SMS from the bank and enter the code there in order to confirm the transfer. Using the application, we will again use faster methods of confirming our identity , and even if we do not use the facial recognition system or fingerprint reader, most applications use access to notifications, so that when we receive an SMS with a code from the bank - the application itself "extracts" it from the message and enters it in the appropriate fields, so we do not have to minimize the application, enter SMS messages, remember it and enter it in the application.
Thus, mobile applications can use many more functions than websites opened in a browser. Depending on the model of the smartphone used, its capabilities and operating system, the functions that we can design when creating an application differ. Depending on the system used by our smartphone, the standards that must be followed for our application to be compatible with the device and to be released on the market at all also differ. For example, applications designed for iOS devices provide a back button in the upper left corner of the screen, while Android-based devices most often use the lower navigation bar (home, back and multi-tasking button) /
UX and UI of the phone app
What is the mobile app design process like?
Step 1 - Identify the problem
Let's start with the fact that for an application to be truly useful and for people to be happy to use it, it must solve a problem . Let's not create programs if they are not needed. This rule sounds trivial, but there is no shortage of applications in the Google Play Store or AppStore that are either completely useless or are a 1:1 copy of an existing application. So we first need to find the problem and define it well. If a problem does not immediately come to mind, it does not mean that it does not exist! We can start by putting forward a thesis, for example: many people have a problem, but they do not have a place to leave their dog during a vacation or business trip. Do many people actually struggle with such a problem? We do not know yet, but we will find out by conducting surveys among pet owners. Let's assume that we conducted such surveys in various groups and forums and it turned out that a large percentage of respondents declared that they had had such a problem at least once. We have the green light!
Step 2 - Detailed research
We already know what the problem is, we know that we want to solve it by implementing an appropriate mobile application, so we know what functionality we want to introduce in our project, but we do not know the thoughts and expectations of our recipients. At this point, it is time to thoroughly analyze what our future recipient thinks about our idea . It is worth remembering to also ask for an e-mail address or other contact information for the respondent at the stage of conducting surveys and ask them if they would like to contribute to the creation of this application and whether they use a smartphone and mobile applications on a daily basis. We also uruguay telemarketing data need to define and group the people our application will concern. In our example of an application for dog owners, we need to distinguish two groups of recipients: dog owners and potential future guardians. At this stage, we need to contact the most diverse group of our respondents and conduct an interview with them, the purpose of which is to determine their expectations towards such an application, whether they have had contact with a similar application before, if so, what they liked about it and what put them off… We simply need to obtain as much information and tips as possible about our future application, we need to get to know our recipients and find out what functionalities would be most useful for them.
Step 3 - Strategy
This step is less related to design, but it is extremely important and should not be skipped . At this stage, we already know what expectations our respondents have, so we need to define our business model, it cannot be hidden that implementing and updating a mobile application is not free, so we need to think about whether we want our project to include paid elements, from what sources we will draw benefits, we should think about and create a Business Model Canvas and Value Proposition Canvas.
Step 4 - Customer Journey Map and Lo-Fi Mockups (low fidelity)
Next, we need to write down all the functionalities of our application that we want to implement and create a kind of application map that will present the entire path from the moment the application is first launched to the moment the user books accommodation for their pet (and a scenario for the second group - potential carers). Once we have created such a map, it is time for the more graphic aspects of application design - low-detail mockups , literally the first sketches of our application, which will allow us to visualize our project and check its effectiveness without a lot of time and work.
Step 5 - Prototyped
If we have already developed sketches that satisfy us, we can start the final design . At this stage, we must pay attention to all the visual details, because we are already designing the final look of our application. I will write about the software that will allow us to prototype later in the post.
Step 6 - Testing and Implementing Fixes
Once we have a finished prototype of our mobile application, let's give it to a few third parties to test . It's worth creating questions about the prototype for such tests, so that we can better understand the emotions that accompany our testers when using the application. It may be beneficial for us to record such tests, because we can't see everything live. After the tests are finished, let's analyze them, draw conclusions from them and implement the corrections that the testers suggested to us.
Step 7 - Coding the application and implementing it
Our application is theoretically ready to be “released” - we have a refined design, we have a plan for its functioning, all that remains is to program it , so that from a prototype it becomes a full-fledged application, functioning on the market. We wrote more about this process here.
Step 8 - Implementing updates and patches
Of course, we shouldn't rest on our laurels, because we will most likely continue to receive feedback from users that we shouldn't ignore .
UX of phone applications - programs
What tools are worth using when designing a mobile app?
Google Forms - contact with our potential user is very important, so it would be best to conduct surveys in person, on paper, but this is not always possible, especially in the era of the pandemic. That is why, in my opinion, the best free software for conducting online surveys is Google Forms, which many of you have probably seen at least once.
Milanote - This is a program that will help us collect all documents, surveys, write out a business model, create a Customer Journey Map in one place. In short, it is a "virtual board" on which we will be able to write everything down. This program is free with limitations. In the paid version, it costs 10 USD / month.
Phone apps
What distinguishes dedicated mobile applications from mobile versions of websites?
At first glance, they look quite similar, both have very often expanded menus and the content is adapted to small displays, but their main difference is the functional possibilities and optimization , which is responsible for the smooth loading of views.
For example, when entering our bank's website on a smartphone, we do it just like on a computer, i.e. we enter our ID, password and possibly two-step authentication, i.e. we enter the code we have just received in an SMS in the browser. On the other hand, when launching our bank's application, we can use, for example, a fingerprint that is saved in the device or use the facial recognition system to log in . When making a transfer via a browser, we will also probably have to wait for an SMS from the bank and enter the code there in order to confirm the transfer. Using the application, we will again use faster methods of confirming our identity , and even if we do not use the facial recognition system or fingerprint reader, most applications use access to notifications, so that when we receive an SMS with a code from the bank - the application itself "extracts" it from the message and enters it in the appropriate fields, so we do not have to minimize the application, enter SMS messages, remember it and enter it in the application.
Thus, mobile applications can use many more functions than websites opened in a browser. Depending on the model of the smartphone used, its capabilities and operating system, the functions that we can design when creating an application differ. Depending on the system used by our smartphone, the standards that must be followed for our application to be compatible with the device and to be released on the market at all also differ. For example, applications designed for iOS devices provide a back button in the upper left corner of the screen, while Android-based devices most often use the lower navigation bar (home, back and multi-tasking button) /
UX and UI of the phone app
What is the mobile app design process like?
Step 1 - Identify the problem
Let's start with the fact that for an application to be truly useful and for people to be happy to use it, it must solve a problem . Let's not create programs if they are not needed. This rule sounds trivial, but there is no shortage of applications in the Google Play Store or AppStore that are either completely useless or are a 1:1 copy of an existing application. So we first need to find the problem and define it well. If a problem does not immediately come to mind, it does not mean that it does not exist! We can start by putting forward a thesis, for example: many people have a problem, but they do not have a place to leave their dog during a vacation or business trip. Do many people actually struggle with such a problem? We do not know yet, but we will find out by conducting surveys among pet owners. Let's assume that we conducted such surveys in various groups and forums and it turned out that a large percentage of respondents declared that they had had such a problem at least once. We have the green light!
Step 2 - Detailed research
We already know what the problem is, we know that we want to solve it by implementing an appropriate mobile application, so we know what functionality we want to introduce in our project, but we do not know the thoughts and expectations of our recipients. At this point, it is time to thoroughly analyze what our future recipient thinks about our idea . It is worth remembering to also ask for an e-mail address or other contact information for the respondent at the stage of conducting surveys and ask them if they would like to contribute to the creation of this application and whether they use a smartphone and mobile applications on a daily basis. We also uruguay telemarketing data need to define and group the people our application will concern. In our example of an application for dog owners, we need to distinguish two groups of recipients: dog owners and potential future guardians. At this stage, we need to contact the most diverse group of our respondents and conduct an interview with them, the purpose of which is to determine their expectations towards such an application, whether they have had contact with a similar application before, if so, what they liked about it and what put them off… We simply need to obtain as much information and tips as possible about our future application, we need to get to know our recipients and find out what functionalities would be most useful for them.
Step 3 - Strategy
This step is less related to design, but it is extremely important and should not be skipped . At this stage, we already know what expectations our respondents have, so we need to define our business model, it cannot be hidden that implementing and updating a mobile application is not free, so we need to think about whether we want our project to include paid elements, from what sources we will draw benefits, we should think about and create a Business Model Canvas and Value Proposition Canvas.
Step 4 - Customer Journey Map and Lo-Fi Mockups (low fidelity)
Next, we need to write down all the functionalities of our application that we want to implement and create a kind of application map that will present the entire path from the moment the application is first launched to the moment the user books accommodation for their pet (and a scenario for the second group - potential carers). Once we have created such a map, it is time for the more graphic aspects of application design - low-detail mockups , literally the first sketches of our application, which will allow us to visualize our project and check its effectiveness without a lot of time and work.
Step 5 - Prototyped
If we have already developed sketches that satisfy us, we can start the final design . At this stage, we must pay attention to all the visual details, because we are already designing the final look of our application. I will write about the software that will allow us to prototype later in the post.
Step 6 - Testing and Implementing Fixes
Once we have a finished prototype of our mobile application, let's give it to a few third parties to test . It's worth creating questions about the prototype for such tests, so that we can better understand the emotions that accompany our testers when using the application. It may be beneficial for us to record such tests, because we can't see everything live. After the tests are finished, let's analyze them, draw conclusions from them and implement the corrections that the testers suggested to us.
Step 7 - Coding the application and implementing it
Our application is theoretically ready to be “released” - we have a refined design, we have a plan for its functioning, all that remains is to program it , so that from a prototype it becomes a full-fledged application, functioning on the market. We wrote more about this process here.
Step 8 - Implementing updates and patches
Of course, we shouldn't rest on our laurels, because we will most likely continue to receive feedback from users that we shouldn't ignore .
UX of phone applications - programs
What tools are worth using when designing a mobile app?
Google Forms - contact with our potential user is very important, so it would be best to conduct surveys in person, on paper, but this is not always possible, especially in the era of the pandemic. That is why, in my opinion, the best free software for conducting online surveys is Google Forms, which many of you have probably seen at least once.
Milanote - This is a program that will help us collect all documents, surveys, write out a business model, create a Customer Journey Map in one place. In short, it is a "virtual board" on which we will be able to write everything down. This program is free with limitations. In the paid version, it costs 10 USD / month.