When it comes to designing a mobile app we always need to think about the user and the environment in which the app will be used. That is our first premise when it comes to any type of app. We are here to ensure the pleasure of use, simplicity, esthetics, and clear communication between humans and machines.

How to start?

We always start with 6 essential questions: Who was involved? What happened? When did it happen? Where did it happen? Why did it happen? How did it happen?

Answers to those questions will form a persona and context of use so we can imagine the user’s journey and “feel” his or her pains. We must imitate real life because basically, we are digitalizing it. But plain imitation is not enough, it is a solid foundation to build upon it, and to make it better, the experience of interaction must be better than real life.

We need to recognize necessary steps which are crucial to the execution of intended action and keep things as simple as possible because of our cognitive load.

So, to bring it from fiction to reality, first wireframes were done based on user research, contextual use, an environment in which interaction is made, and user needs. In the process of drawing wireframes, we are in close communication with a lead developer. Our lead developer is acting as an advisor and he is making sure things don’t complicate for developers in a design process, so once the wireframe is presented to our partner, we are all good with it. 

Dealing with a client

Our partner on a project was Emerald Strategy Group with the BusiCard app, and for them, we had to design a mobile app for Android and iOS devices. The purpose of the app is to digitalize your business card and share it among the other BusiCard users. 

Emerald Strategy Group had already set the identity of the app so there was no need for us to come up with a story and meaning of the brand. They had gone with a blue color, and since we are in a business realm, we haven’t diagnosed any problem regarding the color or philosophy.

Our idea from the start was that UI colors should be customizable and they should vary based on the dominant color of the card, because in the beginning if you already have a physical card, we are giving you an opportunity to take a photo of your physical business card and place it in a standardized box on screen so it fits perfectly. But the idea with dynamic UI colors was dropped because of the budget restrictions so we had to stick with the primary brand color. 

Choosing the right style

Moving on with the project, once the wireframe was approved, it was time to give it some life and esthetic. Our practice is to pull the main screen and some additional 4-5 screens which are most repetitive or of most importance and we try different UI styles until we hit the right one. The top 3 styles are presented to the partners and they are choosing based on our suggestions.

Once we have our consensus about the UI direction, it is time for action! We are manufacturing a components library for developers with all the measures for the colors, padding, and typography. We are also defining buttons and their states, top bar, bottom bar, list views, section titles, icon principles, inputs, and errors. Based on the wireframes we have done, we can predict all components that are needed so the design is completed. Sort to speak, we are going screen by screen through wireframes and applying components onto them so the bone structure can receive its flesh. 

Production of a product

First, we start with Login/Sign in and we are following a natural path of a user who is freshly starting to use the app and filling the screen with elements and components which are defined. The process is repeated throughout the whole wireframe until we reach the end of the line. 

In the process of applying UI style, we are creating a Customer User Journeys. They are made for everybody and they represent the final product with defined states and potential errors. By that, we are communicating to the partners and developers with the same language, and they must have a clear understanding of it otherwise CUJs are poorly prepared. For example, CUJ for sending your business card should hold: Call to action, defined all interactions/hot spots which are possible on a particular screen, errors, confirmations, and well-defined loop. We are covering the path from the begging of the intended action to the end of it, and we must cover all cases. For the BusiCard app, we have done CUJs for Login/Sign in, creating a profile/card, sending your card (using Bluetooth/AirDrop, SMS, QR code, or contact/fellow user), receiving a card, subscription, and so on.

Once all is defined our job is not yet done. There are still assets waiting to be extracted. We are exporting and preparing all for Android and iOS accordingly and our job is to make sure they are all in similar measures. We strive to keep their size consistent, for example, 24px because by that we are ensuring there will be order in the final production of a product. Naturally, not all icons are the same size because of the importance or some other factor, but we intend to group them by size, and by applying the rule, we are making our and developer’s lives easier.

In conclusion, I would like to point out that the key element to a successful product is good communication. Without it, we are stuck in our bubble of thoughts, and sometimes it is hard to move because there are a lot of questions and we feel stuck in a moment. Cut it! Talk about the problem you are having with your team or partners because it’s amazing how caught up we can get in our thoughts when the answer is simple but from another perspective. Also if you are having a good idea or a better solution to a problem, don’t hesitate to speak up, it is your responsibility as a designer, so start being a design. If you are experiencing a problem with your feedback, try it again but from a different angle 😉