In the previous article, we saw that the first step in correctly designing a UX for business type applications lies in knowing your user, and that to do this you must put together the User Profile, User Stories, and Business Model documents.
At this point, all that’s left is to address the second and final step: creating the application prototype, the mockup. People with a background in designing traditional business applications can be tempted to reuse that they already know: menus with many levels, grids with dozens of columns, interminable views.
To change this mindset, the easiest step is to accept the challenges of mobile-first design. If we are able to get our app into a smartphone, then it will certainly be usable on a tablet or desktop as well.
Often when I suggest this approach, the answer is: “Impossible! Our system is too complicated to work on a smartphone.” But if that were truly the case, which users will be able to use it without a complete training course?
I have found that often the real reason for this impossibility lies in an insufficient understanding of the process and the user who must execute it. When these factors are present, you only need a set of standard templates to apply (but we’ll get to that).
To get to the mockup, the most important step is to create a wireframe model. In practice, this means designing the various application views as rectangles containing just the name and a brief description of the content. Each view must then be linked to the others using arrows, in order to clearly define the navigation path.
With this model you can already perform an initial test: get the User Stories document and check the behavior of the application using the wireframe to see if the user experience is acceptable. For example, if the user is at a bus stop, we can’t ask them to navigate through ten views to complete a process.
Once the wireframe is satisfactory, it’s time to move on to the actual mockup. To do this for business type apps, we can use relatively well-established models. For example, Ionic Framework contains components that are already ready for tabbed views, lists, and forms.
This versatility is the reason that we included it in Instant Developer, to make it even more intuitive to use, even just for simple mockups. Would you like to see a list of standard views? Open this page and click around.
My last, absolutely vital, piece of advice is to find someone who has already done what you’re trying to do. There are many applications you can study, and this will make it easier to understand what works and what doesn’t, simply by trying it for yourself.
And after you’ve made your mockup, if you still have questions, I’m here to give more specific advice. Write to me!
